Author: abelevich Date: 2010-08-24 13:23:32 -0400 (Tue, 24 Aug 2010) New Revision: 18954 Modified: trunk/ui/input/ui/src/main/java/org/richfaces/component/AbstractInplaceInput.java trunk/ui/input/ui/src/main/java/org/richfaces/renderkit/InplaceInputBaseRenderer.java trunk/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceInput.ecss trunk/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceInput.js trunk/ui/input/ui/src/main/templates/inplaceInput.template.xml trunk/ui/input/ui/src/test/java/org/richfaces/renderkit/InplaceInputRendererTest.java Log: add width attribute, fix IE7 popup, RF-9108 Modified: trunk/ui/input/ui/src/main/java/org/richfaces/component/AbstractInplaceInput.java =================================================================== --- trunk/ui/input/ui/src/main/java/org/richfaces/component/AbstractInplaceInput.java 2010-08-24 17:09:31 UTC (rev 18953) +++ trunk/ui/input/ui/src/main/java/org/richfaces/component/AbstractInplaceInput.java 2010-08-24 17:23:32 UTC (rev 18954) @@ -57,6 +57,9 @@ @Attribute(defaultValue="false") public abstract boolean isShowControls(); + @Attribute(defaultValue="100%") + public abstract String getInputWidth(); + @Attribute public abstract String getTabIndex(); } Modified: trunk/ui/input/ui/src/main/java/org/richfaces/renderkit/InplaceInputBaseRenderer.java =================================================================== --- trunk/ui/input/ui/src/main/java/org/richfaces/renderkit/InplaceInputBaseRenderer.java 2010-08-24 17:09:31 UTC (rev 18953) +++ trunk/ui/input/ui/src/main/java/org/richfaces/renderkit/InplaceInputBaseRenderer.java 2010-08-24 17:23:32 UTC (rev 18954) @@ -46,6 +46,7 @@ @ResourceDependencies({ @ResourceDependency(library = "javax.faces", name = "jsf.js"), @ResourceDependency(name = "jquery.js"), @ResourceDependency(name = "richfaces.js"), @ResourceDependency(name = "richfaces-event.js"), + @ResourceDependency(name = "richfaces-base-component.js"), @ResourceDependency(library="org.richfaces", name = "inplaceInput.js"), @ResourceDependency(library="org.richfaces", name = "inplaceInput.ecss") }) public class InplaceInputBaseRenderer extends RendererBase { Modified: trunk/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceInput.ecss =================================================================== --- trunk/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceInput.ecss 2010-08-24 17:09:31 UTC (rev 18953) +++ trunk/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceInput.ecss 2010-08-24 17:23:32 UTC (rev 18954) @@ -170,9 +170,9 @@ } .rf-ii-none { - clip:rect(0px, 0px, 1px, 1px); + clip: "rect(0px 0px 1px 1px)"; } .rf-ii-none { - clip:rect(0px 0px 1px 1px); + clip: rect(0px, 0px, 1px, 1px); } Modified: trunk/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceInput.js =================================================================== --- trunk/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceInput.js 2010-08-24 17:09:31 UTC (rev 18953) +++ trunk/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inplaceInput.js 2010-08-24 17:23:32 UTC (rev 18954) @@ -1,8 +1,35 @@ -(function ($, richfaces) { +// TODO: remove when these functions will be moved to the RichFaces.Event +$.extend(RichFaces.Event, { + bindScrollEventHandlers: function(element, handler, component) { + var elements = []; + element = RichFaces.getDomElement(element).parentNode; + while (element && element!=window.document.body) + { + if (element.offsetWidth!=element.scrollWidth || element.offsetHeight!=element.scrollHeight) + { + elements.push(element); + RichFaces.Event.bind(element, "scroll"+component.getNamespace(), handler, component); + } + element = element.parentNode; + } + return elements; + }, + unbindScrollEventHandlers: function(elements, component) { + RichFaces.Event.unbind(elements, "scroll"+component.getNamespace()); + } +}); + +(function ($, rf) { - richfaces.ui = richfaces.ui || {}; + rf.ui = rf.ui || {}; - richfaces.ui.InplaceInput = function(id, options) { + rf.ui.InplaceInput = function(id, options) { + /*TODO: use defaultOptions*/ + $super.constructor.call(this, id); + this.attachToDom(id); + + this.namespace = this.namespace || "."+rf.Event.createNamespace(this.name, this.id); + this.currentState = options.state; this.editEvent = options.editEvent; this.noneCss = options.noneCss; @@ -17,11 +44,9 @@ this.element.bind(this.editEvent, $.proxy(this.__editHandler, this)); this.input.bind("focus", $.proxy(this.__editHandler, this)); - - if(!this.showControls) { - this.input.bind("change", $.proxy(this.__saveHandler, this)); - this.input.bind("blur", $.proxy(this.__saveHandler, this)); - } + this.input.bind("change", $.proxy(this.__changeHandler, this)); + this.input.bind("blur", $.proxy(this.__blurHandler, this)); + this.input.bind("keydown", $.proxy(this.__keydownHandler, this)); if(this.showControls) { this.okbtn = $(document.getElementById(options.okbtn)); @@ -30,46 +55,52 @@ this.cancelbtn.bind("mousedown", $.proxy(this.__cancelBtnHandler, this)); } }; - - $.extend(richfaces.ui.InplaceInput, { - READY : "ready", - EDIT : "edit", - CHANGED : "changed" - }); - $.extend(richfaces.ui.InplaceInput.prototype, ( function () { - return { - name : "RichFaces.ui.InplaceInput", + // Extend component class and add protected methods from parent class to our container + rf.BaseComponent.extend( rf.ui.InplaceInput); + + // define super class link + var $super = rf.ui.InplaceInput.$super; + $.extend(rf.ui.InplaceInput.prototype, ( function () { + + var isSaved = false; + + return { + name : "inplaceInput", + /****************** public methods *****************************************/ + getNamespace: function () { + return this.namespace; + }, + edit: function() { - this.editContainer.removeClass(this.noneCss); + isSaved = false; + this.__show(); this.input.focus(); }, save: function() { - - var inputValue = this.input.val(); - if(inputValue.length > 0) { - this.label.text(inputValue); - } + var inputValue = this.input.val(); + if(inputValue.length > 0) { + this.label.text(inputValue); + } - if(inputValue != this.initialValue) { - this.element.addClass(this.changedCss); - } else { - this.element.removeClass(this.changedCss); - } - - if(!this.showControls) { - this.editContainer.addClass(this.noneCss); - } + if(inputValue != this.initialValue) { + this.element.addClass(this.changedCss); + } else { + this.element.removeClass(this.changedCss); + } + isSaved = true; + this.__hide(); }, cancel: function() { var text = this.label.text(); this.input.val(text); - this.editContainer.addClass(this.noneCss); + isSaved = true; + this.__hide(); }, setValue: function (value) { @@ -84,15 +115,12 @@ /****************** private methods *****************************************/ __saveBtnHandler: function(e) { - this.input.blur(); this.save(); - this.editContainer.addClass(this.noneCss); return false; }, __cancelBtnHandler: function(e) { - this.cancel(); - this.input.blur(); + this.cancel(); return false; }, @@ -102,9 +130,52 @@ this.input.bind("focus", $.proxy(this.__editHandler, this)); }, - __saveHandler: function(e) { - this.save(); - } + __changeHandler: function(e) { + if(!isSaved) { + this.save(); + } + }, + + __blurHandler: function(e) { + if(!isSaved) { + this.save(); + } + }, + + __scrollHandler: function(e) { + this.cancel(); + }, + + __keydownHandler: function(e) { + switch(e.keyCode) { + /*Esc*/ + case 27: + this.cancel(); + break; + /*Enter*/ + case 13: + this.save(); + return false; + } + + }, + + __show: function() { + this.scrollElements = rf.Event.bindScrollEventHandlers(this.id, this.__scrollHandler, this); + this.editContainer.removeClass(this.noneCss); + }, + + __hide: function() { + rf.Event.unbindScrollEventHandlers(this.scrollElements, this); + this.scrollElements = null; + this.editContainer.addClass(this.noneCss); + this.input.blur(); + }, + + destroy: function () { + //TODO: unbind handlers + $super.destroy.call(this); + } } })()); Modified: trunk/ui/input/ui/src/main/templates/inplaceInput.template.xml =================================================================== --- trunk/ui/input/ui/src/main/templates/inplaceInput.template.xml 2010-08-24 17:09:31 UTC (rev 18953) +++ trunk/ui/input/ui/src/main/templates/inplaceInput.template.xml 2010-08-24 17:23:32 UTC (rev 18954) @@ -24,7 +24,7 @@ #{inplaceValue} </span> <span id="#{clientId}:edit" class="#{getEditStyleClass(component, inplaceState)}"> - <input id="#{clientId}:input" autocomplete="off" name="#{clientId}:input" type="text" value="#{inplaceValue}" class="rf-ii-f" cdk:passThrough="tabIndex"/> + <input id="#{clientId}:input" autocomplete="off" name="#{clientId}:input" type="text" value="#{inplaceValue}" class="rf-ii-f" cdk:passThrough="tabIndex" style="width: #{component.attributes['inputWidth']};" /> <c:if test="#{component.attributes['showControls']}"> <span class="rf-ii-btn-prepos"> Modified: trunk/ui/input/ui/src/test/java/org/richfaces/renderkit/InplaceInputRendererTest.java =================================================================== --- trunk/ui/input/ui/src/test/java/org/richfaces/renderkit/InplaceInputRendererTest.java 2010-08-24 17:09:31 UTC (rev 18953) +++ trunk/ui/input/ui/src/test/java/org/richfaces/renderkit/InplaceInputRendererTest.java 2010-08-24 17:23:32 UTC (rev 18954) @@ -49,7 +49,6 @@ @Before public void setUp() { environment = new HtmlUnitEnvironment(); - environment.withWebRoot(new File("src/test/resources")); environment.withResource("/WEB-INF/faces-config.xml", "org/richfaces/renderkit/faces-config.xml"); environment.withResource("/test.xhtml", "org/richfaces/renderkit/rendererTest.xhtml"); @@ -137,7 +136,10 @@ @Test public void testEdit() throws Exception { HtmlPage page = environment.getPage("/test.jsf"); - edit(page, "input_default"); + edit(page, "input_default", "Another Test String"); + + blur(page); + List<?> labelNodes = page.getByXPath("//*[@id = 'form:input_default:label']/text()"); assertEquals(1, labelNodes.size()); DomText text = (DomText) labelNodes.get(0); @@ -150,7 +152,22 @@ } - private void edit(HtmlPage page, String inplaceInputId) throws Exception { + private void blur(HtmlPage page) throws Exception { + List<?> panelNodes = page.getByXPath("//*[@id = 'form:panel']"); + assertEquals(1, panelNodes.size()); + HtmlElement panel = (HtmlElement) panelNodes.get(0); + panel.click(); + } + + private void typeNewValue(HtmlPage page, String inplaceInputId, String value) throws Exception { + List<?> inputNodes = page.getByXPath("//*[@id = 'form:" + inplaceInputId + ":input']"); + assertEquals(1, inputNodes.size()); + HtmlElement input = (HtmlElement) inputNodes.get(0); + input.setAttribute(HTML.VALUE_ATTRIBUTE, ""); + input.type(value); + } + + private void edit(HtmlPage page, String inplaceInputId, String value) throws Exception { List<?> nodes = page.getByXPath("//*[@id = 'form:" + inplaceInputId + "']"); assertEquals(1, nodes.size()); HtmlElement span = (HtmlElement) nodes.get(0); @@ -160,29 +177,20 @@ assertEquals(1, editNodes.size()); HtmlElement edit = (HtmlElement) editNodes.get(0); assertEquals("rf-ii-e-s", edit.getAttribute(HTML.CLASS_ATTRIBUTE)); - - List<?> inputNodes = page.getByXPath("//*[@id = 'form:" + inplaceInputId + ":input']"); - assertEquals(1, inputNodes.size()); - HtmlElement input = (HtmlElement) inputNodes.get(0); - input.setAttribute(HTML.VALUE_ATTRIBUTE, ""); - input.type("Another Test String"); - - List<?> panelNodes = page.getByXPath("//*[@id = 'form:panel']"); - assertEquals(1, panelNodes.size()); - HtmlElement panel = (HtmlElement) panelNodes.get(0); - panel.click(); + + typeNewValue(page, inplaceInputId, value); } @Test public void testEditWithControls() throws Exception { HtmlPage page = environment.getPage("/test.jsf"); - edit(page, "input_controls"); + edit(page, "input_controls", "Another Test String"); List<?> cancelNodes = page.getByXPath("//*[@id = 'form:input_controls:cancelbtn']"); assertEquals(1, cancelNodes.size()); HtmlElement cancel = (HtmlElement) cancelNodes.get(0); - + cancel.mouseDown(); List<?> labelNodes = page.getByXPath("//*[@id = 'form:input_controls:label']/text()"); @@ -195,7 +203,7 @@ HtmlElement span = (HtmlElement) nodes.get(0); assertEquals("rf-ii-d-s", span.getAttribute(HTML.CLASS_ATTRIBUTE)); - edit(page, "input_controls"); + edit(page, "input_controls", "Another Test String"); List<?> okNodes = page.getByXPath("//*[@id = 'form:input_controls:okbtn']"); assertEquals(1, okNodes.size()); @@ -212,6 +220,15 @@ assertEquals(1, nodes.size()); span = (HtmlElement) nodes.get(0); assertEquals("rf-ii-d-s rf-ii-c-s", span.getAttribute(HTML.CLASS_ATTRIBUTE)); + + edit(page, "input_controls", "Test String"); + + blur(page); + + labelNodes = page.getByXPath("//*[@id = 'form:input_controls:label']/text()"); + assertEquals(1, labelNodes.size()); + text = (DomText) labelNodes.get(0); + assertEquals("Test String", text.getTextContent()); } @After