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) {
|
||||
|
||||
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,33 +100,50 @@ 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);
|
||||
});
|
||||
$('<div>')
|
||||
.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) {
|
||||
(
|
||||
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)};
|
||||
});
|
||||
})
|
||||
);
|
||||
$checkboxGroup = Ox.CheckboxGroup({
|
||||
checkboxes: checkboxes,
|
||||
type: 'list',
|
||||
width: formWidth,
|
||||
value: !data.imdbId ? 'none' : data.imdbId
|
||||
})
|
||||
.css({display: 'inline-block', margin: '4px'})
|
||||
.css({display: 'inline-block', margin: '3px'})
|
||||
.bindEvent({
|
||||
change: updateButton
|
||||
})
|
||||
|
@ -130,14 +151,14 @@ pandora.ui.idDialog = function(data) {
|
|||
checkboxes.forEach(function(checkbox, index) {
|
||||
if (checkbox.id != 'none') {
|
||||
Ox.Button({
|
||||
title: 'arrowLeft',
|
||||
title: 'arrowRight',
|
||||
tooltip: 'View on IMDb',
|
||||
type: 'image'
|
||||
})
|
||||
.css({
|
||||
position: 'absolute',
|
||||
top: 88 + index * 24 + 'px',
|
||||
right: '16px'
|
||||
top: 96 + index * 24 + 'px',
|
||||
right: 16 + Ox.UI.SCROLLBAR_SIZE + 'px'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
|
@ -152,13 +173,14 @@ pandora.ui.idDialog = function(data) {
|
|||
})
|
||||
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,
|
||||
|
|
|
@ -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 = $('<span>')
|
||||
$imdb = Ox.Element('<span>')
|
||||
.appendTo($element);
|
||||
pandora.createLinks($imdb);
|
||||
}
|
||||
|
|
|
@ -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) {
|
||||
$('<div>')
|
||||
.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);
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue