Author: vmolotkov Date: 2008-02-12 09:13:56 -0500 (Tue, 12 Feb 2008) New Revision: 6027 Modified: 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/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 12:57:30 UTC (rev 6026) +++ trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/scripts/inplaceinput.js 2008-02-12 14:13:56 UTC (rev 6027) @@ -16,13 +16,13 @@ this.currentText = this.getCurrentText(); 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.inputProcessing, this.cancel); + {width: this.INPUT_WIDTH, height: this.INPUT_HEIGHT}); } this.initHandlers(); this.initEvents(); @@ -31,6 +31,12 @@ initHandlers : function() { 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)); + + this.bar.ok.observe("mousedown", function(e){this.barMouseDownHandler(e);}.bindAsEventListener(this)); + this.bar.cancel.observe("mousedown", function(e){this.barMouseDownHandler(e);}.bindAsEventListener(this)); }, initEvents : function() { @@ -80,11 +86,30 @@ }, tmpValueBlurHandler : function() { + if (this.clickOnBar) { + this.clickOnBar = false; + return; + } + if (!this.attributes.apllyFromControlsOnly) { this.inputProcessing(); } }, + barMouseDownHandler : function(e) { + this.clickOnBar = true; + }, + + okHandler : function(e) { + this.inputProcessing(e); + Event.stop(e); + }, + + cancelHandler : function(e) { + this.cancel(e); + Event.stop(e); + }, + /** * STATE'S API */ @@ -104,7 +129,8 @@ }, startEditableState : function() { - this.currentState = Richfaces.InplaceInput.STATES[1]; + this.changeState(Richfaces.InplaceInput.STATES[1]); + if (this.bar) { this.bar.show(); } @@ -117,13 +143,15 @@ }, startViewState : function() { - this.currentState = Richfaces.InplaceInput.STATES[0]; + this.changeState(Richfaces.InplaceInput.STATES[0]); + this.createNewText(this.currentText); this.inplaceInput.className = this.classes.COMPONENT.VIEW; }, startChangedState : function () { - this.currentState = Richfaces.InplaceInput.STATES[2]; + this.changeState(Richfaces.InplaceInput.STATES[2]); + this.createNewText(this.valueKeeper.value); this.inplaceInput.className = this.classes.COMPONENT.CHANGED; }, @@ -132,8 +160,23 @@ * UTILITIES */ + changeState : function(newState) { + this.prevState = this.currentState; + this.currentState = newState; + }, + cancel : function() { + this.endEditableState(); + this.tempValueKeeper.value = this.valueKeeper.value; + switch (this.prevState) { + case Richfaces.InplaceInput.STATES[0] : + this.startViewState(); + break; + case Richfaces.InplaceInput.STATES[2] : + this.startChangedState(); + break; + } }, inputProcessing : function() { @@ -160,21 +203,15 @@ } }, - /*applyUserValue : function() { - var newValue = this.tempValueKeeper.value; - if (newValue == "") { - } else if (newValue != this.valueKeeper.value) { - this.currentText = newValue; - this.valueKeeper.value = newValue; - } - },*/ - setDefaultText : function() { this.currentText = this.attributes.defaultLabel; }, deleteViewArtifacts : function () { - this.inplaceInput.removeChild(this.inplaceInput.childNodes[3]); + var text = this.inplaceInput.childNodes[3]; + if (text) { + this.inplaceInput.removeChild(text); + } }, getCurrentText : function() { @@ -182,30 +219,26 @@ }, createNewText : function(text) { - this.inplaceInput.appendChild(document.createTextNode(text)); + if (!this.getCurrentText()) { + this.inplaceInput.appendChild(document.createTextNode(text.nodeValue||text)); + } } }; Richfaces.InplaceInputBar = Class.create(); Richfaces.InplaceInputBar.prototype = { - initialize : function(barId, okId, cancelId, buttonsPanelId, position, intDims, okHandler, cancelHandler) { + initialize : function(barId, okId, cancelId, buttonsPanelId, position, intDims) { this.bar = $(barId); this.ok = $(okId); this.cancel = $(cancelId); this.bsPanel = $(buttonsPanelId); this.position = position; - this.initHandlers(okHandler, cancelHandler); this.initDimensions(); this.positioning(intDims); }, - initHandlers : function(okHandler, cancelHandler) { - //this.ok.observe("click", function(e){okHandler}.bindAsEventListener(this)); - //this.cancel.observe("click", function(e){cancelHandler}.bindAsEventListener(this)); - }, - initDimensions : function() { /*this.bar.style.visibility = "hidden"; Modified: trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx =================================================================== --- trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx 2008-02-12 12:57:30 UTC (rev 6026) +++ trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx 2008-02-12 14:13:56 UTC (rev 6027) @@ -45,6 +45,7 @@ autocomplete="off" value='#{fieldValue}'/> <input id='#{clientId}value' type='hidden' value='#{fieldValue}'/> + <div id="#{clientId}bar" class="is_btn_set" style="display:none;"> <div class="is_shadow"> <table class="is_shadow_size" cellspacing="0" cellpadding="0" border="0"> @@ -64,10 +65,10 @@ </div> <div id="#{clientId}buttons"> <input id="#{clientId}ok" class="is_btn" type="image" onmouseup="this.className='is_btn'" - onmouseout="this.className='is_btn'" onmousedown="this.className='is_btn_press'" + onmouseout="this.className='is_btn'" onmousedown="this.className='is_btn_press'" src="/inplaceInput-sample/images/ico_ok.gif"/> <input id="#{clientId}cancel" class="is_btn" type="image" onmouseup="this.className='is_btn'" - onmouseout="this.className='is_btn'" onmousedown="this.className='is_btn_press'" + onmouseout="this.className='is_btn'" onmousedown="this.className='is_btn_press'" src="/inplaceInput-sample/images/ico_cancel.gif"/> </div> </div>