update metadataDialog and insertEmbedDialog

static/js/pandora/insertEmbedDialog.js

@@ -19,7 +19,7 @@ pandora.ui.insertEmbedDialog = function(callback) {
                             buttons: [
                                 {id: 'basic', title: 'Basic'},
                                 {id: 'advanced', title: 'Advanced'}
-                            ]
+                            ],
                             label: 'Show Advanced Options',
                             labelWidth: 128,
                             selectable: true,

static/js/pandora/metadataDialog.js

@@ -11,9 +11,11 @@ pandora.ui.metadataDialog = function(data) {
             'summary'
             // color, sound
         ],
+        updateKeys,
         dialogHeight = Math.round((window.innerHeight - 48) * 0.9),
         dialogWidth = Math.round(window.innerWidth * 0.9),
         formWidth = dialogWidth - 32,
+        imdb,
 
         $content = Ox.Element(),
 
@@ -33,11 +35,11 @@ pandora.ui.metadataDialog = function(data) {
                     {},
                     Ox.Button({
                             id: 'update',
-                            title: 'Update Metadata'
+                            title: 'Update'
                         })
                         .bindEvent({
                             click: function() {
-                                Ox.print('UPDATE');
+                                updateMetadata();
                             }
                         })
                 ],
@@ -56,7 +58,6 @@ pandora.ui.metadataDialog = function(data) {
     function getMetadata(id, callback) {
         // ox.data getData()
         pandora.api.getMetadata({id: id, keys: keys}, function(results) {
-            var imdb;
             if (result.data) {
                 imdb = result.data;
                 imdb.alternativetitles = imdb.alternativetitles.map(function(value) {
@@ -91,26 +92,111 @@ pandora.ui.metadataDialog = function(data) {
                                             disabled: isEqual,
                                             value: checked[i],
                                             width: 16
+                                        })
+                                        .bindEvent({
+                                            change: function(data) {
+                                                var $otherInput = $input[key][1 - i],
+                                                    otherValue = $otherInput.optons('value');
+                                                otherValue[0] = !otherValue[0];
+                                                $otherInput.options({value: otherValue});
+                                                updateKeys = getUpdateKeys();
+                                                updateButton();
+                                            }
                                         }),
                                     Ox.Input({
-                                        value: itemKey.type == 'text' ? v.replace('/\\n/g', ' ')
+                                            value: formatValue(v, itemKey.type)
-                                            : Ox.isArray(itemKey.type) ? v.join(', ')
+                                            width: formWidth - 80
-                                            : v
+                                        })
-                                        width: formWidth - 32
+                                        .bindEvent({
+                                            submit: function() {
+                                                // on submit, revert to initial value
+                                                $input[key][i].options({value: [
+                                                    $input[key][i].options('value')[0],
+                                                    formatValue(v, itemKey.type)
+                                                ]});
+                                            }
                                         })
                                 ],
                                 separators: [
-                                    {title: 'foo', width: 16}
+                                    {title: ['Current', 'Update'][i], width: 64}
                                 ]
                             })
                             .appendTo($content);
                     });
                 });
+                updateKeys = getUpdateKeys();
+                updateButton();
+            } else {
+                // ...
             }
         });
     }
 
+    function formatValue(value, type) {
+        return type == 'text' ? value.replace('/\\n/g', ' ') // FIXME: needed?
+            : Ox.isArray(type) ? value.join(', ')
+            : value
+    }
+
+    function getUpdateKeys() {
+        return keys.filter(function(key) {
+            return $input[key][0].options('value')[0] == false;
+        });
+    }
+
     function setSize() {
+        // ...
+    }
+
+    function updateButton() {
+        that[updateKeys.length ? 'disableButton' : 'enableButton']('update');
+    }
+
+    function updateMetadata() {
+        var $confirmDialog = Ox.Dialog({
+                buttons: [
+                    Ox.Button({
+                            id: 'cancel',
+                            title: 'Don\'t Update'
+                        })
+                        .bindEvent({
+                            click: function() {
+                                $confirmDialog.close();
+                            }
+                        }),
+                    {},
+                    Ox.Button({
+                            id: 'update',
+                            title: 'Update'
+                        })
+                        .bindEvent({
+                            click: function() {
+                                Ox.print('UPDATE')
+                            }
+                        })
+                ],
+                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,
+                title: 'Update Metadata',
+                width: 304
+            }).open()
         
     }