oxjs/source/Ox.UI/js/Video/ClipPanel.js

'use strict';

Ox.ClipPanel = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
        .defaults({
            clips: [],
            duration: 0,
            editable: false,
            'in': 0,
            out: 0,
            position: 0,
            selected: '',
            sort: [],
            sortOptions: [],
            view: 'list',
            width: 0
        })
        .options(options || {})
        .update({
            clips: function() {
                self.$list.options({
                    items: Ox.clone(self.options.clips),
                    sort: self.options.sort,
                    sortable: isSortable()
                });
                updateStatus();
            },
            duration: updateStatus,
            sort: function() {
                updateSortElement();
                self.$list.options({
                    sort: self.options.sort,
                    sortable: isSortable(),
                });
            }
        });

    self.$menubar = Ox.Bar({
            size: 24
        })
        .bindEvent({
            doubleclick: function(e) {
                if ($(e.target).is('.OxBar')) {
                    self.$list.animate({scrollTop: 0}, 250);
                }
            }
        });

    self.$menu = Ox.MenuButton({
            items: [
                {group: 'view', min: 1, max: 1, items: [
                    {id: 'list', title: Ox._('View as List'), checked: self.options.view == 'list'},
                    {id: 'grid', title: Ox._('View as Grid'), checked: self.options.view == 'grid'},
                ]},
                {},
                {id: 'split', title: 'Split Clip(s) at Cuts', disabled: true},
                {id: 'join', title: 'Join Clip(s) at Cuts', disabled: true},
                {id: 'dereference', title: 'Make Clip(s) Static', disabled: true}
            ],
            title: 'set',
            tooltip: Ox._('Options'),
            type: 'image'
        })
        .css({
            float: 'left',
            margin: '4px 2px 4px 4px'
        })
        .bindEvent({
            change: function(data) {
                if (data.id == 'view') {
                    self.options.view = data.checked[0].id;
                    self.$panel.replaceElement(1, self.$list = getList());
                    self.$panel.triggerEvent('view', {view: self.options.view});
                }
            },
            click: function(data) {
                
            }
        })
        .appendTo(self.$menubar),

    self.$sortSelect = Ox.Select({
            items: self.options.sortOptions,
            value: self.options.sort[0].key,
            width: 100 + Ox.UI.SCROLLBAR_SIZE
        })
        .bindEvent({
            change: function(data) {
                self.options.sort = [{
                    key: data.value,
                    operator: Ox.getObjectById(
                        self.options.sortOptions, data.value
                    ).operator
                }];
                updateSortElement();
                that.triggerEvent('sort', self.options.sort);
            }
        });

    self.$orderButton = Ox.Button({
            overlap: 'left',
            title: getButtonTitle(),
            tooltip: getButtonTooltip(),
            type: 'image'
        })
        .bindEvent({
            click: function() {
                self.options.sort = [{
                    key: self.options.sort[0].key,
                    operator: self.options.sort[0].operator == '+' ? '-' : '+'
                }];
                updateSortElement();
                that.triggerEvent('sort', self.options.sort);
            }
        });

    self.$sortElement = Ox.FormElementGroup({
            elements: [self.$sortSelect, self.$orderButton],
            float: 'right'
        })
        .css({
            float: 'right',
            margin: '4px 4px 4px 2px'
        })
        .appendTo(self.$menubar);

    self.$list = getList();

    self.$statusbar = Ox.Bar({
        size: 16
    });

    self.$status = Ox.Element()
        .css({
            marginTop: '2px',
            fontSize: '9px',
            textAlign: 'center',
            textOverflow: 'ellipsis'
        })
        .appendTo(self.$statusbar);

    that.setElement(
        self.$panel = Ox.SplitPanel({
            elements: [
                {
                    element: self.$menubar,
                    size: 24
                },
                {
                    element: self.$list
                },
                {
                    element: self.$statusbar,
                    size: 16
                }
            ],
            orientation: 'vertical'
        })
    );

    updateStatus();

    function editClip(data) {
        var value = self.$list.value(data.id, data.key);
        if (data.value != value && !(data.value === '' && value === null)) {
            self.$list.value(data.id, data.key, data.value || null);
            that.triggerEvent('edit', data);
        }
    }

    function getButtonTitle() {
        return self.options.sort[0].operator == '+' ? 'up' : 'down';
    }

    function getButtonTooltip() {
        return Ox._(self.options.sort[0].operator == '+' ? 'Ascending' : 'Descending');
    }

    function getList() {
        var $list = self.options.view == 'list' ? Ox.TableList({
            columns: [
                {
                    align: 'right',
                    id: 'index',
                    operator: '+',
                    title: Ox._('Index'),
                    visible: false,
                    width: 60
                },
                {
                    id: 'id',
                    operator: '+',
                    title: Ox._('ID'),
                    unique: true,
                    visible: false,
                    width: 60
                },
                {
                    id: 'item',
                    operator: '+',
                    title: Ox._(pandora.site.itemName.singular),
                    visible: true,
                    width: 60
                },
                {
                    align: 'right',
                    editable: isEditable,
                    format: function(value) {
                        return Ox.formatDuration(value, 3);
                    },
                    id: 'in',
                    operator: '+',
                    title: Ox._('In'),
                    visible: true,
                    width: 90
                },
                {
                    align: 'right',
                    editable: isEditable,
                    format: function(value) {
                        return Ox.formatDuration(value, 3);
                    },
                    id: 'out',
                    operator: '+',
                    title: Ox._('Out'),
                    visible: true,
                    width: 90
                },
                {
                    align: 'right',
                    editable: isEditable,
                    format: function(value) {
                        return Ox.formatDuration(value, 3);
                    },
                    id: 'duration',
                    operator: '+',
                    title: Ox._('Duration'),
                    visible: true,
                    width: 90
                }
            ],
            columnsMovable: true,
            columnsRemovable: true,
            columnsResizable: true,
            columnsVisible: true,
            items: Ox.clone(self.options.clips),
            scrollbarVisible: true,
            sort: self.options.sort,
            sortable: isSortable(),
            unique: 'id'
        }) : Ox.Element();
        $list.bindEvent({
            copy: function(data) {
                that.triggerEvent('copy', data);
            },
            cut: function(data) {
                that.triggerEvent('cut', data);
            },
            'delete': function(data) {
                that.triggerEvent('remove', data);
            },
            move: function(data) {
                data.ids.forEach(function(id, index) {
                    self.$list.value(id, 'index', index);
                });
                that.triggerEvent('move', data);
            },
            open: function(data) {
                that.triggerEvent('open', data);
            },
            paste: function() {
                that.triggerEvent('paste');
            },
            select: function(data) {
                that.triggerEvent('select', data);
            },
            sort: function(data) {
                self.options.sort = [data];
                updateSortElement();
                self.$list.options({sortable: isSortable()});
                that.triggerEvent('sort', self.options.sort);
            },
            submit: function(data) {
                data.value = Ox.parseDuration(data.value);
                self.$list.value(data.id, data.key, data.value);
                that.triggerEvent('edit', data);
            }
        });
        return $list;
    }

    function isEditable(data) {
        return self.options.editable && !data.annotation;
    }

    function isSortable() {
        return self.options.editable
            && self.options.sort && self.options.sort.length
            && self.options.sort[0].key == 'index'
            && self.options.sort[0].operator == '+';
    }

    function updateSortElement() {
        self.$sortSelect.options({
            value: self.options.sort[0].key,
        });
        self.$orderButton.options({
            title: getButtonTitle(),
            tooltip: getButtonTooltip(),
        });
    }

    function updateStatus() {
        self.$status.html(
            Ox.toTitleCase(Ox.formatCount(self.options.clips.length, 'Clip'))
            + ', ' + Ox.formatDuration(self.options.duration, 3)
        );
    }

    that.updateItem = function(id, data) {
        ['in', 'out', 'duration'].forEach(function(key) {
            self.$list.value(id, key, data[key]);
        });
    };

    return that;

};