4:18 p.m.
Author: konstantin.mishin
Date: 2010-07-27 10:18:46 -0400 (Tue, 27 Jul 2010)
New Revision: 18247
Modified:
root/core/trunk/impl/src/main/java/org/richfaces/renderkit/InputRendererBase.java
root/ui-sandbox/inputs/trunk/inputnumberslider/src/main/resources/META-INF/resources/inputNumberSlider.ecss
root/ui-sandbox/inputs/trunk/inputnumberslider/src/main/resources/META-INF/resources/inputNumberSlider.js
root/ui-sandbox/inputs/trunk/inputnumberslider/src/main/templates/inputnumberslider.template.xml
Log:
RF-8983
Modified:
root/core/trunk/impl/src/main/java/org/richfaces/renderkit/InputRendererBase.java
===================================================================
---
root/core/trunk/impl/src/main/java/org/richfaces/renderkit/InputRendererBase.java 2010-07-27
13:07:48 UTC (rev 18246)
+++
root/core/trunk/impl/src/main/java/org/richfaces/renderkit/InputRendererBase.java 2010-07-27
14:18:46 UTC (rev 18247)
@@ -56,7 +56,7 @@
return SelectUtils.getConvertedUIInputValue(context, (UIInput) component,
(String) val);
}
- public String getInputValue(FacesContext context, UIInput component) {
+ public String getInputValue(FacesContext context, UIComponent component) {
UIInput input = (UIInput) component;
String value = (String) input.getSubmittedValue();
Modified:
root/ui-sandbox/inputs/trunk/inputnumberslider/src/main/resources/META-INF/resources/inputNumberSlider.ecss
===================================================================
---
root/ui-sandbox/inputs/trunk/inputnumberslider/src/main/resources/META-INF/resources/inputNumberSlider.ecss 2010-07-27
13:07:48 UTC (rev 18246)
+++
root/ui-sandbox/inputs/trunk/inputnumberslider/src/main/resources/META-INF/resources/inputNumberSlider.ecss 2010-07-27
14:18:46 UTC (rev 18247)
@@ -19,38 +19,57 @@
* Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
* 02110-1301 USA, or see the FSF site: http://www.fsf.org.
*/
-.sldr_size {
+.rf-ins, .rf-ins-ta {
display: inline-block;
- width: 200px;
}
-.sldr_min {
- display: block;
+.rf-ins {
+ white-space: nowrap;
+}
+
+.rf-ins-ta {
+ width: 200px; /*TODO remove it*/
+}
+
+.rf-ins-mn, .rf-ins-mx, .rf-ins-i, .rf-ins-tt {
font-size: 11px;
- border-left: 1px solid #c0c0c0;
- padding-left: 3px;
font-family: arial;
- font-size: 11px;
color: #000000;
- float: left;
+}
+
+.rf-ins-mn, .rf-ins-mx {
+ width: 25%;
+ overflow: hidden;
+ display: block;
margin-bottom: 3px;
}
-.sldr_max {
- display: block;
- font-size: 11px;
- top: 0px;
- right: -2px;
+.rf-ins-mn {
+ border-left: 1px solid #c0c0c0;
+ padding-left: 3px;
+ float: left;
+}
+
+.rf-ins-mx {
border-right: 1px solid #c0c0c0;
padding-right: 3px;
- font-family: arial;
- font-size: 11px;
- color: #000000;
float: right;
- margin-bottom: 3px;
+ text-align: right;
}
-.sldr_track {
+.rf-ins-i {
+ background: url("#{resource['bg_field.gif']}") top repeat-x #fff;
+ border: 1px inset #C0C0C0;
+ margin: 0px 10px 0px 10px;
+}
+
+.rf-ins-tt {
+ position: relative;
+ top: -17px;
+ display: none;
+}
+
+.rf-ins-t {
background: url("#{resource['bg.gif']}") 1px 1px repeat-x #FFFFFF;
border: 1px solid #C0C0C0;
display: block;
@@ -59,17 +78,10 @@
clear: both;
}
-.sldr_handler {
+.rf-ins-h {
+ width: 7px;
+ height: 8px;
+ border: none;
position: relative;
top: -1px;
- left: 120px;
-}
-
-.sldr_field {
- background: url("#{resource['bg_field.gif']}") top repeat-x #fff;
- font-family: arial;
- font-size: 11px;
- color: #000000;
- border: 1px inset #C0C0C0;
- margin: 0px 10px 0px 10px;
}
\ No newline at end of file
Modified:
root/ui-sandbox/inputs/trunk/inputnumberslider/src/main/resources/META-INF/resources/inputNumberSlider.js
===================================================================
---
root/ui-sandbox/inputs/trunk/inputnumberslider/src/main/resources/META-INF/resources/inputNumberSlider.js 2010-07-27
13:07:48 UTC (rev 18246)
+++
root/ui-sandbox/inputs/trunk/inputnumberslider/src/main/resources/META-INF/resources/inputNumberSlider.js 2010-07-27
14:18:46 UTC (rev 18247)
@@ -25,25 +25,82 @@
richfaces.ui.InputNumberSlider = richfaces.BaseComponent.extendClass({
name: "InputNumberSlider",
+
+ minValue: 0,
+ maxValue: 100,
+ step: 5,
init: function (id) {
+
+ this.range = this.maxValue - this.minValue;
this.id = id;
+ this.element = jQuery(this.attachToDom());
+ this.input = this.element.find(".rf-ins-i");
+ this.track = this.element.find(".rf-ins-t");
+ this.handle = this.element.find(".rf-ins-h");
+ this.tooltip = this.element.find(".rf-ins-tt");
+
+ this.track[0].tabIndex = 0;
+ this.handle.css("left", this.input.val() * (this.track.width() -
this.handle.width()) / this.range);
+
+ var proxy = jQuery.proxy(this.__inputHandler, this)
+ this.input.change(proxy);
+ this.input.submit(proxy);
+ this.track.mousedown(jQuery.proxy(this.__mousedownHandler, this));
+ this.track.keydown(jQuery.proxy(this.__keydownHandler, this));
},
- publicFunction: function () {
- // ...
+ setValue: function (value) {
+ value = Number(value);
+ if (value > this.maxValue) {
+ value = this.maxValue;
+ } else if (value < this.minValue) {
+ value = this.minValue;
+ } else {
+ value = Math.round(value / this.step) * this.step; //TODO Add support of float
values.
+ }
+ if (value != this.input.val()) {
+ this.input.val(value);
+ var left = value * (this.track.width() - this.handle.width()) / this.range;
+ this.handle.css("left", left);
+ this.tooltip.text(value);
+ this.tooltip.css("left", left - this.handle.width());
+ }
},
- __privateFunction: function () {
- // ...
+ __inputHandler: function () {
+ this.setValue(this.input.val());
+ },
+
+ __keydownHandler: function (event) {
+ if (event.keyCode == 37) { //LEFT
+ this.setValue(Number(this.input.val()) - this.step);
+ event.preventDefault();
+ } else if (event.keyCode == 39) { //RIGHT
+ this.setValue(Number(this.input.val()) + this.step);
+ event.preventDefault();
+ }
+ },
+
+ __mousedownHandler: function (event) {
+ this.__mousemoveHandler(event);
+ this.track.focus();
+ var jQueryDocument = jQuery(document);
+ jQueryDocument.mousemove(jQuery.proxy(this.__mousemoveHandler, this));
+ jQueryDocument.one("mouseup", jQuery.proxy(this.__mouseupHandler,
this));
+ this.tooltip.show();
+ event.preventDefault();
+ },
+
+ __mousemoveHandler: function (event) {
+ var value = this.range * (event.pageX - this.track.position().left) /
(this.track.width() - this.handle.width()) + this.minValue;
+ this.setValue(value);
+ event.preventDefault();
+ },
+
+ __mouseupHandler: function () {
+ this.tooltip.hide();
+ jQuery(document).unbind("mousemove", this.__mousemoveHandler);
}
-
- // __overrideMethod: function () {
- // // if you need to use method from parent class use link to parent prototype
- // // like in previous solution with extend method
- // this.$super.__overrideMethod.call(this, ...params...);
- //
- // //...
- // }
});
}(window.RichFaces, jQuery));
\ No newline at end of file
Modified:
root/ui-sandbox/inputs/trunk/inputnumberslider/src/main/templates/inputnumberslider.template.xml
===================================================================
---
root/ui-sandbox/inputs/trunk/inputnumberslider/src/main/templates/inputnumberslider.template.xml 2010-07-27
13:07:48 UTC (rev 18246)
+++
root/ui-sandbox/inputs/trunk/inputnumberslider/src/main/templates/inputnumberslider.template.xml 2010-07-27
14:18:46 UTC (rev 18247)
@@ -40,16 +40,18 @@
</cc:interface>
<cc:implementation>
<span id="#{clientId}" class="rf-ins">
- <span class="sldr_size">
- <span class="sldr_min">0</span>
- <span class="sldr_max">100</span>
- <span class="sldr_track">
+ <span class="rf-ins-ta">
+ <span class="rf-ins-mn">0</span>
+ <span class="rf-ins-mx">100</span>
+ <span class="rf-ins-t">
<img
src="#{facesContext.application.resourceHandler.createResource('handler.gif').requestPath}"
- width="7" height="8" alt="" border="0"
class="sldr_handler" />
+ alt="" class="rf-ins-h" />
+ <span class="rf-ins-tt">#{getInputValue(facesContext,
component)}</span>
</span>
</span>
- <input id="#{clientId}:i" name="#{clientId}"
class="sldr_field" size="3" value="10" type="text"
/>
- <script
type="text/javascript">RichFaces.ui.InputNumberSlider('#{clientId}');</script>
+ <input name="#{clientId}" type="text"
class="rf-ins-i" size="3"
+ value="#{getInputValue(facesContext, component)}" />
+ <script type="text/javascript">new
RichFaces.ui.InputNumberSlider('#{clientId}');</script>
</span>
</cc:implementation>
</cdk:root>