use iconDialog

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()
+            text: 'To add or edit ' + layer + ', ' + (
-                .append(
+                isEditor
-                    $('<img>')
+                ? 'please sign up or sign in.'
-                        .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,
             title: Ox.toTitleCase(layer)
         });
-    return $dialog;
+    return that;
 };

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(
-                                    $('<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',
+                            text: 'Thanks for your message!<br/><br/>We will get back to you as soon as possible.',
-                            width: 304
+                            title: 'Message Sent'
                         })
                         .open();
                 });

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);
+        folderItem = folderItems.slice(0, -1),
-
+        listData = pandora.getListData(list),
-    var 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',
+            text: 'Are you sure you want to delete the ' + folderItem.toLowerCase() + ' "' + listData.name + '"?',
-            width: 304
+            title: 'Delete ' + folderItem
         });
 
     return that;
 
-}
+};

static/js/pandora/error.js

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

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);
+    }
+
+};

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()
+                    text: text,
-                        .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,
                     title: title
                 }).open();
             }

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(
                     $('<img>')

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()
+            keys: {enter: 'make', escape: 'keep'},
-                .append(
+            text: 'Are you sure you want to make the list "'
-                    $('<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')
-                            + '?'
+                + '?',
-                        )
+            title: 'Make List Private'
-                ),
+        });
-            height: 128,
-            keys: {enter: 'make', escape: 'keep'},
-            title: 'Make List Private',
-            width: 304
-        })
 
     return that;
 

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(
-                    $('<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,
+            text: 'To update the metadata for this '
-            title: 'Update Metadata',
+                + pandora.site.itemName.singular.toLowerCase()
-            width: 304
+                + ', 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,17 +144,9 @@ pandora.ui.metadataDialog = function(data) {
                         }
                     })
             ],
-            content: Ox.Element()
+            height: 192,
-                .append(
+            keyboard: {enter: 'update', escape: 'cancel'},
-                    $('<img>')
+            text: 'Are you sure you want to update the value'
-                        .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 (
@@ -178,15 +154,8 @@ pandora.ui.metadataDialog = function(data) {
                         : index < updateKeys.length - 1 ? ', '
                         : ' and '
                     ) + getTitle(key)
-                            }).join('') + '?'
+                }).join('') + '?',
-                        )
+            title: 'Update Metadata'
-                ),
-            fixedSize: true,
-            height: 128,
-            keyboard: {enter: 'update', escape: 'cancel'},
-            removeOnClose: true,
-            title: 'Update Metadata',
-            width: 304
         });
     }
 

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(
-                $('<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',
+        text: 'Are you sure you want to reset all UI settings?',
-        width: 304
+        title: 'Reset UI Settings'
     });
 
     return that;

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
+            var $dialog = pandora.ui.iconDialog({
-                    ? '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({
                     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,
+                    text: result.status.code == 200
-                    title: title,
+                        ? 'Your message has been sent.'
-                    width: 304
+                        : '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});
         });