some work towards inline editing of item metadata

2011-10-24 15:58:10 +00:00 · 2011-10-24 15:58:10 +00:00 · e76125bb88
commit e76125bb88
parent 57308697ec
5 changed files with 112 additions and 64 deletions
--- a/pandora/0xdb.jsonc
+++ b/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},
-        "canPlayVideo": {"guest": 1, "member": 1, "friend": 3, "staff": 4, "admin": 4},
+        "canPlayClips": {"guest": 2, "member": 2, "friend": 4, "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"},
--- a/static/js/pandora/URL.js
+++ b/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,
--- a/static/js/pandora/infoView.js
+++ b/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) {
-                    var $target = $(e.target);
-                    if ($target.is('a')) {
-                        pandora.URL.set($target.attr('href'));
+                click: function() {
                    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',
-            fontWeight: 'bold',
-            fontSize: '13px',
-            MozUserSelect: 'text',
-            WebkitUserSelect: 'text'
+            marginTop: '-2px'
        })
-        .html(
-            data.title + (
+        .append(
+            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')) {
-                var value = data[key] || formatLight('unknown');
+            if (data[key]) {
                html.push(
                    formatKey(key)
                    + (key == 'runtime'
-                    ? Math.round(value / 60) + ' min'
-                    : formatValue(value, key == 'runtime' || !data[key] ? null : key))
-                );
+                        ? Math.round(data[key] / 60) + ' min'
+                        : 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'},
--- a/static/js/pandora/menu.js
+++ b/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' },
-                        { 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 },
+                            {}
+                        ],
+                        pandora.site.sitePages,
+                        [
                            {},
                            { 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);
--- a/static/js/pandora/siteDialog.js
+++ b/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 = [
-        {id: 'about', title: 'About'},
-        {id: 'news', title: 'News'},
-        {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'}
-    ];
+    var tabs = Ox.merge(
+        Ox.clone(pandora.site.sitePages),
+        [{id: 'software', title: 'Software'}]
+    );
    Ox.getObjectById(tabs, section).selected = true;
    var $tabPanel = Ox.TabPanel({
            content: function(id) {