update contact form

static/js/pandora/contactForm.js

@@ -1,57 +1,123 @@
 // vim: et:ts=4:sw=4:sts=4:ft=javascript
+
 pandora.ui.contactForm = function() {
+
     var that = Ox.Element(),
+
+        width = getWidth(),
+
+        $receiptCheckbox = Ox.Checkbox({
+                checked: true,
+                id: 'receipt',
+                title: 'Send me a receipt',
+                width: width - 136
+            })
+            .bindEvent({
+                change: function(data) {
+                    $receiptCheckbox.options({
+                        title: (data.checked ? 'Send' : 'Don\'t send')
+                            + ' me a receipt'
+                    });
+                }
+            }),
+
         $form = Ox.Form({
             items: [
+                Ox.Input({
+                    id: 'name',
+                    label: 'Your Name',
+                    labelWidth: 128,
+                    value: pandora.user.username,
+                    width: width
+                }),
                 Ox.Input({
                     id: 'email',
-                        label: 'E-Mail',
-                        labelWidth: 60,
+                    label: 'Your E-Mail Address',
+                    labelWidth: 128,
                     value: pandora.user.email,
-                        width: 240
+                    width: width
                 }),
                 Ox.Input({
                     id: 'subject',
                     label: 'Subject',
-                        labelWidth: 60,
+                    labelWidth: 128,
                     value: '',
-                        width: 240
+                    width: width
                 }),
                 Ox.Input({
-                    height: 120,
+                    height: 256,
                     id: 'message',
                     placeholder: 'Message',
                     type: 'textarea',
                     value: '',
-                    width: 240
-                })
-                .css({height: '240px'})
+                    width: width
+                }),
+                $receiptCheckbox
             ],
             submit: function(data, callback) {
                 pandora.api.contact({
+                    name: data.name,
                     email: data.email,
                     subject: data.subject,
-                    message: data.message
+                    message: data.message,
+                    receipt: data.receipt
                 }, function(result) {
                     callback && callback(result);
                 });
             },
             width: 240
         })
-        .css({margin: '8px'})
         .bindEvent({
             change: function(event) {
             }
         })
-        .appendTo(that);
+        .appendTo(that),
 
-    Ox.Button({
-        title: 'Send'
+    $sendButton = Ox.Button({
+            title: 'Send Message',
+            width: 128
         })
+        .css({position: 'absolute', left: width - 112 + 'px', top: '352px'})
         .bindEvent({
             click: function() {
                 $form.submit();
             }
-    }).appendTo(that);
+        })
+        .appendTo(that);
+
+    $text = $('<div>')
+        .css({float: 'left', width: width + 'px'})
+        .html(
+            'Alternatively, you can contact us via <a href="mailto:'
+            + pandora.site.site.email.contact + '">'
+            + pandora.site.site.email.contact + '</a>'
+        );
+ 
+    $('<div>')
+        .css({marginTop: '8px'})
+        .append($text)
+        .append(
+        )
+        .appendTo(that);
+
+    function getWidth() {
+        return Math.min((
+            pandora.$ui.siteDialog
+            ? parseInt(pandora.$ui.siteDialog.css('width'))
+            : Math.round(window.innerWidth * 0.75)
+        ) - 304, 512);
+    }
+
+    that.resize = function() {
+        var width = getWidth();
+        $form.options('items').forEach(function($input, i) {
+            i < 4 && $input.options({width: width});
+        });
+        $receiptCheckbox.options({width: width - 136})
+        $sendButton.css({left: width - 112 + 'px'})
+        $text.css({width: width + 'px'});
+    }
+
     return that;
+
 };

static/js/pandora/siteDialog.js

@@ -10,10 +10,9 @@ pandora.ui.siteDialog = function(section) {
             content: function(id) {
                 var $content = Ox.Element().css({padding: '16px', overflowY: 'auto'});
                 if (id == 'contact') {
-                    $content.append(pandora.ui.contactForm());
+                    $content.append(pandora.$ui.contactForm = pandora.ui.contactForm());
                 } else {
                     pandora.api.getPage({name: id}, function(result) {
-                        Ox.print('DATA::', result.data)
                         Ox.Editable({
                                 clickLink: pandora.clickLink,
                                 editable: pandora.site.capabilities.canEditSitePages[pandora.user.level],
@@ -84,9 +83,16 @@ pandora.ui.siteDialog = function(section) {
             height: Math.round((window.innerHeight - 24) * 0.75),
             //maximizeButton: true,
             minHeight: 256,
-        minWidth: 640,
+            minWidth: 688, // 16 + 256 + 16 + 384 + 16
             title: 'About',
             width: Math.round(window.innerWidth * 0.75),
+        })
+        .bindEvent({
+            resize: function(data) {
+                if ($tabPanel.selected() == 'contact') {
+                    pandora.$ui.contactForm.resize();
+                }
+            }
         });
 
     return $dialog;