Ox.Editable: delay expensive creation of extra elements until actual edit

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

@@ -51,53 +51,14 @@ Ox.Editable = function(options, self) {
 
     self.options.value = self.options.value.toString();
 
+    self.css = {};
     self.$value = Ox.Element(self.options.type == 'input' ? '<span>' : '<div>')
         .addClass('OxValue')
-        .css(self.options.type == 'input' ? {
-            //height: '14px',
-            //padding: '1px 4px 1px 4px',
-            //border: '1px solid transparent'
-        } : {
-            //padding: '0 4px 0 4px'
-            //width: self.options.width + 'px'
-        })
         //.css({background: 'red'})
         .html(formatValue())
         //[self.options.editing ? 'hide' : 'show']()
         .appendTo(that);
 
-    self.$test = self.$value.$element.clone()
-        .css({
-            display: 'inline-block',
-            //position: 'absolute',
-            //left: 200,
-            //top: 200
-        })
-        .html(formatTestValue())
-        .hide()
-        .appendTo(that.$element);
-
-    self.$input = Ox.Input(Ox.extend({
-            changeOnKeypress: true,
-            style: 'square',
-            type: self.options.type,
-            value: formatInputValue()
-        }, self.options.type == 'textarea' ? {
-            width: self.options.width
-        } : {}))
-        .css({
-            display: 'none',
-        })
-        .bindEvent({
-            blur: submit,
-            cancel: cancel,
-            change: change
-            //submit: submit
-        })
-        //[self.options.editing ? 'show' : 'hide']()
-        .hide()
-        .appendTo(that.$element);
-
     if (self.options.editing) {
         self.options.editing = false;
         edit();
@@ -137,9 +98,7 @@ Ox.Editable = function(options, self) {
                 width: width /*+ Ox.UI.SCROLLBAR_SIZE*/ + 'px'
             });
         }
-        
         //self.$input.find('input').css({width: width + 2})
-        
         /*
         that.triggerEvent('change', {
             value: event.value
@@ -158,13 +117,34 @@ Ox.Editable = function(options, self) {
             height = self.options.height || self.$value.height();
             width = self.options.width || self.$value.width();
             self.$value.hide();
-
+            Ox.print('H:::', self.options.height, height)
-            Ox.print("H:::", self.options.height, self.maxHeight, height)
+            if (!self.$test) {
-
+                self.$test = self.$value.$element.clone()
+                    .css(Ox.extend({display: 'inline-block'}, self.css))
+                    .html(formatTestValue())
+                    .hide()
+                    .appendTo(that.$element);
+                self.$input = Ox.Input({
+                        changeOnKeypress: true,
+                        style: 'square',
+                        type: self.options.type,
+                        value: formatInputValue(),
+                    })
+                    .css(self.css)
+                    .bindEvent({
+                        blur: submit,
+                        cancel: cancel,
+                        change: change
+                        //submit: submit
+                    })
+                    .appendTo(that.$element);
+                self.$input.find('input').css(self.css);
+            }
             self.$input.options({
-                height: height,
+                    width: width,
-                width: width
+                    height: height
-            }).show();
+                })
+                .show();
             if (self.options.type == 'input') {
                 self.$input.find('input').css({
                     height: height + 'px',
@@ -217,15 +197,13 @@ Ox.Editable = function(options, self) {
         });
     }
 
-    that.css = function(obj) {
+    that.css = function(css) {
-        that.$element.css(obj);
+        self.css = css;
-        self.$value.css(obj);
+        that.$element.css(css);
-        self.$test.css(obj).hide();
+        self.$value.css(css);
-        self.$input.css(obj).hide();
+        self.$test && self.$test.css(css);
-        self.$input.find('input').css(obj);
+        self.$input && self.$input.css(css);
-        //self.$value.css.apply(this, arguments);
+        return that;
-        //self.$input.css.apply(this, arguments);
-        return that
     };
 
     return that;