merging changes

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

@@ -18,6 +18,7 @@ Ox.Editable = function(options, self) {
             editing: false,
             format: null,
             value: '',
+            width: 256,
             type: 'input'
         })
         .options(options || {})
@@ -26,6 +27,8 @@ Ox.Editable = function(options, self) {
             doubleclick: edit
         });
 
+    self.options.value = self.options.value.toString();
+
     self.$value = Ox.Element(self.options.type == 'input' ? '<span>' : '<div>')
         .addClass('OxValue')
         .css(self.options.type == 'input' ? {
@@ -33,7 +36,8 @@ Ox.Editable = function(options, self) {
             //padding: '1px 4px 1px 4px',
             //border: '1px solid transparent'
         } : {
-            padding: '0 4px 0 4px'
+            //padding: '0 4px 0 4px'
+            width: self.options.width + 'px'
         })
         .html(
             self.options.format
@@ -43,12 +47,25 @@ Ox.Editable = function(options, self) {
         //[self.options.editing ? 'hide' : 'show']()
         .appendTo(that);
 
-    self.$input = Ox.Input({
+    self.$test = self.$value.$element.clone()
+        .html(self.options.value.replace(/ /g, '&nbsp;'))
+        .css({
+            display: 'table-cell',
+            //position: 'absolute',
+            //left: 200,
+            //top: 200
+        })
+        .hide()
+        .appendTo(that.$element);
+
+    self.$input = Ox.Input(Ox.extend({
             changeOnKeypress: true,
             style: 'square',
             type: self.options.type,
             value: self.options.value
-        })
+        }, self.options.type == 'textarea' ? {
+            width: self.options.width
+        } : {}))
         .bindEvent({
             blur: submit,
             cancel: cancel,
@@ -72,25 +89,22 @@ Ox.Editable = function(options, self) {
 
     function change(event) {
         var height, width;
-        self.options.value = event.value;
-        if (self.options.type == 'input') {
-            self.options.value = self.options.value.replace(/ /g, '&nbsp;');
-        } else if (Ox.endsWith(self.options.value, '\n')) {
-            self.options.value += '&nbsp;';
-        }
+        self.options.value = formatValue(event.value);
         self.$value.html(
             self.options.format
             ? self.options.format(self.options.value)
             : self.options.value
         );
-        height = self.$value.height();
-        width = self.$value.width();
+        self.$test.html(self.options.value.replace(/ /g, '&nbsp;'));
+        height = self.$test.height();
+        height = Math.max(self.$test.height(), 14);
+        width = Math.max(self.$test.width() + 2, 8);
+        Ox.print('wxh', width, height)
         if (self.options.type == 'input') {
             self.$input.options({
-                height: height,
-                width: width + 2
+                width: width
             });
-            self.$input.find('input').css({width: width + 2 + 'px'});
+            self.$input.find('input').css({width: width + 'px'});
         } else {
             self.$input.options({
                 height: height,
@@ -102,7 +116,7 @@ Ox.Editable = function(options, self) {
             });
         }
         
-        self.$input.find('input').css({width: width + 2})
+        //self.$input.find('input').css({width: width + 2})
         
         /*
         that.triggerEvent('change', {
@@ -137,6 +151,16 @@ Ox.Editable = function(options, self) {
         }
     }
 
+    function formatValue(value) {
+        if (self.options.type == 'input') {
+            value = value.replace(/ /g, '&nbsp;');
+        } else {
+            value = value.replace(/\n/g, '<br/>')
+                .replace(/<br\/>$/, '<br/>&nbsp;');
+        }
+        return value;
+    }
+
     function submit() {
         self.options.value = self.$input.value();
         self.$value.html(