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

This commit is contained in:
rolux 2011-11-06 11:51:04 +00:00
parent 7dff4fa402
commit 61e6e097be
4 changed files with 84 additions and 28 deletions

View file

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

View file

@ -30,11 +30,9 @@ pandora.ui.folderList = function(id) {
width: 16 width: 16
}, },
{ {
/*
format: function(value) { format: function(value) {
return value.split('/').join(': '); return value.split(':').join(': ');
}, },
*/
id: 'id', id: 'id',
operator: '+', operator: '+',
unique: true, unique: true,
@ -386,14 +384,8 @@ pandora.ui.folderList = function(id) {
data_[data.key] = data.value; data_[data.key] = data.value;
pandora.api.editList(data_, function(result) { pandora.api.editList(data_, function(result) {
if (result.data.id != data.id) { 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);
} }
}); });
} }

View file

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

View file

@ -746,6 +746,19 @@ pandora.reloadList = function() {
.reloadList(); .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.resizeFilters = function(width) {
pandora.user.ui.filterSizes = pandora.getFilterSizes(); pandora.user.ui.filterSizes = pandora.getFilterSizes();
pandora.$ui.browser pandora.$ui.browser
@ -792,6 +805,7 @@ pandora.resizeFolders = function() {
}; };
pandora.resizeWindow = function() { pandora.resizeWindow = function() {
pandora.$ui.leftPanel.size(2, pandora.getInfoHeight(true));
pandora.resizeFolders(); pandora.resizeFolders();
/* /*
var infoHeight = pandora.getInfoHeight(true); var infoHeight = pandora.getInfoHeight(true);
@ -880,6 +894,7 @@ pandora.selectList = function() {
}; };
pandora.unloadWindow = function() { pandora.unloadWindow = function() {
/*
// fixme: ajax request has to have async set to false for this to work // fixme: ajax request has to have async set to false for this to work
pandora.user.ui.section == 'items' pandora.user.ui.section == 'items'
&& pandora.user.ui.item && pandora.user.ui.item
@ -890,6 +905,7 @@ pandora.unloadWindow = function() {
pandora.user.ui.itemView == 'video' ? 'player' : 'editor' pandora.user.ui.itemView == 'video' ? 'player' : 'editor'
].options('position') ].options('position')
); );
*/
}; };
(function() { (function() {