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
        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({
                id: '',
                items: [],
                title: '',
                type: 'text',
                width: 0
            })
            .options(options || {});

    self.selected = -1;

    that.$element = 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;

    self.$annotations = Ox.List({
            construct: function(data) {
                var $item = Ox.Element()
                    .append(
                        Ox.Editable({
                            type: 'textarea',
                            width: self.options.width - 8,
                            value: data.value
                        })
                        .bindEvent({
                            edit: function() {
                                $item.removeClass('OxTarget');
                            },
                            submit: function(data) {
                                $item.addClass('OxTarget')
                            }
                        })
                    )
                    .append($('<div>').css({height: '4px'}))
                    .css({padding: '4px 4px 0 4px'})
                    .addClass('OxAnnotation OxTarget');
                return $item;
            },
            items: self.options.items.map(function(v, i) {
                return {
                    id: v.id || i + '',
                    value: v.value
                };
            }),
            max: 1,
            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.getPositionById(self.$annotations.options('items'), data.ids[0]);
                    self.$annotations.editItem(pos);
                }
            },
            remove: function(data) {
                that.triggerEvent('remove', data);
            },
            select: selectAnnotation,
            submit: updateAnnotation
        })
        .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 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() {
        
    }

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

    /*@
    removeItems <f> removeItems
    @*/
    that.removeItems = function(ids) {
        self.$annotations.removeItems(ids);
    };

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

    return that;

};