From e7f8e45a9669cb1b2012170bc4156bb453429afc Mon Sep 17 00:00:00 2001 From: rolux Date: Sun, 6 Nov 2011 14:09:39 +0000 Subject: [PATCH] make 'general' tab of list dialog functional --- static/js/pandora/info.js | 4 +- static/js/pandora/listDialog.js | 249 +++++++++++++++++++++++--------- 2 files changed, 179 insertions(+), 74 deletions(-) diff --git a/static/js/pandora/info.js b/static/js/pandora/info.js index bb67142e..ac5cee55 100644 --- a/static/js/pandora/info.js +++ b/static/js/pandora/info.js @@ -169,7 +169,7 @@ pandora.ui.listInfo = function() { //pandora.api.editPage({name: 'allItems', body: 'foobar'}, callback) if (list) { pandora.api.findLists({ - query: { conditions: [{key: 'id', value: list, operator: '=='}] }, + query: {conditions: [{key: 'id', value: list, operator: '=='}]}, keys: ['description', 'name', 'user'] }, function(result) { if (result.data.items.length) { @@ -231,7 +231,6 @@ pandora.ui.listInfo = function() { // scrollbars may appear setTimeout(function() { var width = that.width(); - Ox.print('WIDTH', width, $description.options('width')) $description.options({ height: width, width: width @@ -245,6 +244,7 @@ pandora.ui.listInfo = function() { description: data.value }, function(result) { item.description = result.data.description; + Ox.Request.clearCache('findLists'); }); } } diff --git a/static/js/pandora/listDialog.js b/static/js/pandora/listDialog.js index a3db867f..28c67382 100644 --- a/static/js/pandora/listDialog.js +++ b/static/js/pandora/listDialog.js @@ -16,31 +16,31 @@ pandora.ui.listDialog = function(section) { ); Ox.getObjectById(tabs, section).selected = true; - var $tabPanel = Ox.TabPanel({ - content: function(id) { - if (id == 'general') { - return pandora.ui.listGeneralPanel(listData); - } else if (id == 'icon') { - return pandora.ui.listIconPanel(listData); - } else if (id == 'query') { - return pandora.$ui.filter = pandora.ui.filter(listData); - } - }, - tabs: tabs - }) - .bindEvent({ - change: function(data) { - var width = getWidth(data.selected); - $dialog.options({ - maxWidth: width, - minWidth: width, - title: 'Smart List - ' + listData.name + ' - ' - + Ox.getObjectById(tabs, data.selected).title - }); - $dialog.setSize(width, 312); - $findElement[data.selected == 'icon' ? 'show' : 'hide'](); + pandora.$ui.listDialogTabPanel = Ox.TabPanel({ + content: function(id) { + if (id == 'general') { + return pandora.ui.listGeneralPanel(listData); + } else if (id == 'icon') { + return pandora.ui.listIconPanel(listData); + } else if (id == 'query') { + return pandora.$ui.filter = pandora.ui.filter(listData); } - }); + }, + tabs: tabs + }) + .bindEvent({ + change: function(data) { + var width = getWidth(data.selected); + $dialog.options({ + maxWidth: width, + minWidth: width, + title: 'Smart List - ' + listData.name + ' - ' + + Ox.getObjectById(tabs, data.selected).title + }); + $dialog.setSize(width, 312); + $findElement[data.selected == 'icon' ? 'show' : 'hide'](); + } + }); var $findElement = Ox.FormElementGroup({ elements: [ @@ -75,8 +75,7 @@ pandora.ui.listDialog = function(section) { if (section != 'icon') { $findElement.hide(); } - $findElement.appendTo($tabPanel.children('.OxBar')); - + $findElement.appendTo(pandora.$ui.listDialogTabPanel.children('.OxBar')); var $dialog = Ox.Dialog({ buttons: [ @@ -99,13 +98,13 @@ pandora.ui.listDialog = function(section) { } }) ], - content: $tabPanel, + content: pandora.$ui.listDialogTabPanel, maxWidth: width, minHeight: 312, minWidth: width, height: 312, // keys: {enter: 'save', escape: 'cancel'}, - title: 'Smart List - ' + listData.name, + title: 'List - ' + listData.name, width: width }); @@ -119,49 +118,156 @@ pandora.ui.listDialog = function(section) { }; pandora.ui.listGeneralPanel = function(listData) { - var that = Ox.Element({}), - $icon = $('') - .attr({src: '/list/' + listData.id + '/icon256.jpg?' + Ox.uid()}) - .css({position: 'absolute', left: '16px', top: '16px', width: '128px', height: '128px', borderRadius: '32px'}) - .appendTo(that), - $nameInput = Ox.Input({ - label: 'Name', - labelWidth: 80, - value: listData.name, - width: 320 - }) - .css({position: 'absolute', left: '160px', top: '16px'}) - .appendTo(that), - $itemsInput = Ox.Input({ - disabled: true, - label: 'Items', - labelWidth: 80, - value: listData.items, - width: 320 - }) - .css({position: 'absolute', left: '160px', top: '40px'}) - .appendTo(that), - $statusSelect = Ox.Select({ - items: [ - {id: 'private', title: 'Private', selected: listData.status == 'private'}, - {id: 'public', title: 'Public', selected: listData.status == 'public'}, - {id: 'featured', title: 'Featured', selected: listData.status == 'featured'}, - ], - label: 'Status', - labelWidth: 80, - width: 320 - }) - .css({position: 'absolute', left: '160px', top: '64px'}) - .appendTo(that), - $subscribersInput = Ox.Input({ - disabled: true, - label: 'Subscribers', - labelWidth: 80, - value: 0, - width: 320 - }) - .css({position: 'absolute', left: '160px', top: '88px'}) - .appendTo(that); + var that = Ox.Element(); + pandora.api.findLists({ + query: {conditions: [{key: 'id', value: listData.id, operator: '=='}]}, + keys: ['description', 'subscribers'] + }, function(result) { + var description = result.data.items[0].description, + subscribers = result.data.items[0].subscribers, + $icon = Ox.Element({ + element: '', + tooltip: 'Doubleclick to edit icon' + }) + .attr({ + src: '/list/' + listData.id + '/icon256.jpg?' + Ox.uid() + }) + .css({ + position: 'absolute', + left: '16px', + top: '16px', + width: '128px', + height: '128px', + borderRadius: '32px' + }) + .bindEvent({ + doubleclick: function() { + pandora.$ui.listDialogTabPanel.select('icon'); + } + }) + .appendTo(that), + $nameInput = Ox.Input({ + label: 'Name', + labelWidth: 80, + value: listData.name, + width: 320 + }) + .css({position: 'absolute', left: '160px', top: '16px'}) + .bindEvent({ + blur: editName, + submit: editName + }) + .appendTo(that), + $itemsInput = Ox.Input({ + disabled: true, + label: 'Items', + labelWidth: 80, + value: listData.items, + width: 320 + }) + .css({position: 'absolute', left: '160px', top: '40px'}) + .appendTo(that), + $statusSelect = listData.status == 'featured' + ? Ox.Input({ + disabled: true, + label: 'Status', + labelWidth: 80, + value: 'Featured', + width: 320 + }) + .css({position: 'absolute', left: '160px', top: '64px'}) + .appendTo(that) + : Ox.Select({ + items: [ + {id: 'private', title: 'Private', checked: listData.status == 'private'}, + {id: 'public', title: 'Public', checked: listData.status == 'public'} + ], + label: 'Status', + labelWidth: 80, + width: 320 + }) + .css({position: 'absolute', left: '160px', top: '64px'}) + .bindEvent({ + change: editStatus + }) + .appendTo(that), + $subscribersInput = Ox.Input({ + disabled: true, + label: 'Subscribers', + labelWidth: 80, + value: subscribers, + width: 320 + }) + .css({position: 'absolute', left: '160px', top: '88px'}) + [getSubscribersAction()]() + .appendTo(that), + $descriptionInput = Ox.Input({ + height: getDescriptionHeight(), + placeholder: 'Description', + type: 'textarea', + value: description, + width: 320 + }) + .css({position: 'absolute', left: '160px', top: getDescriptionTop() + 'px'}) + .bindEvent({ + blur: editDescription, + submit: editDescription + }) + .appendTo(that); + function editDescription(data) { + if (data.value != description) { + pandora.api.editList({ + id: listData.id, + description: data.value + }, function(result) { + description = result.data.description; + Ox.Request.clearCache('findLists'); + pandora.$ui.info.updateListInfo(); + }); + } + } + function editName(data) { + if (data.value != listData.name) { + pandora.api.editList({ + id: listData.id, + name: data.value + }, function(result) { + if (result.data.id != listData.id) { + pandora.renameList(listData.id, result.data.id, result.data.name); + listData.id = result.data.id; + listData.name = result.data.name; + Ox.Request.clearCache('findLists'); + pandora.$ui.info.updateListInfo(); + } + }); + } + } + function editStatus(data) { + var status = data.selected[0].id; + pandora.api.editList({ + id: listData.id, + status: status + }, function(result) { + listData.status = result.data.status; + $subscribersInput[getSubscribersAction()](); + $descriptionInput + .options({height: getDescriptionHeight()}) + .css({top: getDescriptionTop() + 'px'}); + pandora.$ui.folderList[listData.folder].value( + result.data.id, 'status', result.data.status + ); + }); + } + function getDescriptionHeight() { + return listData.status == 'private' ? 184 : 160; + } + function getDescriptionTop() { + return listData.status == 'private' ? 88 : 112; + } + function getSubscribersAction() { + return listData.status == 'private' ? 'hide' : 'show'; + } + }); return that; }; @@ -366,7 +472,6 @@ pandora.ui.listIconPanel = function(listData) { $frame.css('border-' + quarters[quarter] + '-radius', '128px'); } - return that; }