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):
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':

View file

@ -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();
}
});
}

View file

@ -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({
editable: item.user == pandora.user.username,
$description = Ox.Editable({
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>',
tooltip: 'Doubleclick to edit description',
editable: item.user == pandora.user.username,
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'})
}

View file

@ -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() {