diff --git a/static/js/appDialog.js b/static/js/appDialog.js
index ac7a25c..0e3cab9 100644
--- a/static/js/appDialog.js
+++ b/static/js/appDialog.js
@@ -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 git repository.
For everything else, there\'s IRC, and our development mailing list. Your feedback is welcome.
IRC: #openmedialibrary on freenode
Mailing List: openmedialibrary-dev@openmedialibrary.com',
+ }[id],
title = Ox.getObjectById(tabs, id).title;
+
$('![]()
')
.attr({
src: '/static/png/oml.png'
@@ -51,8 +58,11 @@ oml.ui.appDialog = function() {
height: '192px'
})
.appendTo($logo);
- $content.html('' + title + '
'
- + '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('
' + title + '
' + text + '
');
+ }
$('')
.css({
position: 'absolute',
diff --git a/static/js/contactForm.js b/static/js/contactForm.js
new file mode 100644
index 0000000..b44d06e
--- /dev/null
+++ b/static/js/contactForm.js
@@ -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!
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;
+
+};
diff --git a/static/js/utils.js b/static/js/utils.js
index 260c0d7..c69f793 100644
--- a/static/js/utils.js
+++ b/static/js/utils.js
@@ -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
diff --git a/static/json/js.json b/static/json/js.json
index 0e4e5bc..9b19d05 100644
--- a/static/json/js.json
+++ b/static/json/js.json
@@ -10,6 +10,7 @@
"closedScreen.js",
"columnView.js",
"confirmDialog.js",
+ "contactForm.js",
"coverDialog.js",
"deleteItemsDialog.js",
"deleteListDialog.js",