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: 'email',
+                    id: 'name',
-                        label: 'E-Mail',
+                    label: 'Your Name',
-                        labelWidth: 60,
+                    labelWidth: 128,
-                        value: pandora.user.email,
+                    value: pandora.user.username,
-                        width: 240
+                    width: width
                 }),
                 Ox.Input({
-                        id: 'subject',
+                    id: 'email',
-                        label: 'Subject',
+                    label: 'Your E-Mail Address',
-                        labelWidth: 60,
+                    labelWidth: 128,
-                        value: '',
+                    value: pandora.user.email,
-                        width: 240
+                    width: width
                 }),
                 Ox.Input({
-                    height: 120,
+                    id: 'subject',
+                    label: 'Subject',
+                    labelWidth: 128,
+                    value: '',
+                    width: width
+                }),
+                Ox.Input({
+                    height: 256,
                     id: 'message',
                     placeholder: 'Message',
                     type: 'textarea',
                     value: '',
-                    width: 240
+                    width: width
-                })
+                }),
-                .css({height: '240px'})
+                $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),
+
+    $sendButton = Ox.Button({
+            title: 'Send Message',
+            width: 128
+        })
+        .css({position: 'absolute', left: width - 112 + 'px', top: '352px'})
+        .bindEvent({
+            click: function() {
+                $form.submit();
+            }
+        })
         .appendTo(that);
 
-    Ox.Button({
+    $text = $('<div>')
-        title: 'Send'
+        .css({float: 'left', width: width + 'px'})
-    })
+        .html(
-    .bindEvent({
+            'Alternatively, you can contact us via <a href="mailto:'
-        click: function() {
+            + pandora.site.site.email.contact + '">'
-            $form.submit();
+            + pandora.site.site.email.contact + '</a>'
-        }
+        );
-    }).appendTo(that);
+ 
+    $('<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],
@@ -68,26 +67,33 @@ pandora.ui.siteDialog = function(section) {
             }
         });
     var $dialog = Ox.Dialog({
-        buttons: [
+            buttons: [
-            Ox.Button({
+                Ox.Button({
-                id: 'close',
+                    id: 'close',
-                title: 'Close'
+                    title: 'Close'
-            }).bindEvent({
+                }).bindEvent({
-                click: function() {
+                    click: function() {
-                    $dialog.close();
+                        $dialog.close();
-                    pandora.URL.update();
+                        pandora.URL.update();
+                    }
+                })
+            ],
+            //closeButton: true,
+            content: $tabPanel,
+            height: Math.round((window.innerHeight - 24) * 0.75),
+            //maximizeButton: true,
+            minHeight: 256,
+            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();
                 }
-            })
+            }
-        ],
+        });
-        //closeButton: true,
-        content: $tabPanel,
-        height: Math.round((window.innerHeight - 24) * 0.75),
-        //maximizeButton: true,
-        minHeight: 256,
-        minWidth: 640,
-        title: 'About',
-        width: Math.round(window.innerWidth * 0.75),
-    });
 
     return $dialog;