some work on Ox.Editable

source/Ox.UI/js/Core/Ox.Element.js

@@ -262,6 +262,7 @@ Ox.Element = function(options, self) {
         // self.setOptions(key, value)
         // is called when an option changes
         // (to be implemented by widget)
+        // FIXME: can't set tooltip options this way
     };
 
     that._self = self; // fixme: remove

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

@@ -13,18 +13,36 @@ Ox.Editable <f> Editable element
 Ox.Editable = function(options, self) {
 
     self = self || {};
-    that = Ox.Element('<div>', self)
+    var that = Ox.Element({
+            element: '<div>',
+            tooltip: options.tooltip
+        }, self)
         .defaults({
+            clickLink: function(e) {
+                document.location.href = $(e.target).attr('href');
+            },
+            editable: true,
             editing: false,
             format: null,
+            tooltip: '',
             value: '',
             width: 256,
             type: 'input'
         })
         .options(options || {})
-        .addClass('OxEditable')
+        .addClass('OxEditableElement')
+        .bind({
+            click: function(e) {
+                if ($(e.target).is('a')) {
+                    return false;
+                }
+            }
+        })
         .bindEvent({
-            doubleclick: edit
+            doubleclick: edit,
+            singleclick: function(e) {
+                $(e.target).is('a') && self.options.clickLink(e);
+            }
         });
 
     self.options.value = self.options.value.toString();
@@ -48,13 +66,13 @@ Ox.Editable = function(options, self) {
         .appendTo(that);
 
     self.$test = self.$value.$element.clone()
-        .html(self.options.value.replace(/ /g, '&nbsp;'))
         .css({
-            display: 'table-cell',
+            display: 'inline-block',
             //position: 'absolute',
             //left: 200,
             //top: 200
         })
+        .html(self.options.value.replace(/ /g, '&nbsp;'))
         .hide()
         .appendTo(that.$element);
 
@@ -66,6 +84,7 @@ Ox.Editable = function(options, self) {
         }, self.options.type == 'textarea' ? {
             width: self.options.width
         } : {}))
+        .css({display: 'none'})
         .bindEvent({
             blur: submit,
             cancel: cancel,
@@ -97,8 +116,9 @@ Ox.Editable = function(options, self) {
         );
         self.$test.html(self.options.value.replace(/ /g, '&nbsp;'));
         height = self.$test.height();
-        height = Math.max(self.$test.height(), 14);
+        //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)
         if (self.options.type == 'input') {
             self.$input.options({
@@ -127,16 +147,24 @@ Ox.Editable = function(options, self) {
 
     function edit() {
         var height, width;
-        if (!self.options.editing) {
+        if (self.options.editable && !self.options.editing) {
+            self.minWidth = 8
+            self.maxWidth = that.parent().width();
+            Ox.print('MAX WIDTH', self.maxWidth);
             height = self.$value.height();
             width = self.$value.width();
             self.$value.hide();
+            //self.$test.show();
+            Ox.print('HEIGHT', height)
             self.$input.options({
                 height: height,
                 width: width
             }).show();
             if (self.options.type == 'input') {
-                self.$input.find('input').css({width: width + 'px'});
+                self.$input.find('input').css({
+                    height: height + 'px',
+                    width: width + 'px'
+                });
             } else {
                 self.$input.find('textarea').css({
                     height: height + 'px',
@@ -174,7 +202,8 @@ Ox.Editable = function(options, self) {
     that.css = function(obj) {
         that.$element.css(obj);
         self.$value.css(obj);
-        self.$input.css(obj);
+        self.$test.css(obj).hide();
+        self.$input.css(obj).hide();
         self.$input.find('input').css(obj);
         //self.$value.css.apply(this, arguments);
         //self.$input.css.apply(this, arguments);