diff --git a/static/js/pandora/annotationDialog.js b/static/js/pandora/annotationDialog.js index 42139c09..339458bb 100644 --- a/static/js/pandora/annotationDialog.js +++ b/static/js/pandora/annotationDialog.js @@ -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( - $('') - .attr({src: '/static/png/icon.png'}) - .css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'}) - ) - .append( - $('
') - .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; }; diff --git a/static/js/pandora/contactForm.js b/static/js/pandora/contactForm.js index 521a05db..be72c924 100644 --- a/static/js/pandora/contactForm.js +++ b/static/js/pandora/contactForm.js @@ -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( - $('') - .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!

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!

We will get back to you as soon as possible.', + title: 'Message Sent' }) .open(); }); diff --git a/static/js/pandora/deleteListDialog.js b/static/js/pandora/deleteListDialog.js index 22b3e396..44c6fbba 100644 --- a/static/js/pandora/deleteListDialog.js +++ b/static/js/pandora/deleteListDialog.js @@ -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( - $('') - .attr({src: '/static/png/icon.png'}) - .css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'}) - ) - .append( - $('
') - .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; -} +}; diff --git a/static/js/pandora/error.js b/static/js/pandora/error.js deleted file mode 100644 index 88c97850..00000000 --- a/static/js/pandora/error.js +++ /dev/null @@ -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( - $('') - .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( - $('') - .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); - } -}; diff --git a/static/js/pandora/errorDialog.js b/static/js/pandora/errorDialog.js new file mode 100644 index 00000000..52f002f1 --- /dev/null +++ b/static/js/pandora/errorDialog.js @@ -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); + } + +}; diff --git a/static/js/pandora/folders.js b/static/js/pandora/folders.js index a59ac390..445f693c 100644 --- a/static/js/pandora/folders.js +++ b/static/js/pandora/folders.js @@ -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( - $('') - .attr({src: '/static/png/icon.png'}) - .css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'}) - ) - .append( - $('
') - .css({position: 'absolute', left: '96px', top: '16px', width: '192px'}) - .html(text) - ), - fixedSize: true, - height: 128, - removeOnClose: true, - width: 304, + text: text, title: title }).open(); } diff --git a/static/js/pandora/iconDialog.js b/static/js/pandora/iconDialog.js index bfa4bdcc..9f8a6f95 100644 --- a/static/js/pandora/iconDialog.js +++ b/static/js/pandora/iconDialog.js @@ -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( $('') diff --git a/static/js/pandora/makeListPrivateDialog.js b/static/js/pandora/makeListPrivateDialog.js index d92bfba0..fa6d75b3 100644 --- a/static/js/pandora/makeListPrivateDialog.js +++ b/static/js/pandora/makeListPrivateDialog.js @@ -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( - $('') - .attr({src: '/static/png/icon.png'}) - .css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'}) - ) - .append( - $('
') - .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; diff --git a/static/js/pandora/metadataDialog.js b/static/js/pandora/metadataDialog.js index e8962f1e..8e3cf071 100644 --- a/static/js/pandora/metadataDialog.js +++ b/static/js/pandora/metadataDialog.js @@ -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( - $('') - .attr({src: '/static/png/icon.png'}) - .css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'}) - ) - .append( - $('
') - .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( - $('') - .attr({src: '/static/png/icon.png'}) - .css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'}) - ) - .append( - $('
') - .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' }); } diff --git a/static/js/pandora/resetUIDialog.js b/static/js/pandora/resetUIDialog.js index 4bedda8b..4f8a5f8d 100644 --- a/static/js/pandora/resetUIDialog.js +++ b/static/js/pandora/resetUIDialog.js @@ -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( - $('') - .attr({src: '/static/png/icon.png'}) - .css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'}) - ) - .append( - $('
') - .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; diff --git a/static/js/pandora/usersDialog.js b/static/js/pandora/usersDialog.js index c3c07c9f..4e52a494 100644 --- a/static/js/pandora/usersDialog.js +++ b/static/js/pandora/usersDialog.js @@ -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( - $('') - .attr({src: '/static/png/icon.png'}) - .css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'}) - ) - .append( - $('
') - .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}); });