AnnotationPanel: add methods addLayer, removeLayer, updateLayer

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

@@ -102,103 +102,10 @@ Ox.AnnotationPanel = function(options, self) {
         })
         .addClass('OxVideoPlayer');
 
-    self.$folders = Ox.Element().css({overflowY: 'auto'});
+    self.$folders = Ox.Element().css({overflowY: 'scroll'});
     self.$folder = [];
 
-    self.options.layers.forEach(function(layer, i) {
+    renderFolders();
-        var item = Ox.getObjectById(layer.items, self.options.selected),
-            selected = item ? item.id : '';
-        self.$folder[i] = Ox.AnnotationFolder(
-                Ox.extend({
-                    clickLink: self.options.clickLink,
-                    collapsed: !self.options.showLayers[layer.id],
-                    editable: self.options.editable,
-                    font: self.options.font,
-                    highlight: self.options.highlight,
-                    '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));
-                },
-                edit: function() {
-                    self.editing = true;
-                    renderEditMenu();
-                    that.triggerEvent('edit');
-                },
-                info: function(data) {
-                    that.triggerEvent('info', {layer: layer.id});
-                },
-                insert: insert,
-                open: function() {
-                    that.triggerEvent('open');
-                },
-                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);
-                },
-                selectafter: function() {
-                    selectNext(layer.id, 1);
-                },
-                selectbefore: function() {
-                    selectNext(layer.id, -1);
-                },
-                selectnone: selectNone,
-                submit: function(data) {
-                    that.triggerEvent('submit', Ox.extend({layer: layer.id}, data));
-                },
-                togglelayer: function(data) {
-                    self.options.showLayers[layer.id] = !data.collapsed;
-                    that.triggerEvent('togglelayer', Ox.extend({layer: layer.id}, data));
-                },
-                togglewidget: function(data) {
-                    that.triggerEvent('toggle' + (
-                        layer.type == 'event' ? 'calendar' : 'map'
-                    ), data);
-                }
-            })
-            .appendTo(self.$folders);
-        [
-            '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
-            'b', 'backslash', 'closebracket', 'comma', 'dot',
-            'equal', 'f', 'g', 'h', 'i', 'minus', 'n', 'o',
-            'openbracket', 'p', 'shift_0', 'shift_equal',
-            'shift_g', 'shift_i', 'shift_minus', 'shift_o',
-            'slash', 'space'
-        ].forEach(function(key) {
-            key = 'key_' + key;
-            self.$folder[i].bindEvent(key, function() {
-                that.triggerEvent(key);
-            });
-        });
-    });
-
     renderOptionsMenu();
     self.options.editable && renderEditMenu();
 
@@ -374,6 +281,108 @@ Ox.AnnotationPanel = function(options, self) {
         .appendTo(self.$menubar);
     }
 
