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>