Author: vmolotkov Date: 2008-02-12 13:53:00 -0500 (Tue, 12 Feb 2008) New Revision: 6041 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: tab switching 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 18:01:32 UTC (rev 6040) +++ trunk/sandbox/ui/inplaceInput/src/main/resources/org/richfaces/renderkit/html/scripts/inplaceinput.js 2008-02-12 18:53:00 UTC (rev 6041) @@ -4,11 +4,12 @@ Richfaces.InplaceInput.prototype = { - initialize: function(clientId, temValueKeepId, valueKeepId, attributes, events, classes, barParams) { + initialize: function(clientId, temValueKeepId, valueKeepId, tabberId, attributes, events, classes, barParams) { this.inplaceInput = $(clientId); this.tempValueKeeper = $(temValueKeepId); this.valueKeeper = $(valueKeepId); this.attributes = attributes; + this.tabber = $(tabberId); this.events = events; this.classes = classes; @@ -30,14 +31,20 @@ 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.tempValueKeeper.observe("keydown", function(e){this.tmpValueKeyDownHandler(e);}.bindAsEventListener(this)); - if (this.bar.ok) { - this.bar.ok.observe("click", function(e){this.okHandler(e);}.bindAsEventListener(this)); + if (this.bar) { + 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)); + } } - if (this.bar.cancel) { - this.bar.cancel.observe("click", function(e){this.cancelHandler(e)}.bindAsEventListener(this)); - } + this.tabber.observe("focus", function(e){this.switchingStatesHandler(e);}.bindAsEventListener(this)); + this.tabber.observe("blur", function(e){this.tmpValueBlurHandler(e);}.bindAsEventListener(this)); + this.bar.bsPanel.observe("mousedown", function(e){this.barMouseDownHandler(e);}.bindAsEventListener(this)); }, @@ -49,18 +56,6 @@ } }, - /*initDimensions : function() { - - this.valueKeeper.style.visibility = "hidden"; - this.valueKeeper.show(); - - this.INPUT_WIDTH = 100; - this.INPUT_HEIGHT = 12; - - this.valueKeeper.hide(); - this.valueKeeper.style.visibility = "visible"; - },*/ - /* * HANDLERS */ @@ -74,7 +69,11 @@ //TO DO: to catch this exception } if (target.tagName.toLowerCase() == "input") { - return; + if (target.id == this.tabber.id) { + this.byTab = true; + } else { + return; + } } if (this.events.oneditactivation) { @@ -90,8 +89,9 @@ }, tmpValueBlurHandler : function() { - if (this.clickOnBar) { + if (this.clickOnBar || this.byTab) { this.clickOnBar = false; + this.byTab = false; return; } @@ -100,12 +100,27 @@ } }, + tmpValueKeyDownHandler : function(e) { + switch (e.keyCode) { + case Event.KEY_ESC : + this.cancel(); + break; + case Event.KEY_RETURN : + //TO DO + break; + case Event.KEY_TAB : + this.inputProcessing(); + this.byTab = true; + break; + } + }, + barMouseDownHandler : function(e) { this.clickOnBar = true; }, okHandler : function(e) { - this.inputProcessing(e); + this.inputProcessing(); Event.stop(e); }, @@ -143,10 +158,10 @@ this.bar.show(inputSize, this.tempValueKeeper.offsetHeight); } - this.tempValueKeeper.focus(); if (this.attributes.selectOnEdit) { Richfaces.InplaceInput.textboxSelect(this.tempValueKeeper, 0, this.tempValueKeeper.value.length); } + this.tempValueKeeper.focus(); }, startViewState : function() { @@ -234,14 +249,14 @@ }, deleteViewArtifacts : function () { - var text = this.inplaceInput.childNodes[3]; + var text = this.inplaceInput.childNodes[4]; if (text) { this.inplaceInput.removeChild(text); } }, getCurrentText : function() { - return this.inplaceInput.childNodes[3]; + return this.inplaceInput.childNodes[4]; }, createNewText : function(text) { Modified: trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx =================================================================== --- trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx 2008-02-12 18:01:32 UTC (rev 6040) +++ trunk/sandbox/ui/inplaceInput/src/main/templates/inplaceinput.jspx 2008-02-12 18:53:00 UTC (rev 6041) @@ -40,6 +40,7 @@ </jsp:scriptlet> <span id="#{clientId}" class="rich-inplace rich-inplace-view"> + <input id="#{clientId}tabber" type="button" value="" style="width: 1px; position: absolute; left: -32767px;" /> <input id='#{clientId}tempValue' class='rich-inplace-field' style='display:none;' @@ -48,7 +49,6 @@ autocomplete="off" 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"> <table class="rich-inplace-shadow-size" cellspacing="0" cellpadding="0" border="0"> @@ -100,6 +100,6 @@ oneditactivated : #{this:getAsEventHandler(context, component, "oneditactivated")}, onviewactivated : #{this:getAsEventHandler(context, component, "onviewactivated")}}; - var inplaceInput = new Richfaces.InplaceInput('#{clientId}', '#{clientId}tempValue', '#{clientId}value', attributes, events, Richfaces.InplaceInput.CLASSES, ['#{clientId}bar', '#{clientId}ok', '#{clientId}cancel', '#{clientId}buttons']); + var inplaceInput = new Richfaces.InplaceInput('#{clientId}', '#{clientId}tempValue', '#{clientId}value', '#{clientId}tabber', attributes, events, Richfaces.InplaceInput.CLASSES, ['#{clientId}bar', '#{clientId}ok', '#{clientId}cancel', '#{clientId}buttons']); </script> </f:root> \ No newline at end of file