+    function renderFolder(layer) {
+        var index = Ox.getIndexById(self.options.layers, layer.id),
+            item = Ox.getObjectById(layer.items, self.options.selected),
+            selected = item ? item.id : '';
+        self.$folder[index] = Ox.AnnotationFolder(
+                Ox.extend({
+                    clickLink: self.options.clickLink,
+                    collapsed: !self.options.showLayers[layer.id],
+                    editable: self.options.editable,
+                    font: self.options.font,
+                    highlight: self.options.highlight,
+                    '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));
+                },
+                edit: function() {
+                    self.editing = true;
+                    renderEditMenu();
+                    that.triggerEvent('edit');
+                },
+                info: function(data) {
+                    that.triggerEvent('info', {layer: layer.id});
+                },
+                insert: insert,
+                open: function() {
+                    that.triggerEvent('open');
+                },
+                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, index);
+                },
+                selectafter: function() {
+                    selectNext(layer.id, 1);
+                },
+                selectbefore: function() {
+                    selectNext(layer.id, -1);
+                },
+                selectnone: selectNone,
+                submit: function(data) {
+                    that.triggerEvent('submit', Ox.extend({layer: layer.id}, data));
+                },
+                togglelayer: function(data) {
+                    self.options.showLayers[layer.id] = !data.collapsed;
+                    that.triggerEvent('togglelayer', Ox.extend({layer: layer.id}, data));
+                },
+                togglewidget: function(data) {
+                    that.triggerEvent('toggle' + (
+                        layer.type == 'event' ? 'calendar' : 'map'
+                    ), data);
+                }
+            });
+        [
+            '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
+            'b', 'backslash', 'closebracket', 'comma', 'dot',
+            'equal', 'f', 'g', 'h', 'i', 'minus', 'n', 'o',
+            'openbracket', 'p', 'shift_0', 'shift_equal',
+            'shift_g', 'shift_i', 'shift_minus', 'shift_o',
+            'slash', 'space'
+        ].forEach(function(key) {
+            key = 'key_' + key;
+            self.$folder[index].bindEvent(key, function() {
+                that.triggerEvent(key);
+            });
+        });
+        self.$folder[index].appendTo(self.$folders);
+    }
+
+    function renderFolders() {
+        self.$folders.empty();
+        self.options.layers.forEach(function(layer, index) {
+            renderFolder(layer);
+        });
+    }
+
     function renderOptionsMenu() {
         self.$optionsMenuButton && self.$optionsMenuButton.remove();
         self.$optionsMenuButton = Ox.MenuButton({
@@ -506,7 +515,7 @@ Ox.AnnotationPanel = function(options, self) {
 
     /*@
     addItem <f> add item
-        (layer, item) -> <o>  add item to layer
+        (layer, item) -> <o> AnnotationPanel
     @*/
     that.addItem = function(layer, item) {
         // called from addannotation callback
@@ -519,31 +528,46 @@ Ox.AnnotationPanel = function(options, self) {
         }
         renderOptionsMenu();
         renderEditMenu();
+        return that;
     };
 
     /*@
-    blurItem <f> blur item 
+    addLayer <f> Add a layer
-        () -> <o>  blur selected item
+        (layer[, index]) -> <o> AnnotationPanel
+    @*/
+    that.addLayer = function(layer, index) {
+        // FIXME: add/remove/updateLayer don't update users yet
+        index = index || self.options.layers.length;
+        self.options.layers.splice(index, 0, layer);
+        renderFolders();
+        return that;
+    };
+
+    /*@
+    blurItem <f> Blur selected item 
+        () -> <o> AnnotationPanel
     @*/
     that.blurItem = function() {
         self.editing = false;
         getFolder(self.options.selected).blurItem();
         renderEditMenu();
+        return that;
     };
 
     /*@
-    editItem <f> editItem
+    editItem <f> Put selected item into edit mode
-        () -> <o> put selected item into edit mode
+        () -> <o> AnnotationPanel
     @*/
     that.editItem = function() {
         self.editing = true;
         getFolder(self.options.selected).editItem();
         renderEditMenu();
+        return that;
     };
 
     /*@
-    removeItem <f> removeItem 
+    removeItem <f> Remove selected item 
-        (remove) -> <o> remove item  
+        () -> <o> AnnotationPanel
     @*/
     that.removeItem = function(remove) {
         if (remove) {
@@ -556,11 +580,27 @@ Ox.AnnotationPanel = function(options, self) {
             renderOptionsMenu();
             renderEditMenu();
         }
+        return that;
     };
 
     /*@
-    updateItem <f> updateItem
+    removeLayer <f> Remove a layer
-        (id, item) -> <o>  update item
+        (id) -> <o> AnnotationPanel
+    @*/
+    that.removeLayer = function(id) {
+        var $folder = getFolder(self.options.selected),
+            index = Ox.getIndexById(self.options.layers, id);
+        if (self.$folder[index] == $folder) {
+            $folder.blurItem();
+        }
+        self.options.layers.splice(index, 1);
+        renderFolders();
+        return that;
+    };
+
+    /*@
+    updateItem <f> Update an item
+        (id, item) -> <o> AnnotationPanel
     @*/
     that.updateItem = function(id, item) {
         // called from editannotation callback
@@ -570,6 +610,23 @@ Ox.AnnotationPanel = function(options, self) {
         renderEditMenu();
     };
 
+    /*@
+    updateLayer <f> Update a layer
+        (id, items) -> <o> AnnotationPanel
+    @*/
+    that.updateLayer = function(id, items) {
+        var $folder = getFolder(self.options.selected),
+            index = Ox.getIndexById(self.options.layers, id);
+        if (self.$folder[index] == $folder) {
+            $folder.blurItem();
+        }            
+        self.options.layers[index].items = items;
+        self.$folders[index].replaceWith(
+            self.$folders[index] = renderFolder(self.options.layers['index'])
+        );
+        return that;
+    };
+
     return that;
   
 };