openmedialibrary/static/js/contactForm.js

'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,
                    style: 'squared',
                    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,
                    style: 'squared',
                    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,
                    style: 'squared',
                    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',
                    style: 'squared',
                    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,
            style: 'squared',
            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 title = Ox._('Message Sent'),
                        content = Ox._('Thanks for your message!<br/><br/>We will get back to you as soon as possible.');
                    if (result.error) {
                        title = Ox._('Error');
                        content = Ox._('Sorry. There was an error sending your message. Please try again later.');
                    }
                    var $dialog = oml.ui.iconDialog({
                            buttons: [
                                Ox.Button({
                                    id: 'close',
                                    title: Ox._('Close')
                                }).bindEvent({
                                    click: function() {
                                        $dialog.close();
                                        if (!result.error) {
                                            $form.values({subject: '', message: ''});
                                        }
                                    }
                                })
                            ],
                            content: content,
                            keys: {enter: 'close', escape: 'close'},
                            title: title
                        })
                        .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;

};