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

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

'use strict';

/*@
Ox.AnnotationFolder <f:Ox.Element> AnnotationFolder Object
    () ->              <f> AnnotationFolder Object
    (options) ->       <f> AnnotationFolder Object
    (options, self) -> <f> AnnotationFolder 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.AnnotationFolder = function(options, self) {

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

    self.sort = getSort();

    that.setElement(
        Ox.CollapsePanel({
            collapsed: self.options.collapsed,
            extras: self.options.editable ? [
                Ox.Button({
                    id: 'add',
                    style: 'symbol',
                    title: 'add',
                    tooltip: 'Add ' + self.options.item,
                    type: 'image'
                }).bindEvent({
                    click: function(data) {
                        that.triggerEvent('add', {value: ''});
                    }
                })
            ] : [],
            size: 16,
            title: self.options.title
        })
        .addClass('OxAnnotationFolder')
        .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()
            .css({
                width: self.options.width + 'px',
                height: '256px'
            });
        Ox.print('PLACES::', self.places)
        self.$map = Ox.Map({
                places: getPlaces()
                // showLabels: true
            })
            .bindEvent({
                selectplace: function(data) {
                    selectAnnotation({id: data.annotationId});
                }
            })
            .appendTo(self.$annotations);
    } else if (['string', 'text'].indexOf(self.options.type) > -1) {
        self.$annotations = Ox.ArrayEditable({
                editable: self.options.editable,
                items: getAnnotations(),
                selected: self.options.selected,
                sort: self.sort,
                submitOnBlur: false,
                width: self.options.type == 'text' ? self.options.width + 8 : self.options.width,
                type: self.options.type == 'text' ? 'textarea' : 'input'
            })
            .bindEvent({
                add: function(data) {
                    that.triggerEvent('add', {value: data.value || ''});
                },
                blur: function() {
                    that.triggerEvent('blur');
                },
                'delete': function(data) {
                    that.triggerEvent('remove', {id: data.id});
                },
                edit: function() {
                    self.editing = true;
                    that.triggerEvent('edit');
                },
                select: selectAnnotation,
                submit: submitAnnotation,
                key_space: function() {
                    that.triggerEvent('paused');
                }
            });
    }
    self.$annotations.appendTo(that.$content);

    self.options.selected && setTimeout(function() {
        selectAnnotation({id: self.options.selected});
    }, 0);

    function getAnnotations() {
        return self.options.items.filter(function(item) {
            return self.editing && item.id == self.options.selected || (
                (
                    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
                    )
                ) && (
                    self.options.users == 'all'
                    || self.options.users.indexOf(item.user) > -1
                )
            );
        });
    }

    function getPlaces() {
        var places = [];
        getAnnotations().forEach(function(item) {
            if (item.place && Ox.getIndexById(places, item.place.id) == -1) {
                places.push(Ox.extend({
                    annotationId: item.id
                }, item.place));
            }
        });
        return places;
    }

    function getSort() {
        return ({
            duration: ['-duration', '+in', '+value'],
            position: ['+in', '-duration', '+value'],
            text: ['+value', '+in', '-duration']
        })[self.options.sort];
    }

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

    function submitAnnotation(data) {
        var item = Ox.getObjectById(self.options.items, data.id);
        item.value = data.value;
        self.editing = false;
        Ox.print('??:', self.options.items[0], self.$annotations.options('items')[0])
        //self.$annotations.options({items: self.options.items});
        self.options.sort == 'text' && self.$annotations.reloadItems();
        that.triggerEvent('submit', item);
    }

    function togglePanel() {
        self.options.collapsed = !self.options.collapsed;
        that.triggerEvent('toggle', {collapsed: self.options.collapsed});
    }

    self.setOption = function(key, value) {
        if (['in', 'out'].indexOf(key) > -1 && self.editing) {
            var index = Ox.getIndexById(self.options.items, self.options.selected);
            self.options.items[index][key] = value;
            self.options.items[index].duration = self.options.out - self.options['in']; 
        }
        if (key == 'in') {
            //fixme: array editable should support item updates while editing
            if (self.editing || self.options.range == 'selection') {
                self.options.type == 'place' ? self.$map.options({places: getPlaces()})
                    : self.$annotations.options({items: getAnnotations()});
            }
        } else if (key == 'out') {
            if (self.editing || self.options.range == 'selection') {
                self.options.type == 'place' ? self.$map.options({places: getPlaces()})
                    : self.$annotations.options({items: getAnnotations()});
            }
        } else if (key == 'position') {
            if (self.editing || self.options.range == 'position') {
                self.options.type == 'place' ? self.$map.options({places: getPlaces()})
                    : self.$annotations.options({items: getAnnotations()});
            }
        } else if (key == 'range') {
            self.$annotations.options({items: getAnnotations()});
        } else if (key == 'selected') {
            if (value === '') {
                self.editing = false;
            }
            self.$annotations.options({selected: value});
        } else if (key == 'sort') {
            self.sort = getSort();
            self.$annotations.options({sort: self.sort});
        } else if (key == 'users') {
            self.$annotations.options({items: getAnnotations()});
        } else if (key == 'width') {
            self.$annotations.options({
                width: self.options.type == 'text' ? self.options.width + 8 : self.options.width
            });
        }
    };

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

    that.blurItem = function() {
        self.$annotations.blurItem();
    };

    that.editItem = function() {
        self.$annotations.editItem();
    };

    /*@
    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;

};