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

'use strict';

/*@
Ox.AnnotationPanel <f> Video Annotation Panel
@*/

Ox.AnnotationPanel = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
        .defaults({
            calendarSize: 256,
            editable: false,
            font: 'small',
            layers: [],
            mapSize: 256,
            range: 'all',
            selected: '',
            showCalendar: false,
            showFonts: false,
            showLayers: {},
            showMap: false,
            showUsers: false,
            sort: 'position',
            width: 256
        })
        .options(options || {})
        .addClass('OxAnnotationPanel');

    if (self.options.showUsers) {
        self.users = Ox.sort(Ox.unique(Ox.flatten(
            self.options.layers.map(function(layer) {
                return layer.items.map(function(item) {
                    return item.user;
                });
            })
        )));
        self.enabledUsers = 'all';
    }

    self.$menubar = Ox.Bar({
            size: 16
        })
        .addClass('OxVideoPlayer');

    self.$optionsMenuButton = Ox.MenuButton({
            items: Ox.merge(
                [
                    {id: 'showannotations', title: 'Show Annotations', disabled: true},
                    {group: 'range', min: 1, max: 1, items: [
                        {id: 'all', title: 'All', checked: self.options.range == 'all'},
                        {id: 'selection', title: 'In Current Selection', checked: self.options.range == 'selection'},
                        {id: 'position', title: 'At Current Position', checked: self.options.range == 'position'}
                    ]},
                    {},
                    {id: 'sortannotations', title: 'Sort Annotations', disabled: true},
                    {group: 'sort', min: 1, max: 1, items: [
                        {id: 'position', title: 'By Position', checked: self.options.sort == 'position'},
                        {id: 'duration', title: 'By Duration', checked: self.options.sort == 'duration'},
                        {id: 'text', title: 'By Text', checked: self.options.sort == 'text'}
                    ]}
                ],
                self.options.showFonts ? [
                    {},
                    {id: 'fontsize', title: 'Font Size', disabled: true},
                    {group: 'font', min: 1, max: 1, items: [
                        {id: 'small', title: 'Small', checked: self.options.font == 'small'},
                        {id: 'medium', title: 'Medium', checked: self.options.font == 'medium'},
                        {id: 'large', title: 'Large', checked: self.options.font == 'large'}
                    ]}
                ] : [],
                self.options.showUsers ? [
                    {},
                    {id: 'users', title: 'Show Users', disabled: true},
                    {group: 'users', min: 1, max: -1, items: self.users.map(function(user) {
                        return {id: user, title: user, checked: true};
                    })}
                ] : []
            ),
            style: 'square',
            title: 'set',
            tooltip: 'Actions and Settings',
            type: 'image'
        })
        .css({float: 'left'})
        .bindEvent({
            change: function(data) {
                var set = {};
                if (data.id == 'users') {
                    self.enabledUsers = data.checked.length == self.users.length
                        ? 'all'
                        : data.checked.map(function(checked) {
                            return checked.id;
                        });
                    self.$folder.forEach(function($folder) {
                        $folder.options({users: self.enabledUsers});
                    });
                } else {
                    set[data.id] = data.checked[0].id;
                    self.$folder.forEach(function($folder) {
                        $folder.options(set);
                    });
                    that.triggerEvent('annotations' + data.id, set);
                }
                // FIXME: this does not work
                self.options.selected && getFolder(self.options.selected).gainFocus();
            }
        })
        .appendTo(self.$menubar);

    if (self.options.editable) {
        self.$editMenuButton = Ox.MenuButton({
                items: [
                    {id: 'edit', title: 'Edit Annotation', disabled: !self.options.selected, keyboard: 'return'},
                    {id: 'delete', title: 'Delete Annotation', disabled: !self.options.selected, keyboard: 'delete'},
                    {id: 'deselect', title: 'Deselect Annotation', disabled: !self.options.selected, keyboard: 'escape'},
                    {},
                    {id: 'save', title: 'Save Changes', disabled: true, keyboard: 'shift return'},
                    {id: 'undo', title: 'Undo Changes', disabled: true, keyboard: 'escape'},
                    {},
                    {id: 'find', title: 'Find Annotation', disabled: true},
                    {id: 'manage', title: 'Edit Place/Event', disabled: true}
                ],
                style: 'square',
                title: 'edit',
                tooltip: 'Editing Options',
                type: 'image'
            })
            .css({float: 'right'})
            .bindEvent({
                click: function(data) {
                    if (data.id == 'delete') {

                    } else if (data.id == 'deselect') {

                    } else if (data.id == 'edit') {

                    }
                }
            })
            .appendTo(self.$menubar);
    }

    self.$folders = Ox.Element().css({overflowY: 'auto'});
    self.$folder = [];

    self.options.layers.forEach(function(layer, i) {
        var item = Ox.getObjectById(layer.items, self.options.selected),
            selected = item ? item.id : '';
        self.$folder[i] = Ox.AnnotationFolder(
                Ox.extend({
                    collapsed: !self.options.showLayers[layer.id],
                    editable: self.options.editable,
                    font: self.options.font,
                    'in': self.options['in'],
                    out: self.options.out,
                    position: self.options.position,
                    range: self.options.range,
                    selected: selected,
                    sort: self.options.sort,
                    width: self.options.width - Ox.UI.SCROLLBAR_SIZE
                }, layer, layer.type == 'event' ? {
                    showWidget: self.options.showCalendar,
                    widgetSize: self.options.calendarSize
                } : layer.type == 'place' ? {
                    showWidget: self.options.showMap,
                    widgetSize: self.options.mapSize
                } : {})
            )
            .bindEvent({
                add: function(data) {
                    that.triggerEvent('add', Ox.extend({layer: layer.id}, data));
                },
                blur: function() {
                    that.triggerEvent('blur');
                },
                change: function(data) {
                    that.triggerEvent('change', Ox.extend({layer: layer.id}, data));
                },
                define: function(data) {
                    that.triggerEvent('define', data);
                },
                edit: function() {
                    that.triggerEvent('edit');
                },
                paused: function() {
                    that.triggerEvent('paused')
                },
                remove: function(data) {
                    that.triggerEvent('remove', Ox.extend({layer: layer.id}, data));
                },
                resizewidget: function(data) {
                    that.triggerEvent('resize' + (
                        layer.type == 'event' ? 'calendar' : 'map'
                    ), data);
                },
                select: function(data) {
                    selectAnnotation(data, i);
                },
                submit: function(data) {
                    that.triggerEvent('submit', Ox.extend({layer: layer.id}, data));
                },
                togglelayer: function(data) {
                    that.triggerEvent('togglelayer', Ox.extend({layer: layer.id}, data));
                },
                togglewidget: function(data) {
                    that.triggerEvent('toggle' + (
                        layer.type == 'event' ? 'calendar' : 'map'
                    ), data);
                }
            })
            .appendTo(self.$folders);
    });

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

    function getFolder(annotationId) {
        var found = false, folder;
        Ox.forEach(self.options.layers, function(layer, i) {
            Ox.forEach(layer.items, function(item) {
                if (item.id == annotationId) {
                    folder = self.$folder[i];
                    found = true;
                    return false;
                }
            });
            return !found;
        });
        return folder;
    }

    function scrollToSelected(type) {
        var $item = that.find('.OxEditableElement.OxSelected'),
            itemHeight = $item.height() + (type == 'text' ? 8 : 0),
            itemTop = $item.offset().top,
            itemBottom = itemTop + itemHeight,
            height = self.$folders.height(),
            scrollTop = self.$folders.scrollTop(),
            top = self.$folders.offset().top;
        if (itemTop < top || itemBottom > top + height) {
            if (itemTop < top) {
                scrollTop += itemTop - top;
            } else {
                scrollTop += itemBottom - top - height;
            }
            self.$folders.animate({
                scrollTop: scrollTop + 'px'
            }, 0);
        }
    }

    function selectAnnotation(data, index) {
        self.options.selected = data.id;
        if (data.id) {
            self.$folder.forEach(function($folder, i) {
                i != index && $folder.options({selected: ''});
            });
            scrollToSelected(self.options.layers[index].type);
        }
        /*
        if (data.top) {
            data.bottom = data.top + data.height;
            height = self.$folders.height();
            top = self.$folders.offset().top;
            scrollTop = self.$folders.scrollTop();
            if (data.top < top || data.bottom > height) {
                if (data.top < top) {
                    Ox.print('top scrollTop', data.top, scrollTop)
                    scrollTop += data.top - top;
                } else {
                    scrollTop += data.bottom - top - height;
                }
                self.$folders.animate({
                    scrollTop: scrollTop + 'px'
                }, 0);
            }
        }
        */
        that.triggerEvent('select', data);
    }

    function updateEditMenu() {
        var action = self.options.selected ? 'enableItem' : 'disableItem';
        self.$editMenuButton[action]('edit');
        self.$editMenuButton[action]('delete');
    }

    self.setOption = function(key, value) {
        if (['in', 'out', 'position'].indexOf(key) > -1) {
            self.$folder.forEach(function($folder) {
                $folder.options(key, value);
            });
        } else if (key == 'selected') {
            self.options.editable && updateEditMenu();
            if (value) {
                getFolder(value).options({selected: value});
            } else {
                self.$folder.forEach(function($folder) {
                    $folder.options({selected: ''});
                });
            }
        } else if (key == 'width') {
            self.$folder.forEach(function($folder) {
                $folder.options({width: self.options.width - Ox.UI.SCROLLBAR_SIZE});
            });
        }
    };

    that.addItem = function(layer, item) {
        Ox.print('ADD ITEM', layer, item);
        var i = Ox.getIndexById(self.options.layers, layer);
        self.$folder[i].addItem(item);
    };

    that.blurItem = function() {
        getFolder(self.options.selected).blurItem();
    };

    that.editItem = function() {
        getFolder(self.options.selected).editItem();
    };

    that.updateItem = function(item) {
        Ox.print('UPDATE ITEM', item);
        getFolder(item.id).updateItem(item);
    };

    return that;
  
};