update indiancinema info view
This commit is contained in:
parent
85f7930854
commit
268ca64a10
1 changed files with 89 additions and 122 deletions
|
@ -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('; ').appendTo($div);
|
i && $('<span>').html('; ').appendTo($div);
|
||||||
$('<div>')
|
$('<span>')
|
||||||
.css({float: 'left'})
|
|
||||||
.html(formatKey(key).replace('</span>', ' </span>'))
|
.html(formatKey(key).replace('</span>', ' </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">•</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;
|
||||||
|
|
||||||
}
|
};
|
||||||
|
|
Loading…
Reference in a new issue