openmedialibrary/static/js/folders.js

'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 ? userIndex[split[0]] : 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: ['']});
                        },
                        singleclick: function(data) {
                            oml.UI.set({
                                find: getFind('')
                            });
                        },
                        selectnext: function() {
                            oml.UI.set(Ox.extend(
                                {find: getFind(':')},
                                'showFolder.',
                                true
                            ));
                        },
                    })
                    .css({height: '16px'})
                    .appendTo(that)
            );
            oml.$ui.librariesList.$body.css({height: '16px'}); // FIXME!
            oml.$ui.librariesList.find('.OxColumnItems').css({
                'text-overflow': 'reset',
                'direction': 'rtl'
            })

            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]),
                                });
                            },
                            singleclick: function(data) {
                                oml.UI.set({
                                    find: getFind(oml.$ui.libraryList[index].options('selected')[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();
                            },
                            singleclick: function(data) {
                                oml.UI.set({
                                    find: getFind(oml.$ui.folderList[index].options('selected')[0])
                                });
                            },
                            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();

};