some work on Ox.Editable

2011-10-24 15:58:51 +00:00 · 2011-10-24 15:58:51 +00:00 · a58dc765d9
commit a58dc765d9
parent 925aa8d627
7 changed files with 58 additions and 33 deletions
--- a/demos/editable/index.html
+++ b/demos/editable/index.html
@ -3,7 +3,7 @@
    <head>
        <title>OxJS Editable Demo</title
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-        <script type="text/javascript" src="../../build/Ox.js"></script>
+        <script type="text/javascript" src="../../dev/Ox.js"></script>
        <script type="text/javascript" src="js/editable.js"></script>
    </head>
    <body>
--- a/demos/editable/js/editable.js
+++ b/demos/editable/js/editable.js
@ -2,21 +2,6 @@ Ox.load('UI', {debug: true}, function() {

    var $box = Ox.Element()
        .css({width: '512px', height: '512px', margin: '8px'})
-        .bind({
-            click: function(e) {
-                if ($(e.target).is('a')) {
-                    return false;
-                }
-            }
-        })
-        .bindEvent({
-            singleclick: function(e) {
-                var $target = $(e.target);
-                if ($target.is('a')) {
-                    Ox.print('href=' + $target.attr('href'));
-                }
-            }
-        })
        .appendTo(Ox.UI.$body);

    /*
--- a/source/Ox.UI/css/Ox.UI.css
+++ b/source/Ox.UI/css/Ox.UI.css
@ -711,21 +711,22 @@ input.OxInput {
 OxEditable
 --------------------------------------------------------------------------------
 */
-// clashes with editable text list cell
-._OxEditable > .OxValue {
+
+.OxEditableElement > .OxValue {
    cursor: pointer;
    padding: 0 0 0 1px;
 }
-._OxEditable div.OxInput {
-    height: 14px;
+.OxEditableElement div.OxInput {
+    //height: 12px;
    padding: 0 1px 0 0;
+    margin-bottom: -3px;
 }
-._OxEditable input.OxInput {
-    height: 14px;
+.OxEditableElement input.OxInput {
+    //height: 12px;
    padding: 0 1px 0 0;
    border: 0;
 }
-._OxEditable textarea.OxInput {
+.OxEditableElement textarea.OxInput {
    padding: 0 0 0 1px;
    border: 0;
 }
--- a/source/Ox.UI/js/Core/Ox.Element.js
+++ b/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
--- a/source/Ox.UI/js/Form/Ox.Editable.js
+++ b/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);
--- a/source/Ox.UI/themes/classic/css/classic.css
+++ b/source/Ox.UI/themes/classic/css/classic.css
@ -723,3 +723,8 @@ Miscellaneous
    -o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }
+
+.OxThemeClassic ::selection {
+    background: rgb(192, 192, 192);
+    //color: rgb(255, 255, 255);
+}
--- a/source/Ox.UI/themes/modern/css/modern.css
+++ b/source/Ox.UI/themes/modern/css/modern.css
@ -736,7 +736,6 @@ Miscellaneous
    background-image: -webkit-linear-gradient(top, rgba(32, 32, 32, 0.75), rgba(32, 32, 32, 1), rgba(32, 32, 32, 1));
 }

-
 .OxThemeModern .OxTooltip {
    border: 1px solid rgba(128, 128, 128, 0.96);
    background: rgba(0, 0, 0, 0.96);
@ -745,3 +744,8 @@ Miscellaneous
    -o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
 }
+
+.OxThemeModern ::selection {
+    background: rgb(192, 192, 192);
+    //color: rgb(255, 255, 255);
+}