Author: vmolotkov Date: 2008-03-10 07:05:01 -0400 (Mon, 10 Mar 2008) New Revision: 6640 Modified: trunk/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/css/inplaceinput.xcss trunk/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/scripts/inplaceinput.js trunk/ui/inplaceInput/src/main/templates/inplaceinput.jspx Log: input positioning is changed Modified: trunk/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/css/inplaceinput.xcss =================================================================== --- trunk/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/css/inplaceinput.xcss 2008-03-10 10:26:56 UTC (rev 6639) +++ trunk/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/css/inplaceinput.xcss 2008-03-10 11:05:01 UTC (rev 6640) @@ -8,13 +8,14 @@ <![CDATA[ .rich-inplace { + position:relative; } .rich-inplace-changed { background-position:left top; background-repeat:no-repeat; - padding-left:3px; - padding-right:3px; + /*padding-left:3px; + padding-right:3px;*/ border-bottom-width: 1px; border-bottom-style: dashed; } @@ -22,13 +23,13 @@ .rich-inplace-view { border-bottom-width: 1px; border-bottom-style: dashed; - padding-left:3px; - padding-right:3px; + /*padding-left:3px; + padding-right:3px;*/ white-space:nowrap; } .rich-inplace-edit { - position:relative; + /*position:relative;*/ } .rich-inplace-field { Modified: trunk/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/scripts/inplaceinput.js =================================================================== --- trunk/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/scripts/inplaceinput.js 2008-03-10 10:26:56 UTC (rev 6639) +++ trunk/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/scripts/inplaceinput.js 2008-03-10 11:05:01 UTC (rev 6640) @@ -4,7 +4,7 @@ Richfaces.InplaceInput.prototype = { - initialize: function(clientId, temValueKeepId, valueKeepId, tabberId, strutId, attributes, events, classes, barParams, textId) { + initialize: function(clientId, temValueKeepId, valueKeepId, tabberId, strutId, attributes, events, classes, barParams) { this.inplaceInput = $(clientId); this.inplaceInput.component = this; @@ -12,13 +12,11 @@ this.valueKeeper = $(valueKeepId); this.attributes = attributes; this.tabber = $(tabberId); - this.strut = $(strutId); + //this.strut = $(strutId); this.events = events; this.classes = classes; - this.textNode = $(textId); - this.currentText = this.getCurrentText(); this.value = this.valueKeeper.value; @@ -113,8 +111,9 @@ } var textSize = this.inplaceInput.offsetWidth; - this.endViewState(); this.startEditableState(textSize); + //this.endViewState(); + if (this.events.oneditactivated) { this.inplaceInput.fire("rich:oneditactivated", {oldValue : this.valueKeeper.value, value : this.tempValueKeeper.value}); } @@ -164,40 +163,32 @@ /** * STATE'S API */ - endViewState : function() { + /*endViewState : function() { this.deleteViewArtifacts(); - }, + },*/ endEditableState : function() { if (this.bar) { this.bar.hide(); } - this.textPositioning(this.coords); this.tabber.show(); this.tempValueKeeper.hide(); }, - endChangedState : function() { + /*endChangedState : function() { this.deleteViewArtifacts(); - }, + },*/ startEditableState : function(textSize) { this.changeState(Richfaces.InplaceInput.STATES[1]); var inputSize = this.setInputWidth(textSize); this.tabber.hide(); - this.coords = this.getCoords(); + this.tempValueKeeper.show(); + //this.setStrutWidth(textSize); this.inplaceInput.className = this.classes.COMPONENT.EDITABLE; - this.setStrutWidth(textSize); - var strCoord = Richfaces.InplaceInput.getElemXY(this.strut); - - this.tempValueKeeper.style.left = 0 + "px"; - this.tempValueKeeper.style.top = (this.coords.top - strCoord.top)+ "px"; - - this.tempValueKeeper.show(); - if (this.bar) { this.bar.show(inputSize, this.tempValueKeeper.offsetHeight); } @@ -208,17 +199,17 @@ this.tempValueKeeper.focus(); }, - setStrutWidth : function(textSize) { + /*setStrutWidth : function(textSize) { this.tempValueKeeper.show(); this.strut.style.width = textSize + "px"; this.strut.show(); - }, + },*/ startViewState : function() { + this.deleteViewArtifacts(); this.changeState(Richfaces.InplaceInput.STATES[0]); this.createNewText(this.currentText); - this.inplaceInput.className = this.classes.COMPONENT.VIEW.NORMAL; this.inplaceInput.observe("mouseover", function(e){this.inplaceMouseOverHandler(e);}.bindAsEventListener(this)); @@ -226,11 +217,12 @@ }, startChangedState : function () { + this.deleteViewArtifacts(); + this.changeState(Richfaces.InplaceInput.STATES[2]); //this.createNewText(this.valueKeeper.value); this.createNewText(this.currentText); - this.inplaceInput.className = this.classes.COMPONENT.CHANGED.NORMAL; //this.strut.hide(); }, @@ -328,33 +320,20 @@ }, deleteViewArtifacts : function () { - var text = this.textNode.firstChild; + var text = this.inplaceInput.childNodes[5]; if (text) { - this.textNode.removeChild(text); + this.inplaceInput.removeChild(text); } }, getCurrentText : function() { - return this.textNode.firstChild; + return this.inplaceInput.childNodes[5]; }, createNewText : function(text) { if (!this.getCurrentText()) { - this.textNode.appendChild(document.createTextNode(text.nodeValue||text)); + this.inplaceInput.appendChild(document.createTextNode(text.nodeValue||text)); } - }, - - textPositioning : function(coord) { - this.textNode.style.left = coord.left + "px"; - this.textNode.style.top = coord.top + "px"; - }, - - getCoords: function() { - var coordsVal = Richfaces.InplaceInput.getElemXY(this.inplaceInput); - var coordsStrut = Richfaces.InplaceInput.getElemXY(this.strut); - - //return {top : (coordsVal.top - coordsStrut.top), left : 0}; - return {top : coordsVal.top, left : coordsVal.left}; } }; @@ -454,15 +433,4 @@ //FIXME oTextbox.setSelectionRange(iStart, iEnd); } -}; - -Richfaces.InplaceInput.getElemXY = function(elem) { - var x = elem.offsetLeft; - var y = elem.offsetTop; - - for (var parent = elem.offsetParent; parent; parent = parent.offsetParent) { - x += parent.offsetLeft; - y += parent.offsetTop; - } - return {left: x, top: y}; }; \ No newline at end of file Modified: trunk/ui/inplaceInput/src/main/templates/inplaceinput.jspx =================================================================== --- trunk/ui/inplaceInput/src/main/templates/inplaceinput.jspx 2008-03-10 10:26:56 UTC (rev 6639) +++ trunk/ui/inplaceInput/src/main/templates/inplaceinput.jspx 2008-03-10 11:05:01 UTC (rev 6640) @@ -60,10 +60,10 @@ <span id="#{clientId}" class='rich-inplace rich-inplace-view #{component.attributes["styleClass"]}' x:passThruWithExclusions="id,styleClass,class,style"> <input id="#{clientId}tabber" type="button" value="" style="width: 1px; position: absolute; left: -32767px;" /> - <img id="#{clientId}strut" src="#{spacer}" class="rich-inplace-input-strut" style="width:100px"/> + <!-- img id="#{clientId}strut" src="#{spacer}" class="rich-inplace-input-strut"/--> <input id='#{clientId}tempValue' class='rich-inplace-field' - style='display:none;position:absolute;' + style='display:none;' type='text' maxlength='#{component.attributes["inputMaxLength"]}' autocomplete="off" @@ -139,7 +139,7 @@ ]]> </jsp:scriptlet> </div> - <span id="#{clientId}text" style="position:absolute;">#{value}</span> + #{value} </span> @@ -151,7 +151,6 @@ var inplaceInput = new Richfaces.InplaceInput('#{clientId}', '#{clientId}tempValue', '#{clientId}value', '#{clientId}tabber', '#{clientId}strut', attributes, events, classes, ['#{clientId}bar', - '#{clientId}ok', '#{clientId}cancel', '#{clientId}buttons','#{clientId}btns_shadow'], - '#{clientId}text'); + '#{clientId}ok', '#{clientId}cancel', '#{clientId}buttons','#{clientId}btns_shadow']); </script> </f:root> \ No newline at end of file