update contact form
This commit is contained in:
rolux
parent
ec0a33bfdb
commit
19a6eb66f8
2 changed files with 117 additions and 45 deletions
|
|
@ -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;
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue