diff --git a/static/js/pandora/info.js b/static/js/pandora/info.js
index bb67142e7..ac5cee553 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 a3db867f9..28c673827 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;
}