Author: vmolotkov Date: 2008-02-12 11:56:49 -0500 (Tue, 12 Feb 2008) New Revision: 6034 Modified: trunk/sandbox/ui/inplaceInput/src/main/config/component/inplaceinput.xml trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/css/inplaceinput.xcss trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/scripts/inplaceinput.js trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx Log: ok and cancel functionality Modified: trunk/sandbox/ui/inplaceInput/src/main/config/component/inplaceinput.xml =================================================================== --- trunk/sandbox/ui/inplaceInput/src/main/config/component/inplaceinput.xml 2008-02-12 16:37:48 UTC (rev 6033) +++ trunk/sandbox/ui/inplaceInput/src/main/config/component/inplaceinput.xml 2008-02-12 16:56:49 UTC (rev 6034) @@ -32,22 +32,28 @@ <name>value</name> <classname>java.lang.String</classname> </property> - <property> - <name>inputSize</name> - <classname>java.lang.Integer</classname> - <defaultvalue>10</defaultvalue> - </property> <property> <name>inputMaxLength</name> <classname>java.lang.Integer</classname> - <defaultvalue>10</defaultvalue> + <defaultvalue>255</defaultvalue> </property> + <property> - <name>inputMinLength</name> - <classname>java.lang.Integer</classname> - <defaultvalue>10</defaultvalue> + <name>inputMaxWidth</name> + <classname>java.lang.String</classname> + <defaultvalue><![CDATA["150px"]]></defaultvalue> </property> <property> + <name>inputMinWidth</name> + <classname>java.lang.String</classname> + <defaultvalue><![CDATA["70px"]]></defaultvalue> + </property> + <property> + <name>inputWidth</name> + <classname>java.lang.String</classname> + </property> + + <property> <name>defaultLabel</name> <classname>java.lang.String</classname> <defaultvalue><![CDATA["Click..."]]></defaultvalue> Modified: trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/css/inplaceinput.xcss =================================================================== --- trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/css/inplaceinput.xcss 2008-02-12 16:37:48 UTC (rev 6033) +++ trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/css/inplaceinput.xcss 2008-02-12 16:56:49 UTC (rev 6034) @@ -28,7 +28,6 @@ .rich-inplace-edit { position:relative; - width:100px; } .rich-inplace-field { @@ -39,7 +38,6 @@ position:absolute;*/ margin:0px; padding:0px 0px 0px 3px; - width:100px; } .rich-inplace-control { Modified: trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/scripts/inplaceinput.js =================================================================== --- trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/scripts/inplaceinput.js 2008-02-12 16:37:48 UTC (rev 6033) +++ trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/scripts/inplaceinput.js 2008-02-12 16:56:49 UTC (rev 6034) @@ -18,11 +18,9 @@ this.currentState = Richfaces.InplaceInput.STATES[0]; this.prevState = Richfaces.InplaceInput.STATES[0]; - this.initDimensions(); if (this.attributes.showControls) { this.bar = new Richfaces.InplaceInputBar(barParams[0], barParams[1], barParams[2], barParams[3], - this.attributes.controlsPosition, - {width: this.INPUT_WIDTH, height: this.INPUT_HEIGHT}); + this.attributes.controlsPosition); } this.initHandlers(); this.initEvents(); @@ -32,11 +30,14 @@ this.inplaceInput.observe(this.attributes.editEvent, function(e){this.switchingStatesHandler(e);}.bindAsEventListener(this)); this.tempValueKeeper.observe("blur", function(e){this.tmpValueBlurHandler(e);}.bindAsEventListener(this)); - this.bar.ok.observe("click", function(e){this.okHandler(e);}.bindAsEventListener(this)); - this.bar.cancel.observe("click", function(e){this.cancelHandler(e)}.bindAsEventListener(this)); + if (this.bar.ok) { + this.bar.ok.observe("click", function(e){this.okHandler(e);}.bindAsEventListener(this)); + } + if (this.bar.cancel) { + this.bar.cancel.observe("click", function(e){this.cancelHandler(e)}.bindAsEventListener(this)); + } - this.bar.ok.observe("mousedown", function(e){this.barMouseDownHandler(e);}.bindAsEventListener(this)); - this.bar.cancel.observe("mousedown", function(e){this.barMouseDownHandler(e);}.bindAsEventListener(this)); + this.bar.bsPanel.observe("mousedown", function(e){this.barMouseDownHandler(e);}.bindAsEventListener(this)); }, initEvents : function() { @@ -47,7 +48,7 @@ } }, - initDimensions : function() { + /*initDimensions : function() { this.valueKeeper.style.visibility = "hidden"; this.valueKeeper.show(); @@ -57,7 +58,7 @@ this.valueKeeper.hide(); this.valueKeeper.style.visibility = "visible"; - }, + },*/ /* * HANDLERS @@ -78,8 +79,10 @@ if (this.events.oneditactivation) { this.inplaceInput.fire("rich:oneditactivation", {oldValue : this.valueKepeer.value, value : this.tempValueKeeper.value}); } + var textSize = this.inplaceInput.offsetWidth; + this.endViewState(); - this.startEditableState(); + this.startEditableState(textSize); if (this.events.oneditactivated) { this.inplaceInput.fire("rich:oneditactivated", {oldValue : this.valueKepeer.value, value : this.tempValueKeeper.value}); } @@ -128,14 +131,17 @@ this.deleteViewArtifacts(); }, - startEditableState : function() { + startEditableState : function(textSize) { this.changeState(Richfaces.InplaceInput.STATES[1]); + var inputSize = this.setInputWidth(textSize); + this.inplaceInput.className = this.classes.COMPONENT.EDITABLE; + this.tempValueKeeper.show(); + if (this.bar) { - this.bar.show(); + this.bar.show(inputSize, this.tempValueKeeper.offsetHeight); } - this.inplaceInput.className = this.classes.COMPONENT.EDITABLE; - this.tempValueKeeper.show(); + this.tempValueKeeper.focus(); if (this.attributes.selectOnEdit) { Richfaces.InplaceInput.textboxSelect(this.tempValueKeeper, 0, this.tempValueKeeper.value.length); @@ -160,6 +166,23 @@ * UTILITIES */ + setInputWidth : function(textSize) { + var width = parseInt(this.attributes.inputWidth); + if (!width) { + var max = parseInt(this.attributes.inputMaxWidth); + var min = parseInt(this.attributes.inputMinWidth); + if (textSize > max) { + width = max; + } else if (textSize < min) { + width = min; + } else { + width = textSize; + } + } + this.tempValueKeeper.style.width = width + "px"; + return width; + }, + changeState : function(newState) { this.prevState = this.currentState; this.currentState = newState; @@ -228,7 +251,7 @@ Richfaces.InplaceInputBar = Class.create(); Richfaces.InplaceInputBar.prototype = { - initialize : function(barId, okId, cancelId, buttonsPanelId, position, intDims) { + initialize : function(barId, okId, cancelId, buttonsPanelId, position) { this.bar = $(barId); this.ok = $(okId); this.cancel = $(cancelId); @@ -236,7 +259,6 @@ this.position = position; this.initDimensions(); - this.positioning(intDims); }, initDimensions : function() { @@ -252,7 +274,8 @@ this.bar.style.visibility = "visible";*/ }, - show : function() { + show : function(inpWidth, inpHeight) { + this.positioning(inpWidth, inpHeight); this.bar.show(); }, @@ -260,7 +283,7 @@ this.bar.hide(); }, - positioning : function(intDims) { + positioning : function(inpWidth, inpHeight) { this.bar.style.position = "absolute"; this.bsPanel.style.position = "relative"; var bs = this.bar.style; @@ -270,7 +293,7 @@ bs.left = "0px"; break; case "bottom" : - bs.top = intDims.height + "px"; + bs.top = inpHeight + "px"; bs.left = "0px"; break; case "left" : @@ -279,10 +302,11 @@ break; case "right" : bs.top = "0px"; - bs.left = intDims.width + "px"; + bs.left = inpWidth + "px"; break; } } + }; Richfaces.InplaceInput.STATES = [0, 1, 2];// 0 - view, 1- editable, 2 - changed Modified: trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx =================================================================== --- trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx 2008-02-12 16:37:48 UTC (rev 6033) +++ trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx 2008-02-12 16:56:49 UTC (rev 6034) @@ -44,12 +44,10 @@ class='rich-inplace-field' style='display:none;' type='text' - size='#{component.attributes["inputSize"]}' maxlength='#{component.attributes["inputMaxLength"]}' - minlength='#{component.attributes["inputMinLength"]}' autocomplete="off" value='#{fieldValue}'/> - <input id='#{clientId}value' type='hidden' value='#{fieldValue}'/> + <input id='#{clientId}value' name='#{clientId}value' type='hidden' value='#{fieldValue}'/> <div id="#{clientId}bar" class="is_btn_set" style="display:none;"> <div class="rich-inplace-shadow"> @@ -91,7 +89,11 @@ apllyFromControlsOnly : #{component.attributes["apllyFromControlsOnly"]}, editEvent : '#{component.attributes["editEvent"]}', selectOnEdit : #{component.attributes["selectOnEdit"]}, - controlsPosition : '#{component.attributes["controlsPosition"]}'}; + controlsPosition : '#{component.attributes["controlsPosition"]}', + inputWidth : '#{component.attributes["inputWidth"]}', + inputMinWidth : '#{component.attributes["inputMinWidth"]}', + inputMaxWidth : '#{component.attributes["inputMaxWidth"]}' + }; var events = {oneditactivation : #{this:getAsEventHandler(context, component, "oneditactivation")}, onviewactivation : #{this:getAsEventHandler(context, component, "onviewactivation")},