cleanup after using EditableContent

This commit is contained in:
j 2013-02-25 18:21:11 +00:00
parent ae752a9dec
commit 55e08b3795

View file

@ -8,7 +8,6 @@ pandora.ui.infoView = function(data) {
var ui = pandora.user.ui, var ui = pandora.user.ui,
canEdit = pandora.site.capabilities.canEditMetadata[pandora.user.level], canEdit = pandora.site.capabilities.canEditMetadata[pandora.user.level],
css = { css = {
display: 'inline-block',
marginTop: '4px', marginTop: '4px',
textAlign: 'justify', textAlign: 'justify',
MozUserSelect: 'text', MozUserSelect: 'text',
@ -50,6 +49,8 @@ pandora.ui.infoView = function(data) {
}) })
.appendTo($info), .appendTo($info),
$div,
$icon = Ox.Element({ $icon = Ox.Element({
element: '<img>', element: '<img>',
tooltip: canEdit ? ( tooltip: canEdit ? (
@ -138,7 +139,10 @@ pandora.ui.infoView = function(data) {
$deleteButton, $deleteButton,
$browserImages = []; $browserImages = [],
nameKeys = ['actor', 'director', 'writer', 'producer', 'cinematographer', 'editor'],
listKeys = ['country', 'language', 'genre', 'keyword'] + nameKeys;
//pandora.createLinks($text); // FIXME: this is wrong for editables that already have clickLink //pandora.createLinks($text); // FIXME: this is wrong for editables that already have clickLink
@ -149,7 +153,7 @@ pandora.ui.infoView = function(data) {
marginTop: '-2px' marginTop: '-2px'
}) })
.append( .append(
Ox.Editable({ Ox.EditableContent({
clickLink: pandora.clickLink, clickLink: pandora.clickLink,
editable: canEdit, editable: canEdit,
format: function(value) { format: function(value) {
@ -159,7 +163,6 @@ pandora.ui.infoView = function(data) {
value: data.title value: data.title
}) })
.css({ .css({
display: 'inline-block',
marginBottom: '-3px', marginBottom: '-3px',
fontWeight: 'bold', fontWeight: 'bold',
fontSize: '13px', fontSize: '13px',
@ -183,7 +186,7 @@ pandora.ui.infoView = function(data) {
marginTop: '2px' marginTop: '2px'
}) })
.append( .append(
Ox.Editable({ Ox.EditableContent({
clickLink: pandora.clickLink, clickLink: pandora.clickLink,
editable: canEdit, editable: canEdit,
format: function(value) { format: function(value) {
@ -194,7 +197,6 @@ pandora.ui.infoView = function(data) {
value: data.director ? data.director.join(', ') : '' value: data.director ? data.director.join(', ') : ''
}) })
.css({ .css({
display: 'inline-block',
marginBottom: '-3px', marginBottom: '-3px',
fontWeight: 'bold', fontWeight: 'bold',
fontSize: '13px', fontSize: '13px',
@ -211,136 +213,25 @@ pandora.ui.infoView = function(data) {
} }
// Country, Year, Language, Runtime ---------------------------------------- // Country, Year, Language, Runtime ----------------------------------------
$div = getBlock(['country', 'year', 'language', 'runtime'])
if (canEdit) { $div && $div
var $div = $('<div>')
.css(css)
.css({marginTop: '16px'}) .css({marginTop: '16px'})
.appendTo($text); .appendTo($text);
['country', 'year', 'language', 'runtime'].forEach(function(key, i) {
i && $('<span>').html(';&nbsp;').appendTo($div);
$('<span>')
.html(formatKey(key).replace('</span>', '&nbsp;</span>'))
.appendTo($div);
Ox.EditableContent({
clickLink: pandora.clickLink,
format: function(value) {
return key == 'year' ? value
: key == 'runtime' ? Math.round(data[key] / 60) + ' min'
: formatValue(value.split(', '), key);
},
placeholder: formatLight('unknown'),
tooltip: 'Doubleclick to edit',
value: key == 'country' || key == 'language'
? (data[key] ? data[key].join(', ') : [''])
: data[key] || ''
})
.bindEvent({
submit: function(event) {
editMetadata(key, event.value);
}
})
.appendTo($div);
});
} else if (data.country || data.year || data.language || data.runtime) {
var html = [];
['country', 'year', 'language', 'runtime'].forEach(function(key) {
if (data[key]) {
html.push(
formatKey(key) + (
key != 'runtime' ? formatValue(data[key], key)
: data[key] < 60 ? Math.round(data[key]) + '&nbsp;sec'
: Math.round(data[key] / 60) + '&nbsp;min'
)
)
}
});
$('<div>').css(css).html(html.join('; ')).appendTo($text);
}
// Alternative Titles ------------------------------------------------------ // Alternative Titles ------------------------------------------------------
$div = getBlock(['alternativeTitles'])
data.alternativeTitles && $('<div>') $div && $div
.css(css)
.html(
formatKey('Alternative Title' + (data.alternativeTitles.length == 1 ? '' : 's'))
+ data.alternativeTitles.map(function(value) {
return value[0] + (Ox.isArray(value[1]) ? ' '
+ formatLight('(' + value[1].join(', ') + ')') : '');
}).join(', ')
)
.appendTo($text); .appendTo($text);
// FIXME: we will want to check for data.seriesId here $div = getBlock(['writer', 'producer', 'cinematographer', 'editor'])
if (canEdit && data.seriesTitle) { $div && $div.appendTo($text);
var $div = $('<div>')
.css(Ox.extend(css, {marginTop: '20px'})) // FIXME: just a guess
.appendTo($text);
['episodeDirector', 'seriesYear'].forEach(function(key, i) {
i && $('<div>').css({float: 'left'}).html(';&nbsp;').appendTo($div);
$('<div>')
.css({float: 'left'})
.html(formatKey(Ox.toUnderscores(key).replace(/_/g, ' ')).replace('</span>', '&nbsp;</span>'))
.appendTo($div);
Ox.Editable({
clickLink: pandora.clickLink,
format: function(value) {
return formatValue(value.split(', '), key)
},
placeholder: formatLight('unknown'),
tooltip: 'Doubleclick to edit',
value: key == 'episodeDirector'
? (data[key] ? data[key].join(', ') : [''])
: data[key] || ''
})
.css({float: 'left'})
.bindEvent({
submit: function(event) {
editMetadata(key, event.value);
}
})
.appendTo($div);
});
} else if (data.episodeDirector || data.writer || data.producer || data.cinematographer || data.editor) {
$div = $('<div>')
.css(css)
.appendTo($text);
html = [];
['episodeDirector', 'writer', 'producer', 'cinematographer', 'editor'].forEach(function(key) {
data[key] && html.push(
formatKey(key == 'episodeDirector' ? 'director' : key) + formatValue(data[key], 'name')
);
});
$div.html(html.join('; '));
}
data.cast && $('<div>') $div = getBlock(['actor'])
.css(css) $div && $div.appendTo($text);
.html(
formatKey('cast') + data.cast.map(function(value) {
// FIXME: 'uncredited' should be removed on the backend
value.character = value.character.replace('(uncredited)', '').trim();
return formatValue(value.actor, 'name')
+ (value.character ? ' '
+ formatLight('(' + formatValue(value.character) + ')')
: '');
}).join(', ')
)
.appendTo($text);
if (data.genre || data.keyword) { $div = getBlock(['genre', 'keyword'])
$div = $('<div>') $div && $div.appendTo($text);
.css(css)
.appendTo($text);
html = [];
['genre', 'keyword'].forEach(function(key) {
data[key] && html.push(
formatKey(key == 'keyword' ? 'keywords' : key)
+ formatValue(data[key], key)
);
});
$div.html(html.join('; '));
}
if (data.summary || canEdit) { if (data.summary || canEdit) {
Ox.Editable({ Ox.Editable({
@ -348,7 +239,7 @@ pandora.ui.infoView = function(data) {
editable: canEdit, editable: canEdit,
maxHeight: Infinity, maxHeight: Infinity,
placeholder: formatLight('No Summary'), placeholder: formatLight('No Summary'),
tooltip: 'Doubleclick to edit', tooltip: canEdit ? 'Doubleclick to edit' : '',
type: 'textarea', type: 'textarea',
value: data.summary || '' value: data.summary || ''
}) })
@ -362,30 +253,8 @@ pandora.ui.infoView = function(data) {
.appendTo($text); .appendTo($text);
} }
if (data.imdbId || canEdit) { $div = getBlock(['imdbId'])
$div = $('<div>') $div && $div.appendTo($text);
.css(css)
.css({clear: 'both', marginTop: '16px'})
.html(formatKey('IMDb ID'))
.appendTo($text);
Ox.Editable({
clickLink: pandora.clickLink,
editable: canEdit,
format: function(value) {
return '<a href="http://imdb.com/title/tt'
+ value + '">' + value + '</a>'
},
placeholder: formatLight('unknown'),
tooltip: 'Doubleclick to edit',
value: data.imdbId || ''
})
.bindEvent({
submit: function(event) {
editMetadata('imdbId', event.value);
}
})
.appendTo($div);
}
$('<div>').css({height: '16px'}).appendTo($text); $('<div>').css({height: '16px'}).appendTo($text);
@ -525,6 +394,73 @@ pandora.ui.infoView = function(data) {
renderList(); renderList();
} }
function formatEditableValue(value, key) {
var ret, listKeys = [];
if (key == 'runtime') {
ret = Math.round(data[key] / 60) + ' min';
} else if(key == 'alternativeTitles') {
ret = value.map(function(value) {
return value[0] + (Ox.isArray(value[1]) ? ' '
+ formatLight('(' + value[1].join(', ') + ')') : '');
}).join(', ');
} else if (key == 'imdbId') {
ret = '<a href="http://www.imdb.com/title/tt'
+ value + '">' + value + '</a>';
} else if (nameKeys.indexOf(key) > -1) {
ret = formatValue(value.split(', '), 'name');
} else if (listKeys.indexOf(key) > -1) {
ret = formatValue(value.split(', '), key);
} else {
ret = value;
}
return ret;
}
function prepareValue(value, key) {
var ret;
if(key == 'alternativeTitles') {
ret = value || '';
} else if (listKeys.indexOf(key) > -1) {
ret = value ? value.join(', ') : [''];
} else {
ret = value || '';
}
return ret;
}
function getBlock(keys) {
var $div;
if (canEdit || keys.filter(function(key) { return data[key]; })) {
$div = $('<div>').css(css);
keys.forEach(function(key, i) {
if (canEdit || data[key]) {
$div.children().length && $('<span>').html(';&nbsp;').appendTo($div);
$('<span>')
.html(formatKey(key))
.appendTo($div);
Ox.EditableContent({
clickLink: pandora.clickLink,
format: function(value) {
return formatEditableValue(value, key);
},
placeholder: formatLight('unknown'),
tooltip: canEdit ? 'Doubleclick to edit' : '',
value: prepareValue(data[key], key)
})
.bindEvent({
submit: function(event) {
editMetadata(key, event.value);
}
})
.appendTo($div);
}
});
}
return $div;
}
function deleteItem() { function deleteItem() {
pandora.ui.deleteItemDialog(data).open(); pandora.ui.deleteItemDialog(data).open();
} }
@ -534,9 +470,7 @@ pandora.ui.infoView = function(data) {
var edit = {id: data.id}; var edit = {id: data.id};
if (key == 'title') { if (key == 'title') {
Ox.extend(edit, parseTitle(value)); Ox.extend(edit, parseTitle(value));
} else if ([ } else if (listKeys.indexOf(key) > -1) {
'director', 'country', 'language'
].indexOf(key) > -1) {
edit[key] = value ? value.split(', ') : []; edit[key] = value ? value.split(', ') : [];
} else { } else {
edit[key] = value; edit[key] = value;
@ -577,6 +511,13 @@ pandora.ui.infoView = function(data) {
} }
function formatKey(key, isStatistics) { function formatKey(key, isStatistics) {
if (key == 'alternativeTitles') {
key = 'Alternative Title' + (data.alternativeTitles && data.alternativeTitles.length == 1 ? '' : 's');
} else if (key == 'actor') {
key = 'Actors';
} else if (key == 'imdbId') {
key = 'IMDb ID';
}
return isStatistics return isStatistics
? $('<div>').css({marginBottom: '4px', fontWeight: 'bold'}) ? $('<div>').css({marginBottom: '4px', fontWeight: 'bold'})
.html(Ox.toTitleCase(key).replace(' Per ', ' per ')) .html(Ox.toTitleCase(key).replace(' Per ', ' per '))