update indiancinema info view, id dialog and metadata dialog

This commit is contained in:
rolux 2013-02-28 09:57:03 +00:00
parent d10c7d1acb
commit 71209541ed
3 changed files with 103 additions and 80 deletions

View file

@ -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,

View file

@ -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);
}

View file

@ -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);
});
});