diff --git a/static/js/pandora/idDialog.js b/static/js/pandora/idDialog.js index 28512e26..02aa2b57 100644 --- a/static/js/pandora/idDialog.js +++ b/static/js/pandora/idDialog.js @@ -2,7 +2,11 @@ pandora.ui.idDialog = function(data) { - var dialogHeight = Math.round((window.innerHeight - 48) * 0.9), + data = Ox.clone(data, true); + + var originalData = Ox.clone(data, true), + + dialogHeight = Math.round((window.innerHeight - 48) * 0.9), dialogWidth = Math.round(window.innerWidth * 0.9), formWidth = getFormWidth(), @@ -33,13 +37,13 @@ pandora.ui.idDialog = function(data) { .bindEvent({ click: function() { that.close(); - pandora.$ui.metadataDialog = pandora.ui.metadataDialog(data).open(); + pandora.$ui.metadataDialog = pandora.ui.metadataDialog(originalData).open(); } - }) + }), {}, Ox.Button({ id: 'cancel', - title: 'Don\'t Update' + title: 'Don\'t Update IMDb ID' }) .bindEvent({ click: function() { @@ -49,7 +53,7 @@ pandora.ui.idDialog = function(data) { Ox.Button({ disabled: true, id: 'update', - title: 'Update' + title: 'Update IMDb ID' }) .bindEvent({ click: updateId @@ -79,13 +83,13 @@ pandora.ui.idDialog = function(data) { var get = {}; ['title', 'director', 'year'].forEach(function(key) { if (!Ox.isEmpty(data[key])) { - get[key] = data.key; + get[key] = data[key]; } }); pandora.api.getIds(get, function(result) { - var checkboxes, + var checkboxes = [], $content = Ox.Element() - .css({padding: '12px', overflowY: 'auto'}); + .css({padding: '13px', overflowY: 'auto'}); if (result.data.items) { ['title', 'director', 'year'].forEach(function(key) { Ox.Input({ @@ -96,69 +100,87 @@ pandora.ui.idDialog = function(data) { : data[key], width: formWidth }) - .css({display: 'inline-block', margin: '4px'}) + .css({display: 'inline-block', margin: '3px'}) .bindEvent({ - change: function(data) { - data[key] = data.value; + change: function(data_) { + data[key] = key == 'director' + ? data_.value.split(', ') + : data_.value; + that.options({content: $loading}); getIds(); } }) .appendTo($content); }); + $('
') + .css({width: '1px', height: '8px'}) + .appendTo($content); if (!data.imdbId) { checkboxes.push( {id: 'none', title: getTitle(data)} ); - } else if (Ox.getIndexById(result.data.items, data.imdbId) == -1) { - checkboxes.push( - {id: data.imdbId, title: getTitle(data)} - ); } - checkboxes = checkboxes.concat(result.data.items.map(item) { - return {id: item.id, title: getTitle(item)}; - }); - $checkboxGroup = Ox.CheckboxGroup({ - checkboxes: checkboxes, - width: formWidth, - value: !data.imdbId ? 'none' : data.imdbId - }) - .css({display: 'inline-block', margin: '4px'}) - .bindEvent({ - change: updateButton - }) - .appendTo($content); - checkboxes.forEach(function(checkbox, index) { - if (checkbox.id != 'none') { - Ox.Button({ - title: 'arrowLeft', - tooltip: 'View on IMDb', - type: 'image' - }) - .css({ - position: 'absolute', - top: 88 + index * 24 + 'px', - right: '16px' - }) - .bindEvent({ - click: function() { - window.open('/url=' + encodeURIComponent( - 'http://imdb.com/title/tt' - + checkbox.id + '/combined' - ), '_blank'); - } - }) - .appendTo($content); + ( + data.imdbId + && Ox.getIndexById(result.data.items, data.imdbId) == -1 + ? pandora.api.findId + : Ox.noop + )({id: data.imdbId}, function(result_) { + result_ && Ox.print(result_, '...', result_ && result_.data.items) + if (result_ && result_.data.items) { + checkboxes.push( + {id: data.imdbId, title: getTitle(result_.data.items[0])} + ) } - }) - that.options({content: $content}); - updateButton(); + checkboxes = checkboxes.concat( + result.data.items.map(function(item) { + return {id: item.id, title: getTitle(item)}; + }) + ); + $checkboxGroup = Ox.CheckboxGroup({ + checkboxes: checkboxes, + type: 'list', + width: formWidth, + value: !data.imdbId ? 'none' : data.imdbId + }) + .css({display: 'inline-block', margin: '3px'}) + .bindEvent({ + change: updateButton + }) + .appendTo($content); + checkboxes.forEach(function(checkbox, index) { + if (checkbox.id != 'none') { + Ox.Button({ + title: 'arrowRight', + tooltip: 'View on IMDb', + type: 'image' + }) + .css({ + position: 'absolute', + top: 96 + index * 24 + 'px', + right: 16 + Ox.UI.SCROLLBAR_SIZE + 'px' + }) + .bindEvent({ + click: function() { + window.open('/url=' + encodeURIComponent( + 'http://imdb.com/title/tt' + + checkbox.id + '/combined' + ), '_blank'); + } + }) + .appendTo($content); + } + }) + that.options({content: $content}); + updateButton(); + }); } }); } function getTitle(data) { return Ox.filter([ - data.imdbId, + data.imdbId || data.id, data.title + (data.originalTitle ? ' (' + data.originalTitle + ')' : ''), data.director ? data.director.join(', ') : '', data.year @@ -174,14 +196,18 @@ pandora.ui.idDialog = function(data) { function updateButton() { that[ - $checkboxGroup.options('value') == data.imdbId - ? 'disableButton' - : 'enableButton' + $checkboxGroup.options('value') == data.imdbId || ( + $checkboxGroup.options('value') == 'none' && !data.imdbId + ) ? 'disableButton' : 'enableButton' ]('update'); } function updateId() { - pandora.api.edit({id: data.id, imdbId: 'foo'}, function(result) { + that.options({content: $loading}).disableButtons(); + pandora.api.edit({ + id: data.id, + imdbId: $checkboxGroup.options('value') + }, function(result) { that.close(); pandora.updateItemContext(); pandora.$ui.contentPanel.replaceElement(1, diff --git a/static/js/pandora/infoView.indiancinema.js b/static/js/pandora/infoView.indiancinema.js index 3b42b77f..ce9b92b3 100644 --- a/static/js/pandora/infoView.indiancinema.js +++ b/static/js/pandora/infoView.indiancinema.js @@ -276,8 +276,7 @@ pandora.ui.infoView = function(data) { items: [ { id: 'imdb', - title: 'Update IMDb ID...', - disabled: true + title: 'Update IMDb ID...' }, { id: 'metadata', @@ -290,17 +289,17 @@ pandora.ui.infoView = function(data) { disabled: !canRemove } ], - title: 'Edit...' + title: 'Edit...', width: 128 }) .css({marginBottom: '4px'}) .bindEvent({ - click: function(data) { - if (data.id == 'imdb') { - pandora.$ui.idDialog = pandora.ui.idDialog(Ox.clone(data, true)).open(); - } else if (data.id == 'metadata') { - pandora.$ui.metadataDialog = pandora.ui.metadataDialog(Ox.clone(data, true)).open(); - } else if (data.id == 'delete') { + click: function(data_) { + if (data_.id == 'imdb') { + pandora.$ui.idDialog = pandora.ui.idDialog(data).open(); + } else if (data_.id == 'metadata') { + pandora.$ui.metadataDialog = pandora.ui.metadataDialog(data).open(); + } else if (data_.id == 'delete') { pandora.$ui.deleteItemDialog = pandora.ui.deleteItemDialog(data).open(); } } @@ -725,7 +724,7 @@ pandora.ui.infoView = function(data) { [data.runtime ? 'show' : 'hide']() .appendTo($element); } else if (key == 'imdbId') { - $imdb = $('') + $imdb = Ox.Element('') .appendTo($element); pandora.createLinks($imdb); } diff --git a/static/js/pandora/metadataDialog.js b/static/js/pandora/metadataDialog.js index fb2e2537..3aef0c0c 100644 --- a/static/js/pandora/metadataDialog.js +++ b/static/js/pandora/metadataDialog.js @@ -92,7 +92,6 @@ pandora.ui.metadataDialog = function(data) { return Ox.Dialog({ buttons: [ Ox.Button({ - distabled: true, id: 'switch', title: 'Update IMDb Id...' }) @@ -101,11 +100,11 @@ pandora.ui.metadataDialog = function(data) { that.close(); pandora.$ui.idDialog = pandora.ui.idDialog(data).open(); } - }) + }), {}, Ox.Button({ id: 'cancel', - title: 'Don\'t Update' + title: 'Don\'t Update Metadata' }) .bindEvent({ click: function() { @@ -115,7 +114,7 @@ pandora.ui.metadataDialog = function(data) { Ox.Button({ disabled: true, id: 'update', - title: 'Update...' + title: 'Update Metadata...' }) .bindEvent({ click: function() { @@ -211,7 +210,7 @@ pandora.ui.metadataDialog = function(data) { pandora.api.getMetadata({id: data.imdbId, keys: keys.concat(['originalTitle'])}, function(result) { var $bar = Ox.Bar({size: 24}), $data = Ox.Element() - .css({padding: '12px', overflowY: 'auto'}), + .css({padding: '13px', overflowY: 'auto'}), $content = Ox.SplitPanel({ elements: [ {element: $bar, size: 24}, @@ -254,17 +253,14 @@ pandora.ui.metadataDialog = function(data) { : [true, false]; if (index > 0) { $('
') - .css({ - height: '8px', - width: formWidth + 'px', - }) + .css({width: '1px', height: '8px'}) .appendTo($data); } $label[key] = Ox.Label({ title: getTitle(key), width: formWidth }) - .css({display: 'inline-block', margin: '4px'}) + .css({display: 'inline-block', margin: '3px 3px 5px 3px'}) .appendTo($data); $input[key] = [data[key], imdb[key]].map(function(v, i) { return Ox.InputGroup({ @@ -280,12 +276,14 @@ pandora.ui.metadataDialog = function(data) { } }), Ox.Input({ + disabled: true, value: formatValue(key, v), width: formWidth - 80 }) .bindEvent({ - submit: function() { - // on submit, revert to initial value + change: function() { + // on change, revert to initial value + // (if above you remove disabled: true) $input[key][i].options({value: [ $input[key][i].options('value')[0], formatValue(key, v) @@ -297,7 +295,7 @@ pandora.ui.metadataDialog = function(data) { {title: ['Current', 'Update'][i], width: 64} ] }) - .css({display: 'inline-block', margin: '4px'}) + .css({display: 'inline-block', margin: '3px'}) .appendTo($data); }); });