move rights level code into infoViewUtils

static/js/infoView.js

@@ -198,9 +198,7 @@ pandora.ui.infoView = function(data, isMixed) {
                 top: margin + 'px',
                 right: margin + 'px'
             })
-            .appendTo($info),
+            .appendTo($info);
-
-        $capabilities;
 
     [$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 = $('<div>')
-                    .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 = $('<div>').appendTo($rightsLevel);
-        renderCapabilities(data.rightslevel);
-    }
-
     function toggleIconSize() {
         iconSize = iconSize == 256 ? 512 : 256;
         iconWidth = iconRatio > 1 ? iconSize : Math.round(iconSize * iconRatio);

static/js/infoView.padma.js

@@ -204,9 +204,7 @@ pandora.ui.infoView = function(data, isMixed) {
                 top: margin + 'px',
                 right: margin + 'px'
             })
-            .appendTo($info),
+            .appendTo($info);
-
-        $capabilities;
 
     [$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 = $('<div>')
-                    .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 = $('<div>').appendTo($rightsLevel);
-        renderCapabilities(data.rightslevel);
-    }
-
     function toggleIconSize() {
         iconSize = iconSize == 256 ? 512 : 256;
         iconWidth = iconRatio > 1 ? iconSize : Math.round(iconSize * iconRatio);

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 = $('<div>').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 = $('<div>')
+                    .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);
+            }
+        });
+    }
+
+}
+