update video editor / annotation panel

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

@@ -75,8 +75,12 @@ Ox.AnnotationPanel = function(options, self) {
                             edit: function() {
                                 $item.removeClass('OxTarget');
                             },
-                            submit: function(data) {
-                                $item.addClass('OxTarget')
+                            submit: function(newData) {
+                                $item.addClass('OxTarget');
+                                updateAnnotation({
+                                    id: data.id,
+                                    value: newData.value 
+                                });
                             }
                         })
                     )
@@ -102,8 +106,8 @@ Ox.AnnotationPanel = function(options, self) {
                     self.$annotations.editItem(pos);
                 }
             },
-            remove: function(data) {
-                that.triggerEvent('remove', data);
+            'delete': function(data) {
+                that.triggerEvent('remove', {id: data.ids[0]});
             },
             select: selectAnnotation,
             submit: updateAnnotation
@@ -149,6 +153,7 @@ Ox.AnnotationPanel = function(options, self) {
     }
 
     function updateAnnotation(data) {
+        Ox.print('updateAnnotation', data);
         var item = Ox.getObjectById(self.options.items, data.id);
         item.value = data.value;
         that.triggerEvent('submit', item);
@@ -188,13 +193,6 @@ Ox.AnnotationPanel = function(options, self) {
         self.$annotations.editItem(pos);
     };
 
-    /*@
-    removeItems <f> removeItems
-    @*/
-    that.removeItems = function(ids) {
-        self.$annotations.removeItems(ids);
-    };
-
     /*@
     deselectItems <f> deselectItems
     @*/
@@ -202,6 +200,13 @@ Ox.AnnotationPanel = function(options, self) {
         self.$annotations.options('selected', []);
     };
 
+    /*@
+    removeItems <f> removeItems
+    @*/
+    that.removeItem = function(id) {
+        self.$annotations.removeItems([id]);
+    };
+
     return that;
 
 };

source/Ox.UI/js/Video/Ox.VideoEditor.js

@@ -323,11 +323,10 @@ Ox.VideoEditor = function(options, self) {
                     that.triggerEvent('addannotation', data);
                 },
                 remove: function(data) {
-                    data = {
-                        ids: [data],
+                    that.triggerEvent('removeannotation', {
+                        id: data.id,
                         layer: layer.id
-                    };
-                    that.triggerEvent('removeannotations', data);
+                    });
                 },
                 select: function(data) {
                     self.options.layers.forEach(function(layer_, i_) {
@@ -339,7 +338,7 @@ Ox.VideoEditor = function(options, self) {
                     });
                     selectAnnotation(data);
                 },
-                submit: updateAnnotation
+                submit: editAnnotation
             })
             .appendTo(self.$annotations);
     });
@@ -714,6 +713,12 @@ Ox.VideoEditor = function(options, self) {
         submitFindInput(self.options.find, true);
     }, 0);
 
+    function editAnnotation(data) {
+        data['in'] = self.options['in'];
+        data.out = self.options.out;
+        that.triggerEvent('editannotation', data);
+    }
+
     function find(query) {
         var results = [];
         if (query.length) {
@@ -910,11 +915,6 @@ Ox.VideoEditor = function(options, self) {
         setPoint('in', data['in']);
         setPoint('out', data.out);
     }
-    function updateAnnotation(data) {
-        data['in'] = self.options['in'];
-        data.out = self.options.out;
-        that.triggerEvent('updateannotation', data);
-    }
 
     function select(type) {
         self.options.points = getPoints(type);
@@ -1075,14 +1075,14 @@ Ox.VideoEditor = function(options, self) {
     };
 
     /*@
-    removeAnnotations <f> add annotation
+    removeAnnotation <f> remove annotation
         (layer, ids) -> <o> remove annotation from layer
         layer <s> layer id
         ids <a> array of item ids to remove
     @*/
-    that.removeAnnotations = function(layer, ids) {
+    that.removeAnnotation = function(layer, id) {
         var i = Ox.getPositionById(self.options.layers, layer);
-        self.$annotationPanel[i].removeItems(ids);
+        self.$annotationPanel[i].removeItem(id);
     };
 
     return that;

source/Ox.UI/themes/classic/css/classic.css

@@ -340,6 +340,9 @@ Forms
     background: -webkit-linear-gradient(top, rgb(160, 160, 160), rgb(192, 192, 192));
 }
 
+.OxThemeClassic .OxEditableElement.OxSelected {
+    background: rgb(208, 208, 208);
+}
 
 /*
 ================================================================================

source/Ox.UI/themes/modern/css/modern.css

@@ -329,7 +329,9 @@ Forms
     background: -webkit-linear-gradient(top, rgb(0, 0, 0), rgb(32, 32, 32) 10%, rgb(64, 64, 64));
 }
 
-
+.OxThemeModern .OxEditableElement.OxSelected {
+    background: rgb(48, 48, 48);
+}
 
 /*
 ================================================================================