use Ox.Editable in Ox.AnnotationPanel

source/Ox.UI/css/Ox.UI.css

@@ -1737,11 +1737,12 @@ Video
 .OxAnnotation {
     border-width: 0 0 1px 0;
     border-style: solid;
-    padding: 4px;
+    //padding: 4px 4px 0 4px;
 }
 .OxAnnotation:last-child {
     border-width: 0;
 }
+/*
 .OxAnnotation.OxEdit {
     padding: 0;
 }
@@ -1749,6 +1750,7 @@ Video
     padding: 4px;
     border: 0;
 }
+*/
 
 .OxPosterMarker {
     position: absolute;

source/Ox.UI/js/Form/Ox.Editable.js

@@ -27,7 +27,7 @@ Ox.Editable = function(options, self) {
             placeholder: '',
             tooltip: '',
             value: '',
-            width: 256,
+            width: 0,
             type: 'input'
         })
         .options(options || {})
@@ -81,11 +81,13 @@ Ox.Editable = function(options, self) {
         }, self.options.type == 'textarea' ? {
             width: self.options.width
         } : {}))
-        .css({display: 'none'})
+        .css({
+            display: 'none',
+        })
         .bindEvent({
             blur: submit,
             cancel: cancel,
-            change: change,
+            change: change
             //submit: submit
         })
         //[self.options.editing ? 'show' : 'hide']()
@@ -98,9 +100,13 @@ Ox.Editable = function(options, self) {
     }
 
     function cancel() {
-        self.$input.hide();
-        self.$value.show();
-        self.options.editing = false;
+        self.options.value = self.originalValue;
+        self.$input.options({value: formatInputValue()}).hide();
+        self.$test.html(formatTestValue());
+        self.$value.html(formatValue()).show();
+        that.triggerEvent('submit', {
+            value: self.options.value
+        });
     }
 
     function change(event) {
@@ -109,10 +115,8 @@ Ox.Editable = function(options, self) {
         self.$value.html(formatValue);
         self.$test.html(formatTestValue());
         height = self.options.height || self.$test.height();
-        //height = Math.max(self.$test.height(), 14);
-        width = Math.max(self.$test.width() + 2, 8);
-        width = Ox.limit(self.$test.width() + 2, self.minWidth, self.maxWidth)
-        Ox.print('wxh', width, height)
+        width = self.options.width || Ox.limit(self.$test.width() + 2, self.minWidth, self.maxWidth)
+        Ox.print(self.options.width, self.$test.width(), 'wxh', width, height)
         if (self.options.type == 'input') {
             self.$input.options({
                 width: width
@@ -141,6 +145,7 @@ Ox.Editable = function(options, self) {
     function edit() {
         var height, width;
         if (self.options.editable && !self.options.editing) {
+            self.originalValue = self.options.value;
             self.minWidth = 8
             self.maxWidth = that.parent().width();
             Ox.print('MAX WIDTH', self.maxWidth);
@@ -169,6 +174,7 @@ Ox.Editable = function(options, self) {
                 self.$input.focusInput(false);
             }, 0);
             self.options.editing = true;
+            that.triggerEvent('edit', {editing: true});
         }
     }
 
@@ -179,14 +185,10 @@ Ox.Editable = function(options, self) {
     }
 
     function formatTestValue() {
-        Ox.print('TEST VALUE =', self.options.type == 'input'
-            ? self.options.value.replace(/ /g, ' ')
-            : self.options.value.replace(/\n$/, '<br/>&nbsp;')
-                .replace(/\n/g, '<br/>'));
         return self.options.type == 'input'
             ? self.options.value.replace(/ /g, '&nbsp;')
-            : self.options.value.replace(/\n$/, '<br/>&nbsp;')
-                .replace(/\n/g, '<br/>');        
+            : Ox.parseHTML(self.options.value || '&nbsp;')
+                .replace(/<br\/?>$/, '<br/>&nbsp;');    
     }
 
     function formatValue() {
@@ -197,9 +199,10 @@ Ox.Editable = function(options, self) {
 
     function submit() {
         self.options.value = Ox.parseHTML(self.$input.value());
-        self.$input.value(formatInputValue());
-        self.$value.html(formatValue());
-        cancel();
+        self.$input.options({value: formatInputValue()}).hide();
+        self.$test.html(formatTestValue());
+        self.$value.html(formatValue()).show();
+        self.options.editing = false;
         that.triggerEvent('submit', {
             value: self.options.value
         });

source/Ox.UI/js/Form/Ox.Input.js

@@ -103,7 +103,9 @@ Ox.Input = function(options, self) {
                 )*/
             )
             .css({width: self.options.width + 'px'})
-            .bindEvent(Ox.extend(self.options.type == 'textarea' ? {} : {
+            .bindEvent(Ox.extend(self.options.type == 'textarea' ? {
+                key_shift_enter: submit
+            } : {
                 key_enter: submit
             }, {
                 key_control_v: paste,

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

@@ -55,9 +55,26 @@ Ox.AnnotationPanel = function(options, self) {
 
     self.$annotations = Ox.List({
             construct: function(data) {
-                return Ox.Element()
-                    .addClass('OxAnnotation OxEditable OxTarget')
-                    .html(Ox.parseHTML(data.value));
+                var $item = Ox.Element()
+                    .append(
+                        Ox.Editable({
+                            type: 'textarea',
+                            width: self.options.width - 8,
+                            value: data.value
+                        })
+                        .bindEvent({
+                            edit: function() {
+                                $item.removeClass('OxTarget');
+                            },
+                            submit: function(data) {
+                                $item.addClass('OxTarget')
+                            }
+                        })
+                    )
+                    .append($('<div>').css({height: '4px'}))
+                    .css({padding: '4px 4px 0 4px'})
+                    .addClass('OxAnnotation OxTarget');
+                return $item;
             },
             items: self.options.items.map(function(v, i) {
                 return {
@@ -65,6 +82,7 @@ Ox.AnnotationPanel = function(options, self) {
                     value: v.value
                 };
             }),
+            max: 1,
             unique: 'id'
         })
         .bindEvent({
@@ -73,6 +91,7 @@ Ox.AnnotationPanel = function(options, self) {
                 selectAnnotation({}, {ids: [item.id]});
             },
             open: function(data) {
+                return;
                 if (data.ids.length == 1) {
                     var pos = Ox.getPositionById(self.$annotations.options('items'), data.ids[0]);
                     self.$annotations.editItem(pos);

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

@@ -9,6 +9,8 @@ Ox.VideoEditor <f:Ox.Element> VideoEditor Object
     self    <o> shared private variable
 @*/
 
+// fixme: should be VideoAnnotationEditor
+
 Ox.VideoEditor = function(options, self) {
 
     self = self || {};
@@ -267,7 +269,7 @@ Ox.VideoEditor = function(options, self) {
     self.options.layers.forEach(function(layer, i) {
         self.$annotationPanel[i] = Ox.AnnotationPanel(
                 Ox.extend({
-                    width: self.options.annotationSize
+                    width: self.options.annotationsSize - Ox.UI.SCROLLBAR_SIZE
                 }, layer)
             )
             .bindEvent({
@@ -309,7 +311,6 @@ Ox.VideoEditor = function(options, self) {
             {id: resolution + '', title: resolution + 'p'}
         );
     });
-    Ox.print('::::::',self.resolutions)
 
     self.$keyboardShortcuts = $('<div>');
     [
@@ -612,7 +613,6 @@ Ox.VideoEditor = function(options, self) {
         src: Ox.UI.getImageURL('symbolSet')
     });
 
-
     that.$element = Ox.SplitPanel({
         elements: [
             {