implement 'view annotations at position / in selection / all'

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

@@ -8,6 +8,7 @@ Ox.AnnotationPanel <f:Ox.Element> 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
@@ -21,8 +22,10 @@ Ox.AnnotationPanel = function(options, self) {
     self = self || {};
     var that = Ox.Element({}, self)
         .defaults({
+            editable: false,
             id: '',
             items: [],
+            range: 'all',
             title: '',
             type: 'text',
             width: 0
@@ -31,7 +34,8 @@ Ox.AnnotationPanel = function(options, self) {
 
     self.selected = -1;
 
-    that.$element = Ox.CollapsePanel({
+    that.setElement(
+        Ox.CollapsePanel({
             collapsed: false,
             extras: self.options.editable ? [
                 Ox.Button({
@@ -52,7 +56,8 @@ Ox.AnnotationPanel = function(options, self) {
         .addClass('OxAnnotationPanel')
         .bindEvent({
             toggle: togglePanel
-        });
+        })
+    );
     that.$content = that.$element.$content;
 
     self.$annotations = Ox.List({
@@ -78,8 +83,11 @@ Ox.AnnotationPanel = function(options, self) {
                     .append($('<div>').css({height: '4px'}));
                 return $item;
             },
-            items: self.options.items,
+            items: getAnnotations(),
             max: 1,
+            min: 0,
+            sort: [{key: 'in', operator: '+'}],
+            type: 'none', // fixme
             unique: 'id'
         })
         .bindEvent({
@@ -116,6 +124,21 @@ Ox.AnnotationPanel = function(options, self) {
             .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', {
@@ -124,6 +147,7 @@ Ox.AnnotationPanel = function(options, self) {
             'layer': self.options.id
         });
     }
+
     function updateAnnotation(data) {
         var item = Ox.getObjectById(self.options.items, data.id);
         item.value = data.value;
@@ -134,6 +158,26 @@ Ox.AnnotationPanel = function(options, self) {
         
     }
 
+    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()
+            });
+        }
+    };
+
     /*@
     addItem <f> addItem
     @*/