some work towards inline editing of item metadata

pandora/0xdb.jsonc

@@ -14,14 +14,14 @@
     */
     "capabilities": {
         "canDeleteItems": {"admin": true},
-        "canDownloadVideo": {"guest": 0, "member": 0, "friend": 3, "staff": 4, "admin": 4},
+        "canDownloadVideo": {"guest": 0, "member": 0, "friend": 4, "staff": 4, "admin": 4},
         "canEditMetadata": {"staff": true, "admin": true},
-        "canPlayClips": {"guest": 2, "member": 2, "friend": 3, "staff": 4, "admin": 4},
+        "canPlayClips": {"guest": 2, "member": 2, "friend": 4, "staff": 4, "admin": 4},
-        "canPlayVideo": {"guest": 1, "member": 1, "friend": 3, "staff": 4, "admin": 4},
+        "canPlayVideo": {"guest": 1, "member": 1, "friend": 4, "staff": 4, "admin": 4},
         "canReloadMetadata": {"staff": true, "admin": true},
         "canSeeDebugMenu": {"admin": true},
         "canSeeFiles": {"staff": true, "admin": true},
-        "canSeeItem": {"guest": 3, "member": 3, "friend": 3, "staff": 4, "admin": 4},
+        "canSeeItem": {"guest": 3, "member": 3, "friend": 4, "staff": 4, "admin": 4},
         "canSeeExtraItemViews": {"friend": true, "staff": true, "admin": true}
     },
     /*
@@ -551,7 +551,9 @@
         {"id": "news", "title": "News"},
         {"id": "tour", "title": "Take a Tour"},
         {"id": "faq", "title": "Frequently Asked Questions"},
-        {"id": "terms", "title": "Terms of Service"}
+        {"id": "terms", "title": "Terms of Service"},
+        {"id": "rights", "title": "Rights Management"},
+        {"id": "contact", "title": "Contact"}
     ],
     "totals": [
         {"id": "items"},

static/js/pandora/URL.js

@@ -141,7 +141,7 @@ pandora.URL = (function() {
                 //pandora.$ui.home = pandora.ui.home().showScreen();
                 pandora.$ui.home = pandora.ui.home().fadeInScreen();
             } else if ([
-                'about', 'contact', 'faq', 'news', 'software', 'terms', 'tour'
+                'about', 'contact', 'faq', 'news', 'rights', 'software', 'terms', 'tour'
             ].indexOf(state.page) > -1) {
                 pandora.$ui.siteDialog = pandora.ui.siteDialog(state.page).open();
             } else if (state.page == 'help') {
@@ -320,7 +320,7 @@ pandora.URL = (function() {
             getSpan: pandora.getMetadataByIdOrName,
             pages: [
                 'about', 'api', 'contact', 'faq', 'help', 'home', 'news',
-                'preferences', 'signin', 'signout', 'signup',
+                'preferences', 'rights', 'signin', 'signout', 'signup',
                 'software', 'terms', 'tour'
             ],
             sortKeys: sortKeys,

static/js/pandora/infoView.js

@@ -4,8 +4,8 @@ pandora.ui.infoView = function(data) {
     // when collapsing the movies browser, the info view should become a split panel
 
     var ui = pandora.user.ui,
-        canEdit = pandora.site.capabilities.canEditMetadata[pandora.user.level],
         borderRadius = ui.icons == 'posters' ? 0 : iconSize / 8,
+        canEdit = pandora.site.capabilities.canEditMetadata[pandora.user.level],
         css = {
             marginTop: '4px',
             textAlign: 'justify',
@@ -18,6 +18,7 @@ pandora.ui.infoView = function(data) {
         iconWidth = iconRatio > 1 ? iconSize : Math.round(iconSize * iconRatio),
         iconHeight = iconRatio < 1 ? iconSize : Math.round(iconSize / iconRatio),
         iconLeft = iconSize == 256 ? Math.floor((iconSize - iconWidth) / 2) : 0,
+        isEditable = canEdit && data.id.substr(0, 2) == '0x',
         listWidth = 144 + Ox.UI.SCROLLBAR_SIZE,
         margin = 16,
         statisticsWidth = 128,
@@ -102,20 +103,22 @@ pandora.ui.infoView = function(data) {
             })
             .appendTo($reflection),
 
-        $text = $('<div>')
+        $text = Ox.Element()
             .css({
                 position: 'absolute',
                 left: margin + (iconSize == 256 ? 256 : iconWidth) + margin + 'px',
                 top: margin + 'px',
-                right: margin + statisticsWidth + margin + 'px'
+                right: margin + statisticsWidth + margin + 'px',
+                //background: 'green'
             })
             .bind({
-                click: function(e) {
+                click: function() {
-                    var $target = $(e.target);
-                    if ($target.is('a')) {
-                        pandora.URL.set($target.attr('href'));
                     return false;
                 }
+            })
+            .bindEvent({
+                singleclick: function(e) {
+                    $(e.target).is('a') && clickLink(e);
                 }
             })
             .appendTo($data.$element),
@@ -138,48 +141,88 @@ pandora.ui.infoView = function(data) {
 
     $('<div>')
         .css({
-            marginTop: '-2px',
+            marginTop: '-2px'
-            fontWeight: 'bold',
-            fontSize: '13px',
-            MozUserSelect: 'text',
-            WebkitUserSelect: 'text'
         })
-        .html(
+        .append(
-            data.title + (
+            Ox.Editable({
+                    editable: isEditable,
+                    tooltip: isEditable ? 'Doubleclick to edit' : '', 
+                    value: data.title + (
                         data.originalTitle && data.originalTitle != data.title
                         ? ' ' + formatLight('(' + data.originalTitle + ')') : ''
                     )
-        )
+                })
-        .appendTo($text);
-
-    data.director && $('<div>')
                 .css({
-            marginTop: '2px',
+                    display: 'inline-block',
                     fontWeight: 'bold',
                     fontSize: '13px',
                     MozUserSelect: 'text',
                     WebkitUserSelect: 'text'
                 })
-        .html(formatValue(data.director, 'name'))
+                .appendTo($text)
+        )
         .appendTo($text);
 
-    if (data.country || data.year || data.language || data.runtime || pandora.user.level == 'admin') {
+    $('<div>')
+        .css({
+            marginTop: '2px'
+        })
+        .append(
+            Ox.Editable({
+                    clickLink: clickLink,
+                    editable: isEditable,
+                    format: function(value) {
+                        return formatValue((value || 'Unknown Director').split(', '), 'name');
+                    },
+                    tooltip: isEditable ? 'Doubleclick to edit' : '',
+                    value: data.director ? data.director.join(', ') : 'Unknown Director'
+                })
+                .css({
+                    display: 'inline-block',
+                    fontWeight: 'bold',
+                    fontSize: '13px',
+                    MozUserSelect: 'text',
+                    WebkitUserSelect: 'text'
+                })
+        )
+        .appendTo($text);
+
+    if (isEditable) {
         var $div = $('<div>')
             .css(css)
             .appendTo($text);
+        ['country', 'year'].forEach(function(key) {
+            $('<div>')
+                .css({float: 'left'})
+                .html(formatKey(key).replace('</span>', '&nbsp;</span>'))
+                .appendTo($div);
+            Ox.Editable({
+                    format: function(value) {                        
+                        return value
+                            ? formatValue(value.split(', '), key)
+                            : formatLight('unknown');
+                    },
+                    value: key == 'country'
+                        ? (data[key] ? data[key].join(', ') : [''])
+                        : data[key] || ''
+                })
+                .css({float: 'left'})
+                .appendTo($div);
+            key == 'country' && $('<div>').css({float: 'left'}).html(';&nbsp;').appendTo($div);
+        });
+    } else if (data.country || data.year || data.language || data.runtime) {
         var html = [];
         ['country', 'year', 'language', 'runtime'].forEach(function(key) {
-            if (data[key] || (['country', 'year'].indexOf(key) > -1 && pandora.user.level == 'admin')) {
+            if (data[key]) {
-                var value = data[key] || formatLight('unknown');
                 html.push(
                     formatKey(key)
                     + (key == 'runtime'
-                    ? Math.round(value / 60) + ' min'
+                        ? Math.round(data[key] / 60) + ' min'
-                    : formatValue(value, key == 'runtime' || !data[key] ? null : key))
+                        : formatValue(data[key], key))
-                );
+                )
             }
         });
-        $div.html(html.join('; '));
+        $('<div>').css(css).html(html.join('; ')).appendTo($text);
     }
 
     data.alternativeTitles && $('<div>')
@@ -351,7 +394,7 @@ pandora.ui.infoView = function(data) {
     
     $('<div>').css({height: '8px'}).appendTo($text);
 
-    pandora.createLinks($text);
+    //pandora.createLinks($text);
 
     ['hue', 'saturation', 'lightness', 'volume'].forEach(function(key) {
         $('<div>')
@@ -381,6 +424,15 @@ pandora.ui.infoView = function(data) {
         renderList();
     }
 
+    function clickLink(e) {
+        if (e.target.hostname == document.location.hostname) {
+            pandora.URL.push(e.target.pathname);
+        } else {
+            document.location.href = '/url=' + encodeURIComponent(e.target.href);
+        }
+        return false;
+    }
+
     function formatKey(key, isStatistics) {
         return isStatistics
             ? $('<div>').css({marginBottom: '2px', fontWeight: 'bold'}).html(Ox.toTitleCase(key))
@@ -444,7 +496,7 @@ pandora.ui.infoView = function(data) {
 
     function renderCapabilities(rightsLevel) {
         var capabilities = Ox.merge(
-                canEdit ? [{name: 'canSeeItem', symbol: 'View'}] : [],
+                canEdit ? [{name: 'canSeeItem', symbol: 'Find'}] : [],
                 [
                     {name: 'canPlayClips', symbol: 'PlayInToOut'},
                     {name: 'canPlayVideo', symbol: 'Play'},

static/js/pandora/menu.js

@@ -14,18 +14,17 @@ pandora.ui.mainMenu = function() {
             id: 'mainMenu',
             menus: Ox.merge(
                 [
-                    { id: pandora.site.site.id + 'Menu', title: pandora.site.site.name, items: [
+                    { id: pandora.site.site.id + 'Menu', title: pandora.site.site.name, items: Ox.merge(
+                        [
                             { id: 'home', title: 'Home' },
-                        {},
+                            {}
-                        { id: 'about', title: 'About ' + pandora.site.site.name },
+                        ],
-                        { id: 'news', title: pandora.site.site.name + ' News' },
+                        pandora.site.sitePages,
-                        { id: 'tour', title: 'Take a Tour' },
+                        [
-                        { id: 'faq', title: 'Frequently Asked Questions' },
-                        { id: 'terms', title: 'Terms of Service' },
-                        { id: 'contact', title: 'Contact ' + pandora.site.site.name },
                             {},
                             { id: 'software', title: 'Software' }
-                    ] },
+                        ]
+                    ) },
                     { id: 'userMenu', title: 'User', items: [
                         { id: 'username', title: 'User: ' + (isGuest ? 'not logged in' : pandora.user.username), disabled: true },
                         {},
@@ -211,7 +210,7 @@ pandora.ui.mainMenu = function() {
             },
             click: function(data) {
                 if ([
-                    'home', 'about', 'news', 'tour', 'faq', 'tos', 'contact', 'software',
+                    'home', 'about', 'news', 'tour', 'faq', 'terms', 'rights', 'contact', 'software',
                     'signup', 'signin', 'signout', 'preferences', 'help'
                 ].indexOf(data.id) > -1) {
                     pandora.URL.push('/' + data.id);

static/js/pandora/siteDialog.js

@@ -1,15 +1,10 @@
 // vim: et:ts=4:sw=4:sts=4:ft=javascript
 pandora.ui.siteDialog = function(section) {
 
-    var tabs = [
+    var tabs = Ox.merge(
-        {id: 'about', title: 'About'},
+        Ox.clone(pandora.site.sitePages),
-        {id: 'news', title: 'News'},
+        [{id: 'software', title: 'Software'}]
-        {id: 'tour', title: 'Take a Tour'},
+    );
-        {id: 'faq', title: 'Frequently Asked Questions'},
-        {id: 'tos', title: 'Terms of Service'},
-        {id: 'contact', title: 'Contact'},
-        {id: 'software', title: 'Software'}
-    ];
     Ox.getObjectById(tabs, section).selected = true;
     var $tabPanel = Ox.TabPanel({
             content: function(id) {