diff --git a/static/js/pandora/insertEmbedDialog.js b/static/js/pandora/insertEmbedDialog.js index d12825f44..1133b320b 100644 --- a/static/js/pandora/insertEmbedDialog.js +++ b/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, diff --git a/static/js/pandora/metadataDialog.js b/static/js/pandora/metadataDialog.js index 495df6117..860d016d4 100644 --- a/static/js/pandora/metadataDialog.js +++ b/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) { @@ -88,29 +89,114 @@ pandora.ui.metadataDialog = function(data) { return Ox.InputGroup({ inputs: [ Ox.Checkbox({ - disabled: isEqual, - value: checked[i], - width: 16 - }), + 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', ' ') - : Ox.isArray(itemKey.type) ? v.join(', ') - : v - width: formWidth - 32 - }) + value: formatValue(v, itemKey.type) + width: formWidth - 80 + }) + .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( + $('') + .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, + title: 'Update Metadata', + width: 304 + }).open() }