6:26 a.m.
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>