make list info editable, and update it if list data changes

pandora/itemlist/models.py

@@ -95,7 +95,7 @@ class List(models.Model):
 
     def json(self, keys=None, user=None):
         if not keys:
-             keys=['id', 'name', 'user', 'type', 'query', 'status', 'subscribed', 'posterFrames']
+             keys=['id', 'name', 'user', 'type', 'query', 'status', 'subscribed', 'posterFrames', 'description']
         response = {}
         for key in keys:
             if key == 'items':

static/js/pandora/folderList.js

@@ -30,11 +30,9 @@ pandora.ui.folderList = function(id) {
                     width: 16
                 },
                 {
-                    /*
                     format: function(value) {
-                        return value.split('/').join(': ');
+                        return value.split(':').join(': ');
                     },
-                    */
                     id: 'id',
                     operator: '+',
                     unique: true,
@@ -386,14 +384,8 @@ pandora.ui.folderList = function(id) {
                 data_[data.key] = data.value;
                 pandora.api.editList(data_, function(result) {
                     if (result.data.id != data.id) {
-                        pandora.$ui.folderList[id].value(data.id, 'name', result.data.name);
+                        pandora.renameList(data.id, result.data.id, result.data.name, id);
-                        pandora.$ui.folderList[id].value(data.id, 'id', result.data.id);
+                        pandora.$ui.info.updateListInfo();
-                        pandora.UI.set({
-                            find: {
-                                conditions: [{key: 'list', value: result.data.id, operator: '=='}],
-                                operator: '&'
-                            }
-                        }, false);
                     }
                 });
             }

static/js/pandora/info.js

@@ -117,9 +117,9 @@ pandora.ui.info = function() {
     that.resizeInfo = function() {
         var view = getView();
         if (view == 'list') {
-            pandora.$ui.listInfo.resizeIcon();
+            pandora.$ui.listInfo.resizeInfo();
         } else if (view == 'poster') {
-            pandora.$ui.posterInfo.resizePoster();
+            pandora.$ui.posterInfo.resizeInfo();
         } else if (view == 'video') {
             pandora.$ui.videoPreview.options({
                 height: pandora.getInfoHeight(true),
@@ -128,6 +128,12 @@ pandora.ui.info = function() {
         }
     };
 
+    that.updateListInfo = function() {
+        getView() == 'list' && that.empty().append(
+            pandora.$ui.listInfo = pandora.ui.listInfo()
+        );
+    };
+
     return that;
 
 };
@@ -147,7 +153,8 @@ pandora.ui.listInfo = function() {
                     : '/static/png/icon256.png'
             })
             .css(getIconCSS())
-            .appendTo(that);
+            .appendTo(that),
+        $title, $description;
 
     that.append($('<div>').css({height: '16px'}));
 
@@ -162,10 +169,10 @@ pandora.ui.listInfo = function() {
             if (result.data.items.length) {
                 var item = result.data.items[0];
                 that.append(
-                    Ox.Editable({
+                    $title = Ox.Editable({
                             editable: item.user == pandora.user.username,
                             format: function(value) {
-                                return Ox.encodeHTML(item.user + ':' + value)
+                                return Ox.encodeHTML(item.user + ': ' + value)
                             },
                             tooltip: item.user == pandora.user.username
                                 ? 'Doubleclick to edit title' : '',
@@ -173,21 +180,54 @@ pandora.ui.listInfo = function() {
                             width: pandora.user.ui.sidebarSize - 32
                         })
                         .css({fontWeight: 'bold', textAlign: 'center'})
+                        .bindEvent({
+                            submit: function(data) {
+                                if (data.value != item.name) {
+                                    pandora.api.editList({
+                                        id: list,
+                                        name: data.value
+                                    }, function(result) {
+                                        if (result.data.id != list) {
+                                            pandora.renameList(list, result.data.id, result.data.name);
+                                            list = result.data.id;
+                                            item.name = result.data.name;
+                                        }
+                                    });
+                                }
+                            }
+                        })
                 ).append(
                     $('<div>').css({height: '8px'})
                 ).append(
-                    Ox.Editable({
+                    $description = Ox.Editable({
-                            editable: item.user == pandora.user.username,
                             format: function(value) {
-                                return Ox.encodeHTML(value)
+                                return '<div style="color: rgb(128, 128, 128); text-align: center">'
+                                    + value + '</div>';
                             },
-                            placeholder: '<div style="color: rgb(128, 128, 128); text-align: center">No description</span>',
+                            editable: item.user == pandora.user.username,
-                            tooltip: 'Doubleclick to edit description',
+                            height: pandora.user.ui.sidebarSize - 32,
+                            placeholder: item.user == pandora.user.username
+                                ? '<div style="color: rgb(128, 128, 128); text-align: center">No description</span>'
+                                : '',
+                            tooltip: item.user == pandora.user.username
+                                ? 'Doubleclick to edit description' : '',
                             type: 'textarea',
                             value: item.description,
                             width: pandora.user.ui.sidebarSize - 32
                         })
-                        .css({textAlign: 'left'})
+                        .css({textAlign: 'center'})
+                        .bindEvent({
+                            submit: function(data) {
+                                if (data.value != item.description) {
+                                    pandora.api.editList({
+                                        id: list,
+                                        description: data.value
+                                    }, function(result) {
+                                        item.description = result.data.description;
+                                    });
+                                }
+                            }
+                        })
                 );
             } else {
                 that.append(
@@ -200,7 +240,7 @@ pandora.ui.listInfo = function() {
     } else {
         that.append(
             $('<div>')
-                .css({paddingTop: '16px', fontWeight: 'bold'})
+                .css({fontWeight: 'bold'})
                 .html('All ' + pandora.site.itemName.plural)
         );
     }
@@ -213,8 +253,16 @@ pandora.ui.listInfo = function() {
             borderRadius: Math.round(size / 4) + 'px',
         };
     }
-    that.resizeIcon = function() {
+    that.resizeInfo = function() {
         $icon.css(getIconCSS());
+        $title.options({
+            width: that.width()
+            //width: pandora.user.ui.sidebarSize - 32
+        });
+        $description.options({
+            height: that.height(),
+            width: that.width()
+        });
     };
     return that;
 };
@@ -266,7 +314,7 @@ pandora.ui.posterInfo = function(data) {
             return value + 'px';
         });
     }
-    that.resizePoster = function() {
+    that.resizeInfo = function() {
         $poster.css(getPosterCSS());
         $text.css({width: pandora.user.ui.sidebarSize - 8 + 'px'})
     }

static/js/pandora/utils.js

@@ -495,8 +495,8 @@ pandora.getInfoHeight = function(includeHidden) {
         );
         height = Math.min(
             isVideoPreview
-            ? Math.round(pandora.user.ui.sidebarSize / (16/9)) + 16
+                ? Math.round(pandora.user.ui.sidebarSize / (16/9)) + 16
-            : pandora.user.ui.sidebarSize,
+                : pandora.user.ui.sidebarSize,
             window.innerHeight - 109 // 20 menu + 24 bar + 64 (4 closed folders) + 1 resizebar
         );
     }
@@ -746,6 +746,19 @@ pandora.reloadList = function() {
         .reloadList();
 };
 
+pandora.renameList = function(oldId, newId, newName, folder) {
+    folder = folder || pandora.getListData(oldId).folder;
+    Ox.print('RENAME LIST', oldId, newId, newName, folder)
+    pandora.$ui.folderList[folder].value(oldId, 'name', newName);
+    pandora.$ui.folderList[folder].value(oldId, 'id', newId);
+    pandora.UI.set({
+        find: {
+            conditions: [{key: 'list', value: newId, operator: '=='}],
+            operator: '&'
+        }
+    }, false);
+};
+
 pandora.resizeFilters = function(width) {
     pandora.user.ui.filterSizes = pandora.getFilterSizes();
     pandora.$ui.browser
@@ -792,6 +805,7 @@ pandora.resizeFolders = function() {
 };
 
 pandora.resizeWindow = function() {
+    pandora.$ui.leftPanel.size(2, pandora.getInfoHeight(true));
     pandora.resizeFolders();
     /*
     var infoHeight = pandora.getInfoHeight(true);
@@ -880,6 +894,7 @@ pandora.selectList = function() {
 };
 
 pandora.unloadWindow = function() {
+    /*
     // fixme: ajax request has to have async set to false for this to work
     pandora.user.ui.section == 'items'
         && pandora.user.ui.item
@@ -890,6 +905,7 @@ pandora.unloadWindow = function() {
                 pandora.user.ui.itemView == 'video' ? 'player' : 'editor'
             ].options('position')
         );
+    */
 };
 
 (function() {