From a2a313904e22e5e19bc64b31ff4919c272b6a0c3 Mon Sep 17 00:00:00 2001 From: rolux Date: Thu, 11 Jul 2013 14:38:19 +0200 Subject: [PATCH] update info views --- static/js/pandora/infoView.0xdb.js | 51 ++- static/js/pandora/infoView.indiancinema.js | 212 +++++----- static/js/pandora/infoView.js | 445 ++++++++++----------- static/js/pandora/infoView.padma.js | 228 +++++++---- 4 files changed, 504 insertions(+), 432 deletions(-) diff --git a/static/js/pandora/infoView.0xdb.js b/static/js/pandora/infoView.0xdb.js index 43ea559d5..e95979fdf 100644 --- a/static/js/pandora/infoView.0xdb.js +++ b/static/js/pandora/infoView.0xdb.js @@ -39,10 +39,6 @@ pandora.ui.infoView = function(data) { $options = Ox.MenuButton({ items: [ - { - id: 'embed', - title: Ox._('Embed...'), - }, { id: 'update', title: Ox._('Update Metadata'), @@ -67,9 +63,7 @@ pandora.ui.infoView = function(data) { }) .bindEvent({ click: function(data) { - if (data.id == 'embed') { - // ... - } else if (data.id == 'update') { + if (data.id == 'update') { updateMetadata(); } else if (data.id == 'delete') { pandora.$ui.deleteItemDialog = pandora.ui.deleteItemDialog(data).open(); @@ -130,7 +124,7 @@ pandora.ui.infoView = function(data) { left: (canEdit ? listWidth : 0) + 'px', top: 0, right: 0, - height: pandora.$ui.contentPanel.size(1) + 'px' + height: getHeight() + 'px' }) .appendTo($info), @@ -250,7 +244,6 @@ pandora.ui.infoView = function(data) { value: data.title }) .css({ - display: 'inline-block', marginBottom: '-3px', fontWeight: 'bold', fontSize: '13px', @@ -262,7 +255,6 @@ pandora.ui.infoView = function(data) { editMetadata('title', event.value); } }) - .appendTo($text) ) .appendTo($text); @@ -285,7 +277,6 @@ pandora.ui.infoView = function(data) { value: data.director ? data.director.join(', ') : '' }) .css({ - display: 'inline-block', marginBottom: '-3px', fontWeight: 'bold', fontSize: '13px', @@ -418,7 +409,7 @@ pandora.ui.infoView = function(data) { return formatValue(value.actor, 'name') + ( canSeeAllMetadata && value.character - ? ' ' + formatLight('(' + formatValue(value.character) + ')') + ? ' ' + formatLight('(' + value.character + ')') : '' ); }).join(', ') @@ -569,7 +560,8 @@ pandora.ui.infoView = function(data) { .css({marginBottom: '4px'}) .append( formatKey( - key == 'votes' ? 'Mainstream Score' : 'Arthouse Score', true + key == 'votes' ? 'Mainstream Score' : 'Arthouse Score', + 'statistics' ) ) .append( @@ -594,7 +586,7 @@ pandora.ui.infoView = function(data) { value = data[key] || 0; $('
') .css({marginBottom: '4px'}) - .append(formatKey(itemKey.title, true)) + .append(formatKey(itemKey.title, 'statistics')) .append( Ox.Theme.formatColor(null, 'gradient') .css({textAlign: 'right', cursor: 'pointer'}) @@ -620,7 +612,7 @@ pandora.ui.infoView = function(data) { var value = data[key] || 0; $('
') .css({marginBottom: '4px'}) - .append(formatKey(key, true)) + .append(formatKey(key, 'statistics')) .append( Ox.Theme.formatColor(value, key == 'volume' ? 'lightness' : key) .css({textAlign: 'right', cursor: 'pointer'}) @@ -643,7 +635,7 @@ pandora.ui.infoView = function(data) { $('
') .css({marginBottom: '4px'}) .append( - formatKey(key.slice(0, -9) + ' per minute', true) + formatKey(key.slice(0, -9) + ' per minute', 'statistics') ) .append( Ox.Theme.formatColor(null, 'gradient') @@ -666,7 +658,7 @@ pandora.ui.infoView = function(data) { var $rightsLevel = $('
'); $('
') .css({marginBottom: '4px'}) - .append(formatKey('Rights Level', true)) + .append(formatKey('Rights Level', 'statistics')) .append($rightsLevel) .appendTo($statistics); renderRightsLevel(); @@ -676,7 +668,7 @@ pandora.ui.infoView = function(data) { if (canEdit) { $('
') .css({marginBottom: '4px'}) - .append(formatKey('Notes', true)) + .append(formatKey('Notes', 'statistics')) .append( Ox.EditableContent({ clickLink: pandora.clickLink, @@ -742,11 +734,14 @@ pandora.ui.infoView = function(data) { } } - function formatKey(key, isStatistics) { - return isStatistics - ? $('
').css({marginBottom: '4px', fontWeight: 'bold'}) + function formatKey(key, mode) { + var item = Ox.getObjectById(pandora.site.itemKeys, key); + key = Ox._(item ? item.title : key); + mode = mode || 'text'; + return mode == 'text' + ? '' + Ox._(Ox.toTitleCase(key)) + ': ' + : $('
').css({marginBottom: '4px', fontWeight: 'bold'}) .html(Ox._(Ox.toTitleCase(key).replace(' Per ', ' per '))) - : '' + Ox._(Ox.toTitleCase(key)) + ': '; } function formatLight(str) { @@ -774,6 +769,10 @@ pandora.ui.infoView = function(data) { }).join(', '); } + function getHeight() { + return pandora.$ui.contentPanel.size(1) - 16; + } + function getRightsLevelElement(rightsLevel) { return Ox.Theme.formatColorLevel( rightsLevel, @@ -944,7 +943,7 @@ pandora.ui.infoView = function(data) { left: 0, top: 0, width: listWidth + 'px', - height: pandora.$ui.contentPanel.size(1) - 16 + 'px' + height: getHeight() + 'px' }) .bindEvent({ select: function(event) { @@ -1132,9 +1131,7 @@ pandora.ui.infoView = function(data) { }; that.resize = function() { - var height = pandora.$ui.contentPanel.size(1) - 16; - $list && $list.css({height: height + 'px'}); - $data.css({height: height + 'px'}); + $list && $list.css({height: getHeight() + 'px'}); }; that.bindEvent({ @@ -1146,4 +1143,4 @@ pandora.ui.infoView = function(data) { return that; -} +}; diff --git a/static/js/pandora/infoView.indiancinema.js b/static/js/pandora/infoView.indiancinema.js index 0b1d73abf..a51471b8e 100644 --- a/static/js/pandora/infoView.indiancinema.js +++ b/static/js/pandora/infoView.indiancinema.js @@ -38,34 +38,103 @@ pandora.ui.infoView = function(data) { }, statisticsWidth = 128, - that = Ox.Element(), + $bar = Ox.Bar({size: 16}) + .bindEvent({ + doubleclick: function(e) { + if ($(e.target).is('.OxBar')) { + $info.animate({scrollTop: 0}, 250); + } + } + }), - $info = $('
') - .css({ - position: 'absolute', - left: 0, - top: 0, - right: 0 + $options = Ox.MenuButton({ + items: [ + { + id: 'imdb', + title: Ox._('Update IMDb ID...') + }, + { + id: 'metadata', + title: Ox._('Update Metadata...') + }, + {}, + { + id: 'upload', + title: Ox._('Upload Video...') + }, + {}, + { + id: 'delete', + title: Ox._('Delete {0}...', [pandora.site.itemName.singular]), + disabled: !canRemove + } + ], + style: 'square', + title: 'set', + tooltip: Ox._('Options'), + type: 'image', }) - .appendTo(that.$element), + .css({ + float: 'left', + borderColor: 'rgba(0, 0, 0, 0)', + background: 'rgba(0, 0, 0, 0)' + }) + .bindEvent({ + click: function(data_) { + if (data_.id == 'imdb') { + pandora.$ui.idDialog = pandora.ui.idDialog(data).open(); + } else if (data_.id == 'metadata') { + pandora.$ui.metadataDialog = pandora.ui.metadataDialog(data).open(); + } else if (data_.id == 'upload') { + pandora.$ui.uploadDialog = pandora.ui.uploadDialog(data).open(); + } else if (data_.id == 'delete') { + pandora.$ui.deleteItemDialog = pandora.ui.deleteItemDialog(data).open(); + } + } + }) + .appendTo($bar), - $data = Ox.Container() - .css({ - position: 'absolute', - left: (canEdit ? listWidth : 0) + 'px', - top: 0, - right: 0, - height: pandora.$ui.contentPanel.size(1) + 'px' + $edit = Ox.MenuButton({ + items: [ + { + id: 'insert', + title: Ox._('Insert HTML...'), + disabled: true + } + ], + style: 'square', + title: 'edit', + tooltip: Ox._('Edit'), + type: 'image', }) - .appendTo($info), + .css({ + float: 'right', + borderColor: 'rgba(0, 0, 0, 0)', + background: 'rgba(0, 0, 0, 0)' + }) + .bindEvent({ + click: function(data) { + // ... + } + }) + .appendTo($bar), + + $info = Ox.Element().css({overflowY: 'auto'}), + + that = Ox.SplitPanel({ + elements: [ + {element: $bar, size: 16}, + {element: $info} + ], + orientation: 'vertical' + }), $icon = Ox.Element({ element: '' }) .attr({ src: '/' + data.id + '/' + ( - ui.icons == 'posters' - ? (ui.showSitePosters ? 'siteposter' : 'poster') : 'icon' + ui.icons == 'posters' ? 'poster' : 'icon' ) + '512.jpg?' + data.modified }) .css({ @@ -80,7 +149,7 @@ pandora.ui.infoView = function(data) { .bindEvent({ singleclick: toggleIconSize }) - .appendTo($data.$element), + .appendTo($info), $reflection = $('
') .addClass('OxReflection') @@ -92,7 +161,7 @@ pandora.ui.infoView = function(data) { height: Math.round(iconSize / 2) + 'px', overflow: 'hidden' }) - .appendTo($data.$element), + .appendTo($info), $reflectionIcon = $('') .attr({ @@ -126,7 +195,7 @@ pandora.ui.infoView = function(data) { top: margin + 'px', right: margin + statisticsWidth + margin + 'px' }) - .appendTo($data.$element), + .appendTo($info), $alternativeTitles, @@ -145,12 +214,18 @@ pandora.ui.infoView = function(data) { top: margin + 'px', right: margin + 'px' }) - .appendTo($data.$element), - - $editMenu, + .appendTo($info), $capabilities; + [$options, $edit].forEach(function($element) { + $element.find('input').css({ + borderWidth: 0, + borderRadius: 0, + padding: '3px' + }); + }); + // Title ------------------------------------------------------------------- $('
') @@ -179,7 +254,6 @@ pandora.ui.infoView = function(data) { editMetadata('title', event.value); } }) - .appendTo($text) ) .appendTo($text); @@ -304,51 +378,6 @@ pandora.ui.infoView = function(data) { $('
').css({height: '16px'}).appendTo($text); - // Menu -------------------------------------------------------------------- - - if (canEdit) { - $editMenu = Ox.MenuButton({ - items: [ - { - id: 'imdb', - title: Ox._('Update IMDb ID...') - }, - { - id: 'metadata', - title: Ox._('Update Metadata...') - }, - {}, - { - id: 'upload', - title: Ox._('Upload Video...') - }, - {}, - { - id: 'delete', - title: Ox._('Delete {0}...', [pandora.site.itemName.singular]), - disabled: !canRemove - } - ], - title: Ox._('Edit...'), - width: 128 - }) - .css({marginBottom: '4px'}) - .bindEvent({ - click: function(data_) { - if (data_.id == 'imdb') { - pandora.$ui.idDialog = pandora.ui.idDialog(data).open(); - } else if (data_.id == 'metadata') { - pandora.$ui.metadataDialog = pandora.ui.metadataDialog(data).open(); - } else if (data_.id == 'upload') { - pandora.$ui.uploadDialog = pandora.ui.uploadDialog(data).open(); - } else if (data_.id == 'delete') { - pandora.$ui.deleteItemDialog = pandora.ui.deleteItemDialog(data).open(); - } - } - }) - .appendTo($statistics); - } - // Duration, Aspect Ratio -------------------------------------------------- ['duration', 'aspectratio'].forEach(function(key) { @@ -412,7 +441,6 @@ pandora.ui.infoView = function(data) { // Comments ---------------------------------------------------------------- if (canEdit) { - $('
') .css({marginBottom: '4px'}) .append( @@ -448,7 +476,6 @@ pandora.ui.infoView = function(data) { }) ) .appendTo($statistics); - } $('
').css({height: '16px'}).appendTo($statistics); @@ -486,17 +513,13 @@ pandora.ui.infoView = function(data) { } pandora.updateItemContext(); pandora.$ui.browser.value(result.data.id, key, result.data[key]); - if (Ox.contains(['title', 'director', 'year'], key)) { - if (ui.icons == 'posters') { - pandora.$ui.browser.find('img[src*="/' + data.id + '/"]').each(function() { - $(this).attr({ - src: '/' + data.id + '/poster128.jpg?' + Ox.uid() - }); - }); - src = '/' + data.id + '/poster512.jpg?' + Ox.uid() - $icon.attr({src: src}); - $reflectionIcon.attr({src: src}); - } + if ( + Ox.contains(['title', 'director', 'year'], key) + && ui.icons == 'posters' + ) { + src = '/' + data.id + '/poster512.jpg?' + Ox.uid() + $icon.attr({src: src}); + $reflectionIcon.attr({src: src}); } if (Ox.contains(nameKeys, key)) { data['namedescription'] = result.data['namedescription']; @@ -516,7 +539,7 @@ pandora.ui.infoView = function(data) { function formatKey(key, mode) { var item = Ox.getObjectById(pandora.site.itemKeys, key); key = Ox._(item ? item.title : key); - mode = mode || 'text' + mode = mode || 'text'; if (key == 'alternativeTitles') { key = 'alternative title' + ( data.alternativeTitles && data.alternativeTitles.length == 1 ? '' : 's' @@ -541,7 +564,9 @@ pandora.ui.infoView = function(data) { function formatLink(value, key) { return (Ox.isArray(value) ? value : [value]).map(function(value) { return key - ? '' + value + '' + ? '' + value + '' : value; }).join(Ox.contains(specialListKeys, key) ? '; ' : ', '); } @@ -567,14 +592,11 @@ pandora.ui.infoView = function(data) { ret = formatLink(value.split(', '), 'name'); } else if (listKeys.indexOf(key) > -1) { ret = formatLink(value.split(', '), key); - } else if (key == 'alternativeTitles') { - ret = formatLink( - Ox.decodeHTMLEntities(value).split('; ').map(Ox.encodeHTMLEntities), - 'title'); } else if (specialListKeys.indexOf(key) > -1) { ret = formatLink( Ox.decodeHTMLEntities(value).split('; ').map(Ox.encodeHTMLEntities), - key); + key + ); } else if (key == 'imdbId') { ret = '' + value + ''; @@ -1023,9 +1045,8 @@ pandora.ui.infoView = function(data) { that.reload = function() { var src = src = '/' + data.id + '/' + ( - ui.icons == 'posters' - ? (ui.showSitePosters ? 'siteposter' : '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; @@ -1034,11 +1055,6 @@ pandora.ui.infoView = function(data) { toggleIconSize(); }; - that.resize = function() { - var height = pandora.$ui.contentPanel.size(1); - $data.css({height: height + 'px'}); - }; - that.bindEvent({ pandora_icons: that.reload, pandora_showsiteposters: function() { diff --git a/static/js/pandora/infoView.js b/static/js/pandora/infoView.js index 279af3432..ebafb43e0 100644 --- a/static/js/pandora/infoView.js +++ b/static/js/pandora/infoView.js @@ -5,6 +5,7 @@ pandora.ui.infoView = function(data) { var ui = pandora.user.ui, descriptions = [], canEdit = pandora.site.capabilities.canEditMetadata[pandora.user.level] || data.editable, + canRemove = pandora.site.capabilities.canRemoveItems[pandora.user.level], css = { marginTop: '4px', textAlign: 'justify', @@ -19,27 +20,80 @@ pandora.ui.infoView = function(data) { iconLeft = iconSize == 256 ? Math.floor((iconSize - iconWidth) / 2) : 0, borderRadius = ui.icons == 'posters' ? 0 : iconSize / 8, margin = 16, + nameKeys = ['director'], + listKeys = nameKeys.concat(['country', 'groups']), statisticsWidth = 128, - uid = Ox.uid(), - that = Ox.Element(), + $bar = Ox.Bar({size: 16}) + .bindEvent({ + doubleclick: function(e) { + if ($(e.target).is('.OxBar')) { + $info.animate({scrollTop: 0}, 250); + } + } + }), - $div, - $list, - - $info = Ox.Element() - .css({ - position: 'absolute', - left: 0, - top: 0, - right: 0, - bottom: 0, - overflowY: 'auto' + $options = Ox.MenuButton({ + items: [ + { + id: 'delete', + title: Ox._('Delete {0}...', [pandora.site.itemName.singular]), + disabled: !canRemove + } + ], + style: 'square', + title: 'set', + tooltip: Ox._('Options'), + type: 'image', }) - .appendTo(that), + .css({ + float: 'left', + borderColor: 'rgba(0, 0, 0, 0)', + background: 'rgba(0, 0, 0, 0)' + }) + .bindEvent({ + click: function(data_) { + if (data_.id == 'delete') { + pandora.$ui.deleteItemDialog = pandora.ui.deleteItemDialog(data).open(); + } + } + }) + .appendTo($bar), - $left = Ox.Element() - .appendTo($info), + $edit = Ox.MenuButton({ + items: [ + { + id: 'insert', + title: Ox._('Insert HTML...'), + disabled: true + } + ], + style: 'square', + title: 'edit', + tooltip: Ox._('Edit'), + type: 'image', + }) + .css({ + float: 'right', + borderColor: 'rgba(0, 0, 0, 0)', + background: 'rgba(0, 0, 0, 0)' + }) + .bindEvent({ + click: function(data) { + // ... + } + }) + .appendTo($bar), + + $info = Ox.Element().css({overflowY: 'auto'}), + + that = Ox.SplitPanel({ + elements: [ + {element: $bar, size: 16}, + {element: $info} + ], + orientation: 'vertical' + }), $icon = Ox.Element({ element: '', @@ -47,7 +101,7 @@ pandora.ui.infoView = function(data) { .attr({ src: '/' + data.id + '/' + ( ui.icons == 'posters' ? 'poster' : 'icon' - ) + '512.jpg?' + uid + ) + '512.jpg?' + data.modified }) .css({ position: 'absolute', @@ -61,7 +115,7 @@ pandora.ui.infoView = function(data) { .bindEvent({ singleclick: toggleIconSize }) - .appendTo($left), + .appendTo($info), $reflection = $('
') .addClass('OxReflection') @@ -73,13 +127,13 @@ pandora.ui.infoView = function(data) { height: iconSize / 2 + 'px', overflow: 'hidden' }) - .appendTo($left), + .appendTo($info), $reflectionIcon = $('') .attr({ src: '/' + data.id + '/' + ( ui.icons == 'posters' ? 'poster' : 'icon' - ) + '512.jpg?' + uid + ) + '512.jpg?' + data.modified }) .css({ position: 'absolute', @@ -98,16 +152,7 @@ pandora.ui.infoView = function(data) { }) .appendTo($reflection), - $data = $('
') - .css({ - position: 'absolute', - left: margin + 'px', - top: margin + iconHeight + margin + 'px', - width: iconSize + 'px', - }) - .appendTo($left), - - $center = Ox.Element() + $text = Ox.Element() .addClass('OxTextPage') .css({ position: 'absolute', @@ -117,7 +162,7 @@ pandora.ui.infoView = function(data) { }) .appendTo($info), - $right = $('
') + $statistics = $('
') .css({ position: 'absolute', width: statisticsWidth + 'px', @@ -128,15 +173,18 @@ pandora.ui.infoView = function(data) { $capabilities; + [$options, $edit].forEach(function($element) { + $element.find('input').css({ + borderWidth: 0, + borderRadius: 0, + padding: '3px' + }); + }); + if (!canEdit) { pandora.createLinks($info); } - var listKeys = [ - 'country', 'language', 'director', 'featuring', - 'groups' - ]; - // Title ------------------------------------------------------------------- $('
') @@ -144,13 +192,12 @@ pandora.ui.infoView = function(data) { marginTop: '-2px', }) .append( - Ox.Editable({ + Ox.EditableContent({ editable: canEdit, tooltip: canEdit ? pandora.getEditTooltip() : '', value: data.title || '' }) .css({ - display: 'inline-block', marginBottom: '-3px', fontWeight: 'bold', fontSize: '13px', @@ -163,120 +210,44 @@ pandora.ui.infoView = function(data) { } }) ) - .appendTo($center); + .appendTo($text); - // Year, Country, Language and Duration ----------------------------------- + // Director, Year and Country ---------------------------------------------- - if (canEdit) { - $div = $('
').css(css).css({marginTop: '12px'}).appendTo($center); - ['year', 'country', '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(Ox._('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); - }); - $('
').appendTo($center); - } else { - html = []; - ['year', 'country', 'language', 'duration'].forEach(function(key) { - if (data[key]) { - html.push(formatKey(key) + formatValue(data[key], key)); - } - }); - $('
').css(css).html(html.join('; ')).appendTo($center); - } + renderGroup(['director', 'year', 'country']); - // Director, Cinematographer and Featuring --------------------------------- + // Summary ----------------------------------------------------------------- - if (canEdit) { - $div = $('
').css(css).css('clear', 'both').appendTo($center); - ['director', '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(Ox._('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); - }); - $('
').appendTo($center); - } else if (data.director || data.cinematographer || data.featuring) { - html = []; - ['director', '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); - } - - // Summary ------------------------------------------------------------- - $div = $('
').css(css).css('clear', 'both').appendTo($center); - - if (canEdit) { + if (canEdit || data.summary) { $('
') - .css({marginTop: '16px'}) .append( - Ox.Editable({ + Ox.EditableContent({ clickLink: pandora.clickLink, editable: canEdit, + format: function(value) { + return value.replace( + /').css(css).html(data.summary).appendTo($center); + .appendTo($text); } // Duration, Aspect Ratio -------------------------------------------------- @@ -286,7 +257,7 @@ pandora.ui.infoView = function(data) { value = data[key] || 0; $('
') .css({marginBottom: '4px'}) - .append(formatKey(itemKey.title, true)) + .append(formatKey(itemKey.title, 'statistics')) .append( Ox.Theme.formatColor(null, 'gradient') .css({textAlign: 'right'}) @@ -295,7 +266,7 @@ pandora.ui.infoView = function(data) { .apply(null, [value].concat(itemKey.format.args)) ) ) - .appendTo($right); + .appendTo($statistics); }); // Hue, Saturation, Lightness, Volume -------------------------------------- @@ -303,88 +274,58 @@ pandora.ui.infoView = function(data) { ['hue', 'saturation', 'lightness', 'volume'].forEach(function(key) { $('
') .css({marginBottom: '4px'}) - .append(formatKey(key, true)) + .append(formatKey(key, 'statistics')) .append( Ox.Theme.formatColor( data[key] || 0, key == 'volume' ? 'lightness' : key ).css({textAlign: 'right'}) ) - .appendTo($right); + .appendTo($statistics); }); // Cuts per Minute --------------------------------------------------------- $('
') .css({marginBottom: '4px'}) - .append(formatKey('cuts per minute', true)) + .append(formatKey('cuts per minute', 'statistics')) .append( Ox.Theme.formatColor(null, 'gradient') .css({textAlign: 'right'}) .html(Ox.formatNumber(data['cutsperminute'] || 0, 3)) ) - .appendTo($right); - - // User and Groups --------------------------------------------------------- - - ['user', 'groups'].forEach(function(key) { - (canEdit || data[key] && data[key].length) && $('
') - .css({marginBottom: '4px'}) - .append(formatKey(key, true)) - .append( - $('
') - .css({margin: '2px 0 0 -1px'}) // fixme: weird - .append( - Ox.Editable({ - placeholder: key == 'groups' ? formatLight('No Groups') : '', - editable: canEdit, - tooltip: canEdit ? pandora.getEditTooltip() : '', - value: key == 'user' ? data[key] : data[key].join(', ') - }) - .bindEvent({ - submit: function(event) { - editMetadata(key, event.value); - } - }) - ) - ) - .appendTo($right); - }); - - // Created and Modified ---------------------------------------------------- - - ['created', 'modified'].forEach(function(key) { - $('
') - .css({marginBottom: '4px'}) - .append(formatKey(key, true)) - .append( - $('
').html(Ox.formatDate(data[key], '%B %e, %Y')) - ) - .appendTo($right); - }); + .appendTo($statistics); // Rights Level ------------------------------------------------------------ - if (canEdit) { - var $rightsLevel = $('
'); - $('
') - .css({marginBottom: '4px'}) - .append(formatKey('Rights Level', true)) - .append($rightsLevel) - .appendTo($right); - renderRightsLevel(); - } + var $rightsLevel = $('
'); + $('
') + .css({marginBottom: '4px'}) + .append(formatKey('Rights Level', 'statistics')) + .append($rightsLevel) + .appendTo($statistics); + renderRightsLevel(); // Notes -------------------------------------------------------------------- if (canEdit) { - $('
') .css({marginBottom: '4px'}) - .append(formatKey('Notes', true)) .append( - Ox.Editable({ + formatKey('Notes', 'statistics').options({ + tooltip: Ox._('Only {0} can see and edit these comments', [ + Object.keys(pandora.site.capabilities.canEditMetadata).map(function(level, i) { + return ( + i == 0 ? '' + : i < Ox.len(pandora.site.capabilities.canEditMetadata) - 1 ? ', ' + : ' ' + Ox._('and') + ' ' + ) + Ox.toTitleCase(level) + }).join('')]) + }) + ) + .append( + Ox.EditableContent({ height: 128, - placeholder: formatLight('No notes'), + placeholder: formatLight(Ox._('No notes')), tooltip: pandora.getEditTooltip(), type: 'textarea', value: data.notes || '', @@ -396,11 +337,10 @@ pandora.ui.infoView = function(data) { } }) ) - .appendTo($right); - + .appendTo($statistics); } - $('
').css({height: '16px'}).appendTo($right); + $('
').css({height: '16px'}).appendTo($statistics); function editMetadata(key, value) { if (value != data[key]) { @@ -413,22 +353,18 @@ pandora.ui.infoView = function(data) { edit[key] = value ? value : null; } pandora.api.edit(edit, function(result) { - data[key] = value; + var src; + data[key] = result.data[key]; 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}); pandora.$ui.browser.value(data.id, 'id', result.data.id); } pandora.updateItemContext(); - // FIXME: value function should accept {k: v, ...} - pandora.$ui.browser.value(result.data.id, 'title', result.data.title); - pandora.$ui.browser.value(result.data.id, 'director', result.data.director); - pandora.$ui.browser.value(result.data.id, 'country', result.data.country); - pandora.$ui.browser.value(result.data.id, 'year', result.data.year); + pandora.$ui.browser.value(result.data.id, key, result.data[key]); pandora.$ui.itemTitle .options({ title: '' + result.data.title @@ -437,38 +373,58 @@ pandora.ui.infoView = function(data) { : '') + (result.data.year ? ' ' + result.data.year : '') + '' }); - //pandora.$ui.contentPanel.replaceElement(0, pandora.$ui.browser = pandora.ui.browser()); + if ( + Ox.contains(['title', 'director', 'year'], key) + && ui.icons == 'posters' + ) { + src = '/' + data.id + '/poster512.jpg?' + Ox.uid() + $icon.attr({src: src}); + $reflectionIcon.attr({src: src}); + } }); } } - function formatKey(key, isStatistics) { - return isStatistics - ? $('
').css({marginBottom: '4px', fontWeight: 'bold'}) - .html(Ox.toTitleCase(key).replace(' Per ', ' per ')) - : '' + Ox.toTitleCase(key) + ': '; + function formatKey(key, mode) { + var item = Ox.getObjectById(pandora.site.itemKeys, key); + key = Ox._(item ? item.title : key); + mode = mode || 'text'; + return mode == 'text' + ? '' + Ox.toTitleCase(key) + ': ' + : mode == 'description' + ? Ox.toTitleCase(key) + : Ox.Element() + .css({marginBottom: '4px', fontWeight: 'bold'}) + .html(Ox.toTitleCase(key) + .replace(' Per ', ' per ')); } function formatLight(str) { - return '' + 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 + '' + return key + ? '' + value + '' : value; }).join(', '); } + function formatValue(key, value) { + var ret; + if (key == 'year') { + ret = formatLink(value, 'year'); + } else if (nameKeys.indexOf(key) > -1) { + ret = formatLink(value.split(', '), 'name'); + } else if (listKeys.indexOf(key) > -1) { + ret = formatLink(value.split(', '), key); + } else { + ret = value; + } + return ret; + } + function getRightsLevelElement(rightsLevel) { return Ox.Theme.formatColorLevel( rightsLevel, @@ -478,6 +434,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'}] : [], @@ -553,6 +515,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(key, value); + }, + placeholder: formatLight('unknown'), + tooltip: canEdit ? pandora.getEditTooltip() : '', + value: getValue(key, data[key]) + }) + .bindEvent({ + submit: function(data) { + editMetadata(key, data.value); + } + }) + .appendTo($element); + } + }); + $element.appendTo($text); + } + } + function renderRightsLevel() { var $rightsLevelElement = getRightsLevelElement(data.rightslevel), $rightsLevelSelect; @@ -623,11 +618,7 @@ pandora.ui.infoView = function(data) { width: iconSize + 'px', height: iconSize / 2 + 'px' }, 250); - $data.animate({ - top: margin + iconHeight + margin + 'px', - width: iconSize + 'px', - }, 250); - $center.animate({ + $text.animate({ left: margin + (iconSize == 256 ? 256 : iconWidth) + margin + 'px', }, 250); pandora.UI.set({infoIconSize: iconSize}); @@ -645,10 +636,6 @@ pandora.ui.infoView = function(data) { toggleIconSize(); }; - that.resize = function() { - - }; - that.bindEvent({ pandora_icons: that.reload, pandora_showsiteposters: function() { @@ -658,4 +645,4 @@ pandora.ui.infoView = function(data) { return that; -} +}; diff --git a/static/js/pandora/infoView.padma.js b/static/js/pandora/infoView.padma.js index 7d9634443..ae8f72c26 100644 --- a/static/js/pandora/infoView.padma.js +++ b/static/js/pandora/infoView.padma.js @@ -4,6 +4,7 @@ pandora.ui.infoView = function(data) { var ui = pandora.user.ui, canEdit = pandora.site.capabilities.canEditMetadata[pandora.user.level] || data.editable, + canRemove = pandora.site.capabilities.canRemoveItems[pandora.user.level], css = { marginTop: '4px', textAlign: 'justify', @@ -23,21 +24,76 @@ pandora.ui.infoView = function(data) { listKeys = nameKeys.concat(['language', 'topic', 'license', 'groups']), statisticsWidth = 128, - that = Ox.Element(), + $bar = Ox.Bar({size: 16}) + .bindEvent({ + doubleclick: function(e) { + if ($(e.target).is('.OxBar')) { + $info.animate({scrollTop: 0}, 250); + } + } + }), - $div, - $list, - - $info = Ox.Element() - .css({ - position: 'absolute', - left: 0, - top: 0, - right: 0, - bottom: 0, - overflowY: 'auto' + $options = Ox.MenuButton({ + items: [ + { + id: 'delete', + title: Ox._('Delete {0}...', [pandora.site.itemName.singular]), + disabled: !canRemove + } + ], + style: 'square', + title: 'set', + tooltip: Ox._('Options'), + type: 'image', }) - .appendTo(that), + .css({ + float: 'left', + borderColor: 'rgba(0, 0, 0, 0)', + background: 'rgba(0, 0, 0, 0)' + }) + .bindEvent({ + click: function(data_) { + if (data_.id == 'delete') { + pandora.$ui.deleteItemDialog = pandora.ui.deleteItemDialog(data).open(); + } + } + }) + .appendTo($bar), + + $edit = Ox.MenuButton({ + items: [ + { + id: 'insert', + title: Ox._('Insert HTML...'), + disabled: true + } + ], + style: 'square', + title: 'edit', + tooltip: Ox._('Edit'), + type: 'image', + }) + .css({ + float: 'right', + borderColor: 'rgba(0, 0, 0, 0)', + background: 'rgba(0, 0, 0, 0)' + }) + .bindEvent({ + click: function(data) { + // ... + } + }) + .appendTo($bar), + + $info = Ox.Element().css({overflowY: 'auto'}), + + that = Ox.SplitPanel({ + elements: [ + {element: $bar, size: 16}, + {element: $info} + ], + orientation: 'vertical' + }), $left = Ox.Element() .css({ @@ -118,7 +174,7 @@ pandora.ui.infoView = function(data) { }) .appendTo($left), - $center = Ox.Element() + $text = Ox.Element() .addClass('OxTextPage') .css({ position: 'absolute', @@ -128,7 +184,7 @@ pandora.ui.infoView = function(data) { }) .appendTo($info), - $right = $('
') + $statistics = $('
') .css({ position: 'absolute', width: statisticsWidth + 'px', @@ -139,6 +195,14 @@ pandora.ui.infoView = function(data) { $capabilities; + [$options, $edit].forEach(function($element) { + $element.find('input').css({ + borderWidth: 0, + borderRadius: 0, + padding: '3px' + }); + }); + if (!canEdit) { pandora.createLinks($info); } @@ -147,7 +211,7 @@ pandora.ui.infoView = function(data) { ['source', 'project'].forEach(function(key) { if (canEdit || data[key]) { - $div = $('
').css(css).css({margin: 0}).appendTo($data); + var $div = $('
').css(css).css({margin: 0}).appendTo($data); $('') .html( formatKey({ @@ -158,7 +222,7 @@ pandora.ui.infoView = function(data) { Ox.EditableContent({ clickLink: pandora.clickLink, format: function(value) { - return formatValue(value, key); + return formatValue(key, value); }, placeholder: formatLight(Ox._('unknown')), editable: canEdit, @@ -208,7 +272,8 @@ pandora.ui.infoView = function(data) { $('
') .css({ - margin: '-2px 0 12px 0', + marginTop: '-2px', + marginBottom: '12px' }) .append( Ox.EditableContent({ @@ -217,7 +282,6 @@ pandora.ui.infoView = function(data) { value: data.title }) .css({ - //marginBottom: '-3px', fontWeight: 'bold', fontSize: '13px', MozUserSelect: 'text', @@ -229,7 +293,7 @@ pandora.ui.infoView = function(data) { } }) ) - .appendTo($center); + .appendTo($text); // Groups ------------------------------------------------------------------ @@ -243,6 +307,10 @@ pandora.ui.infoView = function(data) { if (canEdit || data.summary) { $('
') + .css({ + marginTop: '12px', + marginBottom: '12px' + }) .append( Ox.EditableContent({ clickLink: pandora.clickLink, @@ -260,25 +328,24 @@ pandora.ui.infoView = function(data) { value: data.summary || '' }) .css(css) - // margin gets doubled in the editable -- does it? - .css({margin: '16px 0 12px 0'}) + .css({ + overflow: 'hidden' + }) .bindEvent({ submit: function(event) { editMetadata('summary', event.value); } }) ) - .appendTo($center); - $('
').css({width: '1px', height: 0, clear: 'both'}).appendTo($center); + .appendTo($text); + $('
').css({width: '1px', height: 0, clear: 'both'}).appendTo($text); } // License ----------------------------------------------------------------- renderGroup(['license']); - // Space ------------------------------------------------------------------- - - $('
').css(css).css({width: '1px', height: '16px'}).appendTo($center); + $('
').css(css).css({height: '16px'}).appendTo($text); // Duration, Aspect Ratio -------------------------------------------------- @@ -287,7 +354,7 @@ pandora.ui.infoView = function(data) { value = data[key] || 0; $('
') .css({marginBottom: '4px'}) - .append(formatKey(itemKey.title, true)) + .append(formatKey(itemKey.title, 'statistics')) .append( Ox.Theme.formatColor(null, 'gradient') .css({textAlign: 'right'}) @@ -296,7 +363,7 @@ pandora.ui.infoView = function(data) { .apply(null, [value].concat(itemKey.format.args)) ) ) - .appendTo($right); + .appendTo($statistics); }); // Hue, Saturation, Lightness, Volume -------------------------------------- @@ -304,33 +371,43 @@ pandora.ui.infoView = function(data) { ['hue', 'saturation', 'lightness', 'volume'].forEach(function(key) { $('
') .css({marginBottom: '4px'}) - .append(formatKey(key, true)) + .append(formatKey(key, 'statistics')) .append( Ox.Theme.formatColor( data[key] || 0, key == 'volume' ? 'lightness' : key ).css({textAlign: 'right'}) ) - .appendTo($right); + .appendTo($statistics); }); // Cuts per Minute --------------------------------------------------------- $('
') .css({marginBottom: '4px'}) - .append(formatKey('cuts per minute', true)) + .append(formatKey('cuts per minute', 'statistics')) .append( Ox.Theme.formatColor(null, 'gradient') .css({textAlign: 'right'}) .html(Ox.formatNumber(data['cutsperminute'] || 0, 3)) ) - .appendTo($right); + .appendTo($statistics); + + // Rights Level ------------------------------------------------------------ + + var $rightsLevel = $('
'); + $('
') + .css({marginBottom: '4px'}) + .append(formatKey(Ox._('Rights Level'), 'statistics')) + .append($rightsLevel) + .appendTo($statistics); + renderRightsLevel(); // User and Groups --------------------------------------------------------- ['user', 'groups'].forEach(function(key) { (canEdit || data[key] && data[key].length) && $('
') .css({marginBottom: '4px'}) - .append(formatKey(key, true)) + .append(formatKey(key, 'statistics')) .append( $('
') .css({margin: '2px 0 0 -1px'}) // fixme: weird @@ -348,7 +425,7 @@ pandora.ui.infoView = function(data) { }) ) ) - .appendTo($right); + .appendTo($statistics); }); // Created and Modified ---------------------------------------------------- @@ -356,31 +433,30 @@ pandora.ui.infoView = function(data) { ['created', 'modified'].forEach(function(key) { $('
') .css({marginBottom: '4px'}) - .append(formatKey(key, true)) + .append(formatKey(key, 'statistics')) .append( $('
').html(Ox.formatDate(data[key], '%B %e, %Y')) ) - .appendTo($right); + .appendTo($statistics); }); - // Rights Level ------------------------------------------------------------ - - if (canEdit) { - var $rightsLevel = $('
'); - $('
') - .css({marginBottom: '4px'}) - .append(formatKey(Ox._('Rights Level'), true)) - .append($rightsLevel) - .appendTo($right); - renderRightsLevel(); - } - // Notes -------------------------------------------------------------------- if (canEdit) { $('
') .css({marginBottom: '4px'}) - .append(formatKey('Notes', true)) + .append( + formatKey('Notes', 'statistics').options({ + tooltip: Ox._('Only {0} can see and edit these comments', [ + Object.keys(pandora.site.capabilities.canEditMetadata).map(function(level, i) { + return ( + i == 0 ? '' + : i < Ox.len(pandora.site.capabilities.canEditMetadata) - 1 ? ', ' + : ' ' + Ox._('and') + ' ' + ) + Ox.toTitleCase(level) + }).join('')]) + }) + ) .append( Ox.EditableContent({ height: 128, @@ -396,10 +472,10 @@ pandora.ui.infoView = function(data) { } }) ) - .appendTo($right); + .appendTo($statistics); } - $('
').css({height: '16px'}).appendTo($right); + $('
').css({height: '16px'}).appendTo($statistics); function editMetadata(key, value) { if (value != data[key]) { @@ -412,7 +488,7 @@ pandora.ui.infoView = function(data) { edit[key] = value ? value : null; } pandora.api.edit(edit, function(result) { - data[key] = value; + data[key] = result.data[key]; descriptions[key] && descriptions[key].options({ value: result.data[key + 'description'] }); @@ -422,11 +498,7 @@ pandora.ui.infoView = function(data) { pandora.$ui.browser.value(data.id, 'id', result.data.id); } pandora.updateItemContext(); - // FIXME: value function should accept {k: v, ...} - pandora.$ui.browser.value(result.data.id, 'title', result.data.title); - pandora.$ui.browser.value(result.data.id, 'director', result.data.director); - pandora.$ui.browser.value(result.data.id, 'country', result.data.country); - pandora.$ui.browser.value(result.data.id, 'year', result.data.year); + pandora.$ui.browser.value(result.data.id, key, result.data[key]); pandora.$ui.itemTitle .options({ title: '' + result.data.title @@ -440,29 +512,33 @@ pandora.ui.infoView = function(data) { } } - function formatKey(key, isStatistics) { + function formatKey(key, mode) { var item = Ox.getObjectById(pandora.site.itemKeys, key); key = Ox._(item ? item.title : key); - return isStatistics - ? $('
').css({marginBottom: '4px', fontWeight: 'bold'}) - .html(Ox._(Ox.toTitleCase(key).replace(' Per ', ' per '))) - : '' + Ox._(Ox.toTitleCase(key)) - + ': '; + mode = mode || 'text'; + return mode == 'text' + ? '' + Ox.toTitleCase(key) + ': ' + : mode == 'description' + ? Ox.toTitleCase(key) + : Ox.Element() + .css({marginBottom: '4px', fontWeight: 'bold'}) + .html(Ox.toTitleCase(key) + .replace(' Per ', ' per ')); } function formatLight(str) { - return '' + str + ''; + return '' + str + ''; } - function formatLink(value, key) { + function formatLink(key, value) { return (Ox.isArray(value) ? value : [value]).map(function(value) { - return key ? - '' + value + '' + return key + ? '' + value + '' : value; }).join(', '); } - function formatValue(value, key) { + function formatValue(key, value) { var ret; if (key == 'date') { ret = value ? Ox.formatDate(value, @@ -476,7 +552,7 @@ pandora.ui.infoView = function(data) { if (nameKeys.indexOf(key) > -1) { key = 'name'; } - return formatLink(ret, key); + return formatLink(key, ret); } function getRightsLevelElement(rightsLevel) { @@ -584,7 +660,7 @@ pandora.ui.infoView = function(data) { Ox.EditableContent({ clickLink: pandora.clickLink, format: function(value) { - return formatValue(value, key); + return formatValue(key, value); }, placeholder: formatLight('unknown'), tooltip: canEdit ? pandora.getEditTooltip() : '', @@ -598,7 +674,7 @@ pandora.ui.infoView = function(data) { .appendTo($element); } }); - $element.appendTo($center); + $element.appendTo($text); } } @@ -676,7 +752,7 @@ pandora.ui.infoView = function(data) { top: margin + iconHeight + margin + 'px', width: iconSize + 'px', }, 250); - $center.animate({ + $text.animate({ left: margin + (iconSize == 256 ? 256 : iconWidth) + margin + 'px', }, 250); pandora.UI.set({infoIconSize: iconSize}); @@ -694,10 +770,6 @@ pandora.ui.infoView = function(data) { toggleIconSize(); }; - that.resize = function() { - - }; - that.bindEvent({ pandora_icons: that.reload, pandora_showsiteposters: function() { @@ -707,4 +779,4 @@ pandora.ui.infoView = function(data) { return that; -} +};