update contact form

This commit is contained in:
rolux 2011-11-02 10:22:19 +00:00
parent ec0a33bfdb
commit 19a6eb66f8
2 changed files with 117 additions and 45 deletions

View file

@ -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 = $('<div>')
.css({float: 'left', width: width + 'px'})
.html(
'Alternatively, you can contact us via <a href="mailto:'
+ pandora.site.site.email.contact + '">'
+ pandora.site.site.email.contact + '</a>'
);
$('<div>')
.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;
};

View file

@ -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;