openmedialibrary/static/js/contactForm.js

155 lines
5.4 KiB
JavaScript
Raw Normal View History

2016-01-16 08:40:20 +00:00
'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,
2016-01-16 12:04:46 +00:00
style: 'squared',
2016-01-16 08:40:20 +00:00
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,
2016-01-16 12:04:46 +00:00
style: 'squared',
2016-01-16 08:40:20 +00:00
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,
2016-01-16 12:04:46 +00:00
style: 'squared',
2016-01-16 08:40:20 +00:00
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',
2016-01-16 12:04:46 +00:00
style: 'squared',
2016-01-16 08:40:20 +00:00
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,
2016-01-16 12:04:46 +00:00
style: 'squared',
2016-01-16 08:40:20 +00:00
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) {
2016-01-16 13:11:20 +00:00
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.');
}
2016-01-16 08:40:20 +00:00
var $dialog = oml.ui.iconDialog({
buttons: [
Ox.Button({
id: 'close',
title: Ox._('Close')
}).bindEvent({
click: function() {
$dialog.close();
2016-01-16 13:11:20 +00:00
if (!result.error) {
$form.values({subject: '', message: ''});
}
2016-01-16 08:40:20 +00:00
}
})
],
2016-01-16 13:11:20 +00:00
content: content,
2016-01-16 08:40:20 +00:00
keys: {enter: 'close', escape: 'close'},
2016-01-16 13:11:20 +00:00
title: title
2016-01-16 08:40:20 +00:00
})
.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;
};