From a8c7239da611c01ae802cf6893075325390a1585 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Thu, 7 Mar 2013 12:49:20 +0000 Subject: [PATCH] AnnotationPanel: add methods addLayer, removeLayer, updateLayer --- source/Ox.UI/js/Video/AnnotationPanel.js | 265 ++++++++++++++--------- 1 file changed, 161 insertions(+), 104 deletions(-) diff --git a/source/Ox.UI/js/Video/AnnotationPanel.js b/source/Ox.UI/js/Video/AnnotationPanel.js index 5342d2aa..3ff9b68b 100644 --- a/source/Ox.UI/js/Video/AnnotationPanel.js +++ b/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) { - 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); - }); - }); - }); - + renderFolders(); 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 add item - (layer, item) -> add item to layer + (layer, item) -> AnnotationPanel @*/ that.addItem = function(layer, item) { // called from addannotation callback @@ -519,31 +528,46 @@ Ox.AnnotationPanel = function(options, self) { } renderOptionsMenu(); renderEditMenu(); + return that; }; /*@ - blurItem blur item - () -> blur selected item + addLayer Add a layer + (layer[, index]) -> 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 Blur selected item + () -> AnnotationPanel @*/ that.blurItem = function() { self.editing = false; getFolder(self.options.selected).blurItem(); renderEditMenu(); + return that; }; /*@ - editItem editItem - () -> put selected item into edit mode + editItem Put selected item into edit mode + () -> AnnotationPanel @*/ that.editItem = function() { self.editing = true; getFolder(self.options.selected).editItem(); renderEditMenu(); + return that; }; /*@ - removeItem removeItem - (remove) -> remove item + removeItem Remove selected item + () -> AnnotationPanel @*/ that.removeItem = function(remove) { if (remove) { @@ -556,11 +580,27 @@ Ox.AnnotationPanel = function(options, self) { renderOptionsMenu(); renderEditMenu(); } + return that; }; /*@ - updateItem updateItem - (id, item) -> update item + removeLayer Remove a layer + (id) -> 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 Update an item + (id, item) -> AnnotationPanel @*/ that.updateItem = function(id, item) { // called from editannotation callback @@ -570,6 +610,23 @@ Ox.AnnotationPanel = function(options, self) { renderEditMenu(); }; + /*@ + updateLayer Update a layer + (id, items) -> 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; };