From 11824ea7e32fc404c65b9113c3fac8209a328200 Mon Sep 17 00:00:00 2001 From: rolux Date: Wed, 2 Nov 2011 17:26:08 +0000 Subject: [PATCH] make contact form work --- static/js/pandora/account.js | 4 +- static/js/pandora/contactForm.js | 139 +++++++++++++++++++++---------- 2 files changed, 99 insertions(+), 44 deletions(-) diff --git a/static/js/pandora/account.js b/static/js/pandora/account.js index 2c14584e1..5181397ce 100644 --- a/static/js/pandora/account.js +++ b/static/js/pandora/account.js @@ -205,7 +205,7 @@ pandora.ui.accountForm = function(action, value) { validate: function(value, callback) { callback({ message: 'Missing code', - valid: !!value.length + valid: value.length > 0 }); }, width: 320 @@ -216,7 +216,7 @@ pandora.ui.accountForm = function(action, value) { id: 'email', label: 'E-Mail Address', labelWidth: 120, - type: 'email', + type: 'email', // fixme: ?? validate: pandora.validateUser('email'), width: 320 }); diff --git a/static/js/pandora/contactForm.js b/static/js/pandora/contactForm.js index 49e95e51c..3f08790d7 100644 --- a/static/js/pandora/contactForm.js +++ b/static/js/pandora/contactForm.js @@ -6,34 +6,31 @@ pandora.ui.contactForm = function() { 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, + validate: function(value, callback) { + callback({valid: true}); + }, value: pandora.user.username, width: width }), Ox.Input({ + autovalidate: pandora.autovalidateEmail, id: 'email', label: 'Your E-Mail Address', labelWidth: 128, + validate: function(value, callback) { + callback({ + message: 'Please enter ' + + (value.length == 0 ? 'your' : 'a valid') + + ' e-mail address', + valid: Ox.isValidEmail(value) + }); + }, value: pandora.user.email, width: width }), @@ -41,64 +38,118 @@ pandora.ui.contactForm = function() { id: 'subject', label: 'Subject', labelWidth: 128, + validate: function(value, callback) { + callback({valid: true}); + }, value: '', width: width }), Ox.Input({ + autovalidate: /.+/, height: 256, id: 'message', placeholder: 'Message', type: 'textarea', + validate: function(value, callback) { + callback({ + message: 'Please enter a message', + valid: value.length > 0 + }); + }, value: '', width: width - }), - $receiptCheckbox + }) ], - submit: function(data, callback) { - pandora.api.contact({ - name: data.name, - email: data.email, - subject: data.subject, - message: data.message, - receipt: data.receipt - }, function(result) { - callback && callback(result); - }); - }, - width: 240 }) + .css({width: width + 'px'}) .bindEvent({ - change: function(event) { + validate: function(data) { + $sendButton.options({ + disabled: !data.valid + }); + } + }) + .appendTo(that), + + $receiptCheckbox = Ox.Checkbox({ + checked: pandora.user.level != 'guest', + id: 'receipt', + title: 'Send a receipt to ' + pandora.user.email, + width: width - 136 + }) + .css({float: 'left', margin: '8px 4px 8px 0'}) + .bindEvent({ + change: function(data) { + $receiptCheckbox.options({ + title: data.checked + ? 'Send a receipt to ' + pandora.user.email + : 'Don\'t send me a receipt' + }); } }) .appendTo(that), $sendButton = Ox.Button({ + disabled: true, title: 'Send Message', width: 128 }) - .css({position: 'absolute', left: width - 112 + 'px', top: '352px'}) + .css({float: 'left', margin: '8px 0 8px ' + (pandora.user.level == 'guest' ? width - 128 : 4) + 'px'}) .bindEvent({ click: function() { - $form.submit(); + var data = $form.values(); + pandora.api.contact({ + name: data.name, + email: data.email, + subject: data.subject, + message: data.message, + receipt: $receiptCheckbox.value() + }, function(result) { + var $dialog = Ox.Dialog({ + buttons: [ + Ox.Button({ + id: 'close', + title: 'Close' + }).bindEvent({ + click: function() { + $dialog.close(); + } + }) + ], + content: Ox.Element() + .append( + $('') + .attr({src: '/static/png/icon64.png'}) + .css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'}) + ) + .append( + Ox.Element() + .css({position: 'absolute', left: '96px', top: '16px', width: '192px'}) + .html('Thanks for your message!

We will get back to you as soon as possible.') + ), + fixedSize: true, + height: 128, + keys: {enter: 'close', escape: 'close'}, + title: 'Message Sent', + width: 304 + }) + .open(); + }); + } }) .appendTo(that); $text = $('
') - .css({float: 'left', width: width + 'px'}) + .css({width: width + 'px'}) .html( - 'Alternatively, you can contact us via ' + pandora.site.site.email.contact + '' - ); - - $('
') - .css({marginTop: '8px'}) - .append($text) - .append( ) .appendTo(that); + + pandora.user.level == 'guest' && $receiptCheckbox.hide(); function getWidth() { return Math.min(( @@ -110,11 +161,15 @@ pandora.ui.contactForm = function() { that.resize = function() { var width = getWidth(); + $form.css({width: width + 'px'}); $form.options('items').forEach(function($input, i) { i < 4 && $input.options({width: width}); }); - $receiptCheckbox.options({width: width - 136}) - $sendButton.css({left: width - 112 + 'px'}) + if (pandora.user.level == 'guest') { + $sendButton.css({marginLeft: width - 128 + 'px'}); + } else { + $receiptCheckbox.options({width: width - 136}); + } $text.css({width: width + 'px'}); }