From ace1817c9aff4c2e2e47fcff0028151cf9c731c2 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Sat, 6 Aug 2011 03:19:14 +0000 Subject: [PATCH] improving info view --- static/js/pandora/ui/infoView.js | 180 ++++++++++++------------------- 1 file changed, 68 insertions(+), 112 deletions(-) diff --git a/static/js/pandora/ui/infoView.js b/static/js/pandora/ui/infoView.js index aa964f6..fbdff41 100644 --- a/static/js/pandora/ui/infoView.js +++ b/static/js/pandora/ui/infoView.js @@ -1,12 +1,18 @@ pandora.ui.infoView = function(data) { - var listWidth = 144 + Ox.UI.SCROLLBAR_SIZE, - margin = 8, + var css = { + marginTop: '4px', + textAlign: 'justify', + MozUserSelect: 'text', + WebkitUserSelect: 'text' + }, + listWidth = 144 + Ox.UI.SCROLLBAR_SIZE, + margin = 16, posterSize = pandora.user.ui.infoIconSize, posterRatio = data.poster.width / data.poster.height, posterWidth = posterRatio > 1 ? posterSize : Math.round(posterSize * posterRatio), posterHeight = posterRatio < 1 ? posterSize : Math.round(posterSize / posterRatio), - posterLeft = Math.floor((posterSize - posterWidth) / 2), + posterLeft = posterSize == 256 ? Math.floor((posterSize - posterWidth) / 2) : 0, editPoster = false, that = Ox.Element(), $list, @@ -71,7 +77,6 @@ pandora.ui.infoView = function(data) { .css({ display: 'block', position: 'absolute', - left: margin + 'px', width: posterSize + 'px', height: posterSize / 2 + 'px' }) @@ -81,49 +86,55 @@ pandora.ui.infoView = function(data) { $text = $('
') .css({ position: 'absolute', - left: margin + posterSize + margin + 'px', + left: margin + (posterSize == 256 ? 256 : posterWidth) + margin + 'px', top: margin + 'px', right: margin + 'px' }) .appendTo($data.$element); - Ox.print('DATA', data); - ['title', 'director'].forEach(function(key) { - $('
') - .css({ - marginTop: key == 'title' ? '-2px' : '2px', - fontWeight: 'bold', - fontSize: '13px', - MozUserSelect: 'text', - WebkitUserSelect: 'text' - }) - .html( - key == 'title' - ? data.title + ( - data.original_title - ? ' (' + data.original_title + ')' - : '' - ) - : formatValue(data.director, 'name') - ) - .appendTo($text); - }); + + var match = /(\(S\d{2}(E\d{2})?\))/.exec(data.title); + if (match) { + data.title = data.title.replace(match[0], formatLight(match[0])); + } + + $('
') + .css({ + marginTop: '-2px', + fontWeight: 'bold', + fontSize: '13px', + MozUserSelect: 'text', + WebkitUserSelect: 'text' + }) + .html( + data.title + (data.original_title ? ' ' + + formatLight('(' + data.original_title + ')') : '') + ) + .appendTo($text); + + $('
') + .css({ + marginTop: '2px', + fontWeight: 'bold', + fontSize: '13px', + MozUserSelect: 'text', + WebkitUserSelect: 'text' + }) + .html(formatValue(data.director, 'name')) + .appendTo($text); if (data.country || data.year || data.language || data.runtime || pandora.user.level == 'admin') { var $div = $('
') - .css({ - marginTop: '4px', - textAlign: 'justify' - }) + .css(css) .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'; + var value = data[key] || formatLight('unknown'); html.push( formatKey(key) + (key == 'runtime' ? Math.round(value / 60) + ' min' - : formatValue(value, key == 'runtime' ? null : key)) + : formatValue(value, key == 'runtime' || !data[key] ? null : key)) ); } }); @@ -132,34 +143,21 @@ pandora.ui.infoView = function(data) { // fixme: should be camelCase! data.alternative_titles && $('
') - .css({ - marginTop: '4px', - textAlign: 'justify', - MozUserSelect: 'text', - WebkitUserSelect: 'text' - }) + .css(css) .html( formatKey('Alternative Titles') + data.alternative_titles.map(function(value) { - return value[0] + ( - value[1] - ? ' (' + value[1] + ')' - : '' - ); + return value[0] + (value[1] ? ' ' + + formatLight('(' + value[1] + ')') : ''); }).join(', ') ) .appendTo($text); - if (data.writer || data.producer || data.cinematographer || data.editor) { + if (data.creator || data.writer || data.producer || data.cinematographer || data.editor) { $div = $('
') - .css({ - marginTop: '4px', - textAlign: 'justify', - MozUserSelect: 'text', - WebkitUserSelect: 'text' - }) + .css(css) .appendTo($text); html = []; - ['writer', 'producer', 'cinematographer', 'editor'].forEach(function(key) { + ['creator', 'writer', 'producer', 'cinematographer', 'editor'].forEach(function(key) { data[key] && html.push( formatKey(key) + formatValue(data[key], 'name') ); @@ -168,32 +166,21 @@ pandora.ui.infoView = function(data) { } data.cast && $('
') - .css({ - marginTop: '4px', - textAlign: 'justify', - MozUserSelect: 'text', - WebkitUserSelect: 'text' - }) + .css(css) .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) + ')' - : '' - ); + return formatValue(value.actor, 'name') + + (value.character ? ' ' + + formatLight('(' + formatValue(value.character) + ')') + : ''); }).join(', ') ) .appendTo($text); if (data.genre || data.keyword) { $div = $('
') - .css({ - marginTop: '4px', - textAlign: 'justify', - MozUserSelect: 'text', - WebkitUserSelect: 'text' - }) + .css(css) .appendTo($text); html = []; ['genre', 'keyword'].forEach(function(key) { @@ -206,12 +193,7 @@ pandora.ui.infoView = function(data) { } data.summary && $('
') - .css({ - marginTop: '4px', - textAlign: 'justify', - MozUserSelect: 'text', - WebkitUserSelect: 'text' - }) + .css(css) .html( formatKey('summary') + data.summary ) @@ -249,24 +231,14 @@ pandora.ui.infoView = function(data) { }); data.filming_locations && $('
') - .css({ - marginTop: '4px', - textAlign: 'justify', - MozUserSelect: 'text', - WebkitUserSelect: 'text' - }) + .css(css) .html( formatKey('Filming Locations') + data.filming_locations.join('; ') ) .appendTo($text); data.releasedate && $('
') - .css({ - marginTop: '4px', - textAlign: 'justify', - MozUserSelect: 'text', - WebkitUserSelect: 'text' - }) + .css(css) .html( formatKey('Release Date') + Ox.formatDate(data.releasedate, '%A, %B %e, %Y') ) @@ -274,12 +246,7 @@ pandora.ui.infoView = function(data) { if (data.budget || data.gross || data.profit) { $div = $('
') - .css({ - marginTop: '4px', - textAlign: 'justify', - MozUserSelect: 'text', - WebkitUserSelect: 'text' - }) + .css(css) .appendTo($text); html = []; ['budget', 'gross', 'profit'].forEach(function(key) { @@ -292,12 +259,7 @@ pandora.ui.infoView = function(data) { if (data.rating || data.votes) { $div = $('
') - .css({ - marginTop: '4px', - textAlign: 'justify', - MozUserSelect: 'text', - WebkitUserSelect: 'text' - }) + .css(css) .appendTo($text); html = []; ['rating', 'votes'].forEach(function(key) { @@ -310,12 +272,7 @@ pandora.ui.infoView = function(data) { if (data.connections) { $div = $('
') - .css({ - marginTop: '4px', - textAlign: 'justify', - MozUserSelect: 'text', - WebkitUserSelect: 'text' - }) + .css(css) .appendTo($text); html = []; [ @@ -336,12 +293,7 @@ pandora.ui.infoView = function(data) { ['reviews', 'links'].forEach(function(key) { data[key] && $('
') - .css({ - marginTop: '4px', - textAlign: 'justify', - MozUserSelect: 'text', - WebkitUserSelect: 'text' - }) + .css(css) .html( formatKey(key) + data[key].map(function(value) { return '' + value.source + '' @@ -457,6 +409,10 @@ pandora.ui.infoView = function(data) { return '' + Ox.toTitleCase(key) + ': '; } + function formatLight(str) { + return '' + str + ''; + } + function formatValue(value, key) { return (Ox.isArray(value) ? value : [value]).map(function(value) { return key ? '' + value + '' : value; @@ -467,7 +423,7 @@ pandora.ui.infoView = function(data) { posterSize = posterSize == 256 ? 512 : 256; posterWidth = posterRatio > 1 ? posterSize : Math.round(posterSize * posterRatio); posterHeight = posterRatio < 1 ? posterSize : Math.round(posterSize / posterRatio); - posterLeft = Math.floor((posterSize - posterWidth) / 2); + posterLeft = posterSize == 256 ? Math.floor((posterSize - posterWidth) / 2) : 0, $poster.animate({ left: margin + posterLeft + 'px', width: posterWidth + 'px', @@ -488,7 +444,7 @@ pandora.ui.infoView = function(data) { height: posterSize / 2 + 'px' }, 250); $text.animate({ - left: margin + posterSize + margin + 'px', + left: margin + (posterSize == 256 ? 256 : posterWidth) + margin + 'px', }, 250); pandora.api.setUI({infoIconSize: pandora.user.ui.infoIconSize = posterSize}); }