From 1ece68be4287c388bf43d5221c78c50336a3d5aa Mon Sep 17 00:00:00 2001 From: rolux Date: Mon, 15 Aug 2011 18:41:54 +0200 Subject: [PATCH] merging changes --- demos/editable/js/editable.js | 22 +++++++----- source/Ox.UI/css/Ox.UI.css | 4 +++ source/Ox.UI/js/Form/Ox.Editable.js | 54 +++++++++++++++++++++-------- source/Ox.UI/js/Window/Ox.Dialog.js | 8 ++--- 4 files changed, 58 insertions(+), 30 deletions(-) diff --git a/demos/editable/js/editable.js b/demos/editable/js/editable.js index 73583ead..3c8a46a5 100644 --- a/demos/editable/js/editable.js +++ b/demos/editable/js/editable.js @@ -35,7 +35,7 @@ Ox.load('UI', {debug: true}, function() { country: ['France'], director: ['Jean-Luc Godard'], language: ['French', 'English'], - runtime: 5400, + runtime: '90 min', title: 'Deux ou trois choses que je sais d\'elle', year: '1967' }; @@ -72,17 +72,17 @@ Ox.load('UI', {debug: true}, function() { .css({float: 'left', margin: '1px 0 0 1px'}) .append( $('
') - .css({float: 'left'}) + .css({float: 'left', fontWeight: 'bold'}) .html((i ? '; ' : '') + Ox.toTitleCase(key) + ': ') ) .appendTo($div); Ox.Editable({ format: function(value) { - return value ? ( + return (value ? ( Ox.isArray(data[key]) ? value.split(', ').map(function(value) { return '' + value + '' }).join(', ') : value - ) : 'unknown'; + ) : 'unknown');// + (i == 3 ? '' : ';'); }, value: Ox.isArray(data[key]) ? data[key].join(', ') : data[key] }) @@ -92,16 +92,20 @@ Ox.load('UI', {debug: true}, function() { .appendTo($div_); }); - $div = $('
') - .css({clear: 'both'}) - .appendTo($box.$element); + $div = $('
').css({clear: 'both', marginTop: '16px', textAlign: 'justify'}).appendTo($box.$element); Ox.Editable({ format: function(value) { - return value ? Ox.parseHTML(value) : 'No description' + return 'Keywords: ' + + value.split(', ').map(function(value) { + return '' + value + '' + }).join(', ') }, type: 'textarea', - value: 'foo bar\nfoo bar' + value: 'Sex, Crime, Car, Spoiler in Keywords, Genre in Keywords, Director Cameo, One Or More Meta Keywords', + width: 512 + }) + .css({ }) .appendTo($div); diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index d99be57d..3ee1e278 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -693,6 +693,10 @@ OxEditable padding: 0 1px 0 0; border: 0; } +.OxEditable textarea.OxInput { + padding: 0 0 0 1px; + border: 0; +} /* -------------------------------------------------------------------------------- diff --git a/source/Ox.UI/js/Form/Ox.Editable.js b/source/Ox.UI/js/Form/Ox.Editable.js index 182a7c7f..034d0c51 100644 --- a/source/Ox.UI/js/Form/Ox.Editable.js +++ b/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' ? '' : '
') .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, ' ')) + .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, ' '); - } else if (Ox.endsWith(self.options.value, '\n')) { - self.options.value += ' '; - } + 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, ' ')); + 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, ' '); + } else { + value = value.replace(/\n/g, '
') + .replace(/$/, '
 '); + } + return value; + } + function submit() { self.options.value = self.$input.value(); self.$value.html( diff --git a/source/Ox.UI/js/Window/Ox.Dialog.js b/source/Ox.UI/js/Window/Ox.Dialog.js index 559c654a..be582a31 100644 --- a/source/Ox.UI/js/Window/Ox.Dialog.js +++ b/source/Ox.UI/js/Window/Ox.Dialog.js @@ -46,6 +46,8 @@ Ox.Dialog = function(options, self) { self.hasButtons = !!self.options.buttons.length; self.barsHeight = 24 + 24 * self.hasButtons; + self.initialMaxHeight = self.options.maxHeight; + self.initialMaxWidth = self.options.maxWidth; self.titleMargin = 8 + (self.options.closeButton ? 20 : 0) + (self.options.maximizeButton ? 20 : 0); @@ -629,15 +631,9 @@ Ox.Dialog = function(options, self) { return that; }; - that.fullscreen = function() { - - }; - that.open = function() { self.initialHeight = self.options.height; self.initialWidth = self.options.width; - self.initialMaxHeight = self.options.maxHeight; - self.initialMaxWidth = self.options.maxWidth; setMinAndMax(); center(); reset();