pandora/static/js/folderBrowserList.js

236 lines
10 KiB
JavaScript
Raw Normal View History

2011-07-29 18:37:11 +00:00
// vim: et:ts=4:sw=4:sts=4:ft=javascript
2011-11-05 17:04:10 +00:00
'use strict';
2013-07-15 11:39:23 +00:00
pandora.ui.folderBrowserList = function(id, section) {
2011-09-01 04:46:44 +00:00
// fixme: user and name are set to the same width here,
// but resizeFolders will set them to different widths
2013-07-15 11:39:23 +00:00
section = pandora.user.ui.section;
2013-02-16 01:20:40 +00:00
var ui = pandora.user.ui,
2014-09-26 12:12:25 +00:00
columnWidth = (ui.sidebarSize - Ox.UI.SCROLLBAR_SIZE - (section != 'texts' ? 96 : 48)) / 2,
2013-07-15 11:39:23 +00:00
i = Ox.getIndexById(pandora.site.sectionFolders[section], id),
folderItems = section == 'items' ? 'Lists' : Ox.toTitleCase(section),
2013-02-16 01:20:40 +00:00
folderItem = folderItems.slice(0, -1),
2012-06-27 07:41:39 +00:00
that = Ox.TableList({
2011-05-25 19:42:45 +00:00
columns: [
{
clickable: true,
format: function(value) {
return $('<img>').attr({
2013-08-14 19:41:31 +00:00
src: '/list/' + encodeURIComponent(value) + '/icon.jpg'
}).css({
width: '14px',
height: '14px',
borderRadius: '4px',
margin: '0 0 0 -3px'
});
},
// FIXME: why does the above only work with clickable: true ??
/*
2011-05-25 19:42:45 +00:00
format: function() {
2011-09-01 07:00:35 +00:00
return $('<img>').attr({
2014-09-25 16:59:29 +00:00
src: Ox.getImageURL('symbolIcon')
2011-09-01 07:00:35 +00:00
}).css({
width: '10px',
height: '10px',
2011-09-01 09:17:49 +00:00
padding: '3px'
2011-09-01 07:00:35 +00:00
});
2011-05-25 19:42:45 +00:00
},
*/
2011-05-25 19:42:45 +00:00
id: 'id',
2011-11-03 12:58:22 +00:00
titleImage: 'icon',
2011-05-25 19:42:45 +00:00
visible: true,
width: 16
},
{
format: function(value) {
return Ox.encodeHTMLEntities(value);
},
2011-05-25 19:42:45 +00:00
id: 'user',
operator: '+',
2013-05-09 10:13:58 +00:00
title: Ox._('User'),
2011-05-25 19:42:45 +00:00
visible: true,
width: Math.floor(columnWidth)
},
{
format: function(value) {
return Ox.encodeHTMLEntities(value);
},
2011-05-25 19:42:45 +00:00
id: 'name',
operator: '+',
2013-05-09 10:13:58 +00:00
title: Ox._(folderItem),
2011-05-25 19:42:45 +00:00
visible: true,
width: Math.ceil(columnWidth)
},
{
align: 'right',
id: 'items',
2011-09-01 04:46:44 +00:00
format: {type: 'number'},
2011-05-25 19:42:45 +00:00
operator: '-',
2013-05-09 10:13:58 +00:00
title: Ox._('Items'),
2014-02-08 17:34:12 +00:00
visible: section != 'texts',
2011-09-01 04:46:44 +00:00
width: 48
2011-05-25 19:42:45 +00:00
},
{
clickable: function(data) {
2013-07-15 11:39:23 +00:00
return section == 'items' && (
2013-03-03 06:10:09 +00:00
data.type == 'smart' || data.user == pandora.user.username
);
2011-05-25 19:42:45 +00:00
},
format: function(value, data) {
2011-05-25 19:42:45 +00:00
return $('<img>')
.attr({
2014-09-25 16:59:29 +00:00
src: Ox.getImageURL(
2013-03-03 06:05:25 +00:00
value == 'static' ? 'symbolClick'
: value == 'smart' ? 'symbolFind'
: value == 'html' ? 'symbolFile'
: 'symbolBook'
)
2011-05-25 19:42:45 +00:00
})
.css({
width: '10px',
height: '10px',
2011-09-01 09:17:49 +00:00
padding: '3px',
2013-07-15 11:39:23 +00:00
opacity: section == 'texts' || data.user == pandora.user.username ? 1 : 0.25
2011-05-25 19:42:45 +00:00
});
},
id: 'type',
operator: '+',
2011-11-03 12:58:22 +00:00
titleImage: 'edit',
tooltip: function(data) {
2013-03-03 06:05:25 +00:00
return data.type == 'static'
2013-05-09 10:13:58 +00:00
? (data.user == pandora.user.username ? Ox._('Edit Default View') : Ox._('Default View: ...'))
2013-03-03 06:05:25 +00:00
: data.type == 'smart'
2013-05-09 10:13:58 +00:00
? (data.user == pandora.user.username ? Ox._('Edit Query') : Ox._('Show Query'))
: Ox._(data.type.toUpperCase());
},
2013-03-03 06:05:25 +00:00
visible: true,
2011-05-25 19:42:45 +00:00
width: 16
},
{
clickable: true,
format: function(value) {
return $('<img>')
.attr({
2014-09-25 16:59:29 +00:00
src: Ox.getImageURL(
2011-09-01 04:46:44 +00:00
'symbol' + (id == 'favorite' ? 'Like' : 'Star')
2011-05-25 19:42:45 +00:00
)
})
.css({
width: '10px',
height: '10px',
2011-09-01 09:17:49 +00:00
padding: '3px',
opacity: id == 'favorite'
2011-09-01 07:00:35 +00:00
? (value ? 1 : 0.25)
: (value == 'featured' ? 1 : 0.25)
2011-05-25 19:42:45 +00:00
});
},
id: id == 'favorite' ? 'subscribed' : 'status',
operator: '+',
2011-11-03 12:58:22 +00:00
titleImage: id == 'favorite' ? 'like' : 'star',
tooltip: function(data) {
var checked = id == 'favorite' ? data.subscribed : data.status == 'featured';
2013-05-09 10:13:58 +00:00
return Ox._((checked ? 'Remove from' : 'Add to')
2014-02-14 15:23:59 +00:00
+ ' {0} {1}', [Ox._(Ox.toTitleCase(id)), Ox._(folderItems)]);
},
2011-05-25 19:42:45 +00:00
visible: true,
width: 16
}
2011-05-25 19:42:45 +00:00
],
columnsVisible: true,
items: function(data, callback) {
var query = id == 'favorite' ? {conditions: [
{key: 'status', value: 'public', operator: '='},
2011-09-28 17:32:03 +00:00
{key: 'user', value: pandora.user.username, operator: '!=='}
2011-09-01 07:00:35 +00:00
], operator: '&'} : {conditions: [
2011-09-28 17:32:03 +00:00
{key: 'status', value: 'private', operator: '!='}
2011-09-01 07:00:35 +00:00
], operator: ''};
2013-02-16 01:20:40 +00:00
return pandora.api['find' + folderItems](Ox.extend(data, {
2011-05-25 19:42:45 +00:00
query: query
}), callback);
},
// needed in order to determine if, when switching back
// from featured browser to featured folder, the selected
// not-featured list may be in the user's favorites folder
keys: id == 'featured' ? ['subscribed'] : [],
2011-05-25 19:42:45 +00:00
pageLength: 1000,
2013-07-15 11:39:23 +00:00
selected: pandora.getListData().folder == id ? [section == 'items' ? ui._list : ui[section.slice(0, -1)]] : [],
sort: [{key: 'name', operator: '+'}],
unique: 'id'
2011-05-25 19:42:45 +00:00
})
.bindEvent({
2011-09-17 17:40:15 +00:00
click: function(data) {
2011-05-25 19:42:45 +00:00
if (data.key == 'type') {
2014-02-03 05:02:41 +00:00
// FIXME: Why is this commented out?
2011-09-19 12:29:55 +00:00
/*
if (that.value(data.id, 'type') == 'smart') {
pandora.$ui.filterDialog = pandora.ui.filterDialog(that.value(data.id, 'query')).open();
}
*/
2011-05-25 19:42:45 +00:00
} else if (data.key == 'subscribed') {
var subscribed = that.value(data.id, 'subscribed');
2013-02-16 01:20:40 +00:00
pandora.api[subscribed ? 'unsubscribeFrom' + folderItem : 'subscribeTo' + folderItem]({
2012-05-26 15:46:24 +00:00
id: data.id
2011-05-25 19:42:45 +00:00
}, function(result) {
that.value(data.id, 'subscribed', !subscribed);
});
} else if (data.key == 'status') {
2013-02-16 01:20:40 +00:00
pandora.api['edit' + folderItem]({
2011-05-25 19:42:45 +00:00
id: data.id,
status: that.value(data.id, 'status') == 'featured' ? 'public' : 'featured'
}, function(result) {
2011-11-04 15:54:42 +00:00
Ox.Log('', 'result', result)
2011-06-06 15:48:11 +00:00
if (result.data.user == pandora.user.username || result.data.subscribed) {
2014-02-03 05:02:41 +00:00
Ox.Request.clearCache(); // fixme: remove
2011-06-06 15:48:11 +00:00
pandora.$ui.folderList[
result.data.user == pandora.user.username ? 'personal' : 'favorite'
2011-05-25 19:42:45 +00:00
].reloadList();
}
that.value(data.id, 'status', result.data.status);
});
}
},
2011-09-17 17:40:15 +00:00
init: function(data) {
var height = 16 + data.items * 16,
hasItems = pandora.site.sectionFolders[section][i].hasItems;
2013-07-15 11:39:23 +00:00
pandora.site.sectionFolders[section][i].items = data.items;
2011-06-06 15:48:11 +00:00
pandora.$ui.folder[i].$content.css({
height: (data.items ? 24 : hasItems ? 40 : 0) + height + 'px'
2011-05-25 19:42:45 +00:00
});
2011-06-06 15:48:11 +00:00
pandora.$ui.folderList[id].css({
height: height + 'px'
2011-05-25 19:42:45 +00:00
});
pandora.$ui.folderBrowser[id].size(2, data.items ? 0 : 16);
if (Ox.isBoolean(hasItems)) {
// hasItems is set, so we're not on first init
pandora.resizeFolders();
}
2011-05-25 19:42:45 +00:00
},
2011-09-17 17:40:15 +00:00
paste: function(data) {
2013-07-15 11:39:23 +00:00
if (section == 'items') {
2013-02-16 01:20:40 +00:00
pandora.$ui.list.triggerEvent('paste', data);
}
2011-05-25 19:42:45 +00:00
},
2011-09-17 17:40:15 +00:00
select: function(data) {
2011-05-25 19:42:45 +00:00
// fixme: duplicated
2011-09-28 00:10:26 +00:00
var list = data.ids.length ? data.ids[0] : '';
if (list) {
Ox.forEach(pandora.$ui.folderList, function($list, id_) {
2011-05-25 19:42:45 +00:00
id != id_ && $list.options('selected', []);
});
}
2013-07-15 11:39:23 +00:00
if (section == 'items') {
2013-02-16 01:20:40 +00:00
pandora.UI.set({
find: {
conditions: list ? [
{key: 'list', value: data.ids[0], operator: '=='}
] : [],
operator: '&'
}
});
} else {
2013-07-15 11:39:23 +00:00
pandora.UI.set(section.slice(0, -1), list);
2013-02-16 01:20:40 +00:00
}
2011-05-25 19:42:45 +00:00
}
});
return that;
2012-05-26 15:46:24 +00:00
};