From f02b8a73ff48e1fdafa737041190e52ca46c97c0 Mon Sep 17 00:00:00 2001 From: rolux Date: Thu, 9 May 2013 14:03:26 +0200 Subject: [PATCH] update info views (0xdb, indiancinema, padma) --- static/js/pandora/infoView.0xdb.js | 24 +- static/js/pandora/infoView.indiancinema.js | 13 +- static/js/pandora/infoView.padma.js | 296 ++++++++------------- 3 files changed, 123 insertions(+), 210 deletions(-) diff --git a/static/js/pandora/infoView.0xdb.js b/static/js/pandora/infoView.0xdb.js index 86e4b9459..2ff24049c 100644 --- a/static/js/pandora/infoView.0xdb.js +++ b/static/js/pandora/infoView.0xdb.js @@ -14,8 +14,9 @@ pandora.ui.infoView = function(data) { MozUserSelect: 'text', WebkitUserSelect: 'text' }, - iconRatio = ui.icons == 'posters' - ? (ui.showSitePosters ? 5/8 : data.posterRatio) : 1, + iconRatio = ui.icons == 'posters' ? ( + ui.showSitePosters ? 5/8 : data.posterRatio + ) : 1, iconSize = ui.infoIconSize, iconWidth = iconRatio > 1 ? iconSize : Math.round(iconSize * iconRatio), iconHeight = iconRatio < 1 ? iconSize : Math.round(iconSize / iconRatio), @@ -85,7 +86,7 @@ pandora.ui.infoView = function(data) { left: margin + 'px', top: margin + iconHeight + 'px', width: iconSize + 'px', - height: iconSize / 2 + 'px', + height: Math.round(iconSize / 2) + 'px', overflow: 'hidden' }) .appendTo($data.$element), @@ -110,7 +111,7 @@ pandora.ui.infoView = function(data) { .css({ position: 'absolute', width: iconSize + 'px', - height: iconSize / 2 + 'px' + height: Math.round(iconSize / 2) + 'px' }) .appendTo($reflection), @@ -148,7 +149,7 @@ pandora.ui.infoView = function(data) { marginTop: '-2px' }) .append( - Ox.Editable({ + Ox.EditableContent({ clickLink: pandora.clickLink, editable: isEditable, format: function(value) { @@ -182,7 +183,7 @@ pandora.ui.infoView = function(data) { marginTop: '2px' }) .append( - Ox.Editable({ + Ox.EditableContent({ clickLink: pandora.clickLink, editable: isEditable, format: function(value) { @@ -221,7 +222,7 @@ pandora.ui.infoView = function(data) { .css({float: 'left'}) .html(formatKey(key).replace('', ' ')) .appendTo($div); - Ox.Editable({ + Ox.EditableContent({ clickLink: pandora.clickLink, format: function(value) { return formatValue(value.split(', '), key) @@ -349,9 +350,7 @@ pandora.ui.infoView = function(data) { data.summary && $('
') .css(css) - .html( - formatKey('summary') + data.summary - ) + .html(formatKey('summary') + data.summary) .appendTo($text); if (canSeeAllMetadata) { @@ -556,14 +555,12 @@ pandora.ui.infoView = function(data) { // Notes ------------------------------------------------------------------- if (canEdit) { - $('
') .css({marginBottom: '4px'}) .append(formatKey('Notes', true)) .append( - Ox.Editable({ + Ox.EditableContent({ clickLink: pandora.clickLink, - height: 128, placeholder: formatLight('No notes'), tooltip: pandora.getEditTooltip(), type: 'textarea', @@ -582,7 +579,6 @@ pandora.ui.infoView = function(data) { }) ) .appendTo($statistics); - } $('
').css({height: '16px'}).appendTo($statistics); diff --git a/static/js/pandora/infoView.indiancinema.js b/static/js/pandora/infoView.indiancinema.js index 4b0e93df0..77d0064ce 100644 --- a/static/js/pandora/infoView.indiancinema.js +++ b/static/js/pandora/infoView.indiancinema.js @@ -12,8 +12,9 @@ pandora.ui.infoView = function(data) { MozUserSelect: 'text', WebkitUserSelect: 'text' }, - iconRatio = ui.icons == 'posters' - ? (ui.showSitePosters ? 5/8 : data.posterRatio) : 1, + iconRatio = ui.icons == 'posters' ? ( + ui.showSitePosters ? 5/8 : data.posterRatio + ) : 1, iconSize = ui.infoIconSize, iconWidth = iconRatio > 1 ? iconSize : Math.round(iconSize * iconRatio), iconHeight = iconRatio < 1 ? iconSize : Math.round(iconSize / iconRatio), @@ -43,7 +44,7 @@ pandora.ui.infoView = function(data) { $info = $('
') .css({ position: 'absolute', - left: canEdit && !ui.showIconBrowser ? -listWidth + 'px' : 0, + left: 0, top: 0, right: 0 }) @@ -89,7 +90,7 @@ pandora.ui.infoView = function(data) { left: margin + 'px', top: margin + iconHeight + 'px', width: iconSize + 'px', - height: iconSize / 2 + 'px', + height: Math.round(iconSize / 2) + 'px', overflow: 'hidden' }) .appendTo($data.$element), @@ -114,7 +115,7 @@ pandora.ui.infoView = function(data) { .css({ position: 'absolute', width: iconSize + 'px', - height: iconSize / 2 + 'px' + height: Math.round(iconSize / 2) + 'px' }) .appendTo($reflection), @@ -275,7 +276,7 @@ pandora.ui.infoView = function(data) { format: function(value) { return value.replace( /').appendTo($data); if (canEdit || data[key]) { - count && $('
').appendTo($div); - $('
') - .css({float: 'left'}) + $div = $('
').css(css).css({margin: 0}).appendTo($data); + $('') .html( formatKey({ category: 'categories', }[key] || key).replace('', ' ') ) .appendTo($div); - Ox.Editable({ + Ox.EditableContent({ clickLink: pandora.clickLink, format: function(value) { + // FIXME: what?? return listKeys.indexOf(key) >= 0 ? formatValue(value.split(', '), { 'director': 'name', @@ -171,14 +168,13 @@ pandora.ui.infoView = function(data) { }[key] || key) : value; }, - placeholder: formatLight('unknown'), + placeholder: formatLight(Ox._('unknown')), editable: canEdit, tooltip: canEdit ? pandora.getEditTooltip() : '', value: listKeys.indexOf(key) >= 0 ? (data[key] || []).join(', ') : data[key] || '' }) - .css({float: 'left'}) .bindEvent({ submit: function(event) { editMetadata(key, event.value); @@ -186,13 +182,18 @@ pandora.ui.infoView = function(data) { }) .appendTo($div); if (canEdit || data[key + 'description']) { - $('
').css({'clear': 'both'}).appendTo($div); $('
') .append( - descriptions[key] = Ox.Editable({ + descriptions[key] = Ox.EditableContent({ clickLink: pandora.clickLink, - placeholder: formatLight('No ' + Ox.toTitleCase(key) + ' Description'), editable: canEdit, + format: function(value) { + return value.replace( + /') .css({ - marginTop: '-2px', + margin: '-2px 0 12px 0', }) .append( - Ox.Editable({ + Ox.EditableContent({ editable: canEdit, tooltip: canEdit ? pandora.getEditTooltip() : '', value: data.title }) .css({ - display: 'inline-block', - marginBottom: '-3px', + //marginBottom: '-3px', fontWeight: 'bold', fontSize: '13px', MozUserSelect: 'text', @@ -240,139 +239,37 @@ pandora.ui.infoView = function(data) { ) .appendTo($center); - // Location, Date, Language and Duration ----------------------------------- + // Groups ------------------------------------------------------------------ - if (canEdit) { - $div = $('
').css(css).css({marginTop: '12px'}).appendTo($center); - ['location', 'date', 'language', 'duration'].forEach(function(key, i) { - i && $('
').css({float: 'left'}).html('; ').appendTo($div); - $('
') - .css({float: 'left'}) - .html(formatKey(key).replace('', ' ')) - .appendTo($div); - Ox.Editable({ - clickLink: pandora.clickLink, - editable: key != 'duration', - format: function(value) { - return formatValue(listKeys.indexOf(key) >= 0 - ? value.split(', ') : value, key); - }, - placeholder: formatLight('unknown'), - tooltip: pandora.getEditTooltip(), - value: listKeys.indexOf(key) >= 0 - ? (data[key] || []).join(', ') - : data[key] || '' - }) - .css({float: 'left'}) - .bindEvent({ - submit: function(event) { - editMetadata(key, event.value); - } - }) - .appendTo($div); - }); - } else { - html = []; - ['location', 'date', 'language', 'duration'].forEach(function(key) { - if (data[key]) { - html.push(formatKey(key) + formatValue(data[key], key)); - } - }); - $('
').css(css).html(html.join('; ')).appendTo($center); - } + renderGroup(['location', 'date', 'language']); - // Director, Cinematographer and Featuring --------------------------------- + renderGroup(['director', 'cinematographer', 'featuring']); - if (canEdit) { - $div = $('
').css(css).appendTo($center); - ['director', 'cinematographer', 'featuring'].forEach(function(key, i) { - i && $('
').css({float: 'left'}).html('; ').appendTo($div); - $('
') - .css({float: 'left'}) - .html(formatKey(key).replace('', ' ')) - .appendTo($div); - Ox.Editable({ - clickLink: pandora.clickLink, - format: function(value) { - return formatValue(value.split(', '), 'name'); - }, - placeholder: formatLight('unknown'), - tooltip: pandora.getEditTooltip(), - value: listKeys.indexOf(key) >= 0 - ? (data[key] || []).join(', ') - : data[key] || '' - }) - .css({float: 'left'}) - .bindEvent({ - submit: function(event) { - editMetadata(key, event.value); - } - }) - .appendTo($div); - }); - } else if (data.director || data.cinematographer || data.featuring) { - html = []; - ['director', 'cinematographer', 'featuring'].forEach(function(key) { - if (data[key] && data[key].length) { - html.push( - formatKey(key) - + formatValue(data[key], key) - ); - } - }); - $('
').css(css).html(html.join('; ')).appendTo($center); - } - - // Topic ------------------------------------------------------------------- - - if (canEdit) { - var key = 'topic'; - $div = $('
').css(css).appendTo($center); - $('
') - .css({float: 'left'}) - .html(formatKey('Topics').replace('', ' ')) - .appendTo($div); - Ox.Editable({ - clickLink: pandora.clickLink, - format: function(value) { - return formatValue(value.split(', '), key); - }, - placeholder: formatLight('unknown'), - tooltip: pandora.getEditTooltip(), - value: listKeys.indexOf(key) >= 0 - ? (data[key] || []).join(', ') - : data[key] || '' - }) - .css({float: 'left'}) - .bindEvent({ - submit: function(event) { - editMetadata(key, event.value); - } - }) - .appendTo($div); - - } else if (data.topic) { - html = formatKey('topics') + formatValue(data.topic, 'topic'); - $('
').css(css).html(html).appendTo($center); - } + renderGroup(['topics']); // Summary ------------------------------------------------------------- - if (canEdit) { + if (canEdit || data.summary) { $('
') .append( - Ox.Editable({ + Ox.EditableContent({ clickLink: pandora.clickLink, editable: canEdit, + format: function(value) { + return value.replace( + /').css(css).css({marginTop: '16px'}).html(data.summary).appendTo($center); + $('
').css({width: '1px', height: 0, clear: 'both'}).appendTo($center); } // License ----------------------------------------------------------------- - $div = $('
').css(css).css({marginTop: '16px'}).appendTo($center); - if (canEdit) { - $('
') - .css({float: 'left'}) - .html(formatKey('license').replace('', ' ')) - .appendTo($div); - Ox.Editable({ - placeholder: formatLight('No License'), - tooltip: pandora.getEditTooltip(), - value: (data.license || []).join(', ') - }) - .bindEvent({ - submit: function(event) { - editMetadata('license', event.value); - } - }) - .appendTo($div); - } else if (data.license) { - $div.html( - formatKey('License') - + (data.license || []).join(', ') - ); - } + renderGroup(['license']); // Space ------------------------------------------------------------------- @@ -470,7 +344,7 @@ pandora.ui.infoView = function(data) { .css({margin: '2px 0 0 -1px'}) // fixme: weird .append( Ox.Editable({ - placeholder: key == 'groups' ? formatLight('No Groups') : '', + placeholder: key == 'groups' ? formatLight(Ox._('No Groups')) : '', editable: canEdit, tooltip: canEdit ? pandora.getEditTooltip() : '', value: key == 'user' ? data[key] : data[key].join(', ') @@ -512,14 +386,13 @@ pandora.ui.infoView = function(data) { // Notes -------------------------------------------------------------------- if (canEdit) { - $('
') .css({marginBottom: '4px'}) .append(formatKey('Notes', true)) .append( - Ox.Editable({ + Ox.EditableContent({ height: 128, - placeholder: formatLight('No notes'), + placeholder: formatLight(Ox._('No notes')), tooltip: pandora.getEditTooltip(), type: 'textarea', value: data.notes || '', @@ -532,7 +405,6 @@ pandora.ui.infoView = function(data) { }) ) .appendTo($right); - } $('
').css({height: '16px'}).appendTo($right); @@ -552,7 +424,6 @@ pandora.ui.infoView = function(data) { descriptions[key] && descriptions[key].options({ value: result.data[key + 'description'] }); - Ox.Request.clearCache(); // fixme: too much? can change filter/list etc if (result.data.id != data.id) { pandora.UI.set({item: result.data.id}); @@ -579,25 +450,19 @@ pandora.ui.infoView = function(data) { function formatKey(key, isStatistics) { var item = Ox.getObjectById(pandora.site.itemKeys, key); - key = item ? item.title : key; + key = Ox._(item ? item.title : key); return isStatistics ? $('
').css({marginBottom: '4px', fontWeight: 'bold'}) - .html(Ox.toTitleCase(key).replace(' Per ', ' per ')) - : '' + Ox.toTitleCase(key) + ': '; + .html(Ox._(Ox.toTitleCase(key).replace(' Per ', ' per '))) + : '' + Ox._(Ox.toTitleCase(key)) + + ': '; } function formatLight(str) { return '' + str + ''; } - function formatValue(value, key) { - if (key == 'date') { - return value ? Ox.formatDate(value, - ['', '%Y', '%B %Y', '%B %e, %Y'][value.split('-').length] - ) : ''; - } else if (key == 'duration') { - return value < 60 ? Math.round(value) + ' sec' : Math.round(value / 60) + ' min'; - } + function formatLink(value, key) { return (Ox.isArray(value) ? value : [value]).map(function(value) { return key ? '' + value + '' @@ -605,6 +470,18 @@ pandora.ui.infoView = function(data) { }).join(', '); } + function formatValue(value, key) { + var ret; + if (key == 'date') { + ret = value ? Ox.formatDate(value, + ['', '%Y', '%B %Y', '%B %e, %Y'][value.split('-').length] + ) : ''; + } else { + ret = value; + } + return formatLink(ret, key); + } + function getRightsLevelElement(rightsLevel) { return Ox.Theme.formatColorLevel( rightsLevel, @@ -614,6 +491,12 @@ pandora.ui.infoView = function(data) { ); } + function getValue(key, value) { + return !value ? '' + : Ox.contains(listKeys, key) ? value.join(', ') + : value; + } + function renderCapabilities(rightsLevel) { var capabilities = [].concat( canEdit ? [{name: 'canSeeItem', symbol: 'Find'}] : [], @@ -674,8 +557,8 @@ pandora.ui.infoView = function(data) { }); if (!canEdit) { Ox.Button({ - title: 'Help', - tooltip: 'About Rights', + title: Ox._('Help'), + tooltip: Ox._('About Rights'), type: 'image' }) .css({marginLeft: '52px'}) @@ -689,6 +572,39 @@ pandora.ui.infoView = function(data) { }); } + function renderGroup(keys) { + var $element; + if (canEdit || keys.filter(function(key) { + return data[key]; + }).length) { + $element = $('
').css(css); + keys.forEach(function(key, i) { + if (canEdit || data[key]) { + if ($element.children().length) { + $('').html('; ').appendTo($element); + } + $('').html(formatKey(key)).appendTo($element); + Ox.EditableContent({ + clickLink: pandora.clickLink, + format: function(value) { + return formatValue(value, key); + }, + placeholder: formatLight('unknown'), + tooltip: canEdit ? pandora.getEditTooltip() : '', + value: getValue(key, data[key]) + }) + .bindEvent({ + submit: function(data) { + editMetadata(key, data.value); + } + }) + .appendTo($element); + } + }); + $element.appendTo($center); + } + } + function renderRightsLevel() { var $rightsLevelElement = getRightsLevelElement(data.rightslevel), $rightsLevelSelect; @@ -696,7 +612,7 @@ pandora.ui.infoView = function(data) { if (canEdit) { $rightsLevelSelect = Ox.Select({ items: pandora.site.rightsLevels.map(function(rightsLevel, i) { - return {id: i, title: rightsLevel.name}; + return {id: i, title: Ox._(rightsLevel.name)}; }), width: 128, value: data.rightslevel @@ -771,8 +687,8 @@ pandora.ui.infoView = function(data) { that.reload = function() { var src = src = '/' + data.id + '/' + ( - ui.icons == 'posters' ? 'poster' : 'icon' - ) + '512.jpg?' + Ox.uid(); + ui.icons == 'posters' ? 'poster' : 'icon' + ) + '512.jpg?' + Ox.uid(); $icon.attr({src: src}); $reflectionIcon.attr({src: src}); iconSize = iconSize == 256 ? 512 : 256;