pandora/static/js/contactForm.js

177 lines
6.1 KiB
JavaScript
Raw Normal View History

2011-10-06 15:39:28 +00:00
// vim: et:ts=4:sw=4:sts=4:ft=javascript
2011-11-02 10:22:19 +00:00
2011-11-05 17:04:10 +00:00
'use strict';
2011-10-06 15:39:28 +00:00
pandora.ui.contactForm = function() {
2011-11-02 10:22:19 +00:00
2011-10-06 15:39:28 +00:00
var that = Ox.Element(),
2011-11-02 10:22:19 +00:00
width = getWidth(),
2011-10-06 15:39:28 +00:00
$form = Ox.Form({
items: [
Ox.Input({
2011-11-02 10:22:19 +00:00
id: 'name',
2013-05-09 10:13:58 +00:00
label: Ox._('Your Name'),
2011-11-02 10:22:19 +00:00
labelWidth: 128,
2011-11-02 17:26:08 +00:00
validate: function(value, callback) {
callback({valid: true});
},
2011-11-02 10:22:19 +00:00
value: pandora.user.username,
width: width
2011-10-06 15:39:28 +00:00
}),
Ox.Input({
2011-11-02 17:26:08 +00:00
autovalidate: pandora.autovalidateEmail,
2011-11-02 10:22:19 +00:00
id: 'email',
2013-05-09 10:13:58 +00:00
label: Ox._('Your E-Mail Address'),
2011-11-02 10:22:19 +00:00
labelWidth: 128,
2011-11-02 17:26:08 +00:00
validate: function(value, callback) {
callback({
2013-05-09 10:13:58 +00:00
message: Ox._('Please enter '
2011-11-02 17:26:08 +00:00
+ (value.length == 0 ? 'your' : 'a valid')
2013-05-09 10:13:58 +00:00
+ ' e-mail address'),
2011-11-02 17:26:08 +00:00
valid: Ox.isValidEmail(value)
});
},
2011-11-02 10:22:19 +00:00
value: pandora.user.email,
width: width
2011-10-06 15:39:28 +00:00
}),
Ox.Input({
2011-11-02 10:22:19 +00:00
id: 'subject',
2013-05-09 10:13:58 +00:00
label: Ox._('Subject'),
2011-11-02 10:22:19 +00:00
labelWidth: 128,
2011-11-02 17:26:08 +00:00
validate: function(value, callback) {
callback({valid: true});
},
2011-11-02 10:22:19 +00:00
value: '',
width: width
}),
Ox.Input({
2013-10-08 09:34:30 +00:00
autovalidate: function(value, blur, callback) {
callback({valid: value.length > 0, value: value});
},
2011-11-02 10:22:19 +00:00
height: 256,
2011-10-06 15:39:28 +00:00
id: 'message',
placeholder: 'Message',
type: 'textarea',
2011-11-02 17:26:08 +00:00
validate: function(value, callback) {
callback({
2013-05-09 10:13:58 +00:00
message: Ox._('Please enter a message'),
2011-11-02 17:26:08 +00:00
valid: value.length > 0
});
},
2011-10-06 15:39:28 +00:00
value: '',
2011-11-02 10:22:19 +00:00
width: width
2011-11-02 17:26:08 +00:00
})
2012-05-26 15:46:24 +00:00
]
2011-11-02 17:26:08 +00:00
})
.css({width: width + 'px'})
.bindEvent({
validate: function(data) {
2011-12-22 07:24:30 +00:00
$sendButton.options({disabled: !data.valid});
2011-11-02 17:26:08 +00:00
}
})
.appendTo(that),
$receiptCheckbox = Ox.Checkbox({
id: 'receipt',
2013-05-10 13:11:11 +00:00
title: Ox._('Send a receipt to {0}', [pandora.user.email]),
2011-12-22 18:30:03 +00:00
value: pandora.user.level != 'guest',
2011-11-02 17:26:08 +00:00
width: width - 136
2011-10-06 15:39:28 +00:00
})
2011-11-02 17:26:08 +00:00
.css({float: 'left', margin: '8px 4px 8px 0'})
2011-10-06 15:39:28 +00:00
.bindEvent({
2011-11-02 17:26:08 +00:00
change: function(data) {
$receiptCheckbox.options({
2011-12-21 15:34:28 +00:00
title: data.value
2013-05-09 10:13:58 +00:00
? Ox._('Send a receipt to {0}', [pandora.user.email])
: Ox._('Don\'t send me a receipt')
2011-11-02 17:26:08 +00:00
});
2011-10-06 15:39:28 +00:00
}
})
2011-11-02 10:22:19 +00:00
.appendTo(that),
$sendButton = Ox.Button({
2011-11-02 17:26:08 +00:00
disabled: true,
2013-05-09 10:13:58 +00:00
title: Ox._('Send Message'),
2011-11-02 10:22:19 +00:00
width: 128
})
2011-11-02 17:26:08 +00:00
.css({float: 'left', margin: '8px 0 8px ' + (pandora.user.level == 'guest' ? width - 128 : 4) + 'px'})
2011-11-02 10:22:19 +00:00
.bindEvent({
click: function() {
2011-11-02 17:26:08 +00:00
var data = $form.values();
$sendButton.options({
disabled: true,
2013-05-09 10:13:58 +00:00
title: Ox._('Sending Message...')
});
2011-11-02 17:26:08 +00:00
pandora.api.contact({
name: data.name,
email: data.email,
subject: data.subject,
message: data.message,
receipt: $receiptCheckbox.value()
}, function(result) {
2013-03-03 05:34:44 +00:00
var $dialog = pandora.ui.iconDialog({
2011-11-02 17:26:08 +00:00
buttons: [
Ox.Button({
id: 'close',
2013-05-09 10:13:58 +00:00
title: Ox._('Close')
2011-11-02 17:26:08 +00:00
}).bindEvent({
click: function() {
$dialog.close();
$form.values({subject: '', message: ''});
2011-11-02 17:26:08 +00:00
}
})
],
content: Ox._('Thanks for your message!<br/><br/>We will get back to you as soon as possible.'),
2011-11-02 17:26:08 +00:00
keys: {enter: 'close', escape: 'close'},
2013-05-09 10:13:58 +00:00
title: Ox._('Message Sent')
2011-11-02 17:26:08 +00:00
})
.open();
$sendButton.options({
disabled: false,
2013-05-09 10:13:58 +00:00
title: Ox._('Send Message')
});
2011-11-02 17:26:08 +00:00
});
2011-11-02 10:22:19 +00:00
}
})
2011-11-06 21:12:36 +00:00
.appendTo(that),
2011-10-06 15:39:28 +00:00
2011-11-02 10:22:19 +00:00
$text = $('<div>')
2011-11-02 17:26:08 +00:00
.css({width: width + 'px'})
2011-11-02 10:22:19 +00:00
.html(
2013-05-09 10:13:58 +00:00
'&nbsp;' + Ox._('Alternatively, you can contact us via {0}',
['<a href="mailto:' + pandora.site.site.email.contact + '">'
+ pandora.site.site.email.contact + '</a>'])
2011-11-02 10:22:19 +00:00
)
.appendTo(that);
2011-11-02 17:26:08 +00:00
pandora.user.level == 'guest' && $receiptCheckbox.hide();
2011-11-02 10:22:19 +00:00
function getWidth() {
return Math.min((
pandora.$ui.siteDialog
? parseInt(pandora.$ui.siteDialog.css('width'))
: Math.round(window.innerWidth * 0.75)
) - 304 - Ox.UI.SCROLLBAR_SIZE, 512);
2011-11-02 10:22:19 +00:00
}
that.resize = function() {
var width = getWidth();
2011-11-02 17:26:08 +00:00
$form.css({width: width + 'px'});
2011-11-02 10:22:19 +00:00
$form.options('items').forEach(function($input, i) {
i < 4 && $input.options({width: width});
});
2011-11-02 17:26:08 +00:00
if (pandora.user.level == 'guest') {
$sendButton.css({marginLeft: width - 128 + 'px'});
} else {
$receiptCheckbox.options({width: width - 136});
}
2011-11-02 10:22:19 +00:00
$text.css({width: width + 'px'});
}
2011-10-06 15:39:28 +00:00
return that;
2011-11-02 10:22:19 +00:00
2011-10-06 15:39:28 +00:00
};