add contactForm
This commit is contained in:
parent
3858bef3f4
commit
01a20963c1
|
|
@ -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>'
|
||||
+ '<p>The lazy brown fox jumped over the lazy black fox, but other than that not really much happened here since you last checked.');
|
||||
if (id == 'contact') {
|
||||
$content.append(oml.ui.contactForm());
|
||||
} else {
|
||||
$content.html('<h1><b>' + title + '</b></h1><p>' + text + '</p>');
|
||||
}
|
||||
$('<div>')
|
||||
.css({
|
||||
position: 'absolute',
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
};
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
"closedScreen.js",
|
||||
"columnView.js",
|
||||
"confirmDialog.js",
|
||||
"contactForm.js",
|
||||
"coverDialog.js",
|
||||
"deleteItemsDialog.js",
|
||||
"deleteListDialog.js",
|
||||
|
|
|
|||
Loading…
Reference in New Issue