update indiancinema info view

This commit is contained in:
rolux 2013-02-25 16:38:22 +00:00
parent 85f7930854
commit 268ca64a10

View file

@ -8,11 +8,13 @@ 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',
WebkitUserSelect: 'text' WebkitUserSelect: 'text'
}, },
copyright = !data.year || data.year + 60 >= new Date().getFullYear(),
iconRatio = ui.icons == 'posters' iconRatio = ui.icons == 'posters'
? (ui.showSitePosters ? 5/8 : data.posterRatio) : 1, ? (ui.showSitePosters ? 5/8 : data.posterRatio) : 1,
iconSize = ui.infoIconSize, iconSize = ui.infoIconSize,
@ -20,7 +22,6 @@ pandora.ui.infoView = function(data) {
iconHeight = iconRatio < 1 ? iconSize : Math.round(iconSize / iconRatio), iconHeight = iconRatio < 1 ? iconSize : Math.round(iconSize / iconRatio),
iconLeft = iconSize == 256 ? Math.floor((iconSize - iconWidth) / 2) : 0, iconLeft = iconSize == 256 ? Math.floor((iconSize - iconWidth) / 2) : 0,
borderRadius = ui.icons == 'posters' ? 0 : iconSize / 8, borderRadius = ui.icons == 'posters' ? 0 : iconSize / 8,
isEditable = canEdit && data.id.slice(0, 2) == '0x',
listWidth = 144 + Ox.UI.SCROLLBAR_SIZE, listWidth = 144 + Ox.UI.SCROLLBAR_SIZE,
margin = 16, margin = 16,
statisticsWidth = 128, statisticsWidth = 128,
@ -135,9 +136,11 @@ pandora.ui.infoView = function(data) {
$capabilities, $capabilities,
$deleteButton,
$browserImages = []; $browserImages = [];
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
// Title ------------------------------------------------------------------- // Title -------------------------------------------------------------------
@ -148,11 +151,11 @@ pandora.ui.infoView = function(data) {
.append( .append(
Ox.Editable({ Ox.Editable({
clickLink: pandora.clickLink, clickLink: pandora.clickLink,
editable: isEditable, editable: canEdit,
format: function(value) { format: function(value) {
return formatTitle(value); return formatTitle(value);
}, },
tooltip: isEditable ? 'Doubleclick to edit' : '', tooltip: canEdit ? 'Doubleclick to edit' : '',
value: data.title value: data.title
}) })
.css({ .css({
@ -174,7 +177,7 @@ pandora.ui.infoView = function(data) {
// Director ---------------------------------------------------------------- // Director ----------------------------------------------------------------
if (data.director || isEditable) { if (data.director || canEdit) {
$('<div>') $('<div>')
.css({ .css({
marginTop: '2px' marginTop: '2px'
@ -182,13 +185,13 @@ pandora.ui.infoView = function(data) {
.append( .append(
Ox.Editable({ Ox.Editable({
clickLink: pandora.clickLink, clickLink: pandora.clickLink,
editable: isEditable, editable: canEdit,
format: function(value) { format: function(value) {
return formatValue(value.split(', '), 'name'); return formatValue(value.split(', '), 'name');
}, },
placeholder: formatLight('Unknown Director'), placeholder: formatLight('Unknown Director'),
tooltip: isEditable ? 'Doubleclick to edit' : '', tooltip: canEdit ? 'Doubleclick to edit' : '',
value: data.director ? data.director.join(', ') : 'Unknown Director' value: data.director ? data.director.join(', ') : ''
}) })
.css({ .css({
display: 'inline-block', display: 'inline-block',
@ -209,28 +212,29 @@ pandora.ui.infoView = function(data) {
// Country, Year, Language, Runtime ---------------------------------------- // Country, Year, Language, Runtime ----------------------------------------
if (isEditable) { if (canEdit) {
var $div = $('<div>') var $div = $('<div>')
.css(css) .css(css)
.css({marginTop: '16px'})
.appendTo($text); .appendTo($text);
['country', 'year'].forEach(function(key, i) { ['country', 'year', 'language', 'runtime'].forEach(function(key, i) {
i && $('<div>').css({float: 'left'}).html(';&nbsp;').appendTo($div); i && $('<span>').html(';&nbsp;').appendTo($div);
$('<div>') $('<span>')
.css({float: 'left'})
.html(formatKey(key).replace('</span>', '&nbsp;</span>')) .html(formatKey(key).replace('</span>', '&nbsp;</span>'))
.appendTo($div); .appendTo($div);
Ox.Editable({ Ox.EditableContent({
clickLink: pandora.clickLink, clickLink: pandora.clickLink,
format: function(value) { format: function(value) {
return formatValue(value.split(', '), key) return key == 'year' ? value
: key == 'runtime' ? Math.round(data[key] / 60) + ' min'
: formatValue(value.split(', '), key);
}, },
placeholder: formatLight('unknown'), placeholder: formatLight('unknown'),
tooltip: 'Doubleclick to edit', tooltip: 'Doubleclick to edit',
value: key == 'country' value: key == 'country' || key == 'language'
? (data[key] ? data[key].join(', ') : ['']) ? (data[key] ? data[key].join(', ') : [''])
: data[key] || '' : data[key] || ''
}) })
.css({float: 'left'})
.bindEvent({ .bindEvent({
submit: function(event) { submit: function(event) {
editMetadata(key, event.value); editMetadata(key, event.value);
@ -268,7 +272,7 @@ pandora.ui.infoView = function(data) {
.appendTo($text); .appendTo($text);
// FIXME: we will want to check for data.seriesId here // FIXME: we will want to check for data.seriesId here
if (isEditable && data.seriesTitle) { if (canEdit && data.seriesTitle) {
var $div = $('<div>') var $div = $('<div>')
.css(Ox.extend(css, {marginTop: '20px'})) // FIXME: just a guess .css(Ox.extend(css, {marginTop: '20px'})) // FIXME: just a guess
.appendTo($text); .appendTo($text);
@ -338,115 +342,50 @@ pandora.ui.infoView = function(data) {
$div.html(html.join('; ')); $div.html(html.join('; '));
} }
data.summary && $('<div>') if (data.summary || canEdit) {
.css(css) Ox.Editable({
.html( clickLink: pandora.clickLink,
formatKey('summary') + data.summary editable: canEdit,
) maxHeight: Infinity,
.appendTo($text); placeholder: formatLight('No Summary'),
tooltip: 'Doubleclick to edit',
data.trivia && data.trivia.forEach(function(value) { type: 'textarea',
$('<div>') value: data.summary || ''
.css({
display: 'table-row'
}) })
.append( .css(css)
$('<div>') .css({marginTop: '8px'})
.css({ .bindEvent({
display: 'table-cell', submit: function(event) {
width: '12px', editMetadata('summary', event.value);
paddingTop: '4px' }
}) })
.html('<span style="font-weight: bold">&bull;</span>')
)
.append(
$('<div>')
.css({
display: 'table-cell',
paddingTop: '4px',
textAlign: 'justify',
MozUserSelect: 'text',
WebkitUserSelect: 'text'
})
.html(value)
)
.append(
$('<div>').css({clear: 'both'})
)
.appendTo($text); .appendTo($text);
});
data.filmingLocations && $('<div>')
.css(css)
.html(
formatKey('Filming Locations') + data.filmingLocations.map(function(location) {
return '<a href="/map/@' + location + '">' + location + '</a>'
}).join(', ')
)
.appendTo($text);
data.releasedate && $('<div>')
.css(css)
.html(
formatKey('Release Date') + Ox.formatDate(data.releasedate, '%A, %B %e, %Y')
)
.appendTo($text);
if (data.budget || data.gross || data.profit) {
$div = $('<div>')
.css(css)
.appendTo($text);
html = [];
['budget', 'gross', 'profit'].forEach(function(key) {
data[key] && html.push(
formatKey(key == 'profit' && data[key] < 0 ? 'loss' : key)
+ Ox.formatCurrency(Math.abs(data[key]), '$')
);
});
$div.html(html.join('; '));
} }
if (data.connections) { if (data.imdbId || canEdit) {
$div = $('<div>') $div = $('<div>')
.css(css) .css(css)
.css({clear: 'both', marginTop: '16px'})
.html(formatKey('IMDb ID'))
.appendTo($text); .appendTo($text);
html = []; Ox.Editable({
[ clickLink: pandora.clickLink,
'Edited from', 'Edited into', editable: canEdit,
'Features', 'Featured in', format: function(value) {
'Follows', 'Followed by', return '<a href="http://imdb.com/title/tt'
'References', 'Referenced in', + value + '">' + value + '</a>'
'Remake of', 'Remade as', },
'Spin off from', 'Spin off', placeholder: formatLight('unknown'),
'Spoofs', 'Spoofed in' tooltip: 'Doubleclick to edit',
].forEach(function(key) { value: data.imdbId || ''
data.connections[key] && html.push( })
formatKey(key) + data.connections[key].map(function(connection) { .bindEvent({
return ( submit: function(event) {
connection.item editMetadata('imdbId', event.value);
? '<a href="/' + connection.item + '">' + connection.title + '</a>' }
: connection.title })
) + ( .appendTo($div);
connection.description
? ' ' + formatLight('(' + connection.description + ')')
: ''
);
}).join(', ')
);
});
$div.html(html.join('; '));
} }
['reviews', 'links'].forEach(function(key) {
data[key] && $('<div>')
.css(css)
.html(
formatKey(key) + data[key].map(function(value) {
return '<a href="' + value.url + '">' + value.source + '</a>'
}).join(', ')
)
.appendTo($text);
});
$('<div>').css({height: '16px'}).appendTo($text); $('<div>').css({height: '16px'}).appendTo($text);
@ -555,7 +494,7 @@ pandora.ui.infoView = function(data) {
} }
if (pandora.site.capabilities.canRemoveItems[pandora.user.ui.level]) { if (pandora.site.capabilities.canRemoveItems[pandora.user.level]) {
$deleteButton = Ox.Button({ $deleteButton = Ox.Button({
title: 'Delete ' + pandora.site.itemName.singular + '...', title: 'Delete ' + pandora.site.itemName.singular + '...',
width: 128 width: 128
@ -595,12 +534,16 @@ 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 (['director', 'country'].indexOf(key) > -1) { } else if ([
'director', 'country', 'language'
].indexOf(key) > -1) {
edit[key] = value ? value.split(', ') : []; edit[key] = value ? value.split(', ') : [];
} else { } else {
edit[key] = value; edit[key] = value;
} }
pandora.api.edit(edit, function(result) { pandora.api.edit(edit, function(result) {
var src;
data[key] == result.data[key];
if (result.data.id != data.id) { if (result.data.id != data.id) {
Ox.Request.clearCache(); // fixme: too much Ox.Request.clearCache(); // fixme: too much
pandora.UI.set({item: result.data.id}); pandora.UI.set({item: result.data.id});
@ -608,6 +551,27 @@ pandora.ui.infoView = function(data) {
} }
pandora.updateItemContext(); pandora.updateItemContext();
pandora.$ui.browser.value(result.data.id, key, result.data[key]); pandora.$ui.browser.value(result.data.id, key, result.data[key]);
if (Ox.contains(['title', 'director', 'year'], key)) {
pandora.clearIconCache(data.id);
if (ui.icons == 'posters') {
if ($browserImages.length == 0) {
$browserImages = pandora.$ui.browser.find('img[src*="/' + data.id + '/"]');
}
$browserImages.each(function() {
$(this).attr({
src: '/' + data.id + '/poster128.jpg?' + Ox.uid()
});
});
$list.find('img[src*="siteposter.jpg"]').each(function() {
$(this).attr({
src: '/' + data.id + '/siteposter.jpg?' + Ox.uid()
});
});
src = '/' + data.id + '/poster512.jpg?' + Ox.uid()
$icon.attr({src: src});
$reflectionIcon.attr({src: src});
}
}
}); });
} }
} }
@ -620,7 +584,7 @@ pandora.ui.infoView = function(data) {
} }
function formatLight(str) { function formatLight(str) {
return '<span style="color: rgb(128, 128, 128)">' + str + '</span>'; return '<span class="OxLight">' + str + '</span>';
} }
function formatTitle(title) { function formatTitle(title) {
@ -861,6 +825,9 @@ pandora.ui.infoView = function(data) {
$rightsLevelSelect = Ox.Select({ $rightsLevelSelect = Ox.Select({
items: pandora.site.rightsLevels.map(function(rightsLevel, i) { items: pandora.site.rightsLevels.map(function(rightsLevel, i) {
return {id: i, title: rightsLevel.name}; return {id: i, title: rightsLevel.name};
}).filter(function(rightsLevel) {
return (!copyright && rightsLevel.title != 'Under Copyright')
|| (copyright && rightsLevel.title != 'Out of Copyright');
}), }),
width: 128, width: 128,
value: data.rightslevel value: data.rightslevel
@ -958,4 +925,4 @@ pandora.ui.infoView = function(data) {
return that; return that;
} };