add contactForm

static/js/appDialog.js

@@ -38,7 +38,14 @@ oml.ui.appDialog = function() {
                     $logo = Ox.Element(),
                     $text = Ox.Element()
                         .addClass('OxTextPage OxSelectable'),
+                    text = {
+                        'about': 'Open Media Library is a local web application to manage and sync your digital media collections.',
+                        'faq': 'not yet',
+                        'terms': 'The lazy brown fox jumped over the lazy black fox, but other than that not really much happened here since you last checked.',
+                        'development': 'The latest code is in our <a href="https://git.0x2620.org/openmedialibrary.git">git repository</a>.<br><br>For everything else, there\'s IRC, and our development mailing list. Your feedback is welcome.<br><br>IRC: #openmedialibrary on freenode<br>Mailing List: <a href=mailto:openmedialibrary-dev@openmedialibrary.com">openmedialibrary-dev@openmedialibrary.com</a>',
+                    }[id],
                     title = Ox.getObjectById(tabs, id).title;
+
                 $('<img>')
                     .attr({
                         src: '/static/png/oml.png'
@@ -51,8 +58,11 @@ oml.ui.appDialog = function() {
                         height: '192px'
                     })
                     .appendTo($logo);
-                $content.html('<h1><b>' + title + '</b></h1>'
+                if (id == 'contact') {
-                    + '<p>The lazy brown fox jumped over the lazy black fox, but other than that not really much happened here since you last checked.');
+                    $content.append(oml.ui.contactForm());
+                } else {
+                    $content.html('<h1><b>' + title + '</b></h1><p>' + text + '</p>');
+                }
                 $('<div>')
                     .css({
                         position: 'absolute',

static/js/contactForm.js

@@ -0,0 +1,141 @@
+'use strict';
+
+oml.ui.contactForm = function() {
+
+    var that = Ox.Element(),
+
+        width = getWidth(),
+
+        $form = Ox.Form({
+            items: [
+                Ox.Input({
+                    id: 'name',
+                    label: Ox._('Your Name'),
+                    labelWidth: 128,
+                    validate: function(value, callback) {
+                        callback({valid: true});
+                    },
+                    value: oml.user.preferences.username,
+                    width: width
+                }),
+                Ox.Input({
+                    autovalidate: oml.autovalidateEmail,
+                    id: 'email',
+                    label: Ox._('Your E-Mail Address'),
+                    labelWidth: 128,
+                    validate: function(value, callback) {
+                        callback({
+                            message: Ox._('Please enter '
+                                + (value.length == 0 ? 'your' : 'a valid')
+                                + ' e-mail address'),
+                            valid: Ox.isValidEmail(value)
+                        });
+                    },
+                    value: '',
+                    width: width
+                }),
+                Ox.Input({
+                    id: 'subject',
+                    label: Ox._('Subject'),
+                    labelWidth: 128,
+                    validate: function(value, callback) {
+                        callback({valid: true});
+                    },
+                    value: '',
+                    width: width
+                }),
+                Ox.Input({
+                    autovalidate: function(value, blur, callback) {
+                        callback({valid: value.length > 0, value: value});
+                    },
+                    height: 224,
+                    id: 'message',
+                    placeholder: 'Message',
+                    type: 'textarea',
+                    validate: function(value, callback) {
+                        callback({
+                            message: Ox._('Please enter a message'),
+                            valid: value.length > 0
+                        });
+                    },
+                    value: '',
+                    width: width
+                })
+            ]
+        })
+        .css({width: width + 'px'})
+        .bindEvent({
+            validate: function(data) {
+                $sendButton.options({disabled: !data.valid});
+            }
+        })
+        .appendTo(that),
+
+
+    $sendButton = Ox.Button({
+            disabled: true,
+            title: Ox._('Send Message'),
+            width: 128
+        })
+        .css({float: 'left', margin: '8px 0 8px ' + (oml.user.level == 'guest' ? width - 128 : 4) + 'px'})
+        .bindEvent({
+            click: function() {
+                var data = $form.values();
+                $sendButton.options({
+                    disabled: true,
+                    title: Ox._('Sending Message...')
+                });
+                oml.api.contact({
+                    name: data.name,
+                    email: data.email,
+                    subject: data.subject,
+                    message: data.message,
+                }, function(result) {
+                    var $dialog = oml.ui.iconDialog({
+                            buttons: [
+                                Ox.Button({
+                                    id: 'close',
+                                    title: Ox._('Close')
+                                }).bindEvent({
+                                    click: function() {
+                                        $dialog.close();
+                                        $form.values({subject: '', message: ''});
+                                    }
+                                })
+                            ],
+                            content: Ox._('Thanks for your message!<br/><br/>We will get back to you as soon as possible.'),
+                            keys: {enter: 'close', escape: 'close'},
+                            title: Ox._('Message Sent')
+                        })
+                        .open();
+                    $sendButton.options({
+                        disabled: false,
+                        title: Ox._('Send Message')
+                    });
+                });
+            }
+        })
+        .appendTo(that);
+
+
+    function getWidth() {
+        return Math.min((
+            oml.$ui.siteDialog
+            ? parseInt(oml.$ui.siteDialog.css('width'))
+            : Math.round(window.innerWidth * 0.75)
+        ) - 304 - Ox.UI.SCROLLBAR_SIZE, 512);
+    }
+
+    that.resizeElement = function() {
+        var width = getWidth();
+        $form.css({width: width + 'px'});
+        $form.options('items').forEach(function($input, i) {
+            i < 4 && $input.options({width: width});
+        });
+        $sendButton.css({marginLeft: width - 128 + 'px'});
+        $text.css({width: width + 'px'});
+    };
+
+    return that;
+
+};

static/js/utils.js

@@ -123,6 +123,13 @@ oml.clearFilters = function() {
     oml.UI.set({find: find});
 };
 
+oml.autovalidateEmail = function(value, blur, callback) {
+    value = value.toLowerCase().split('').map(function(v, i) {
+        return /[0-9a-z\.\+\-_@]/.test(v) ? v : null;
+    }).join('').slice(0, 255);
+    callback({valid: Ox.isValidEmail(value), value: value});
+};
+
 oml.clickLink = function(e) {
     if (
         e.target.hostname == document.location.hostname

static/json/js.json

@@ -10,6 +10,7 @@
     "closedScreen.js",
     "columnView.js",
     "confirmDialog.js",
+    "contactForm.js",
     "coverDialog.js",
     "deleteItemsDialog.js",
     "deleteListDialog.js",