Author: konstantin.mishin Date: 2010-09-21 07:26:44 -0400 (Tue, 21 Sep 2010) New Revision: 19272 Modified: branches/RF-9151/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inputNumberSpinner.ecss branches/RF-9151/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inputNumberSpinner.js branches/RF-9151/ui/input/ui/src/main/templates/inputnumberspinner.template.xml Log: RF-9195 Modified: branches/RF-9151/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inputNumberSpinner.ecss =================================================================== --- branches/RF-9151/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inputNumberSpinner.ecss 2010-09-21 11:20:51 UTC (rev 19271) +++ branches/RF-9151/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inputNumberSpinner.ecss 2010-09-21 11:26:44 UTC (rev 19272) @@ -42,7 +42,7 @@ vertical-align: top; } -.rf-insp-btna { +.rf-insp-btns { background-color: '#{richSkin.headerBackgroundColor}'; background-image: "url(#{resource['org.richfaces.renderkit.html.images.ButtonBackgroundImage']})"; background-position: top left; @@ -55,7 +55,7 @@ } -.rf-insp-dbtn, .rf-insp-ibtn, .rf-insp-dbtn-dis, .rf-insp-ibtn-dis { +.rf-insp-dec, .rf-insp-inc, .rf-insp-dec-dis, .rf-insp-inc-dis { background-position: 50% 40%; background-repeat: no-repeat; display: block; @@ -63,18 +63,18 @@ width: 15px; } -.rf-insp-dbtn { +.rf-insp-dec { background-image: url("#{resource['org.richfaces.renderkit.html.images.SpinnerArrowBottom']}"); } -.rf-insp-ibtn { +.rf-insp-inc { background-image: url("#{resource['org.richfaces.renderkit.html.images.SpinnerArrowTop']}"); } -.rf-insp-dbtn-dis { +.rf-insp-dec-dis { background-image: url("#{resource['org.richfaces.renderkit.html.images.SpinnerDisabledArrowBottom']}"); } -.rf-insp-ibtn-dis { +.rf-insp-inc-dis { background-image: url("#{resource['org.richfaces.renderkit.html.images.SpinnerDisabledArrowTop']}"); } \ No newline at end of file Modified: branches/RF-9151/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inputNumberSpinner.js =================================================================== --- branches/RF-9151/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inputNumberSpinner.js 2010-09-21 11:20:51 UTC (rev 19271) +++ branches/RF-9151/ui/input/ui/src/main/resources/META-INF/resources/org.richfaces/inputNumberSpinner.js 2010-09-21 11:26:44 UTC (rev 19272) @@ -38,12 +38,16 @@ this.element = jQuery(this.attachToDom()); this.input = this.element.children(".rf-insp-inp"); - this.__inputHandler(); + var value = Number(this.input.val()); + if (isNaN(value)) { + value = this.minValue; + } + this.__setValue(value, null, true); if (!this.input.attr("disabled")) { - var buttonsArea = this.element.children(".rf-insp-btna"); - this.decreaseButton = buttonsArea.children(".rf-insp-dbtn"); - this.increaseButton = buttonsArea.children(".rf-insp-ibtn"); + var buttonsArea = this.element.children(".rf-insp-btns"); + this.decreaseButton = buttonsArea.children(".rf-insp-dec"); + this.increaseButton = buttonsArea.children(".rf-insp-inc"); var proxy = jQuery.proxy(this.__inputHandler, this) this.input.change(proxy); @@ -60,7 +64,7 @@ if (value < this.minValue && this.cycled) { value = this.maxValue; } - this.setValue(value); + this.__setValue(value, event); }, increase: function (event) { @@ -68,20 +72,20 @@ if (value > this.maxValue && this.cycled) { value = this.minValue; } - this.setValue(value); + this.__setValue(value, event); }, getValue: function () { return this.value; }, - setValue: function (value) { + setValue: function (value, event) { if (!this.input.attr("disabled")) { this.__setValue(value); } }, - __setValue: function (value) { + __setValue: function (value, event, skipOnchange) { if (!isNaN(value)) { value = Math.round(value / this.step) * this.step; //TODO Add normal support of float values. E.g. '0.3' should be instead of '0.30000000000000004'. if (value > this.maxValue) { @@ -92,57 +96,65 @@ if (value != this.value) { this.input.val(value); this.value = value; + if (this.onchange && !skipOnchange) { + this.onchange.call(this.element[0], event); + } } } }, - __inputHandler: function () { + __inputHandler: function (event) { var value = Number(this.input.val()); if (isNaN(value)) { this.input.val(this.value); } else { - this.__setValue(value); + this.__setValue(value, event); } }, __keydownHandler: function (event) { if (event.keyCode == 40) { //DOWN - this.decrease(); + this.decrease(event); event.preventDefault(); } else if (event.keyCode == 38) { //UP - this.increase(); + this.increase(event); event.preventDefault(); } }, __decreaseHandler: function (event) { var component = this; - component.decrease(); + component.decrease(event); this.intervalId = window.setInterval(function() { - component.decrease(); + component.decrease(event); }, this.delay); - jQuery(document).one("mouseup", true, jQuery.proxy(this.__clearInterval, this)); - this.decreaseButton.css("backgroundPosition", "60% 60%"); + var proxy = jQuery.proxy(this.__clearInterval, this); + this.decreaseButton.bind("mouseup", true, proxy).bind("mouseout", true, proxy) + .css("backgroundPosition", "60% 60%"); event.preventDefault(); }, __increaseHandler: function (event) { var component = this; - component.increase(); + component.increase(event); this.intervalId = window.setInterval(function() { - component.increase(); + component.increase(event); }, this.delay); - jQuery(document).one("mouseup",jQuery.proxy(this.__clearInterval, this)); - this.increaseButton.css("backgroundPosition", "60% 60%"); + var proxy = jQuery.proxy(this.__clearInterval, this); + this.increaseButton.bind("mouseup", proxy).bind("mouseout", proxy) + .css("backgroundPosition", "60% 60%"); event.preventDefault(); }, __clearInterval: function (event) { window.clearInterval(this.intervalId); + console.log('alert'); if (event.data) { // decreaseButton - this.decreaseButton.css("backgroundPosition", ""); + this.decreaseButton.css("backgroundPosition", "").unbind("mouseout", this.__clearInterval) + .unbind("mouseup", this.__clearInterval); } else { - this.increaseButton.css("backgroundPosition", ""); + this.increaseButton.css("backgroundPosition", "").unbind("mouseout", this.__clearInterval) + .unbind("mouseup", this.__clearInterval); } } }); Modified: branches/RF-9151/ui/input/ui/src/main/templates/inputnumberspinner.template.xml =================================================================== --- branches/RF-9151/ui/input/ui/src/main/templates/inputnumberspinner.template.xml 2010-09-21 11:20:51 UTC (rev 19271) +++ branches/RF-9151/ui/input/ui/src/main/templates/inputnumberspinner.template.xml 2010-09-21 11:26:44 UTC (rev 19272) @@ -40,15 +40,21 @@ <span id="#{clientId}" class="rf-insp #{component.attributes['styleClass']}" cdk:passThroughWithExclusions="id class" > <input name="#{clientId}" type="text" class="rf-insp-inp #{component.attributes['inputClass']}" value="#{getInputValue(facesContext, component)}" - cdk:passThrough="accesskey disabled maxlength size:inputSize tabindex" readonly="#{!component.attributes['enableManualInput']}" /> - <span class="rf-insp-btna"> - <span class="rf-insp-ibtn#{component.attributes['disabled'] ? '-dis' : ''}" /> - <span class="rf-insp-dbtn#{component.attributes['disabled'] ? '-dis' : ''}" /> + cdk:passThrough="accesskey disabled maxlength onblur onfocus onclick:oninputclick ondblclick:ondblinputclick onkeydown:oninputkeydown + onkeypress:oninputkeypress onkeyup:oninputkeyup onmousedown:oninputmousedown onmousemove:oninputmousemove onmouseout:oninputmouseout + onmouseover:oninputmouseover onmouseup:oninputmouseup onselect size:inputSize tabindex" + readonly="#{!component.attributes['enableManualInput']}" autocomplete="#{component.attributes['disableBrowserAutoComplete'] ? 'off' : ''}" /> + <span class="rf-insp-btns"> + <span class="rf-insp-inc#{component.attributes['disabled'] ? '-dis' : ''}" cdk:passThrough="onclick:onupclick" /> + <span class="rf-insp-dec#{component.attributes['disabled'] ? '-dis' : ''}" cdk:passThrough="onclick:ondownclick" /> </span> + <!-- TODO Rewrite the next line when the CDK will support normal way to take event handlers from attributes and behaviors. --> + <cdk:object name="onchange" type="String" value="#{convertToString(RenderKitUtils.getAttributeAndBehaviorsValue(facesContext, component, RenderKitUtils.attributes().generic('onchange', 'onchange', 'change').first()))}" /> <script type="text/javascript">new RichFaces.ui.InputNumberSpinner('#{clientId}', { cycled: #{component.attributes['cycled']}, maxValue: #{component.attributes['maxValue']}, minValue: #{component.attributes['minValue']}, + onchange: #{onchange.length() > 0 ? 'function (event) {' + onchange + '}' : 'null' }, step: #{component.attributes['step']} });</script> </span>