merge batch editing support

static/js/infoView.bakma.js

@@ -1,10 +1,12 @@
 'use strict';
 
-pandora.ui.infoView = function(data) {
+pandora.ui.infoView = function(data, isMixed) {
+    isMixed = isMixed || {};
 
     var ui = pandora.user.ui,
-        canEdit = pandora.site.capabilities.canEditMetadata[pandora.user.level] || data.editable,
+        isMultiple = arguments.length == 2,
-        canRemove = pandora.site.capabilities.canRemoveItems[pandora.user.level] || data.editable,
+        canEdit = pandora.hasCapability('canEditMetadata') || isMultiple || data.editable,
+        canRemove = pandora.hasCapability('canRemoveItems'),
         css = {
             marginTop: '4px',
             textAlign: 'justify'
@@ -12,10 +14,11 @@ pandora.ui.infoView = function(data) {
         descriptions = [],
         html,
         iconRatio = ui.icons == 'posters' ? data.posterRatio : 1,
-        iconSize = ui.infoIconSize,
+        iconSize = isMultiple ? 0 : ui.infoIconSize,
-        iconWidth = iconRatio > 1 ? iconSize : Math.round(iconSize * iconRatio),
+        iconWidth = isMultiple ? 0 : iconRatio > 1 ? iconSize : Math.round(iconSize * iconRatio),
         iconHeight = iconRatio < 1 ? iconSize : Math.round(iconSize / iconRatio),
-        iconLeft = iconSize == 256 ? Math.floor((iconSize - iconWidth) / 2) : 0,
+        iconLeft = isMultiple ? 0 : iconSize == 256 ? Math.floor((iconSize - iconWidth) / 2) : 0,
+
         borderRadius = ui.icons == 'posters' ? 0 : iconSize / 8,
         margin = 16,
         nameKeys = pandora.site.itemKeys.filter(function(key) {
@@ -97,7 +100,7 @@ pandora.ui.infoView = function(data) {
 
         that = Ox.SplitPanel({
             elements: [
-                {element: $bar, size: 16},
+                {element: $bar, size: isMultiple ? 0 : 16},
                 {element: $info}
             ],
             orientation: 'vertical'
@@ -107,9 +110,10 @@ pandora.ui.infoView = function(data) {
             .css({
                 position: 'absolute'
             })
-            .appendTo($info),
+            .appendTo($info);
 
-        $icon = Ox.Element({
+    if (!isMultiple) {
+        var $icon = Ox.Element({
                 element: '<img>',
                 tooltip: 'Switch to ' + Ox.getObjectById(
                     pandora.site.itemViews,
@@ -172,7 +176,8 @@ pandora.ui.infoView = function(data) {
             })
             .appendTo($reflection),
 
-        $data = $('<div>')
+    }
+    var $data = $('<div>')
             .addClass('OxTextPage')
             .css({
                 position: 'absolute',
@@ -180,7 +185,7 @@ pandora.ui.infoView = function(data) {
                 top: margin + iconHeight + margin + 'px',
                 width: iconSize + 'px',
             })
-            .appendTo($left),
+            .appendTo($left)
 
         $text = Ox.Element()
             .addClass('OxTextPage')
@@ -336,7 +341,7 @@ pandora.ui.infoView = function(data) {
                         );
                     },
                     maxHeight: Infinity,
-                    placeholder: formatLight(Ox._('No Summary')),
+                    placeholder: formatLight(Ox._( isMixed.summary ? 'Mixed Summary' : 'No Summary')),
                     tooltip: canEdit ? pandora.getEditTooltip() : '',
                     type: 'textarea',
                     value: data.summary || ''
@@ -367,49 +372,50 @@ pandora.ui.infoView = function(data) {
         .appendTo($text);
 
     // Duration, Aspect Ratio --------------------------------------------------
+    if (!isMultiple) {
+        ['duration', 'aspectratio'].forEach(function(key) {
+            var itemKey = Ox.getObjectById(pandora.site.itemKeys, key),
+                value = data[key] || 0;
+            $('<div>')
+                .css({marginBottom: '4px'})
+                .append(formatKey(itemKey.title, 'statistics'))
+                .append(
+                    Ox.Theme.formatColor(null, 'gradient')
+                        .css({textAlign: 'right'})
+                        .html(
+                            Ox['format' + Ox.toTitleCase(itemKey.format.type)]
+                                .apply(null, [value].concat(itemKey.format.args))
+                        )
+                )
+                .appendTo($statistics);
+        });
+
+        // Hue, Saturation, Lightness, Volume --------------------------------------
+
+        ['hue', 'saturation', 'lightness', 'volume'].forEach(function(key) {
+            $('<div>')
+                .css({marginBottom: '4px'})
+                .append(formatKey(key, 'statistics'))
+                .append(
+                    Ox.Theme.formatColor(
+                        data[key] || 0, key == 'volume' ? 'lightness' : key
+                    ).css({textAlign: 'right'})
+                )
+                .appendTo($statistics);
+        });
+
+        // Cuts per Minute ---------------------------------------------------------
 
-    ['duration', 'aspectratio'].forEach(function(key) {
-        var itemKey = Ox.getObjectById(pandora.site.itemKeys, key),
-            value = data[key] || 0;
         $('<div>')
             .css({marginBottom: '4px'})
-            .append(formatKey(itemKey.title, 'statistics'))
+            .append(formatKey('cuts per minute', 'statistics'))
             .append(
                 Ox.Theme.formatColor(null, 'gradient')
                     .css({textAlign: 'right'})
-                    .html(
+                    .html(Ox.formatNumber(data['cutsperminute'] || 0, 3))
-                        Ox['format' + Ox.toTitleCase(itemKey.format.type)]
-                            .apply(null, [value].concat(itemKey.format.args))
-                    )
             )
             .appendTo($statistics);
-    });
+    }
-
-    // Hue, Saturation, Lightness, Volume --------------------------------------
-
-    ['hue', 'saturation', 'lightness', 'volume'].forEach(function(key) {
-        $('<div>')
-            .css({marginBottom: '4px'})
-            .append(formatKey(key, 'statistics'))
-            .append(
-                Ox.Theme.formatColor(
-                    data[key] || 0, key == 'volume' ? 'lightness' : key
-                ).css({textAlign: 'right'})
-            )
-            .appendTo($statistics);
-    });
-
-    // Cuts per Minute ---------------------------------------------------------
-
-    $('<div>')
-        .css({marginBottom: '4px'})
-        .append(formatKey('cuts per minute', 'statistics'))
-        .append(
-            Ox.Theme.formatColor(null, 'gradient')
-                .css({textAlign: 'right'})
-                .html(Ox.formatNumber(data['cutsperminute'] || 0, 3))
-        )
-        .appendTo($statistics);
 
     // Rights Level ------------------------------------------------------------
 
@@ -479,7 +485,7 @@ pandora.ui.infoView = function(data) {
             .append(
                 Ox.EditableContent({
                         height: 128,
-                        placeholder: formatLight(Ox._('No notes')),
+                        placeholder: formatLight(Ox._(isMixed ? 'Mixed notes' : 'No notes')),
                         tooltip: pandora.getEditTooltip(),
                         type: 'textarea',
                         value: data.notes || '',
@@ -498,7 +504,7 @@ pandora.ui.infoView = function(data) {
 
     function editMetadata(key, value) {
         if (value != data[key]) {
-            var edit = {id: data.id};
+            var edit = {id: isMultiple ? ui.listSelection : data.id};
             if (key == 'title') {
                 edit[key] = value;
             } else if (listKeys.indexOf(key) >= 0) {
@@ -507,26 +513,28 @@ pandora.ui.infoView = function(data) {
                 edit[key] = value ? value : null;
             }
             pandora.api.edit(edit, function(result) {
-                data[key] = result.data[key];
+                if (!isMultiple) {
-                descriptions[key] && descriptions[key].options({
+                    data[key] = result.data[key];
-                    value: result.data[key + 'description']
+                    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();
-                pandora.$ui.browser.value(result.data.id, key, result.data[key]);
-                pandora.$ui.itemTitle
-                    .options({
-                        title: '<b>' + result.data.title
-                            + (Ox.len(result.data.director)
-                                ? ' (' + result.data.director.join(', ') + ')'
-                                : '')
-                            + (result.data.year ? ' ' + result.data.year : '') + '</b>'
                     });
-                //pandora.$ui.contentPanel.replaceElement(0, pandora.$ui.browser = pandora.ui.browser());
+                    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();
+                    pandora.$ui.browser.value(result.data.id, key, result.data[key]);
+                    pandora.$ui.itemTitle
+                        .options({
+                            title: '<b>' + result.data.title
+                                + (Ox.len(result.data.director)
+                                    ? ' (' + result.data.director.join(', ') + ')'
+                                    : '')
+                                + (result.data.year ? ' ' + result.data.year : '') + '</b>'
+                        });
+                    //pandora.$ui.contentPanel.replaceElement(0, pandora.$ui.browser = pandora.ui.browser());
+                }
             });
         }
     }
@@ -687,7 +695,7 @@ pandora.ui.infoView = function(data) {
                             format: function(value) {
                                 return formatValue(key, value);
                             },
-                            placeholder: formatLight(Ox._('unknown')),
+                            placeholder: formatLight(Ox._( isMixed[key] ? 'mixed' : 'unknown')),
                             tooltip: canEdit ? pandora.getEditTooltip() : '',
                             value: getValue(key, data[key])
                         })
@@ -729,8 +737,12 @@ pandora.ui.infoView = function(data) {
                             .css({background: $rightsLevelElement.css('background')})
                             .data({OxColor: $rightsLevelElement.data('OxColor')})
                         renderCapabilities(rightsLevel);
-                        pandora.api.edit({id: data.id, rightslevel: rightsLevel}, function(result) {
+                        var edit = {
-                            // ...
+                            id: isMultiple ? ui.listSelection : data.id,
+                            rightslevel: rightsLevel
+                        };
+                        pandora.api.edit(edit, function(result) {
+                            that.triggerEvent('change', Ox.extend({}, 'rightslevel', rightsLevel));
                         });
                     }
                 })