use iconDialog
This commit is contained in:
parent
112f4f98c8
commit
90a0fc6309
11 changed files with 126 additions and 278 deletions
|
@ -3,25 +3,25 @@
|
|||
|
||||
pandora.ui.annotationDialog = function(layer) {
|
||||
var isEditor = pandora.user.ui.itemView == 'editor',
|
||||
$dialog = Ox.Dialog({
|
||||
that = pandora.ui.iconDialog({
|
||||
buttons: [].concat(
|
||||
isEditor ? [
|
||||
Ox.Button({title: 'Sign Up...'}).bindEvent({
|
||||
click: function() {
|
||||
$dialog.close();
|
||||
that.close();
|
||||
pandora.$ui.accountDialog = pandora.ui.accountDialog('signup').open();
|
||||
}
|
||||
}),
|
||||
Ox.Button({title: 'Sign In...'}).bindEvent({
|
||||
click: function() {
|
||||
$dialog.close();
|
||||
that.close();
|
||||
pandora.$ui.accountDialog = pandora.ui.accountDialog('signin').open();
|
||||
}
|
||||
})
|
||||
] : [
|
||||
Ox.Button({title: 'Switch to Editor'}).bindEvent({
|
||||
click: function() {
|
||||
$dialog.close();
|
||||
that.close();
|
||||
pandora.UI.set({itemView: 'editor'});
|
||||
}
|
||||
})
|
||||
|
@ -30,32 +30,17 @@ pandora.ui.annotationDialog = function(layer) {
|
|||
{},
|
||||
Ox.Button({title: 'Not Now'}).bindEvent({
|
||||
click: function() {
|
||||
$dialog.close();
|
||||
that.close();
|
||||
}
|
||||
})
|
||||
]
|
||||
),
|
||||
content: Ox.Element()
|
||||
.append(
|
||||
$('<img>')
|
||||
.attr({src: '/static/png/icon.png'})
|
||||
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
|
||||
)
|
||||
.append(
|
||||
$('<div>')
|
||||
.css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
|
||||
.html(
|
||||
'To add or edit ' + layer + ', ' + (
|
||||
isEditor ? 'please sign up or sign in.'
|
||||
: 'just switch to the editor.'
|
||||
)
|
||||
)
|
||||
),
|
||||
fixedSize: true,
|
||||
height: 128,
|
||||
removeOnClose: true,
|
||||
width: 304,
|
||||
text: 'To add or edit ' + layer + ', ' + (
|
||||
isEditor
|
||||
? 'please sign up or sign in.'
|
||||
: 'just switch to the editor.'
|
||||
),
|
||||
title: Ox.toTitleCase(layer)
|
||||
});
|
||||
return $dialog;
|
||||
return that;
|
||||
};
|
||||
|
|
|
@ -105,7 +105,7 @@ pandora.ui.contactForm = function() {
|
|||
message: data.message,
|
||||
receipt: $receiptCheckbox.value()
|
||||
}, function(result) {
|
||||
var $dialog = Ox.Dialog({
|
||||
var $dialog = pandora.ui.iconDialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
id: 'close',
|
||||
|
@ -117,22 +117,9 @@ pandora.ui.contactForm = function() {
|
|||
}
|
||||
})
|
||||
],
|
||||
content: Ox.Element()
|
||||
.append(
|
||||
$('<img>')
|
||||
.attr({src: '/static/png/icon.png'})
|
||||
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
|
||||
)
|
||||
.append(
|
||||
Ox.Element()
|
||||
.css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
|
||||
.html('Thanks for your message!<br/><br/>We will get back to you as soon as possible.')
|
||||
),
|
||||
fixedSize: true,
|
||||
height: 128,
|
||||
keys: {enter: 'close', escape: 'close'},
|
||||
title: 'Message Sent',
|
||||
width: 304
|
||||
text: 'Thanks for your message!<br/><br/>We will get back to you as soon as possible.',
|
||||
title: 'Message Sent'
|
||||
})
|
||||
.open();
|
||||
});
|
||||
|
|
|
@ -3,13 +3,14 @@
|
|||
'use strict';
|
||||
|
||||
pandora.ui.deleteListDialog = function(list) {
|
||||
|
||||
var ui = pandora.user.ui,
|
||||
folderItems = ui.section == 'items' ? 'Lists' : Ox.toTitleCase(ui.section),
|
||||
folderItem = folderItems.slice(0, -1);
|
||||
|
||||
var listData = pandora.getListData(list),
|
||||
folderItem = folderItems.slice(0, -1),
|
||||
listData = pandora.getListData(list),
|
||||
$folderList = pandora.$ui.folderList[listData.folder],
|
||||
that = Ox.Dialog({
|
||||
|
||||
that = pandora.ui.iconDialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
id: 'keep',
|
||||
|
@ -49,23 +50,11 @@ pandora.ui.deleteListDialog = function(list) {
|
|||
}
|
||||
})
|
||||
],
|
||||
content: Ox.Element()
|
||||
.append(
|
||||
$('<img>')
|
||||
.attr({src: '/static/png/icon.png'})
|
||||
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
|
||||
)
|
||||
.append(
|
||||
$('<div>')
|
||||
.css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
|
||||
.html('Are you sure you want to delete the ' + folderItem.toLowerCase() + ' "' + listData.name + '"?')
|
||||
),
|
||||
height: 128,
|
||||
keys: {enter: 'delete', escape: 'keep'},
|
||||
title: 'Delete List',
|
||||
width: 304
|
||||
text: 'Are you sure you want to delete the ' + folderItem.toLowerCase() + ' "' + listData.name + '"?',
|
||||
title: 'Delete ' + folderItem
|
||||
});
|
||||
|
||||
return that;
|
||||
|
||||
}
|
||||
};
|
||||
|
|
|
@ -1,92 +0,0 @@
|
|||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||
'use strict';
|
||||
|
||||
pandora.ui.errorDialog = function(data) {
|
||||
var that, error;
|
||||
|
||||
//dont open dialog on unload or if antoher error is open
|
||||
//fixme: error dialog should updated instead
|
||||
if ($('.OxErrorDialog').length || pandora.isUnloading) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.status.code == 401 || data.status.code == 403) {
|
||||
that = Ox.Dialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
id: 'close',
|
||||
title: 'Close'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
that.close();
|
||||
}
|
||||
})
|
||||
],
|
||||
content: Ox.Element()
|
||||
.append(
|
||||
$('<img>')
|
||||
.attr({src: '/static/png/icon.png'})
|
||||
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
|
||||
)
|
||||
.append(
|
||||
Ox.Element()
|
||||
.css({position: 'absolute', left: '96px', top: '16px', width: '256px'})
|
||||
.html('Sorry, you have made an unauthorized request.')
|
||||
),
|
||||
fixedSize: true,
|
||||
height: 192,
|
||||
keys: {enter: 'close', escape: 'close'},
|
||||
removeOnClose: true,
|
||||
title: Ox.toTitleCase(data.status.text),
|
||||
width: 368
|
||||
})
|
||||
.addClass('OxErrorDialog')
|
||||
.open();
|
||||
} else {
|
||||
// 0 (timeout) or 500 (error)
|
||||
var error = data.status.code == 0 ? 'timeout' : 'error';
|
||||
|
||||
// on window unload, pending request will time out, so
|
||||
// in order to keep the dialog from appearing, delay it
|
||||
setTimeout(function() {
|
||||
if ($('.OxErrorDialog').length == 0 && !pandora.isUnloading) {
|
||||
that = Ox.Dialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
id: 'close',
|
||||
title: 'Close'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
that.close();
|
||||
}
|
||||
})
|
||||
],
|
||||
content: Ox.Element()
|
||||
.append(
|
||||
$('<img>')
|
||||
.attr({src: '/static/png/icon.png'})
|
||||
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
|
||||
)
|
||||
.append(
|
||||
Ox.Element()
|
||||
.css({position: 'absolute', left: '96px', top: '16px', width: '256px'})
|
||||
.html(
|
||||
'Sorry, a server ' + error
|
||||
+ ' occured while handling your request. To help us find out what went wrong, you may want to report this error to an administrator. Otherwise, please try again later.'
|
||||
)
|
||||
),
|
||||
fixedSize: true,
|
||||
height: 192,
|
||||
keys: {enter: 'close', escape: 'close'},
|
||||
removeOnClose: true,
|
||||
title: 'Server ' + Ox.toTitleCase(error),
|
||||
width: 368
|
||||
})
|
||||
.addClass('OxErrorDialog')
|
||||
.open();
|
||||
}
|
||||
}, 250);
|
||||
}
|
||||
};
|
65
static/js/pandora/errorDialog.js
Normal file
65
static/js/pandora/errorDialog.js
Normal file
|
@ -0,0 +1,65 @@
|
|||
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
||||
'use strict';
|
||||
|
||||
pandora.ui.errorDialog = function(data) {
|
||||
var that, error;
|
||||
|
||||
//dont open dialog on unload or if antoher error is open
|
||||
//fixme: error dialog should updated instead
|
||||
if ($('.OxErrorDialog').length || pandora.isUnloading) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.status.code == 401 || data.status.code == 403) {
|
||||
that = pandora.ui.iconDialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
id: 'close',
|
||||
title: 'Close'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
that.close();
|
||||
}
|
||||
})
|
||||
],
|
||||
keys: {enter: 'close', escape: 'close'},
|
||||
text: 'Sorry, you have made an unauthorized request.',
|
||||
title: Ox.toTitleCase(data.status.text)
|
||||
})
|
||||
.addClass('OxErrorDialog')
|
||||
.open();
|
||||
} else {
|
||||
// 0 (timeout) or 500 (error)
|
||||
error = data.status.code == 0 ? 'timeout' : 'error';
|
||||
// on window unload, pending request will time out, so
|
||||
// in order to keep the dialog from appearing, delay it
|
||||
setTimeout(function() {
|
||||
if ($('.OxErrorDialog').length == 0 && !pandora.isUnloading) {
|
||||
that = pandora.ui.iconDialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
id: 'close',
|
||||
title: 'Close'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
that.close();
|
||||
}
|
||||
})
|
||||
],
|
||||
keys: {enter: 'close', escape: 'close'},
|
||||
text: 'Sorry, a server ' + error
|
||||
+ ' occured while handling your request.'
|
||||
+ ' To help us find out what went wrong,'
|
||||
+ ' you may want to report this error to an administrator.'
|
||||
+ ' Otherwise, please try again later.',
|
||||
title: 'Server ' + Ox.toTitleCase(error)
|
||||
})
|
||||
.addClass('OxErrorDialog')
|
||||
.open();
|
||||
}
|
||||
}, 250);
|
||||
}
|
||||
|
||||
};
|
|
@ -312,7 +312,7 @@ pandora.ui.folders = function() {
|
|||
type: 'image'
|
||||
}).bindEvent({
|
||||
click: function() {
|
||||
var $dialog = Ox.Dialog({
|
||||
var $dialog = pandora.ui.iconDialog({
|
||||
buttons: title != 'Featured Lists' ? [
|
||||
Ox.Button({title: 'Sign Up...'}).bindEvent({
|
||||
click: function() {
|
||||
|
@ -339,21 +339,7 @@ pandora.ui.folders = function() {
|
|||
}
|
||||
})
|
||||
],
|
||||
content: Ox.Element()
|
||||
.append(
|
||||
$('<img>')
|
||||
.attr({src: '/static/png/icon.png'})
|
||||
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
|
||||
)
|
||||
.append(
|
||||
$('<div>')
|
||||
.css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
|
||||
.html(text)
|
||||
),
|
||||
fixedSize: true,
|
||||
height: 128,
|
||||
removeOnClose: true,
|
||||
width: 304,
|
||||
text: text,
|
||||
title: title
|
||||
}).open();
|
||||
}
|
||||
|
|
|
@ -8,11 +8,12 @@ pandora.ui.iconDialog = function(options) {
|
|||
keys: null,
|
||||
text: '',
|
||||
title: '',
|
||||
width: 368,
|
||||
width: 304,
|
||||
}, options),
|
||||
|
||||
that = Ox.Dialog({
|
||||
buttons: options.buttons,
|
||||
closeButton: options.closeButton,
|
||||
content: Ox.Element()
|
||||
.append(
|
||||
$('<img>')
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
pandora.ui.makeListPrivateDialog = function(name, subscribers, callback) {
|
||||
|
||||
var that = Ox.Dialog({
|
||||
var that = pandora.ui.iconDialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
id: 'keep',
|
||||
|
@ -23,27 +23,13 @@ pandora.ui.makeListPrivateDialog = function(name, subscribers, callback) {
|
|||
}
|
||||
})
|
||||
],
|
||||
content: Ox.Element()
|
||||
.append(
|
||||
$('<img>')
|
||||
.attr({src: '/static/png/icon.png'})
|
||||
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
|
||||
)
|
||||
.append(
|
||||
$('<div>')
|
||||
.css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
|
||||
.html(
|
||||
'Are you sure you want to make the list "'
|
||||
+ name + '" private and lose its '
|
||||
+ (subscribers == 1 ? 'subscriber' : subscribers + ' subscribers')
|
||||
+ '?'
|
||||
)
|
||||
),
|
||||
height: 128,
|
||||
keys: {enter: 'make', escape: 'keep'},
|
||||
title: 'Make List Private',
|
||||
width: 304
|
||||
})
|
||||
text: 'Are you sure you want to make the list "'
|
||||
+ name + '" private and lose its '
|
||||
+ (subscribers == 1 ? 'subscriber' : subscribers + ' subscribers')
|
||||
+ '?',
|
||||
title: 'Make List Private'
|
||||
});
|
||||
|
||||
return that;
|
||||
|
||||
|
|
|
@ -41,7 +41,7 @@ pandora.ui.metadataDialog = function(data) {
|
|||
data.imdbId && getMetadata();
|
||||
|
||||
function idDialog() {
|
||||
return Ox.Dialog({
|
||||
return pandora.ui.iconDialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
id: 'close',
|
||||
|
@ -64,27 +64,11 @@ pandora.ui.metadataDialog = function(data) {
|
|||
}
|
||||
})
|
||||
],
|
||||
content: Ox.Element()
|
||||
.append(
|
||||
$('<img>')
|
||||
.attr({src: '/static/png/icon.png'})
|
||||
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
|
||||
)
|
||||
.append(
|
||||
$('<div>')
|
||||
.css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
|
||||
.html(
|
||||
'To update the metadata for this '
|
||||
+ pandora.site.itemName.singular.toLowerCase()
|
||||
+ ', please enter its IMDb ID.'
|
||||
)
|
||||
),
|
||||
fixedSize: true,
|
||||
height: 128,
|
||||
keyboard: {enter: 'update', escape: 'close'},
|
||||
removeOnClose: true,
|
||||
title: 'Update Metadata',
|
||||
width: 304
|
||||
text: 'To update the metadata for this '
|
||||
+ pandora.site.itemName.singular.toLowerCase()
|
||||
+ ', please enter its IMDb ID.',
|
||||
title: 'Update Metadata'
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -138,7 +122,7 @@ pandora.ui.metadataDialog = function(data) {
|
|||
}
|
||||
|
||||
function confirmDialog() {
|
||||
return Ox.Dialog({
|
||||
return pandora.ui.iconDialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
id: 'cancel',
|
||||
|
@ -160,33 +144,18 @@ pandora.ui.metadataDialog = function(data) {
|
|||
}
|
||||
})
|
||||
],
|
||||
content: Ox.Element()
|
||||
.append(
|
||||
$('<img>')
|
||||
.attr({src: '/static/png/icon.png'})
|
||||
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
|
||||
)
|
||||
.append(
|
||||
$('<div>')
|
||||
.css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
|
||||
.html(
|
||||
'Are you sure you want to update the value'
|
||||
+ (updateKeys.length == 1 ? '' : 's')
|
||||
+ ' for ' + updateKeys.map(function(key, index) {
|
||||
return (
|
||||
index == 0 ? ''
|
||||
: index < updateKeys.length - 1 ? ', '
|
||||
: ' and '
|
||||
) + getTitle(key)
|
||||
}).join('') + '?'
|
||||
)
|
||||
),
|
||||
fixedSize: true,
|
||||
height: 128,
|
||||
height: 192,
|
||||
keyboard: {enter: 'update', escape: 'cancel'},
|
||||
removeOnClose: true,
|
||||
title: 'Update Metadata',
|
||||
width: 304
|
||||
text: 'Are you sure you want to update the value'
|
||||
+ (updateKeys.length == 1 ? '' : 's')
|
||||
+ ' for ' + updateKeys.map(function(key, index) {
|
||||
return (
|
||||
index == 0 ? ''
|
||||
: index < updateKeys.length - 1 ? ', '
|
||||
: ' and '
|
||||
) + getTitle(key)
|
||||
}).join('') + '?',
|
||||
title: 'Update Metadata'
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -3,11 +3,11 @@
|
|||
|
||||
pandora.ui.resetUIDialog = function(data) {
|
||||
|
||||
var that = Ox.Dialog({
|
||||
var that = pandora.ui.iconDialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
id: 'cancel',
|
||||
title: 'Cancel'
|
||||
title: 'Don\'t Reset'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
|
@ -26,21 +26,9 @@ pandora.ui.resetUIDialog = function(data) {
|
|||
}
|
||||
})
|
||||
],
|
||||
content: Ox.Element()
|
||||
.append(
|
||||
$('<img>')
|
||||
.attr({src: '/static/png/icon.png'})
|
||||
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
|
||||
)
|
||||
.append(
|
||||
$('<div>')
|
||||
.css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
|
||||
.html('Are you sure you want to reset all UI settings?')
|
||||
),
|
||||
height: 128,
|
||||
keys: {enter: 'reset', escape: 'cancel'},
|
||||
title: 'Reset UI Settings',
|
||||
width: 304
|
||||
text: 'Are you sure you want to reset all UI settings?',
|
||||
title: 'Reset UI Settings'
|
||||
});
|
||||
|
||||
return that;
|
||||
|
|
|
@ -866,13 +866,7 @@ pandora.ui.usersDialog = function() {
|
|||
message: getFormItemById('message').value(),
|
||||
receipt: getFormItemById('receipt').value()
|
||||
}, function(result) {
|
||||
var title = result.status.code == 200
|
||||
? 'Message Sent'
|
||||
: 'Application Error',
|
||||
message = result.status.code == 200
|
||||
? 'Your message has been sent.'
|
||||
: 'Your message could not be sent. Please try again.',
|
||||
$dialog = Ox.Dialog({
|
||||
var $dialog = pandora.ui.iconDialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
id: 'close',
|
||||
|
@ -884,23 +878,13 @@ pandora.ui.usersDialog = function() {
|
|||
}
|
||||
})
|
||||
],
|
||||
// FIXME: we need a template for this type of dialog
|
||||
content: Ox.Element()
|
||||
.append(
|
||||
$('<img>')
|
||||
.attr({src: '/static/png/icon.png'})
|
||||
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
|
||||
)
|
||||
.append(
|
||||
$('<div>')
|
||||
.css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
|
||||
.html(message)
|
||||
),
|
||||
height: 128,
|
||||
keys: {enter: 'close', escape: 'close'},
|
||||
removeOnClose: true,
|
||||
title: title,
|
||||
width: 304
|
||||
text: result.status.code == 200
|
||||
? 'Your message has been sent.'
|
||||
: 'Your message could not be sent. Please try again.',
|
||||
title: result.status.code == 200
|
||||
? 'Message Sent'
|
||||
: 'Application Error'
|
||||
}).open();
|
||||
$sendButton.options({title: 'Send', disabled: false});
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue