update video editor (editables)

demos/arrayeditable/js/arrayeditable.js

@@ -1,14 +1,16 @@
 Ox.load('UI', function() {
 
     var items = [
-            {editable: true, value: 'The <b><i><u>firefox.</u></i></b> jumps over the lazy fox.'},
+            {editable: true, value: 'The firefox jumps over the lazy fox.'},
-            {editable: true, value: 'The lazy fox jumps over the <a href="http://mozilla.org">firefox</a>.'}
+            {editable: true, value: 'The <b><i><u>lazy fox</u></i></b><br>\njumps over the<br><br><a href="http://mozilla.org">firefox</a>.'}
         ],
         $box = Ox.Element()
             .css({width: '256px', height: '512px', padding: '8px', background: 'rgb(224, 224, 224)'})
             .appendTo(Ox.$body),
         $arrayEditableInput = Ox.ArrayEditable({
-                items: items
+                items: items.map(function(item) {
+                    return {editable: item.editable, value: Ox.encodeHTML(item.value)};
+                })
             })
             .css({background: 'rgb(240, 240, 240)', boxShadow: '0 0 1px black'})
             .appendTo($box),

source/Ox.UI/js/Form/Ox.ArrayEditable.js

@@ -32,7 +32,11 @@ Ox.ArrayEditable = function(options, self) {
             doubleclick: doubleclick,
             key_delete: deleteItem,
             key_enter: function() {
-                that.editItem();
+                // make sure the newline does
+                // not end up in the textarea
+                setTimeout(function() {
+                    that.editItem();                    
+                }, 0);
             },
             key_escape: selectNone,
             key_down: self.options.type == 'input' ? selectLast : selectNext,

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

@@ -58,9 +58,7 @@ Ox.Editable = function(options, self) {
     self.css = {};
     self.$value = Ox.Element(self.options.type == 'input' ? '<span>' : '<div>')
         .addClass('OxValue')
-        //.css({background: 'red'})
         .html(formatValue())
-        //[self.options.editing ? 'hide' : 'show']()
         .appendTo(that);
 
     if (self.options.editing) {
@@ -84,6 +82,7 @@ Ox.Editable = function(options, self) {
 
     function cancel() {
         self.options.editing = false;
+        that.removeClass('OxEditing');
         self.options.value = self.originalValue;
         self.$input.value(formatInputValue()).hide();
         self.$test.html(formatTestValue());
@@ -92,29 +91,20 @@ Ox.Editable = function(options, self) {
     }
 
     function change(data) {
-        setTimeout(function() {
+        self.options.value = parseValue(data.value);
-            var height, width;
+        self.$value.html(formatValue());
-            self.options.value = data.value;
+        self.$test.html(formatTestValue());
-            self.$value.html(formatValue());
+        setSizes();
-            self.$test.html(formatTestValue());
-            setSizes();
-        }, 25);
     }
 
     function edit() {
-        Ox.print('E EDIT! editable editing', self.options.editable, self.options.editing)
         var height, width;
         if (self.options.editable && !self.options.editing) {
             self.options.editing = true;
+            that.addClass('OxEditing');
             self.originalValue = self.options.value;
             self.$value.hide();
-            Ox.Log('Form', 'H:::', self.options.height, height)
+            if (!self.$input) {
-            if (!self.$test) {
-                self.$test = self.$value.$element.clone()
-                    .css(Ox.extend({display: 'inline-block'}, self.css))
-                    .html(formatTestValue())
-                    .css({background: 'rgb(192, 192, 192)'})
-                    .appendTo(that.$element);
                 self.$input = Ox.Input({
                         changeOnKeypress: true,
                         element: self.options.type == 'input' ? '<span>' : '<div>',
@@ -124,15 +114,18 @@ Ox.Editable = function(options, self) {
                     })
                     .css(self.css)
                     .bindEvent({
+                        blur: self.options.submitOnBlur ? submit : blur,
                         cancel: cancel,
                         change: change,
                         submit: submit
                     })
                     .appendTo(that.$element);
-                self.$input.bindEvent({
-                    blur: self.options.submitOnBlur ? submit : blur
-                });
                 self.$input.find('input').css(self.css);
+                self.$test = self.$value.$element.clone()
+                    .css(Ox.extend({display: 'inline-block'}, self.css))
+                    .html(formatTestValue())
+                    .css({background: 'rgb(192, 192, 192)'})
+                    .appendTo(that.$element);
             }
             self.minWidth = 8;
             self.maxWidth = that.parent().width();
@@ -162,35 +155,34 @@ Ox.Editable = function(options, self) {
     }
 
     function formatTestValue() {
-        return self.options.type == 'input'
+        var value = Ox.encodeHTML(self.$input.options('value'));
-            ? Ox.encodeHTML(self.options.value) //.replace(/ /g, '&nbsp;')
+        return !value ? '&nbsp;'
-            : Ox.encodeHTML(self.options.value || '&nbsp;')
+            : self.options.type == 'input'
-                .replace(/\n$/, '\n&nbsp;')
+                ? value.replace(/ /g, '&nbsp;')
-                .replace(/\n/g, '<br/>')
+                : value.replace(/\n$/, '\n ')
-            /*
+                    .replace(/  /g, ' &nbsp;')
-            : Ox.parseHTML(self.options.value || '&nbsp;')
+                    .replace(/(^ | $)/, '&nbsp;')
-                .replace(/(\n|<br\/?>)$/, '<br/>&nbsp;');
+                    .replace(/\n/g, '<br/>')
-            */
     }
 
     function formatValue() {
-        Ox.print('HUH?', self.options.value, self.options.format);
         var value = self.options.value;
         if (self.options.value === '' && self.options.placeholder) {
             value = self.options.placeholder;
         } else if (self.options.format) {
             value = self.options.format(self.options.value)
-        } else if (self.options.type == 'input') {
-            Ox.print('HELLO??')
-            value = Ox.encodeHTML(self.options.value);
         }
         return value;
     }
 
     function parseValue() {
-        return self.options.type == 'input'
+        var value = Ox.clean(
-            ? Ox.encodeHTML(self.$input.value())
+            self.$input.value().replace(/\n\n+/g, '\0')
-            : Ox.parseHTML(self.$input.value());
+        ).replace(/\0/g, '\n\n').trim();
+        return (self.options.type == 'input'
+            ? Ox.encodeHTML(value)
+            : Ox.parseHTML(value)
+        );
     }
 
     function setSizes() {
@@ -198,7 +190,6 @@ Ox.Editable = function(options, self) {
         self.$test.show();
         height = self.options.height || Ox.limit(self.$test.height(), self.minHeight, self.maxHeight);
         width = self.options.width || Ox.limit(self.$test.width(), self.minWidth, self.maxWidth);
-        Ox.print('stH', self.$test.height(), self.options.value)
         self.$test.hide();
         self.$input.options({
                 width: width,
@@ -212,14 +203,12 @@ Ox.Editable = function(options, self) {
 
     function submit() {
         self.options.editing = false;
-        //self.options.value = parseValue();
+        that.removeClass('OxEditing');
         self.$input.value(formatInputValue()).hide();
         self.$test.html(formatTestValue());
         self.$value.html(formatValue()).show();
         that.$tooltip && that.$tooltip.options({title: self.options.tooltip});
-        that.triggerEvent('submit', {
+        that.triggerEvent('submit', {value: self.options.value});
-            value: self.options.value
-        });
     }
 
     self.setOption = function(key, value) {

source/Ox.UI/js/Video/Ox.AnnotationFolder.js

@@ -99,7 +99,6 @@ Ox.AnnotationFolder = function(options, self) {
 
     if (self.widget) {
         self.widgetSize = self.options.showWidget * self.options.widgetSize;
-        Ox.print('FOO', self.widgetSize, self.options.showWidget, self.options.widgetSize)
         self.$outer = Ox.Element()
             .css({
                 display: 'table-cell',
@@ -179,7 +178,7 @@ Ox.AnnotationFolder = function(options, self) {
             separator: ';',
             sort: self.sort,
             submitOnBlur: false,
-            width: self.options.type == 'text' ? self.options.width + 8 : self.options.width,
+            width: self.options.width,
             type: self.options.type == 'text' ? 'textarea' : 'input'
         })
         //.css({marginTop: '256px'})

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

@@ -747,14 +747,22 @@ Video
 .OxThemeClassic .OxAnnotationFolder .OxEditableElement.OxPlaceholder .OxValue {
     color: rgb(160, 160, 160);
 }
-.OxThemeClassic .OxAnnotationFolder .OxEditableElement.OxSelected {
+.OxThemeClassic .OxAnnotationFolder .OxArrayEditable .OxEditableElement.OxSelected {
     background: rgb(192, 192, 255);
+}
+.OxThemeClassic .OxAnnotationFolder .OxArrayEditableInput .OxEditableElement.OxSelected {
     box-shadow: 0 0 1px rgb(64, 64, 64);
 }
+.OxThemeClassic .OxAnnotationFolder .OxArrayEditableTextarea .OxEditableElement.OxEditing {
+    background: rgb(160, 224, 160);
+}
+.OxThemeClassic .OxAnnotationFolder .OxArrayEditable .OxInput.OxFocus {
+    box-shadow: none;
+}
 .OxThemeClassic .OxAnnotationFolder .OxEditableElement input {
     background: rgb(160, 224, 160);
     color: rgb(0, 0, 0);
-    box-shadow: 0 0 1px rgb(64, 64, 64);
+    //box-shadow: 0 0 1px rgb(64, 64, 64);
 }
 .OxThemeClassic .OxAnnotationFolder .OxEditableElement textarea {
     background: rgb(160, 224, 160);

source/Ox/js/HTML.js

@@ -67,7 +67,7 @@ Ox.parseHTML = (function() {
             },
             '*': function(tag) {
                 var ret = {};
-                ret['<(/?' + tag + ')>'] = '<{1}>';
+                ret['<(/?' + tag + ') ?/?>'] = '<{1}>';
                 return ret;
             }
         },

source/Ox/js/String.js

@@ -25,12 +25,14 @@ Ox.clean <f> Remove leading, trailing and double whitespace from a string
     "foo bar"
     > Ox.clean(" foo \n bar ")
     "foo\nbar"
+    > Ox.clean(" \nfoo\n\nbar\n ")
+    "foo\nbar"
     > Ox.clean(" foo\tbar ")
     "foo bar"
 @*/
 Ox.clean = function(str) {
     return Ox.map(str.split('\n'), function(str) {
-        return Ox.trim(str.replace(/\s+/g, ' '));
+        return Ox.trim(str.replace(/\s+/g, ' ')) || null;
     }).join('\n');
 };