From 61e6e097be271e4a36ab1bb1320b19a7c9422cd7 Mon Sep 17 00:00:00 2001 From: rolux Date: Sun, 6 Nov 2011 11:51:04 +0000 Subject: [PATCH] make list info editable, and update it if list data changes --- pandora/itemlist/models.py | 2 +- static/js/pandora/folderList.js | 14 ++---- static/js/pandora/info.js | 76 +++++++++++++++++++++++++++------ static/js/pandora/utils.js | 20 ++++++++- 4 files changed, 84 insertions(+), 28 deletions(-) diff --git a/pandora/itemlist/models.py b/pandora/itemlist/models.py index 64dd6502..fc8b4790 100644 --- a/pandora/itemlist/models.py +++ b/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': diff --git a/static/js/pandora/folderList.js b/static/js/pandora/folderList.js index 5da6ebed..0422082a 100644 --- a/static/js/pandora/folderList.js +++ b/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.$ui.folderList[id].value(data.id, 'id', result.data.id); - pandora.UI.set({ - find: { - conditions: [{key: 'list', value: result.data.id, operator: '=='}], - operator: '&' - } - }, false); + pandora.renameList(data.id, result.data.id, result.data.name, id); + pandora.$ui.info.updateListInfo(); } }); } diff --git a/static/js/pandora/info.js b/static/js/pandora/info.js index 33e9eaba..00d97f17 100644 --- a/static/js/pandora/info.js +++ b/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($('
').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( $('
').css({height: '8px'}) ).append( - Ox.Editable({ - editable: item.user == pandora.user.username, + $description = Ox.Editable({ format: function(value) { - return Ox.encodeHTML(value) + return '
' + + value + '
'; }, - placeholder: '
No description', - tooltip: 'Doubleclick to edit description', + editable: item.user == pandora.user.username, + height: pandora.user.ui.sidebarSize - 32, + placeholder: item.user == pandora.user.username + ? '
No description' + : '', + 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( $('
') - .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'}) } diff --git a/static/js/pandora/utils.js b/static/js/pandora/utils.js index d0b4d8c2..56e64dde 100644 --- a/static/js/pandora/utils.js +++ b/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 - : pandora.user.ui.sidebarSize, + ? Math.round(pandora.user.ui.sidebarSize / (16/9)) + 16 + : 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() {