update indiancinema info view, id dialog and metadata dialog
This commit is contained in:
parent
d10c7d1acb
commit
71209541ed
3 changed files with 103 additions and 80 deletions
|
@ -2,7 +2,11 @@
|
||||||
|
|
||||||
pandora.ui.idDialog = function(data) {
|
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),
|
dialogWidth = Math.round(window.innerWidth * 0.9),
|
||||||
formWidth = getFormWidth(),
|
formWidth = getFormWidth(),
|
||||||
|
|
||||||
|
@ -33,13 +37,13 @@ pandora.ui.idDialog = function(data) {
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
click: function() {
|
click: function() {
|
||||||
that.close();
|
that.close();
|
||||||
pandora.$ui.metadataDialog = pandora.ui.metadataDialog(data).open();
|
pandora.$ui.metadataDialog = pandora.ui.metadataDialog(originalData).open();
|
||||||
}
|
}
|
||||||
})
|
}),
|
||||||
{},
|
{},
|
||||||
Ox.Button({
|
Ox.Button({
|
||||||
id: 'cancel',
|
id: 'cancel',
|
||||||
title: 'Don\'t Update'
|
title: 'Don\'t Update IMDb ID'
|
||||||
})
|
})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
click: function() {
|
click: function() {
|
||||||
|
@ -49,7 +53,7 @@ pandora.ui.idDialog = function(data) {
|
||||||
Ox.Button({
|
Ox.Button({
|
||||||
disabled: true,
|
disabled: true,
|
||||||
id: 'update',
|
id: 'update',
|
||||||
title: 'Update'
|
title: 'Update IMDb ID'
|
||||||
})
|
})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
click: updateId
|
click: updateId
|
||||||
|
@ -79,13 +83,13 @@ pandora.ui.idDialog = function(data) {
|
||||||
var get = {};
|
var get = {};
|
||||||
['title', 'director', 'year'].forEach(function(key) {
|
['title', 'director', 'year'].forEach(function(key) {
|
||||||
if (!Ox.isEmpty(data[key])) {
|
if (!Ox.isEmpty(data[key])) {
|
||||||
get[key] = data.key;
|
get[key] = data[key];
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
pandora.api.getIds(get, function(result) {
|
pandora.api.getIds(get, function(result) {
|
||||||
var checkboxes,
|
var checkboxes = [],
|
||||||
$content = Ox.Element()
|
$content = Ox.Element()
|
||||||
.css({padding: '12px', overflowY: 'auto'});
|
.css({padding: '13px', overflowY: 'auto'});
|
||||||
if (result.data.items) {
|
if (result.data.items) {
|
||||||
['title', 'director', 'year'].forEach(function(key) {
|
['title', 'director', 'year'].forEach(function(key) {
|
||||||
Ox.Input({
|
Ox.Input({
|
||||||
|
@ -96,33 +100,50 @@ pandora.ui.idDialog = function(data) {
|
||||||
: data[key],
|
: data[key],
|
||||||
width: formWidth
|
width: formWidth
|
||||||
})
|
})
|
||||||
.css({display: 'inline-block', margin: '4px'})
|
.css({display: 'inline-block', margin: '3px'})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
change: function(data) {
|
change: function(data_) {
|
||||||
data[key] = data.value;
|
data[key] = key == 'director'
|
||||||
|
? data_.value.split(', ')
|
||||||
|
: data_.value;
|
||||||
|
that.options({content: $loading});
|
||||||
getIds();
|
getIds();
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.appendTo($content);
|
.appendTo($content);
|
||||||
});
|
});
|
||||||
|
$('<div>')
|
||||||
|
.css({width: '1px', height: '8px'})
|
||||||
|
.appendTo($content);
|
||||||
if (!data.imdbId) {
|
if (!data.imdbId) {
|
||||||
checkboxes.push(
|
checkboxes.push(
|
||||||
{id: 'none', title: getTitle(data)}
|
{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) {
|
(
|
||||||
|
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])}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
checkboxes = checkboxes.concat(
|
||||||
|
result.data.items.map(function(item) {
|
||||||
return {id: item.id, title: getTitle(item)};
|
return {id: item.id, title: getTitle(item)};
|
||||||
});
|
})
|
||||||
|
);
|
||||||
$checkboxGroup = Ox.CheckboxGroup({
|
$checkboxGroup = Ox.CheckboxGroup({
|
||||||
checkboxes: checkboxes,
|
checkboxes: checkboxes,
|
||||||
|
type: 'list',
|
||||||
width: formWidth,
|
width: formWidth,
|
||||||
value: !data.imdbId ? 'none' : data.imdbId
|
value: !data.imdbId ? 'none' : data.imdbId
|
||||||
})
|
})
|
||||||
.css({display: 'inline-block', margin: '4px'})
|
.css({display: 'inline-block', margin: '3px'})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
change: updateButton
|
change: updateButton
|
||||||
})
|
})
|
||||||
|
@ -130,14 +151,14 @@ pandora.ui.idDialog = function(data) {
|
||||||
checkboxes.forEach(function(checkbox, index) {
|
checkboxes.forEach(function(checkbox, index) {
|
||||||
if (checkbox.id != 'none') {
|
if (checkbox.id != 'none') {
|
||||||
Ox.Button({
|
Ox.Button({
|
||||||
title: 'arrowLeft',
|
title: 'arrowRight',
|
||||||
tooltip: 'View on IMDb',
|
tooltip: 'View on IMDb',
|
||||||
type: 'image'
|
type: 'image'
|
||||||
})
|
})
|
||||||
.css({
|
.css({
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: 88 + index * 24 + 'px',
|
top: 96 + index * 24 + 'px',
|
||||||
right: '16px'
|
right: 16 + Ox.UI.SCROLLBAR_SIZE + 'px'
|
||||||
})
|
})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
click: function() {
|
click: function() {
|
||||||
|
@ -152,13 +173,14 @@ pandora.ui.idDialog = function(data) {
|
||||||
})
|
})
|
||||||
that.options({content: $content});
|
that.options({content: $content});
|
||||||
updateButton();
|
updateButton();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function getTitle(data) {
|
function getTitle(data) {
|
||||||
return Ox.filter([
|
return Ox.filter([
|
||||||
data.imdbId,
|
data.imdbId || data.id,
|
||||||
data.title + (data.originalTitle ? ' (' + data.originalTitle + ')' : ''),
|
data.title + (data.originalTitle ? ' (' + data.originalTitle + ')' : ''),
|
||||||
data.director ? data.director.join(', ') : '',
|
data.director ? data.director.join(', ') : '',
|
||||||
data.year
|
data.year
|
||||||
|
@ -174,14 +196,18 @@ pandora.ui.idDialog = function(data) {
|
||||||
|
|
||||||
function updateButton() {
|
function updateButton() {
|
||||||
that[
|
that[
|
||||||
$checkboxGroup.options('value') == data.imdbId
|
$checkboxGroup.options('value') == data.imdbId || (
|
||||||
? 'disableButton'
|
$checkboxGroup.options('value') == 'none' && !data.imdbId
|
||||||
: 'enableButton'
|
) ? 'disableButton' : 'enableButton'
|
||||||
]('update');
|
]('update');
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateId() {
|
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();
|
that.close();
|
||||||
pandora.updateItemContext();
|
pandora.updateItemContext();
|
||||||
pandora.$ui.contentPanel.replaceElement(1,
|
pandora.$ui.contentPanel.replaceElement(1,
|
||||||
|
|
|
@ -276,8 +276,7 @@ pandora.ui.infoView = function(data) {
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
id: 'imdb',
|
id: 'imdb',
|
||||||
title: 'Update IMDb ID...',
|
title: 'Update IMDb ID...'
|
||||||
disabled: true
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'metadata',
|
id: 'metadata',
|
||||||
|
@ -290,17 +289,17 @@ pandora.ui.infoView = function(data) {
|
||||||
disabled: !canRemove
|
disabled: !canRemove
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
title: 'Edit...'
|
title: 'Edit...',
|
||||||
width: 128
|
width: 128
|
||||||
})
|
})
|
||||||
.css({marginBottom: '4px'})
|
.css({marginBottom: '4px'})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
click: function(data) {
|
click: function(data_) {
|
||||||
if (data.id == 'imdb') {
|
if (data_.id == 'imdb') {
|
||||||
pandora.$ui.idDialog = pandora.ui.idDialog(Ox.clone(data, true)).open();
|
pandora.$ui.idDialog = pandora.ui.idDialog(data).open();
|
||||||
} else if (data.id == 'metadata') {
|
} else if (data_.id == 'metadata') {
|
||||||
pandora.$ui.metadataDialog = pandora.ui.metadataDialog(Ox.clone(data, true)).open();
|
pandora.$ui.metadataDialog = pandora.ui.metadataDialog(data).open();
|
||||||
} else if (data.id == 'delete') {
|
} else if (data_.id == 'delete') {
|
||||||
pandora.$ui.deleteItemDialog = pandora.ui.deleteItemDialog(data).open();
|
pandora.$ui.deleteItemDialog = pandora.ui.deleteItemDialog(data).open();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -725,7 +724,7 @@ pandora.ui.infoView = function(data) {
|
||||||
[data.runtime ? 'show' : 'hide']()
|
[data.runtime ? 'show' : 'hide']()
|
||||||
.appendTo($element);
|
.appendTo($element);
|
||||||
} else if (key == 'imdbId') {
|
} else if (key == 'imdbId') {
|
||||||
$imdb = $('<span>')
|
$imdb = Ox.Element('<span>')
|
||||||
.appendTo($element);
|
.appendTo($element);
|
||||||
pandora.createLinks($imdb);
|
pandora.createLinks($imdb);
|
||||||
}
|
}
|
||||||
|
|
|
@ -92,7 +92,6 @@ pandora.ui.metadataDialog = function(data) {
|
||||||
return Ox.Dialog({
|
return Ox.Dialog({
|
||||||
buttons: [
|
buttons: [
|
||||||
Ox.Button({
|
Ox.Button({
|
||||||
distabled: true,
|
|
||||||
id: 'switch',
|
id: 'switch',
|
||||||
title: 'Update IMDb Id...'
|
title: 'Update IMDb Id...'
|
||||||
})
|
})
|
||||||
|
@ -101,11 +100,11 @@ pandora.ui.metadataDialog = function(data) {
|
||||||
that.close();
|
that.close();
|
||||||
pandora.$ui.idDialog = pandora.ui.idDialog(data).open();
|
pandora.$ui.idDialog = pandora.ui.idDialog(data).open();
|
||||||
}
|
}
|
||||||
})
|
}),
|
||||||
{},
|
{},
|
||||||
Ox.Button({
|
Ox.Button({
|
||||||
id: 'cancel',
|
id: 'cancel',
|
||||||
title: 'Don\'t Update'
|
title: 'Don\'t Update Metadata'
|
||||||
})
|
})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
click: function() {
|
click: function() {
|
||||||
|
@ -115,7 +114,7 @@ pandora.ui.metadataDialog = function(data) {
|
||||||
Ox.Button({
|
Ox.Button({
|
||||||
disabled: true,
|
disabled: true,
|
||||||
id: 'update',
|
id: 'update',
|
||||||
title: 'Update...'
|
title: 'Update Metadata...'
|
||||||
})
|
})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
click: function() {
|
click: function() {
|
||||||
|
@ -211,7 +210,7 @@ pandora.ui.metadataDialog = function(data) {
|
||||||
pandora.api.getMetadata({id: data.imdbId, keys: keys.concat(['originalTitle'])}, function(result) {
|
pandora.api.getMetadata({id: data.imdbId, keys: keys.concat(['originalTitle'])}, function(result) {
|
||||||
var $bar = Ox.Bar({size: 24}),
|
var $bar = Ox.Bar({size: 24}),
|
||||||
$data = Ox.Element()
|
$data = Ox.Element()
|
||||||
.css({padding: '12px', overflowY: 'auto'}),
|
.css({padding: '13px', overflowY: 'auto'}),
|
||||||
$content = Ox.SplitPanel({
|
$content = Ox.SplitPanel({
|
||||||
elements: [
|
elements: [
|
||||||
{element: $bar, size: 24},
|
{element: $bar, size: 24},
|
||||||
|
@ -254,17 +253,14 @@ pandora.ui.metadataDialog = function(data) {
|
||||||
: [true, false];
|
: [true, false];
|
||||||
if (index > 0) {
|
if (index > 0) {
|
||||||
$('<div>')
|
$('<div>')
|
||||||
.css({
|
.css({width: '1px', height: '8px'})
|
||||||
height: '8px',
|
|
||||||
width: formWidth + 'px',
|
|
||||||
})
|
|
||||||
.appendTo($data);
|
.appendTo($data);
|
||||||
}
|
}
|
||||||
$label[key] = Ox.Label({
|
$label[key] = Ox.Label({
|
||||||
title: getTitle(key),
|
title: getTitle(key),
|
||||||
width: formWidth
|
width: formWidth
|
||||||
})
|
})
|
||||||
.css({display: 'inline-block', margin: '4px'})
|
.css({display: 'inline-block', margin: '3px 3px 5px 3px'})
|
||||||
.appendTo($data);
|
.appendTo($data);
|
||||||
$input[key] = [data[key], imdb[key]].map(function(v, i) {
|
$input[key] = [data[key], imdb[key]].map(function(v, i) {
|
||||||
return Ox.InputGroup({
|
return Ox.InputGroup({
|
||||||
|
@ -280,12 +276,14 @@ pandora.ui.metadataDialog = function(data) {
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
Ox.Input({
|
Ox.Input({
|
||||||
|
disabled: true,
|
||||||
value: formatValue(key, v),
|
value: formatValue(key, v),
|
||||||
width: formWidth - 80
|
width: formWidth - 80
|
||||||
})
|
})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
submit: function() {
|
change: function() {
|
||||||
// on submit, revert to initial value
|
// on change, revert to initial value
|
||||||
|
// (if above you remove disabled: true)
|
||||||
$input[key][i].options({value: [
|
$input[key][i].options({value: [
|
||||||
$input[key][i].options('value')[0],
|
$input[key][i].options('value')[0],
|
||||||
formatValue(key, v)
|
formatValue(key, v)
|
||||||
|
@ -297,7 +295,7 @@ pandora.ui.metadataDialog = function(data) {
|
||||||
{title: ['Current', 'Update'][i], width: 64}
|
{title: ['Current', 'Update'][i], width: 64}
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
.css({display: 'inline-block', margin: '4px'})
|
.css({display: 'inline-block', margin: '3px'})
|
||||||
.appendTo($data);
|
.appendTo($data);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue