openmedialibrary/static/js/transfersPanel.js

'use strict';

oml.ui.transfersPanel = function() {

    var ui = oml.user.ui,

        $list = Ox.TableList({
            columns: [
                'id', 'title', 'extension', 'size',
                'transferadded', 'transferprogress'
            ].map(function(id) {
                var key = Ox.getObjectById(oml.config.itemKeys, id);
                return {
                    align: Ox.contains([
                        'size', 'transferprogress'
                    ], id) ? 'right' : 'left',
                    format: function(value) {
                        return Ox.encodeHTMLEntities(
                            (key.format || Ox.identity)(value)
                        );
                    },
                    id: id,
                    operator: oml.getSortOperator(id),
                    title: Ox._(key.title),
                    visible: id != 'id',
                    width: id == 'title' ? 240
                        : id == 'transferadded' ? 160
                        : id == 'transferprogress' ? 80 - Ox.UI.SCROLLBAR_SIZE
                        : key.columnWidth
                };
            }),
            columnsVisible: true,
            items: function(data, callback) {
                Ox.Request.clearCache('find'); // FIXME: not ideal - and doesn't work
                oml.api.find(Ox.extend(data, {
                    query: {
                        conditions: [{
                            key: 'mediastate',
                            operator: '==',
                            value: 'transferring'
                        }],
                        operator: '&'
                    }
                }), callback);
            },
            keys: ['author'],
            scrollbarVisible: true,
            sort: [{key: 'transferadded', operator: '-'}],
            unique: 'id'
        }),

        $item = Ox.Element(),

        $cancelButton = Ox.Button({
                style: 'squared',
                title: 'Cancel Transfer...',
                width: 128
            })
            .css({
                margin: '8px'
            })
            .bindEvent({
                click: function() {
                    var ids = $list.options('selected');
                    ids && ids.length && oml.api.cancelDownloads({
                        ids: ids
                    }, function() {
                        $list.reloadList(true);
                    });
                }
            })
            .appendTo($item),

        that = Ox.SplitPanel({
            elements: [
                {element: $list},
                {element: $item, size: 144}
            ],
            orientation: 'horizontal'
        });

    oml.bindEvent({
        transfer: Ox.throttle(function(data) {
            var current = $list.value(data.id);
            if (
                !Ox.isEmpty(current) 
                && current.transferprogress != data.progress
            ) {
                $list.value(data.id, 'transferprogress', data.progress);
            }
        }, 1000)
    });

    return that;
    
};