From a58dc765d945196badf78c13aa37458aa811b662 Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Mon, 24 Oct 2011 15:58:51 +0000 Subject: [PATCH] some work on Ox.Editable --- demos/editable/index.html | 2 +- demos/editable/js/editable.js | 15 ------- source/Ox.UI/css/Ox.UI.css | 15 ++++--- source/Ox.UI/js/Core/Ox.Element.js | 1 + source/Ox.UI/js/Form/Ox.Editable.js | 47 +++++++++++++++++---- source/Ox.UI/themes/classic/css/classic.css | 5 +++ source/Ox.UI/themes/modern/css/modern.css | 6 ++- 7 files changed, 58 insertions(+), 33 deletions(-) diff --git a/demos/editable/index.html b/demos/editable/index.html index 2409c45d..cb23ff26 100644 --- a/demos/editable/index.html +++ b/demos/editable/index.html @@ -3,7 +3,7 @@ OxJS Editable Demo - + diff --git a/demos/editable/js/editable.js b/demos/editable/js/editable.js index 3c8a46a5..534b53d8 100644 --- 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); /* diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 6e64b24d..943aa655 100644 --- 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; } diff --git a/source/Ox.UI/js/Core/Ox.Element.js b/source/Ox.UI/js/Core/Ox.Element.js index 05772888..6d4fb56e 100644 --- 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 diff --git a/source/Ox.UI/js/Form/Ox.Editable.js b/source/Ox.UI/js/Form/Ox.Editable.js index 034d0c51..c72ab45f 100644 --- a/source/Ox.UI/js/Form/Ox.Editable.js +++ b/source/Ox.UI/js/Form/Ox.Editable.js @@ -13,18 +13,36 @@ Ox.Editable Editable element Ox.Editable = function(options, self) { self = self || {}; - that = Ox.Element('
', self) + var that = Ox.Element({ + element: '
', + 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, ' ')) .css({ - display: 'table-cell', + display: 'inline-block', //position: 'absolute', //left: 200, //top: 200 }) + .html(self.options.value.replace(/ /g, ' ')) .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, ' ')); 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); diff --git a/source/Ox.UI/themes/classic/css/classic.css b/source/Ox.UI/themes/classic/css/classic.css index 155d6cb1..dd7cd778 100644 --- 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); +} diff --git a/source/Ox.UI/themes/modern/css/modern.css b/source/Ox.UI/themes/modern/css/modern.css index 343cfb74..15a2e9d2 100644 --- 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); +} \ No newline at end of file