435 lines
16 KiB
JavaScript
435 lines
16 KiB
JavaScript
'use strict';
|
|
|
|
oml.ui.folders = function() {
|
|
|
|
var ui = oml.user.ui,
|
|
|
|
userIndex,
|
|
users,
|
|
|
|
$lists,
|
|
|
|
that = Ox.Element()
|
|
.css({
|
|
overflowX: 'hidden',
|
|
})
|
|
.bindEvent({
|
|
oml_find: function() {
|
|
selectList(false);
|
|
},
|
|
oml_showfolder: function() {
|
|
oml.resizeListFolders();
|
|
},
|
|
oml_showpeers: function() {
|
|
that.updateElement();
|
|
},
|
|
oml_showinfo: function() {
|
|
oml.resizeListFolders();
|
|
}
|
|
});
|
|
|
|
function getFind(list) {
|
|
return {
|
|
conditions: list ? [{
|
|
key: 'list',
|
|
operator: '==',
|
|
value: list
|
|
}] : [],
|
|
operator: '&'
|
|
};
|
|
}
|
|
|
|
function getFolderList(list) {
|
|
var index = users ? users.map(function(user) {
|
|
return user.name;
|
|
}).indexOf(list.user) : null;
|
|
return list.id == '' ? oml.$ui.librariesList
|
|
: Ox.endsWith(list.id, ':') ? oml.$ui.libraryList[index]
|
|
: Ox.endsWith(list.id, ':Inbox') ? oml.$ui.inboxList[index]
|
|
: oml.$ui.folderList[index];
|
|
}
|
|
|
|
function getUsersAndLists(callback) {
|
|
oml.getUsers(function(users_) {
|
|
if (ui.showPeers) {
|
|
users = users_.filter(function(user) {
|
|
return user.id == oml.user.id || user.peered;
|
|
});
|
|
} else {
|
|
users = users_.filter(function(user) {
|
|
return user.id == oml.user.id;
|
|
});
|
|
}
|
|
oml.getLists(function(lists) {
|
|
callback(users, lists);
|
|
});
|
|
});
|
|
}
|
|
|
|
function selectList(gainFocus) {
|
|
var split = ui._list.split(':'),
|
|
index = userIndex[split[0]],
|
|
list = split[1],
|
|
$selectedList = !ui._list ? oml.$ui.librariesList
|
|
: !list ? oml.$ui[
|
|
!list ? 'libraryList'
|
|
: 'folderList'
|
|
][index]
|
|
: list == 'Inbox' ? oml.$ui.inboxList[index]
|
|
: oml.$ui.folderList[index];
|
|
$lists.forEach(function($list) {
|
|
if ($list == $selectedList) {
|
|
$list.options({selected: [ui._list]});
|
|
gainFocus && $list.gainFocus();
|
|
} else {
|
|
$list.options({selected: []})
|
|
}
|
|
});
|
|
}
|
|
|
|
that.updateElement = function() {
|
|
|
|
that.empty();
|
|
|
|
$lists = [];
|
|
|
|
oml.$ui.folder = [];
|
|
oml.$ui.libraryList = [];
|
|
oml.$ui.folderList = [];
|
|
oml.$ui.inboxList = [];
|
|
|
|
getUsersAndLists(function(users, lists) {
|
|
|
|
userIndex = {};
|
|
|
|
$lists.push(
|
|
oml.$ui.librariesList = oml.ui.folderList({
|
|
items: [lists[0]]
|
|
})
|
|
.bindEvent({
|
|
select: function() {
|
|
oml.UI.set({find: getFind('')});
|
|
oml.$ui.librariesList.options({selected: ['']});
|
|
},
|
|
selectnext: function() {
|
|
oml.UI.set(Ox.extend(
|
|
{find: getFind(':')},
|
|
'showFolder.',
|
|
true
|
|
));
|
|
},
|
|
})
|
|
.css({height: '16px'})
|
|
.appendTo(that)
|
|
);
|
|
oml.$ui.librariesList.$body.css({height: '16px'}); // FIXME!
|
|
|
|
users.forEach(function(user, index) {
|
|
|
|
var $content,
|
|
items = lists.filter(function(list) {
|
|
return list.user === user.name
|
|
&& list.type != 'library' && list.name != 'Inbox';
|
|
}),
|
|
libraryId = user.name + ':',
|
|
inboxId = user.name + ':Inbox',
|
|
offset = 16;
|
|
|
|
userIndex[user.name] = index;
|
|
|
|
oml.$ui.folder[index] = Ox.CollapsePanel({
|
|
collapsed: !ui.showFolder[user.name],
|
|
extras: [
|
|
oml.ui.statusIcon(user, index),
|
|
{},
|
|
Ox.Button({
|
|
style: 'symbol',
|
|
title: 'info',
|
|
tooltip: Ox._(!index ? 'Preferences...' : 'Profile...'),
|
|
type: 'image'
|
|
})
|
|
.bindEvent({
|
|
click: function() {
|
|
if (!index) {
|
|
oml.UI.set({
|
|
page: 'preferences',
|
|
'part.preferences': 'account'
|
|
});
|
|
} else {
|
|
oml.UI.set({page: 'peers'});
|
|
}
|
|
}
|
|
})
|
|
],
|
|
title: Ox.encodeHTMLEntities(
|
|
!index
|
|
? oml.user.preferences.username || 'anonymous'
|
|
: user.name
|
|
)
|
|
})
|
|
.css({
|
|
width: ui.sidebarSize
|
|
})
|
|
.bindEvent({
|
|
toggle: function(data) {
|
|
oml.UI.set('showFolder.' + oml.UI.encode(user.name), !data.collapsed);
|
|
}
|
|
})
|
|
.bindEvent(
|
|
'oml_showfolder.' + user.name.toLowerCase(),
|
|
function(data) {
|
|
oml.$ui.folder[index].options({collapsed: !data.value});
|
|
}
|
|
)
|
|
.appendTo(that);
|
|
|
|
$content = oml.$ui.folder[index].$content
|
|
.css({
|
|
// user also has inbox
|
|
height: ((index ? 1 : 2) + items.length) * 16 + 'px'
|
|
});
|
|
|
|
$lists.push(
|
|
oml.$ui.libraryList[index] = oml.ui.folderList({
|
|
items: lists.filter(function(list) {
|
|
return list.user == user.name
|
|
&& list.type == 'library';
|
|
})
|
|
})
|
|
.bindEvent({
|
|
add: function() {
|
|
!index && oml.addList();
|
|
},
|
|
select: function(data) {
|
|
oml.UI.set({find: getFind(data.ids[0])});
|
|
},
|
|
selectnext: function() {
|
|
oml.UI.set({find: getFind(inboxId)});
|
|
},
|
|
selectprevious: function() {
|
|
// FIXME: ugly
|
|
var set, user, userLists;
|
|
if (!index) {
|
|
set = {find: getFind('')};
|
|
} else {
|
|
user = users[index - 1].name;
|
|
userLists = lists.filter(function(list) {
|
|
return list.user == user;
|
|
});
|
|
set = {find: getFind(
|
|
!userLists.length ? user + ':'
|
|
: Ox.last(userLists).id
|
|
)};
|
|
Ox.extend(set, 'showFolder.' + oml.UI.encode(user), true);
|
|
}
|
|
oml.UI.set(set);
|
|
}
|
|
})
|
|
.appendTo($content)
|
|
);
|
|
if (user.name == '') {
|
|
$lists.push(
|
|
oml.$ui.inboxList[index] = oml.ui.folderList({
|
|
items: lists.filter(function(list) {
|
|
return list.user == user.name && list.name == 'Inbox';
|
|
})
|
|
})
|
|
.bindEvent({
|
|
select: function(data) {
|
|
oml.UI.set({find: getFind(data.ids[0])});
|
|
},
|
|
selectnext: function() {
|
|
oml.UI.set({find: getFind(items[0].id)});
|
|
},
|
|
selectprevious: function() {
|
|
oml.UI.set({find: getFind(libraryId)});
|
|
}
|
|
})
|
|
.appendTo($content)
|
|
);
|
|
oml.$ui.inboxList[index].$body.css({top: offset + 'px'});
|
|
offset += 16;
|
|
}
|
|
|
|
$lists.push(
|
|
oml.$ui.folderList[index] = oml.ui.folderList({
|
|
draggable: !!index,
|
|
items: items,
|
|
sortable: !index
|
|
})
|
|
.bindEvent({
|
|
add: function(data) {
|
|
var keys = data.keys || '',
|
|
listData = oml.getListData();
|
|
if (listData.user === '' && (
|
|
keys != 'shift' || ui.listSelection
|
|
)) {
|
|
oml.addList(
|
|
Ox.contains(keys, 'alt'),
|
|
Ox.contains(keys, 'shift')
|
|
);
|
|
}
|
|
},
|
|
'delete': function(data) {
|
|
!index && !Ox.contains(data.ids, ':Inbox') && oml.ui.deleteListDialog().open();
|
|
},
|
|
key_control_d: function() {
|
|
oml.addList(ui._list);
|
|
},
|
|
move: function(data) {
|
|
lists[user.id] = data.ids.map(function(listId) {
|
|
return Ox.getObjectById(items, listId);
|
|
});
|
|
oml.api.sortLists({
|
|
ids: data.ids,
|
|
user: user.id
|
|
}, function(result) {
|
|
// ...
|
|
});
|
|
},
|
|
open: function(data) {
|
|
!index && !Ox.contains(data.ids, ':Inbox') && oml.ui.listDialog().open();
|
|
},
|
|
select: function(data) {
|
|
oml.UI.set({find: getFind(data.ids[0])});
|
|
},
|
|
selectnext: function() {
|
|
if (index < users.length - 1) {
|
|
oml.UI.set(Ox.extend(
|
|
{find: getFind(users[index + 1].name + ':')},
|
|
'showFolder.' + oml.UI.encode(users[index + 1].name),
|
|
true
|
|
));
|
|
}
|
|
},
|
|
selectprevious: function() {
|
|
oml.UI.set({find: getFind(inboxId)});
|
|
}
|
|
})
|
|
.css({height: items.length * 16 + 'px'})
|
|
.appendTo($content)
|
|
);
|
|
|
|
oml.$ui.folderList[index].$body.css({top: offset + 'px'});
|
|
|
|
});
|
|
|
|
oml.resizeListFolders(); // FIXME: DOESN'T WORK
|
|
selectList(true);
|
|
|
|
});
|
|
|
|
return that;
|
|
|
|
};
|
|
|
|
that.updateItems = function(list, items) {
|
|
var $list;
|
|
if (arguments.length == 0) {
|
|
oml.getLists(function(lists) {
|
|
lists.forEach(function(list) {
|
|
$list = getFolderList(list);
|
|
if ($list) {
|
|
$list.value(list.id, 'items', list.items);
|
|
}
|
|
});
|
|
});
|
|
} else {
|
|
$lists.forEach(function($list) {
|
|
if (!Ox.isEmpty($list.value(list))) {
|
|
$list.value(list, 'items', items);
|
|
}
|
|
})
|
|
}
|
|
};
|
|
|
|
that.updateOwnLists = function(callback) {
|
|
oml.getLists(function(lists) {
|
|
var items = lists.filter(function(list) {
|
|
return list.user == '' && list.type != 'library' && list.name != 'Inbox';
|
|
});
|
|
// Library + Inbox + lists
|
|
oml.$ui.folder[0].$content
|
|
.css({height: 16 + 16 + items.length * 16 + 'px'});
|
|
oml.$ui.folderList[0].options({
|
|
items: Ox.clone(items, true)
|
|
})
|
|
.css({height: items.length * 16 + 'px'})
|
|
.size();
|
|
oml.resizeListFolders();
|
|
callback && callback();
|
|
});
|
|
};
|
|
|
|
that.updateUser = function(index, callback) {
|
|
var name = ui._users[index].name;
|
|
oml.$ui.folder[index].options({title: Ox.encodeHTMLEntities(name)});
|
|
oml.getLists(function(lists) {
|
|
var items = lists.filter(function(list) {
|
|
return list.user == name && list.type != 'library' && list.name != 'Inbox';
|
|
}),
|
|
library = lists.filter(function(list) {
|
|
return list.user == name && list.type == 'library';
|
|
});
|
|
if (oml.$ui.libraryList[index]) {
|
|
oml.$ui.libraryList[index].options({
|
|
items: library
|
|
});
|
|
// library + inbox + lists
|
|
oml.$ui.folder[index].$content
|
|
.css({height: (index ? 16 : 32) + items.length * 16 + 'px'});
|
|
oml.$ui.folderList[index].options({
|
|
items: items
|
|
})
|
|
.css({height: items.length * 16 + 'px'})
|
|
.size();
|
|
}
|
|
oml.resizeListFolders();
|
|
callback && callback();
|
|
});
|
|
return that;
|
|
};
|
|
|
|
oml.bindEvent({
|
|
activity: function(data) {
|
|
if (data.activity == 'import') {
|
|
that.updateItems();
|
|
}
|
|
},
|
|
addlist: function(data) {
|
|
var index = Ox.getIndexById(ui._users, data.user);
|
|
if (index > -1) {
|
|
that.updateUser(index);
|
|
}
|
|
},
|
|
change: function(data) {
|
|
Ox.Request.clearCache();
|
|
},
|
|
editlist: function(data) {
|
|
var index = Ox.getIndexById(ui._users, data.user);
|
|
if (index > -1) {
|
|
that.updateUser(index);
|
|
}
|
|
},
|
|
orderlists: function(data) {
|
|
var index = Ox.getIndexById(ui._users, data.user);
|
|
if (index > -1) {
|
|
that.updateUser(index);
|
|
}
|
|
},
|
|
peering: function(data, event) {
|
|
Ox.Request.clearCache('getUsers');
|
|
if (Ox.contains(['peering.accept', 'peering.remove'], event)) {
|
|
that.updateElement();
|
|
}
|
|
},
|
|
status: function(data) {
|
|
if (data.id == oml.user.id) {
|
|
oml.user.online = data.online;
|
|
}
|
|
},
|
|
});
|
|
|
|
return that.updateElement();
|
|
|
|
};
|