update metadata dialog
This commit is contained in:
rolux
parent
e876d49251
commit
2d64537bec
1 changed files with 210 additions and 108 deletions
|
|
@ -3,25 +3,68 @@
|
|||
pandora.ui.metadataDialog = function(data) {
|
||||
|
||||
var keys = [
|
||||
'title', 'alternativetitles',
|
||||
'title', 'alternativeTitles',
|
||||
'director', 'country', 'year', 'language', 'runtime',
|
||||
'productioncompany',
|
||||
'producer', 'writer', 'cinematographer', 'editor', 'cast',
|
||||
'genre', 'keywords',
|
||||
// 'productionCompany',
|
||||
'producer', 'writer', 'cinematographer', 'editor', 'actor',
|
||||
'genre', 'keyword',
|
||||
'summary'
|
||||
// color, sound
|
||||
],
|
||||
updateKeys,
|
||||
dialogHeight = Math.round((window.innerHeight - 48) * 0.9),
|
||||
dialogWidth = Math.round(window.innerWidth * 0.9),
|
||||
formWidth = dialogWidth - 32,
|
||||
formWidth = getFormWidth(),
|
||||
imdb,
|
||||
|
||||
$content = Ox.Element(),
|
||||
$confirmDialog,
|
||||
|
||||
$label = {},
|
||||
$input = {},
|
||||
|
||||
that = Ox.Dialog({
|
||||
that = data.imdbId ? updateDialog() : idDialog();
|
||||
|
||||
data.imdbId && getMetadata();
|
||||
|
||||
function idDialog() {
|
||||
return Ox.Dialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
id: 'close',
|
||||
title: 'Close'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
that.close();
|
||||
}
|
||||
})
|
||||
],
|
||||
content: Ox.Element()
|
||||
.append(
|
||||
$('<img>')
|
||||
.attr({src: '/static/png/icon.png'})
|
||||
.css({position: 'absolute', left: '16px', top: '16px', width: '64px', height: '64px'})
|
||||
)
|
||||
.append(
|
||||
$('<div>')
|
||||
.css({position: 'absolute', left: '96px', top: '16px', width: '192px'})
|
||||
.html(
|
||||
'To update the metadata for this '
|
||||
+ pandora.site.itemName.singular.toLowerCase()
|
||||
+ ', please enter its IMDb ID.'
|
||||
)
|
||||
),
|
||||
fixedSize: true,
|
||||
height: 128,
|
||||
keyboard: {enter: 'close', escape: 'close'},
|
||||
removeOnClose: true,
|
||||
title: 'Update Metadata',
|
||||
width: 304
|
||||
});
|
||||
}
|
||||
|
||||
function updateDialog() {
|
||||
return Ox.Dialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
id: 'cancel',
|
||||
|
|
@ -34,19 +77,35 @@ pandora.ui.metadataDialog = function(data) {
|
|||
}),
|
||||
{},
|
||||
Ox.Button({
|
||||
disabled: true,
|
||||
id: 'update',
|
||||
title: 'Update'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
updateMetadata();
|
||||
$confirmDialog = confirmDialog().open();
|
||||
}
|
||||
})
|
||||
],
|
||||
height: dialogHeight,
|
||||
closeButton: true,
|
||||
content: $content,
|
||||
content: Ox.Element().append(
|
||||
$('<img>')
|
||||
.attr({src: Ox.UI.getImageURL('symbolLoadingAnimated')})
|
||||
.css({
|
||||
position: 'absolute',
|
||||
width: '32px',
|
||||
height: '32px',
|
||||
left: 0,
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
margin: 'auto'
|
||||
})
|
||||
),
|
||||
height: dialogHeight,
|
||||
maximizeButton: true,
|
||||
minHeight: 256,
|
||||
minWidth: 512,
|
||||
removeOnClose: true,
|
||||
title: 'Update Metadata',
|
||||
width: dialogWidth
|
||||
|
|
@ -54,106 +113,10 @@ pandora.ui.metadataDialog = function(data) {
|
|||
.bindEvent({
|
||||
resize: setSize
|
||||
});
|
||||
|
||||
function getMetadata(id, callback) {
|
||||
// ox.data getData()
|
||||
pandora.api.getMetadata({id: id, keys: keys}, function(results) {
|
||||
if (result.data) {
|
||||
imdb = result.data;
|
||||
imdb.alternativetitles = imdb.alternativetitles.map(function(value) {
|
||||
return value[0];
|
||||
});
|
||||
imdb.cast = imdb.cast.map(function(value) {
|
||||
return value.actor;
|
||||
});
|
||||
keys.forEach(function(key, index) {
|
||||
var isEqual = Ox.isEqual(data[key], imdb[key]),
|
||||
checked = isEqual ? [true, true]
|
||||
: !Ox.isEmpty(data) && Ox.isEmpty(imdb[key]) ? [true, false]
|
||||
: [false, true],
|
||||
itemKey = Ox.getObjectById(pandora.site.itemKeys, key);
|
||||
if (index > 0) {
|
||||
$('<div>')
|
||||
.css({
|
||||
height: '8px',
|
||||
width: formWidth + 'px',
|
||||
})
|
||||
.appendTo($content);
|
||||
}
|
||||
Ox.Label({
|
||||
title: itemKey.title,
|
||||
width: formWidth
|
||||
})
|
||||
.appendTo($content);
|
||||
$input[key] = [data[key], imdb[key]].map(function(v, i) {
|
||||
return Ox.InputGroup({
|
||||
inputs: [
|
||||
Ox.Checkbox({
|
||||
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: 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: ['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({
|
||||
function confirmDialog() {
|
||||
return Ox.Dialog({
|
||||
buttons: [
|
||||
Ox.Button({
|
||||
id: 'cancel',
|
||||
|
|
@ -171,7 +134,8 @@ pandora.ui.metadataDialog = function(data) {
|
|||
})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
Ox.print('UPDATE')
|
||||
$confirmDialog.close();
|
||||
updateMetadata();
|
||||
}
|
||||
})
|
||||
],
|
||||
|
|
@ -185,19 +149,157 @@ pandora.ui.metadataDialog = function(data) {
|
|||
$('<div>')
|
||||
.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.'
|
||||
)
|
||||
'Are you sure you want to update the value'
|
||||
+ (updateKeys.length == 1 ? '' : 's')
|
||||
+ ' for ' + updateKeys.map(function(key, index) {
|
||||
return (
|
||||
index == 0 ? ''
|
||||
: index < updateKeys.length - 1 ? ', '
|
||||
: ' and '
|
||||
) + getTitle(key)
|
||||
}).join('') + '?'
|
||||
)
|
||||
),
|
||||
fixedSize: true,
|
||||
height: 128,
|
||||
keyboard: {enter: 'update', escape: 'cancel'},
|
||||
removeOnClose: true,
|
||||
title: 'Update Metadata',
|
||||
width: 304
|
||||
}).open();
|
||||
});
|
||||
}
|
||||
|
||||
function getMetadata(id, callback) {
|
||||
pandora.api.getMetadata({id: data.imdbId, keys: keys}, function(result) {
|
||||
var $content = Ox.Element().css({padding: '12px', overflowY: 'auto'});
|
||||
if (result.data) {
|
||||
imdb = result.data;
|
||||
keys.forEach(function(key, index) {
|
||||
var isEqual = Ox.isEqual(data[key], imdb[key]),
|
||||
checked = isEqual ? [true, true]
|
||||
: !Ox.isUndefined(data) && Ox.isUndefined(imdb[key]) ? [true, false]
|
||||
: [false, true];
|
||||
if (index > 0) {
|
||||
$('<div>')
|
||||
.css({
|
||||
height: '8px',
|
||||
width: formWidth + 'px',
|
||||
})
|
||||
.appendTo($content);
|
||||
}
|
||||
$label[key] = Ox.Label({
|
||||
title: getTitle(key),
|
||||
width: formWidth
|
||||
})
|
||||
.css({display: 'inline-block', margin: '4px'})
|
||||
.appendTo($content);
|
||||
$input[key] = [data[key], imdb[key]].map(function(v, i) {
|
||||
return Ox.InputGroup({
|
||||
inputs: [
|
||||
Ox.Checkbox({
|
||||
disabled: isEqual,
|
||||
value: checked[i],
|
||||
width: 16
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
var $otherInput = $input[key][1 - i],
|
||||
otherValue = $otherInput.options('value');
|
||||
otherValue[0] = !otherValue[0];
|
||||
$otherInput.options({value: otherValue});
|
||||
updateKeys = getUpdateKeys();
|
||||
updateButton();
|
||||
}
|
||||
}),
|
||||
Ox.Input({
|
||||
value: formatValue(key, v),
|
||||
width: formWidth - 80
|
||||
})
|
||||
.bindEvent({
|
||||
submit: function() {
|
||||
// on submit, revert to initial value
|
||||
$input[key][i].options({value: [
|
||||
$input[key][i].options('value')[0],
|
||||
formatValue(key, v)
|
||||
]});
|
||||
}
|
||||
})
|
||||
],
|
||||
separators: [
|
||||
{title: ['Current', 'Update'][i], width: 64}
|
||||
]
|
||||
})
|
||||
.css({display: 'inline-block', margin: '4px'})
|
||||
.appendTo($content);
|
||||
});
|
||||
});
|
||||
that.options({content: $content})
|
||||
updateKeys = getUpdateKeys();
|
||||
updateButton();
|
||||
} else {
|
||||
// ...
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function formatValue(key, value) {
|
||||
return key == 'alternativeTitles' ? value.map(function(v) {
|
||||
return v[0];
|
||||
}).join('; ')
|
||||
: Ox.isArray(
|
||||
Ox.getObjectById(pandora.site.itemKeys, key).type
|
||||
) ? value.join(', ')
|
||||
: value;
|
||||
}
|
||||
|
||||
function getFormWidth() {
|
||||
return dialogWidth - 32 - Ox.UI.SCROLLBAR_SIZE;
|
||||
}
|
||||
|
||||
function getTitle(key) {
|
||||
return key == 'alternativeTitles' ? 'Alternative Titles'
|
||||
: Ox.getObjectById(pandora.site.itemKeys, key).title;
|
||||
}
|
||||
|
||||
function getUpdateKeys() {
|
||||
return keys.filter(function(key) {
|
||||
return $input[key][0].options('value')[0] === false;
|
||||
});
|
||||
}
|
||||
|
||||
function parseValue(value, type) {
|
||||
return Ox.isArray(type) ? ', '.split(value) : value;
|
||||
}
|
||||
|
||||
function setSize(data) {
|
||||
dialogHeight = data.height;
|
||||
dialogWidth = data.width;
|
||||
formWidth = getFormWidth();
|
||||
Ox.forEach($input, function($inputs, key) {
|
||||
$label[key].options({width: formWidth});
|
||||
$inputs.forEach(function($element) {
|
||||
$element.options('inputs')[1].options({width: formWidth - 80});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function updateButton() {
|
||||
that[updateKeys.length ? 'enableButton' : 'disableButton']('update');
|
||||
}
|
||||
|
||||
function updateMetadata() {
|
||||
var edit = {id: data.id};
|
||||
updateKeys.forEach(function(key) {
|
||||
edit[key] = imdb[key];
|
||||
});
|
||||
that.disableButtons();
|
||||
pandora.api.edit(edit, function(result) {
|
||||
that.close();
|
||||
pandora.updateItemContext();
|
||||
pandora.$ui.contentPanel.replaceElement(1,
|
||||
pandora.$ui.item = pandora.ui.item()
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
return that;
|
||||
|
|
|
|||
Loading…
Reference in a new issue