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

// vim: et:ts=4:sw=4:sts=4:ft=javascript

'use strict';

/*@
Ox.AnnotationPanel <f:Ox.Element> AnnotationPanel Object
    () ->              <f> AnnotationPanel Object
    (options) ->       <f> AnnotationPanel Object
    (options, self) -> <f> AnnotationPanel Object
    options <o> Options object
        editable <b|false> If true, annotations can be added
        id <s> id
        items <a|[]> items
        title <s> title
        type <s|'text'> panel type
        width <n|0>
    self    <o> shared private variable
@*/

Ox.AnnotationPanel = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
        .defaults({
            editable: false,
            id: '',
            items: [],
            range: 'all',
            selected: -1,
            sort: 'position',
            title: '',
            type: 'text',
            width: 0
        })
        .options(options || {});

    self.sort = self.options.sort == 'duration' ? [
        {key: 'duration', operator: '-'},
        {key: 'position', operator: '+'},
        {key: 'value', operator: '+'}
    ] : self.options.sort == 'position' ? [
        {key: 'position', operator: '+'},
        {key: 'duration', operator: '-'},
        {key: 'value', operator: '+'}
    ] : [ // 'text'
        {key: 'value', operator: '+'},
        {key: 'position', operator: '+'},
        {key: 'duration', operator: '-'}
    ];

    that.setElement(
        Ox.CollapsePanel({
            collapsed: false,
            extras: self.options.editable ? [
                Ox.Button({
                    id: 'add',
                    style: 'symbol',
                    title: 'add',
                    tooltip: 'Add',
                    type: 'image'
                }).bindEvent({
                    click: function(data) {
                        that.triggerEvent('add', {value: ''});
                    }
                })
            ] : [],
            size: 16,
            title: self.options.title
        })
        .addClass('OxAnnotationPanel')
        .bindEvent({
            toggle: togglePanel
        })
    );
    that.$content = that.$element.$content;

    if (self.options.type == 'event') {
        self.$annotations = Ox.Element();
    } else if (self.options.type == 'place') {
        self.$annotations = Ox.Element();
    } else if (self.options.type == 'string') {
        self.$annotations = Ox.ArrayEditable({
                editable: self.options.editable,
                items: getAnnotations(),
                sort: self.sort,
                width: pandora.user.ui.annotationsSize - Ox.UI.SCROLLBAR_SIZE
            })
            .bindEvent({
                add: function(data) {
                    that.triggerEvent('add', {
                        value: data.value || ''
                    });
                },
                'delete': function(data) {
                    that.triggerEvent('remove', {id: data.id});
                },
                select: function(data) {
                    selectAnnotation({ids: [data.id]});
                },
                submit: updateAnnotation
            });
    } else if (self.options.type == 'text') {
        self.$annotations = Ox.List({
                construct: function(data) {
                    var $item = Ox.Element()
                        .addClass('OxAnnotation OxTarget')
                        .css({padding: '4px 4px 0 4px'})
                        .append(
                            Ox.Editable({
                                type: 'textarea',
                                width: self.options.width - 8,
                                value: data.value
                            })
                            .bindEvent({
                                edit: function() {
                                    $item.removeClass('OxTarget');
                                },
                                submit: function(newData) {
                                    $item.addClass('OxTarget');
                                    updateAnnotation({
                                        id: data.id,
                                        value: newData.value 
                                    });
                                }
                            })
                        )
                        .append($('<div>').css({height: '4px'}));
                    return $item;
                },
                items: getAnnotations(),
                max: 1,
                min: 0,
                sort: self.sort,
                type: 'none', // fixme
                unique: 'id'
            })
            .bindEvent({
                cancel: function(item) {
                    //reset in/out points
                    selectAnnotation({ids: [item.id]});
                },
                open: function(data) {
                    return;
                    if (data.ids.length == 1) {
                        var pos = Ox.getIndexById(self.$annotations.options('items'), data.ids[0]);
                        self.$annotations.editItem(pos);
                    }
                },
                'delete': function(data) {
                    that.triggerEvent('remove', {id: data.ids[0]});
                },
                select: selectAnnotation,
                submit: updateAnnotation
            });
    }
    self.$annotations.appendTo(that.$content);

    /*
    self.$annotations = Ox.Element()
        .appendTo(that.$content);
    self.$annotation = [];
    self.options.items.forEach(function(item, i) {
        self.$annotation[i] = Ox.Element()
            .addClass('OxAnnotation')
            .html(item.value.replace(/\n/g, '<br/>'))
            .click(function() {
                clickAnnotation(i);
            })
            .appendTo(self.$annotations);
    });
    */

    function getAnnotations() {
        return self.options.items.filter(function(item) {
            return self.options.range == 'all' || (
                self.options.range == 'selection'
                && item['in'] < self.options.out
                && item.out > self.options['in']
            ) || (
                self.options.range == 'position'
                && item['in'] <= self.options.position
                && item.out > self.options.position
            )
        });
    }

    function selectAnnotation(data) {
        var item = Ox.getObjectById(self.options.items, data.ids[0]);
        item && that.triggerEvent('select', {
            'in': item['in'],
            'out': item.out,
            'layer': self.options.id
        });
    }

    function updateAnnotation(data) {
        var item = Ox.getObjectById(self.options.items, data.id);
        item.value = data.value;
        that.triggerEvent('submit', item);
    }

    function togglePanel() {
        
    }

    self.setOption = function(key, value) {
        if (key == 'in') {
            self.options.range == 'selection' && self.$annotations.options({
                items: getAnnotations()
            });
        } else if (key == 'out') {
            self.options.range == 'selection' && self.$annotations.options({
                items: getAnnotations()
            });
        } else if (key == 'position') {
            self.options.range == 'position' && self.$annotations.options({
                items: getAnnotations()
            });
        } else if (key == 'range') {
            self.$annotations.options({
                items: getAnnotations()
            });
        } else if (key == 'sort') {
            self.$annotations.options({sort: value});
        }
    };

    /*@
    addItem <f> addItem
    @*/
    that.addItem = function(item) {
        var pos = 0;
        self.options.items.splice(pos, 0, item);
        if (self.$annotations.addItem) {
            self.$annotations.addItem(pos, item);
        } else {
            self.$annotations.addItems(pos, [item]);
        }
        self.$annotations.editItem(pos);
    };

    /*@
    deselectItems <f> deselectItems
    @*/
    that.deselectItems = function() {
        self.$annotations.options('selected', []);
    };

    /*@
    removeItems <f> removeItems
    @*/
    that.removeItem = function(id) {
        var pos = Ox.getIndexById(self.options.items, id);
        self.options.items.splice(pos, 1);
        self.$annotations.removeItems && self.$annotations.removeItems([id]);
    };

    return that;

};