diff --git a/static/js/infoView.js b/static/js/infoView.js index 6e68a95a..5bd588ed 100644 --- a/static/js/infoView.js +++ b/static/js/infoView.js @@ -198,9 +198,7 @@ pandora.ui.infoView = function(data, isMixed) { top: margin + 'px', right: margin + 'px' }) - .appendTo($info), - - $capabilities; + .appendTo($info); [$options, $edit].forEach(function($element) { $element.find('input').css({ @@ -346,7 +344,7 @@ pandora.ui.infoView = function(data, isMixed) { .append(formatKey('Rights Level', 'statistics')) .append($rightsLevel) .appendTo($statistics); - renderRightsLevel(); + pandora.renderRightsLevel(that, $rightsLevel, data, isMixed, isMultiple, canEdit); // Notes -------------------------------------------------------------------- @@ -496,15 +494,6 @@ pandora.ui.infoView = function(data, isMixed) { return ret; } - function getRightsLevelElement(rightsLevel) { - return Ox.Theme.formatColorLevel( - rightsLevel, - pandora.site.rightsLevels.map(function(rightsLevel) { - return rightsLevel.name; - }) - ); - } - function getValue(key, value) { return !value ? '' : Ox.contains(specialListKeys, key) ? value.join('; ') @@ -512,81 +501,6 @@ pandora.ui.infoView = function(data, isMixed) { : value; } - function renderCapabilities(rightsLevel) { - var capabilities = [].concat( - canEdit ? [{name: 'canSeeItem', symbol: 'Find'}] : [], - [ - {name: 'canPlayClips', symbol: 'PlayInToOut'}, - {name: 'canPlayVideo', symbol: 'Play'}, - {name: 'canDownloadVideo', symbol: 'Download'} - ] - ), - userLevels = canEdit ? pandora.site.userLevels : [pandora.user.level]; - $capabilities.empty(); - userLevels.forEach(function(userLevel, i) { - var $element, - $line = $('
') - .css({ - height: '16px', - marginBottom: '4px' - }) - .appendTo($capabilities); - if (canEdit) { - $element = Ox.Theme.formatColorLevel(i, userLevels.map(function(userLevel) { - return Ox.toTitleCase(userLevel); - }), [0, 240]); - Ox.Label({ - textAlign: 'center', - title: Ox.toTitleCase(userLevel), - width: 60 - }) - .addClass('OxColor OxColorGradient') - .css({ - float: 'left', - height: '12px', - paddingTop: '2px', - background: $element.css('background'), - fontSize: '8px', - color: $element.css('color') - }) - .data({OxColor: $element.data('OxColor')}) - .appendTo($line); - } - capabilities.forEach(function(capability) { - var hasCapability = pandora.hasCapability(capability.name, userLevel) >= rightsLevel, - $element = Ox.Theme.formatColorLevel(hasCapability, ['', '']); - Ox.Button({ - tooltip: (canEdit ? Ox.toTitleCase(userLevel) : 'You') + ' ' - + (hasCapability ? 'can' : 'can\'t') + ' ' - + Ox.toSlashes(capability.name) - .split('/').slice(1).join(' ') - .toLowerCase(), - title: capability.symbol, - type: 'image' - }) - .addClass('OxColor OxColorGradient') - .css({background: $element.css('background')}) - .css('margin' + (canEdit ? 'Left' : 'Right'), '4px') - .data({OxColor: $element.data('OxColor')}) - .appendTo($line); - }); - if (!canEdit) { - Ox.Button({ - title: Ox._('Help'), - tooltip: Ox._('About Rights'), - type: 'image' - }) - .css({marginLeft: '52px'}) - .bindEvent({ - click: function() { - pandora.UI.set({page: 'rights'}); - } - }) - .appendTo($line); - } - }); - } - function renderGroup(keys) { var $element; keys.forEach(function(key) { displayedKeys.push(key) }); @@ -632,53 +546,6 @@ pandora.ui.infoView = function(data, isMixed) { } } - function renderRightsLevel() { - var $rightsLevelElement = getRightsLevelElement(data.rightslevel), - $rightsLevelSelect; - $rightsLevel.empty(); - if (canEdit) { - $rightsLevelSelect = Ox.Select({ - items: pandora.site.rightsLevels.map(function(rightsLevel, i) { - return {id: i, title: rightsLevel.name}; - }), - width: 128, - value: data.rightslevel - }) - .addClass('OxColor OxColorGradient') - .css({ - marginBottom: '4px', - background: $rightsLevelElement.css('background') - }) - .data({OxColor: $rightsLevelElement.data('OxColor')}) - .bindEvent({ - change: function(event) { - var rightsLevel = event.value; - $rightsLevelElement = getRightsLevelElement(rightsLevel); - $rightsLevelSelect - .css({background: $rightsLevelElement.css('background')}) - .data({OxColor: $rightsLevelElement.data('OxColor')}) - renderCapabilities(rightsLevel); - var edit = { - id: isMultiple ? ui.listSelection : data.id, - rightslevel: rightsLevel - }; - pandora.api.edit(edit, function(result) { - that.triggerEvent('change', Ox.extend({}, 'rightslevel', rightsLevel)); - }); - } - }) - .appendTo($rightsLevel); - } else { - $rightsLevelElement - .css({ - marginBottom: '4px' - }) - .appendTo($rightsLevel); - } - $capabilities = $('
').appendTo($rightsLevel); - renderCapabilities(data.rightslevel); - } - function toggleIconSize() { iconSize = iconSize == 256 ? 512 : 256; iconWidth = iconRatio > 1 ? iconSize : Math.round(iconSize * iconRatio); diff --git a/static/js/infoView.padma.js b/static/js/infoView.padma.js index 93125b48..b6d44118 100644 --- a/static/js/infoView.padma.js +++ b/static/js/infoView.padma.js @@ -204,9 +204,7 @@ pandora.ui.infoView = function(data, isMixed) { top: margin + 'px', right: margin + 'px' }) - .appendTo($info), - - $capabilities; + .appendTo($info); [$options, $edit].forEach(function($element) { $element.find('input').css({ @@ -437,7 +435,7 @@ pandora.ui.infoView = function(data, isMixed) { .append(formatKey(Ox._('Rights Level'), 'statistics')) .append($rightsLevel) .appendTo($statistics); - renderRightsLevel(); + pandora.renderRightsLevel(that, $rightsLevel, data, isMixed, isMultiple, canEdit); // User and Groups --------------------------------------------------------- if (!isMultiple) { @@ -628,100 +626,12 @@ pandora.ui.infoView = function(data, isMixed) { return formatLink(key, ret, key == 'date' && value); } - function getRightsLevelElement(rightsLevel) { - return Ox.Theme.formatColorLevel( - rightsLevel, - pandora.site.rightsLevels.map(function(rightsLevel) { - return rightsLevel.name; - }) - ); - } - function getValue(key, value) { return !value ? '' : Ox.contains(listKeys, key) ? value.join(', ') : value; } - function renderCapabilities(rightsLevel) { - var capabilities = [].concat( - canEdit ? [{name: 'canSeeItem', symbol: 'Find'}] : [], - [ - {name: 'canPlayClips', symbol: 'PlayInToOut'}, - {name: 'canPlayVideo', symbol: 'Play'}, - {name: 'canDownloadVideo', symbol: 'Download'} - ] - ), - userLevels = canEdit ? pandora.site.userLevels : [pandora.user.level]; - $capabilities.empty(); - userLevels.forEach(function(userLevel, i) { - var $element, - $line = $('
') - .css({ - height: '16px', - marginBottom: '4px' - }) - .appendTo($capabilities); - if (canEdit) { - $element = Ox.Theme.formatColorLevel(i, userLevels.map(function(userLevel) { - return Ox.toTitleCase(userLevel); - }), [0, 240]); - Ox.Label({ - textAlign: 'center', - title: Ox._(Ox.toTitleCase(userLevel)), - width: 60 - }) - .addClass('OxColor OxColorGradient') - .css({ - float: 'left', - height: '12px', - paddingTop: '2px', - background: $element.css('background'), - fontSize: '8px', - color: $element.css('color') - }) - .data({OxColor: $element.data('OxColor')}) - .appendTo($line); - } - capabilities.forEach(function(capability) { - var hasCapability = pandora.hasCapability(capability.name, userLevel) >= rightsLevel, - $element = Ox.Theme.formatColorLevel(hasCapability, ['', '']); - Ox.Button({ - tooltip: Ox._('{0} ' - + (hasCapability ? 'can' : 'can\'t') + ' ' - + Ox.toSlashes(capability.name) - .split('/').slice(1).join(' ') - .toLowerCase() - .replace('see item', 'see the item') - .replace('play video', 'play the full video') - .replace('download video', 'download the video'), - [canEdit ? Ox._(Ox.toTitleCase(userLevel)) : Ox._('You')]), - title: capability.symbol, - type: 'image' - }) - .addClass('OxColor OxColorGradient') - .css({background: $element.css('background')}) - .css('margin' + (canEdit ? 'Left' : 'Right'), '4px') - .data({OxColor: $element.data('OxColor')}) - .appendTo($line); - }); - if (!canEdit) { - Ox.Button({ - title: Ox._('Help'), - tooltip: Ox._('About Rights'), - type: 'image' - }) - .css({marginLeft: '52px'}) - .bindEvent({ - click: function() { - pandora.UI.set({page: 'rights'}); - } - }) - .appendTo($line); - } - }); - } - function renderGroup(keys) { var $element; if (canEdit || keys.filter(function(key) { @@ -757,53 +667,6 @@ pandora.ui.infoView = function(data, isMixed) { } } - function renderRightsLevel() { - var $rightsLevelElement = getRightsLevelElement(data.rightslevel), - $rightsLevelSelect; - $rightsLevel.empty(); - if (canEdit) { - $rightsLevelSelect = Ox.Select({ - items: pandora.site.rightsLevels.map(function(rightsLevel, i) { - return {id: i, title: Ox._(rightsLevel.name)}; - }), - width: 128, - value: data.rightslevel - }) - .addClass('OxColor OxColorGradient') - .css({ - marginBottom: '4px', - background: $rightsLevelElement.css('background') - }) - .data({OxColor: $rightsLevelElement.data('OxColor')}) - .bindEvent({ - change: function(event) { - var rightsLevel = event.value; - $rightsLevelElement = getRightsLevelElement(rightsLevel); - $rightsLevelSelect - .css({background: $rightsLevelElement.css('background')}) - .data({OxColor: $rightsLevelElement.data('OxColor')}) - renderCapabilities(rightsLevel); - var edit = { - id: isMultiple ? ui.listSelection : data.id, - rightslevel: rightsLevel - }; - pandora.api.edit(edit, function(result) { - that.triggerEvent('change', Ox.extend({}, 'rightslevel', rightsLevel)); - }); - } - }) - .appendTo($rightsLevel); - } else { - $rightsLevelElement - .css({ - marginBottom: '4px' - }) - .appendTo($rightsLevel); - } - $capabilities = $('
').appendTo($rightsLevel); - renderCapabilities(data.rightslevel); - } - function toggleIconSize() { iconSize = iconSize == 256 ? 512 : 256; iconWidth = iconRatio > 1 ? iconSize : Math.round(iconSize * iconRatio); diff --git a/static/js/infoViewUtils.js b/static/js/infoViewUtils.js index 9ab90665..9d9de29a 100644 --- a/static/js/infoViewUtils.js +++ b/static/js/infoViewUtils.js @@ -14,3 +14,144 @@ pandora.cleanupDate = function(value) { return value }; +pandora.renderRightsLevel = function(that, $rightsLevel, data, isMixed, isMultiple, canEdit) { + var rightsLevels = pandora.site.rightsLevels.map(function(rightsLevel) { + return rightsLevel.name; + }).concat(isMultiple ? ['Mixed'] : []), + rightsLevel = isMixed.rightslevel ? rightsLevels.length - 1 : data.rightslevel, + $capabilities, + $rightsLevelElement = getRightsLevelElement(rightsLevel), + $rightsLevelSelect; + $rightsLevel.empty(); + if (canEdit) { + $rightsLevelSelect = Ox.Select({ + items: pandora.site.rightsLevels.map(function(rightsLevel, i) { + return {id: i, title: Ox._(rightsLevel.name)}; + }).concat(isMultiple ? [ + {id: rightsLevels.length - 1, title: Ox._('Mixed'), disabled: true} + ] : []), + width: 128, + value: rightsLevel + }) + .addClass('OxColor OxColorGradient') + .css({ + marginBottom: '4px', + background: $rightsLevelElement.css('background') + }) + .data({OxColor: $rightsLevelElement.data('OxColor')}) + .bindEvent({ + change: function(event) { + var rightsLevel = event.value; + $rightsLevelElement = getRightsLevelElement(rightsLevel); + $rightsLevelSelect + .css({background: $rightsLevelElement.css('background')}) + .data({OxColor: $rightsLevelElement.data('OxColor')}) + if (rightsLevel < pandora.site.rightsLevels.length) { + renderCapabilities(rightsLevel); + var edit = { + id: isMultiple ? ui.listSelection : data.id, + rightslevel: rightsLevel + }; + pandora.api.edit(edit, function(result) { + that.triggerEvent('change', Ox.extend({}, 'rightslevel', rightsLevel)); + }); + } + } + }) + .appendTo($rightsLevel); + } else { + $rightsLevelElement + .css({ + marginBottom: '4px' + }) + .appendTo($rightsLevel); + } + $capabilities = $('
').appendTo($rightsLevel); + !isMixed.rightslevel && renderCapabilities(data.rightslevel); + + + function getRightsLevelElement(rightsLevel) { + return Ox.Theme.formatColorLevel(rightsLevel, rightsLevels) + } + + function renderCapabilities(rightsLevel) { + var capabilities = [].concat( + canEdit ? [{name: 'canSeeItem', symbol: 'Find'}] : [], + [ + {name: 'canPlayClips', symbol: 'PlayInToOut'}, + {name: 'canPlayVideo', symbol: 'Play'}, + {name: 'canDownloadVideo', symbol: 'Download'} + ] + ), + userLevels = canEdit ? pandora.site.userLevels : [pandora.user.level]; + $capabilities.empty(); + userLevels.forEach(function(userLevel, i) { + var $element, + $line = $('
') + .css({ + height: '16px', + marginBottom: '4px' + }) + .appendTo($capabilities); + if (canEdit) { + $element = Ox.Theme.formatColorLevel(i, userLevels.map(function(userLevel) { + return Ox.toTitleCase(userLevel); + }), [0, 240]); + Ox.Label({ + textAlign: 'center', + title: Ox._(Ox.toTitleCase(userLevel)), + width: 60 + }) + .addClass('OxColor OxColorGradient') + .css({ + float: 'left', + height: '12px', + paddingTop: '2px', + background: $element.css('background'), + fontSize: '8px', + color: $element.css('color') + }) + .data({OxColor: $element.data('OxColor')}) + .appendTo($line); + } + capabilities.forEach(function(capability) { + var hasCapability = pandora.hasCapability(capability.name, userLevel) >= rightsLevel, + $element = Ox.Theme.formatColorLevel(hasCapability, ['', '']); + Ox.Button({ + tooltip: Ox._('{0} ' + + (hasCapability ? 'can' : 'can\'t') + ' ' + + Ox.toSlashes(capability.name) + .split('/').slice(1).join(' ') + .toLowerCase() + .replace('see item', 'see the item') + .replace('play video', 'play the full video') + .replace('download video', 'download the video'), + [canEdit ? Ox._(Ox.toTitleCase(userLevel)) : Ox._('You')]), + title: capability.symbol, + type: 'image' + }) + .addClass('OxColor OxColorGradient') + .css({background: $element.css('background')}) + .css('margin' + (canEdit ? 'Left' : 'Right'), '4px') + .data({OxColor: $element.data('OxColor')}) + .appendTo($line); + }); + if (!canEdit) { + Ox.Button({ + title: Ox._('Help'), + tooltip: Ox._('About Rights'), + type: 'image' + }) + .css({marginLeft: '52px'}) + .bindEvent({ + click: function() { + pandora.UI.set({page: 'rights'}); + } + }) + .appendTo($line); + } + }); + } + +} +