From 1ccbfe88a52771c88bb8e7779e504fccf5fb29c9 Mon Sep 17 00:00:00 2001 From: rolux Date: Sat, 6 Aug 2011 01:04:09 +0000 Subject: [PATCH] improving info view --- pandora/0xdb.json | 1 + static/js/pandora/ui/infoView.js | 196 +++++++++++++++++++------------ static/js/pandora/ui/item.js | 2 +- 3 files changed, 120 insertions(+), 79 deletions(-) diff --git a/pandora/0xdb.json b/pandora/0xdb.json index 51a279b51..c1e6b2902 100644 --- a/pandora/0xdb.json +++ b/pandora/0xdb.json @@ -501,6 +501,7 @@ "groups": ["director", "country", "year", "language", "genre"], "groupsQuery": {"conditions": [], "operator": "|"}, "groupsSize": 176, + "icons": "posters", "item": "", "itemView": "timeline", "list": "", diff --git a/static/js/pandora/ui/infoView.js b/static/js/pandora/ui/infoView.js index bc40cf43b..ae3b9b6e9 100644 --- a/static/js/pandora/ui/infoView.js +++ b/static/js/pandora/ui/infoView.js @@ -92,24 +92,40 @@ pandora.ui.infoView = function(data) { MozUserSelect: 'text', WebkitUserSelect: 'text' }) - .html(formatValue(data[key], key == 'director' ? 'director' : null)) + .html( + key == 'title' + ? data.title + ( + data.original_title + ? ' (' + data.original_title + ')' + : '' + ) + : formatValue(data.director, 'name') + ) .appendTo($text); }); - var $div = $('
') - .css({ - marginTop: '4px', - textAlign: 'justify' - }) - .appendTo($text); - ['country', 'year', 'language', 'runtime'].forEach(function(key) { - data[key] && $('') - .html( - formatKey(key) - + (key == 'runtime' ? Math.round(data[key] / 60) + ' min' : formatValue(data[key], key == 'runtime' ? null : key)) - + '  ' - ) - .appendTo($div); - }); + + if (data.country || data.year || data.language || data.runtime || pandora.user.level == 'admin') { + var $div = $('
') + .css({ + marginTop: '4px', + textAlign: 'justify' + }) + .appendTo($text); + var html = []; + ['country', 'year', 'language', 'runtime'].forEach(function(key) { + if (data[key] || (['country', 'year'].indexOf(key) > -1 && pandora.user.level == 'admin')) { + var value = data[key] || 'unknown'; + html.push( + formatKey(key) + + (key == 'runtime' + ? Math.round(value / 60) + ' min' + : formatValue(value, key == 'runtime' ? null : key)) + ); + } + }); + $div.html(html.join('; ')); + } + // fixme: should be camelCase! data.alternative_titles && $('
') .css({ @@ -128,42 +144,62 @@ pandora.ui.infoView = function(data) { }).join(', ') ) .appendTo($text); - $div = $('
') + + if (data.writer || data.producer || data.cinematographer || data.editor) { + $div = $('
') + .css({ + marginTop: '4px', + textAlign: 'justify', + MozUserSelect: 'text', + WebkitUserSelect: 'text' + }) + .appendTo($text); + html = []; + ['writer', 'producer', 'cinematographer', 'editor'].forEach(function(key) { + data[key] && html.push( + formatKey(key) + formatValue(data[key], 'name') + ); + }); + $div.html(html.join('; ')); + } + + data.cast && $('
') .css({ - marginTop: '4px', + marginTop: '4px', textAlign: 'justify', MozUserSelect: 'text', WebkitUserSelect: 'text' }) + .html( + formatKey('cast') + data.cast.map(function(value) { + value.character = value.character.replace('(uncredited)', '').trim(); + return formatValue(value.actor, 'name') + ( + value.character + ? ' (' + formatValue(value.character) + ')' + : '' + ); + }).join(', ') + ) .appendTo($text); - ['writer', 'producer', 'cinematographer', 'editor'].forEach(function(key) { - data[key] && $('') - .html( - formatKey(key) + formatValue(data[key], 'name') + '  ' - ) - .appendTo($div); - }); - - ['cast', 'genre', 'keyword'].forEach(function(key) { - data[key] && $('
') + if (data.genre || data.keyword) { + $div = $('
') .css({ - marginTop: '4px', - textAlign: 'justify' + marginTop: '4px', + textAlign: 'justify', + MozUserSelect: 'text', + WebkitUserSelect: 'text' }) - .html( - formatKey(key == 'keyword' ? 'keywords' : key) - + (key == 'cast' ? data[key].map(function(value) { - value.character = value.character.replace('(uncredited)', '').trim(); - return formatValue(value.actor, 'name') + ( - value.character - ? ' (' + formatValue(value.character, 'name') + ')' - : '' - ); - }).join(', ') : formatValue(data[key], key == 'cast' ? 'name' : key)) - ) .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('; ')); + } data.summary && $('
') .css({ @@ -185,22 +221,16 @@ pandora.ui.infoView = function(data) { .append( $('
') .css({ - //display: 'inline', display: 'table-cell', - //float: 'left', width: '12px', - marginTop: '4px', - paddingBottom: '4px' + paddingTop: '4px' }) .html('•') ) .append( $('
') .css({ - //clear: 'both', display: 'table-cell', - //float: 'left', - //width: '100px', paddingTop: '4px', textAlign: 'justify', MozUserSelect: 'text', @@ -247,13 +277,13 @@ pandora.ui.infoView = function(data) { WebkitUserSelect: 'text' }) .appendTo($text); + html = []; ['budget', 'gross', 'profit'].forEach(function(key) { - data[key] && $('') - .html( - formatKey(key) + data[key] + '  ' - ) - .appendTo($div); + data[key] && html.push( + formatKey(key) + Ox.formatCurrency(data[key], '$') + ); }); + $div.html(html.join('; ')); } if (data.rating || data.votes) { @@ -265,13 +295,13 @@ pandora.ui.infoView = function(data) { WebkitUserSelect: 'text' }) .appendTo($text); + html = []; ['rating', 'votes'].forEach(function(key) { - data[key] && $('') - .html( - formatKey(key) + Ox.formatNumber(data[key]) + '  ' - ) - .appendTo($div); + data[key] && html.push( + formatKey(key) + Ox.formatNumber(data[key]) + ); }); + $div.html(html.join('; ')); } if (data.connections) { @@ -283,28 +313,38 @@ pandora.ui.infoView = function(data) { WebkitUserSelect: 'text' }) .appendTo($text); - Ox.forEach(data.connections, function(movies, key) { - $('') - .html( - formatKey(key) + formatValue(movies) + '  ' - ) - .appendTo($div); + html = []; + [ + 'Edited from', 'Edited into', + 'Features', 'Featured in', + 'Follows', 'Followed by', + 'References', 'Referenced in', + 'Remake of', 'Remade as', + 'Spin off from', 'Spin off', + 'Spoofs', 'Spoofed in' + ].forEach(function(key) { + data.connections[key] && html.push( + formatKey(key) + formatValue(data.connections[key]) + ); }); + $div.html(html.join('; ')); } - data.reviews && $('
') - .css({ - marginTop: '4px', - textAlign: 'justify', - MozUserSelect: 'text', - WebkitUserSelect: 'text' - }) - .html( - formatKey('reviews') + data.reviews.map(function(review) { - return '' + review.source + '' - }).join(', ') - ) - .appendTo($text); + ['reviews', 'links'].forEach(function(key) { + data[key] && $('
') + .css({ + marginTop: '4px', + textAlign: 'justify', + MozUserSelect: 'text', + WebkitUserSelect: 'text' + }) + .html( + formatKey(key) + data[key].map(function(value) { + return '' + value.source + '' + }).join(', ') + ) + .appendTo($text); + }); $('
').css({height: '8px'}).appendTo($text); diff --git a/static/js/pandora/ui/item.js b/static/js/pandora/ui/item.js index d9f5d9ccf..810d87ba0 100644 --- a/static/js/pandora/ui/item.js +++ b/static/js/pandora/ui/item.js @@ -252,7 +252,7 @@ pandora.ui.item = function() { var stats = Ox.Container(); Ox.TreeList({ data: result.data, - width: 256 + width: pandora.$ui.mainPanel.size(1) - Ox.UI.SCROLLBAR_SIZE }).appendTo(stats); pandora.$ui.contentPanel.replaceElement(1, stats);