openmedialibrary/static/js/folders.js

'use strict';

oml.ui.folders = function() {

    var ui = oml.user.ui,

        userIndex,

        $lists,

        that = Ox.Element()
            .css({
                overflowX: 'hidden',
                //overflowY: 'auto',
            })
            .bindEvent({
                oml_find: selectList
            });

    function getFind(list) {
        return {
            conditions: list ? [{
                key: 'list',
                operator: '==',
                value: list
            }] : [],
            operator: '&'
        };
    }

    function selectList() {
        var split = ui._list.split(':'),
            index = userIndex[split[0] || oml.user.preferences.username],
            list = split[1],
            $selectedList = !ui._list ? oml.$ui.librariesList
                : !list ? oml.$ui[!list ? 'libraryList' : 'folderList'][index]
                : oml.$ui.folderList[index];
        $lists.forEach(function($list) {
            if ($list == $selectedList) {
                $list.options({selected: [ui._list]}).gainFocus();
            } else {
                $list.options({selected: []})
            }
        });
    }

    that.updateElement = function() {

        that.empty();

        $lists = [];

        $lists.push(
            oml.$ui.librariesList = oml.ui.folderList({
                    items: [
                        {
                            id: '',
                            name: Ox._('All Libraries'),
                            type: 'libraries',
                            items: -1
                        }
                    ]
                })
                .bindEvent({
                    load: function() {
                        oml.api.find({query: getFind()}, function(result) {
                            oml.$ui.librariesList.value('', 'items', result.data.items);
                        });
                    },
                    select: function() {
                        oml.UI.set({find: getFind('')});
                        oml.$ui.librariesList.options({selected: ['']});
                    },
                    selectnext: function() {
                        oml.UI.set(Ox.extend(
                            {find: getFind(':')},
                            'showFolder.' + oml.user.preferences.username,
                            true
                        ));
                    },
                })
                .css({height: '16px'})
                .appendTo(that)
        );
        oml.$ui.librariesList.$body.css({height: '16px'}); // FIXME!

        oml.$ui.folder = [];
        oml.$ui.libraryList = [];
        oml.$ui.folderList = [];

        oml.getUsersAndLists(function(users, lists) {

            Ox.print('GOT USERS AND LISTS', users, lists);
            userIndex = {};

            users.forEach(function(user, index) {

                var $content,
                    items = lists.filter(function(list) {
                        return list.user == user.nickname
                            && list.type != 'library';
                    }),
                    libraryId = (!index ? '' : user.nickname) + ':'

                userIndex[user.nickname] = index;

                oml.$ui.folder[index] = Ox.CollapsePanel({
                        collapsed: false,
                        extras: [
                            oml.ui.statusIcon(
                                !oml.user.online && index ? 'unknown'
                                : user.online ? 'connected'
                                : 'disconnected'
                            ),
                            {},
                            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: 'users'})
                                    }
                                }
                            })
                        ],
                        title: Ox.encodeHTMLEntities(user.nickname)
                    })
                    .css({
                        width: ui.sidebarSize
                    })
                    .bindEvent({
                        toggle: function(data) {
                            oml.UI.set('showFolder.' + user.nickname, !data.collapsed);
                        }
                    })
                    .bindEvent(
                        'oml_showfolder.' + user.nickname.toLowerCase(),
                        function(data) {
                            oml.$ui.folder[index].options({collapsed: !data.value});
                        }
                    )
                    .appendTo(that);

                $content = oml.$ui.folder[index].$content
                    .css({
                        height: (1 + items.length) * 16 + 'px'
                    });

                $lists.push(
                    oml.$ui.libraryList[index] = oml.ui.folderList({
                            items: [
                                {
                                    id: libraryId,
                                    name: Ox._('Library'),
                                    type: 'library',
                                    items: -1
                                }
                            ]
                        })
                        .bindEvent({
                            add: function() {
                                !index && oml.addList();
                            },
                            load: function() {
                                oml.api.find({
                                    query: getFind(libraryId)
                                }, function(result) {
                                    oml.$ui.libraryList[index].value(
                                        libraryId, 'items', result.data.items
                                    );
                                });
                            },
                            select: function(data) {
                                oml.UI.set({find: getFind(data.ids[0])});
                            },
                            selectnext: function() {
                                oml.UI.set({find: getFind(items[0].id)});
                            },
                            selectprevious: function() {
                                var userId = !index ? null : users[index - 1].id,
                                    set = {
                                        find: getFind(
                                            !index
                                            ? ''
                                            : Ox.last(lists[userId]).id
                                        )
                                    };
                                if (userId) {
                                    Ox.extend(set, 'showFolder.' + userId, true);
                                }
                                oml.UI.set(set);
                            }
                        })
                        .appendTo($content)
                );

                $lists.push(
                    oml.$ui.folderList[index] = oml.ui.folderList({
                            draggable: !!index,
                            items: items,
                            sortable: !index
                        })
                        .bindEvent({
                            add: function() {
                                !index && oml.addList();
                            },
                            'delete': function() {
                                !index && oml.ui.deleteListDialog().open();
                            },
                            key_control_d: function() {
                                oml.addList(ui._list);
                            },
                            load: function() {
                                // ...
                            },
                            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() {
                                !index && 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].nickname + ':')},
                                        'showFolder.' + users[index + 1].nickname,
                                        true
                                    ));
                                }
                            },
                            selectprevious: function() {
                                oml.UI.set({find: getFind(libraryId)});
                            }
                        })
                        .css({height: items.length * 16 + 'px'})
                        .appendTo($content)
                );

                oml.$ui.folderList[index].$body.css({top: '16px'});

            });

            selectList();

        });

        return that;

    };

    return that.updateElement();

};