diff --git a/static/js/pandora/contactForm.js b/static/js/pandora/contactForm.js
index be7fa2f3..49e95e51 100644
--- a/static/js/pandora/contactForm.js
+++ b/static/js/pandora/contactForm.js
@@ -1,57 +1,123 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript
+
pandora.ui.contactForm = function() {
+
var that = Ox.Element(),
+
+ 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: 'email',
- label: 'E-Mail',
- labelWidth: 60,
- value: pandora.user.email,
- width: 240
+ id: 'name',
+ label: 'Your Name',
+ labelWidth: 128,
+ value: pandora.user.username,
+ width: width
}),
Ox.Input({
- id: 'subject',
- label: 'Subject',
- labelWidth: 60,
- value: '',
- width: 240
+ id: 'email',
+ label: 'Your E-Mail Address',
+ labelWidth: 128,
+ value: pandora.user.email,
+ width: width
}),
Ox.Input({
- height: 120,
+ id: 'subject',
+ label: 'Subject',
+ labelWidth: 128,
+ value: '',
+ width: width
+ }),
+ Ox.Input({
+ height: 256,
id: 'message',
placeholder: 'Message',
type: 'textarea',
value: '',
- width: 240
- })
- .css({height: '240px'})
+ width: width
+ }),
+ $receiptCheckbox
],
submit: function(data, callback) {
pandora.api.contact({
+ name: data.name,
email: data.email,
subject: data.subject,
- message: data.message
+ message: data.message,
+ receipt: data.receipt
}, function(result) {
callback && callback(result);
});
},
width: 240
})
- .css({margin: '8px'})
.bindEvent({
change: function(event) {
}
})
+ .appendTo(that),
+
+ $sendButton = Ox.Button({
+ title: 'Send Message',
+ width: 128
+ })
+ .css({position: 'absolute', left: width - 112 + 'px', top: '352px'})
+ .bindEvent({
+ click: function() {
+ $form.submit();
+ }
+ })
.appendTo(that);
- Ox.Button({
- title: 'Send'
- })
- .bindEvent({
- click: function() {
- $form.submit();
- }
- }).appendTo(that);
+ $text = $('
')
+ .css({float: 'left', width: width + 'px'})
+ .html(
+ 'Alternatively, you can contact us via
'
+ + pandora.site.site.email.contact + ''
+ );
+
+ $('
')
+ .css({marginTop: '8px'})
+ .append($text)
+ .append(
+ )
+ .appendTo(that);
+
+ function getWidth() {
+ return Math.min((
+ pandora.$ui.siteDialog
+ ? parseInt(pandora.$ui.siteDialog.css('width'))
+ : Math.round(window.innerWidth * 0.75)
+ ) - 304, 512);
+ }
+
+ that.resize = function() {
+ var width = getWidth();
+ $form.options('items').forEach(function($input, i) {
+ i < 4 && $input.options({width: width});
+ });
+ $receiptCheckbox.options({width: width - 136})
+ $sendButton.css({left: width - 112 + 'px'})
+ $text.css({width: width + 'px'});
+ }
+
return that;
+
};
diff --git a/static/js/pandora/siteDialog.js b/static/js/pandora/siteDialog.js
index 3bd1b415..36945648 100644
--- a/static/js/pandora/siteDialog.js
+++ b/static/js/pandora/siteDialog.js
@@ -10,10 +10,9 @@ pandora.ui.siteDialog = function(section) {
content: function(id) {
var $content = Ox.Element().css({padding: '16px', overflowY: 'auto'});
if (id == 'contact') {
- $content.append(pandora.ui.contactForm());
+ $content.append(pandora.$ui.contactForm = pandora.ui.contactForm());
} else {
pandora.api.getPage({name: id}, function(result) {
- Ox.print('DATA::', result.data)
Ox.Editable({
clickLink: pandora.clickLink,
editable: pandora.site.capabilities.canEditSitePages[pandora.user.level],
@@ -68,26 +67,33 @@ pandora.ui.siteDialog = function(section) {
}
});
var $dialog = Ox.Dialog({
- buttons: [
- Ox.Button({
- id: 'close',
- title: 'Close'
- }).bindEvent({
- click: function() {
- $dialog.close();
- pandora.URL.update();
+ buttons: [
+ Ox.Button({
+ id: 'close',
+ title: 'Close'
+ }).bindEvent({
+ click: function() {
+ $dialog.close();
+ pandora.URL.update();
+ }
+ })
+ ],
+ //closeButton: true,
+ content: $tabPanel,
+ height: Math.round((window.innerHeight - 24) * 0.75),
+ //maximizeButton: true,
+ minHeight: 256,
+ minWidth: 688, // 16 + 256 + 16 + 384 + 16
+ title: 'About',
+ width: Math.round(window.innerWidth * 0.75),
+ })
+ .bindEvent({
+ resize: function(data) {
+ if ($tabPanel.selected() == 'contact') {
+ pandora.$ui.contactForm.resize();
}
- })
- ],
- //closeButton: true,
- content: $tabPanel,
- height: Math.round((window.innerHeight - 24) * 0.75),
- //maximizeButton: true,
- minHeight: 256,
- minWidth: 640,
- title: 'About',
- width: Math.round(window.innerWidth * 0.75),
- });
+ }
+ });
return $dialog;