Author: nbelaevski Date: 2008-12-05 13:12:58 -0500 (Fri, 05 Dec 2008) New Revision: 11594 Added: trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderArrowImageLeft.java trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderArrowImageRight.java trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderArrowImageTop.java trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderArrowSelectedImageLeft.java trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderArrowSelectedImageRight.java trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderArrowSelectedImageTop.java trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderTrackGradientVertical.java Modified: trunk/ui/inputnumber-slider/src/main/config/component/inputNumberSlider.xml trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/InputNumberSliderRendererBase.java trunk/ui/inputnumber-slider/src/main/resources/org/richfaces/renderkit/html/css/slider.xcss trunk/ui/inputnumber-slider/src/main/resources/org/richfaces/renderkit/html/script/SliderScript.js trunk/ui/inputnumber-slider/src/main/templates/inputNumberSlider.jspx Log: https://jira.jboss.org/jira/browse/RF-5266 Modified: trunk/ui/inputnumber-slider/src/main/config/component/inputNumberSlider.xml =================================================================== --- trunk/ui/inputnumber-slider/src/main/config/component/inputNumberSlider.xml 2008-12-05 17:46:45 UTC (rev 11593) +++ trunk/ui/inputnumber-slider/src/main/config/component/inputNumberSlider.xml 2008-12-05 18:12:58 UTC (rev 11594) @@ -44,41 +44,60 @@ --> <property> - <name> value </name> - <classname>java.lang.String</classname> - <description> Value to set as a result of working with a slider control</description> - <defaultvalue><![CDATA[""]]></defaultvalue> - </property> + <name>orientation</name> + <classname>java.lang.String</classname> + <description>Attribute can have the values &quot;vertical&quot; and &quot;horizontal&quot; to define in which direction the slider should be moveable.</description> + <defaultvalue><![CDATA[""]]></defaultvalue> + </property> + <property> + <name>showArrows</name> + <classname>boolean</classname> + <description>False value for this attribute makes increase/decrease arrows invisible. Default value is &quot;false&quot;.</description> + <defaultvalue>false</defaultvalue> + </property> + <property> + <name>delay</name> + <classname>int</classname> + <description>Delay in pressed increase/decrease arrows in miliseconds. Default value is &quot;200&quot;. </description> + <defaultvalue><![CDATA[200]]></defaultvalue> + </property> + <property> + <name>value</name> + <classname>java.lang.String</classname> + <description>Value to set as a result of working with a slider control</description> + <defaultvalue><![CDATA[""]]></defaultvalue> + </property> + <property> + <name>minValue</name> + <classname>java.lang.String</classname> + <description>Attribute to set the &quot;start&quot; value. Default value is &quot;0&quot;. </description> + <defaultvalue><![CDATA["0"]]></defaultvalue> + </property> + <property> + <name>maxValue</name> + <classname>java.lang.String</classname> + <description>Attribute to set an &quot;end&quot; value. Default value is &quot;100&quot; </description> + <defaultvalue><![CDATA["100"]]></defaultvalue> + </property> + <property> + <name>step</name> + <classname>java.lang.String</classname> + <description>Parameter that determines a step between the nearest values while using a handle. Default value is &quot;1&quot;.</description> + <defaultvalue><![CDATA["1"]]></defaultvalue> + </property> + <property> + <name>width</name> + <classname>java.lang.String</classname> + <description>The width of a slider control. Default value is &quot;200px&quot;, for orientation=&quot;vertical&quot; value is &quot;20px&quot;</description> + <defaultvalue><![CDATA["200px"]]></defaultvalue> + </property> + <property > + <name>height</name> + <classname>java.lang.String</classname> + <description>The height of a slider control. Default value is &quot;20px&quot;, for orientation=&quot;vertical&quot; value is &quot;200px&quot;</description> + <defaultvalue><![CDATA["20px"]]></defaultvalue> + </property> <property> - <name> minValue </name> - <classname>java.lang.String</classname> - <description> Attribute to set the &quot;start&quot; value. Default value is &quot;0&quot;. </description> - <defaultvalue><![CDATA["0"]]></defaultvalue> - </property> - <property> - <name> maxValue </name> - <classname>java.lang.String</classname> - <description>Attribute to set an &quot;end&quot; value. Default value is &quot;100&quot; </description> - <defaultvalue><![CDATA["100"]]></defaultvalue> - </property> - <property> - <name> step </name> - <classname>java.lang.String</classname> - <description>Parameter that determines a step between the nearest values while using a handle. Default value is &quot;1&quot;.</description> - <defaultvalue><![CDATA["1"]]></defaultvalue> - </property> - <property> - <name> width </name> - <classname>java.lang.String</classname> - <description> The width of a slider control. Default value is &quot;200px&quot;</description> - <defaultvalue><![CDATA["200px"]]></defaultvalue> - </property> - <property hidden="true"> - <name> height </name> - <classname>java.lang.String</classname> - <description> The height of a slider control</description> - </property> - <property> <name> enableManualInput </name> <classname>boolean</classname> <description>If set to &quot;false&quot; this attribute makes the text field "read-only", so the value can be @@ -211,6 +230,44 @@ <defaultvalue><![CDATA[""]]></defaultvalue> </property> <property> + <name>increaseStyle</name> + <classname>java.lang.String</classname> + <description>A style for the increase arrow element + </description> + <defaultvalue><![CDATA[""]]></defaultvalue> + </property> + <property> + <name>increaseClass</name> + <classname>java.lang.String</classname> + <description>A name of CSS class for increase arrow element</description> + <defaultvalue><![CDATA[""]]></defaultvalue> + </property> + <property> + <name>increaseSelectedClass</name> + <classname>java.lang.String</classname> + <description>A name of CSS class for a selected control increase arrow element</description> + <defaultvalue><![CDATA[""]]></defaultvalue> + </property> + <property> + <name>decreaseStyle</name> + <classname>java.lang.String</classname> + <description>A style for the decrease arrow element + </description> + <defaultvalue><![CDATA[""]]></defaultvalue> + </property> + <property> + <name>decreaseClass</name> + <classname>java.lang.String</classname> + <description>A name of CSS class for the decrease arrow element</description> + <defaultvalue><![CDATA[""]]></defaultvalue> + </property> + <property> + <name>decreaseSelectedClass</name> + <classname>java.lang.String</classname> + <description>A name of CSS class for a selected control decrease arrow element</description> + <defaultvalue><![CDATA[""]]></defaultvalue> + </property> + <property> <name>converterMessage</name> <classname>java.lang.String</classname> <description> Modified: trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/InputNumberSliderRendererBase.java =================================================================== --- trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/InputNumberSliderRendererBase.java 2008-12-05 17:46:45 UTC (rev 11593) +++ trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/InputNumberSliderRendererBase.java 2008-12-05 18:12:58 UTC (rev 11594) @@ -55,10 +55,20 @@ public void prepareVariables(FacesContext context, UIInputNumberSlider slider) { ComponentVariables variables = ComponentsVariableResolver.getVariables(this, slider); - String inputPosition = (String)slider.getAttributes().get("inputPosition"); - if (!"right".equals(inputPosition) && !"left".equals(inputPosition)) { + String inputPosition = (String) slider.getAttributes().get( + "inputPosition"); + if (!"right".equals(inputPosition) && !"left".equals(inputPosition) + && !"top".equals(inputPosition) + && !"bottom".equals(inputPosition)) { inputPosition = "right"; } + if ("bottom".equals(inputPosition)) { + inputPosition = "left"; + } + if ("top".equals(inputPosition)) { + inputPosition = "right"; + } + variables.setVariable("inputPosition", inputPosition); boolean disabled = attributeToBoolean(slider, "disabled"); @@ -78,6 +88,12 @@ variables.setVariable("inputSize", slider.getAttributes().get("inputSize")); variables.setVariable("style", getStyleValue(slider)); + + variables.setVariable("orientation", slider.getAttributes().get( + "orientation")); + boolean showArrows = attributeToBoolean(slider, "showArrows"); + variables.setVariable("showArrows", new Boolean(showArrows)); + variables.setVariable("delay", slider.getAttributes().get("delay")); } public String getStyleValue(UIInputNumberSlider slider) { Added: trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderArrowImageLeft.java =================================================================== --- trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderArrowImageLeft.java (rev 0) +++ trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderArrowImageLeft.java 2008-12-05 18:12:58 UTC (rev 11594) @@ -0,0 +1,52 @@ +/** +* License Agreement. +* +* JBoss RichFaces - Ajax4jsf Component Library +* +* Copyright (C) 2008 CompuGROUP Holding AG +* +* This library is free software; you can redistribute it and/or +* modify it under the terms of the GNU Lesser General Public +* License version 2.1 as published by the Free Software Foundation. +* +* This library is distributed in the hope that it will be useful, +* but WITHOUT ANY WARRANTY; without even the implied warranty of +* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU +* Lesser General Public License for more details. +* +* You should have received a copy of the GNU Lesser General Public +* License along with this library; if not, write to the Free Software +* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA + +*/ + +package org.richfaces.renderkit.html.images; + +import java.awt.Color; +import java.awt.Graphics2D; +import java.awt.RenderingHints; + +import org.ajax4jsf.resource.ResourceContext; +import org.richfaces.renderkit.html.images.SliderArrowImage; + +/** + * @author mpopiolek + * + */ +public class SliderArrowImageLeft extends SliderArrowImage { + + @Override + protected void paint(ResourceContext context, Graphics2D g2d) { + Integer color = (Integer) restoreData(context); + g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, + RenderingHints.VALUE_ANTIALIAS_ON); + g2d.setColor(new Color(color.intValue())); + g2d.drawLine(4, 0, 4, 0); + g2d.drawLine(3, 1, 4, 1); + g2d.drawLine(2, 2, 4, 2); + g2d.drawLine(1, 3, 4, 3); + g2d.drawLine(2, 4, 4, 4); + g2d.drawLine(3, 5, 4, 5); + g2d.drawLine(4, 6, 4, 6); + } +} Added: trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderArrowImageRight.java =================================================================== --- trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderArrowImageRight.java (rev 0) +++ trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderArrowImageRight.java 2008-12-05 18:12:58 UTC (rev 11594) @@ -0,0 +1,52 @@ +/** +* License Agreement. +* +* JBoss RichFaces - Ajax4jsf Component Library +* +* Copyright (C) 2008 CompuGROUP Holding AG +* +* This library is free software; you can redistribute it and/or +* modify it under the terms of the GNU Lesser General Public +* License version 2.1 as published by the Free Software Foundation. +* +* This library is distributed in the hope that it will be useful, +* but WITHOUT ANY WARRANTY; without even the implied warranty of +* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU +* Lesser General Public License for more details. +* +* You should have received a copy of the GNU Lesser General Public +* License along with this library; if not, write to the Free Software +* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA + +*/ + +package org.richfaces.renderkit.html.images; + +import java.awt.Color; +import java.awt.Graphics2D; +import java.awt.RenderingHints; + +import org.ajax4jsf.resource.ResourceContext; +import org.richfaces.renderkit.html.images.SliderArrowImage; + +/** + * @author mpopiolek + * + */ +public class SliderArrowImageRight extends SliderArrowImage { + + @Override + protected void paint(ResourceContext context, Graphics2D g2d) { + Integer color = (Integer) restoreData(context); + g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, + RenderingHints.VALUE_ANTIALIAS_ON); + g2d.setColor(new Color(color.intValue())); + g2d.drawLine(1, 0, 1, 0); + g2d.drawLine(1, 1, 2, 1); + g2d.drawLine(1, 2, 3, 2); + g2d.drawLine(1, 3, 4, 3); + g2d.drawLine(1, 4, 3, 4); + g2d.drawLine(1, 5, 2, 5); + g2d.drawLine(1, 6, 1, 6); + } +} Added: trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderArrowImageTop.java =================================================================== --- trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderArrowImageTop.java (rev 0) +++ trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderArrowImageTop.java 2008-12-05 18:12:58 UTC (rev 11594) @@ -0,0 +1,48 @@ +/** +* License Agreement. +* +* JBoss RichFaces - Ajax4jsf Component Library +* +* Copyright (C) 2008 CompuGROUP Holding AG +* +* This library is free software; you can redistribute it and/or +* modify it under the terms of the GNU Lesser General Public +* License version 2.1 as published by the Free Software Foundation. +* +* This library is distributed in the hope that it will be useful, +* but WITHOUT ANY WARRANTY; without even the implied warranty of +* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU +* Lesser General Public License for more details. +* +* You should have received a copy of the GNU Lesser General Public +* License along with this library; if not, write to the Free Software +* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA + +*/ +package org.richfaces.renderkit.html.images; + +import java.awt.Color; +import java.awt.Graphics2D; +import java.awt.RenderingHints; + +import org.ajax4jsf.resource.ResourceContext; +import org.richfaces.renderkit.html.images.SliderArrowImage; + +/** + * @author mpopiolek + * + */ +public class SliderArrowImageTop extends SliderArrowImage { + + @Override + protected void paint(ResourceContext context, Graphics2D g2d) { + Integer color = (Integer) restoreData(context); + g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, + RenderingHints.VALUE_ANTIALIAS_ON); + g2d.setColor(new Color(color.intValue())); + g2d.drawLine(3,2,3,2); + g2d.drawLine(2,3,4,3); + g2d.drawLine(1,4,5,4); + g2d.drawLine(0,5,6,5); + } +} Added: trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderArrowSelectedImageLeft.java =================================================================== --- trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderArrowSelectedImageLeft.java (rev 0) +++ trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderArrowSelectedImageLeft.java 2008-12-05 18:12:58 UTC (rev 11594) @@ -0,0 +1,48 @@ +/** +* License Agreement. +* +* JBoss RichFaces - Ajax4jsf Component Library +* +* Copyright (C) 2008 CompuGROUP Holding AG +* +* This library is free software; you can redistribute it and/or +* modify it under the terms of the GNU Lesser General Public +* License version 2.1 as published by the Free Software Foundation. +* +* This library is distributed in the hope that it will be useful, +* but WITHOUT ANY WARRANTY; without even the implied warranty of +* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU +* Lesser General Public License for more details. +* +* You should have received a copy of the GNU Lesser General Public +* License along with this library; if not, write to the Free Software +* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA + +*/ +package org.richfaces.renderkit.html.images; + +import javax.faces.context.FacesContext; + +import org.ajax4jsf.util.HtmlColor; +import org.richfaces.skin.Skin; +import org.richfaces.skin.SkinFactory; + +/** + * @author mpopiolek + * + */ +public class SliderArrowSelectedImageLeft extends SliderArrowImageLeft { + protected Object getDataToStore(FacesContext context, Object data) { + Skin skin = SkinFactory.getInstance().getSkin(context); + + String skinParameter = "tipBorderColor"; + String tmp = (String) skin.getParameter(context, skinParameter); + if (null == tmp || "".equals(tmp)) { + Skin defaultSkin = SkinFactory.getInstance() + .getDefaultSkin(context); + tmp = (String) defaultSkin.getParameter(context, skinParameter); + } + int intValue = HtmlColor.decode(tmp == null ? "#000000" : tmp).getRGB(); + return new Integer(intValue); + } +} Added: trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderArrowSelectedImageRight.java =================================================================== --- trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderArrowSelectedImageRight.java (rev 0) +++ trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderArrowSelectedImageRight.java 2008-12-05 18:12:58 UTC (rev 11594) @@ -0,0 +1,48 @@ +/** +* License Agreement. +* +* JBoss RichFaces - Ajax4jsf Component Library +* +* Copyright (C) 2008 CompuGROUP Holding AG +* +* This library is free software; you can redistribute it and/or +* modify it under the terms of the GNU Lesser General Public +* License version 2.1 as published by the Free Software Foundation. +* +* This library is distributed in the hope that it will be useful, +* but WITHOUT ANY WARRANTY; without even the implied warranty of +* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU +* Lesser General Public License for more details. +* +* You should have received a copy of the GNU Lesser General Public +* License along with this library; if not, write to the Free Software +* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA + +*/ +package org.richfaces.renderkit.html.images; + +import javax.faces.context.FacesContext; + +import org.ajax4jsf.util.HtmlColor; +import org.richfaces.skin.Skin; +import org.richfaces.skin.SkinFactory; + +/** + * @author mpopiolek + * + */ +public class SliderArrowSelectedImageRight extends SliderArrowImageRight { + protected Object getDataToStore(FacesContext context, Object data) { + Skin skin = SkinFactory.getInstance().getSkin(context); + + String skinParameter = "tipBorderColor"; + String tmp = (String) skin.getParameter(context, skinParameter); + if (null == tmp || "".equals(tmp)) { + Skin defaultSkin = SkinFactory.getInstance() + .getDefaultSkin(context); + tmp = (String) defaultSkin.getParameter(context, skinParameter); + } + int intValue = HtmlColor.decode(tmp == null ? "#000000" : tmp).getRGB(); + return new Integer(intValue); + } +} Added: trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderArrowSelectedImageTop.java =================================================================== --- trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderArrowSelectedImageTop.java (rev 0) +++ trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderArrowSelectedImageTop.java 2008-12-05 18:12:58 UTC (rev 11594) @@ -0,0 +1,48 @@ +/** +* License Agreement. +* +* JBoss RichFaces - Ajax4jsf Component Library +* +* Copyright (C) 2008 CompuGROUP Holding AG +* +* This library is free software; you can redistribute it and/or +* modify it under the terms of the GNU Lesser General Public +* License version 2.1 as published by the Free Software Foundation. +* +* This library is distributed in the hope that it will be useful, +* but WITHOUT ANY WARRANTY; without even the implied warranty of +* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU +* Lesser General Public License for more details. +* +* You should have received a copy of the GNU Lesser General Public +* License along with this library; if not, write to the Free Software +* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA + +*/ +package org.richfaces.renderkit.html.images; + +import javax.faces.context.FacesContext; + +import org.ajax4jsf.util.HtmlColor; +import org.richfaces.skin.Skin; +import org.richfaces.skin.SkinFactory; + +/** + * @author mpopiolek + * + */ +public class SliderArrowSelectedImageTop extends SliderArrowImageTop { + protected Object getDataToStore(FacesContext context, Object data) { + Skin skin = SkinFactory.getInstance().getSkin(context); + + String skinParameter = "tipBorderColor"; + String tmp = (String) skin.getParameter(context, skinParameter); + if (null == tmp || "".equals(tmp)) { + Skin defaultSkin = SkinFactory.getInstance() + .getDefaultSkin(context); + tmp = (String) defaultSkin.getParameter(context, skinParameter); + } + int intValue = HtmlColor.decode(tmp == null ? "#000000" : tmp).getRGB(); + return new Integer(intValue); + } +} Added: trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderTrackGradientVertical.java =================================================================== --- trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderTrackGradientVertical.java (rev 0) +++ trunk/ui/inputnumber-slider/src/main/java/org/richfaces/renderkit/html/images/SliderTrackGradientVertical.java 2008-12-05 18:12:58 UTC (rev 11594) @@ -0,0 +1,34 @@ +/** +* License Agreement. +* +* JBoss RichFaces - Ajax4jsf Component Library +* +* Copyright (C) 2008 CompuGROUP Holding AG +* +* This library is free software; you can redistribute it and/or +* modify it under the terms of the GNU Lesser General Public +* License version 2.1 as published by the Free Software Foundation. +* +* This library is distributed in the hope that it will be useful, +* but WITHOUT ANY WARRANTY; without even the implied warranty of +* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU +* Lesser General Public License for more details. +* +* You should have received a copy of the GNU Lesser General Public +* License along with this library; if not, write to the Free Software +* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA + +*/ +package org.richfaces.renderkit.html.images; + +import org.richfaces.renderkit.html.BaseGradient; + +/** + * @author mpopiolek + * + */ +public class SliderTrackGradientVertical extends BaseGradient { + public SliderTrackGradientVertical() { + super(7, 10, 7, "tabBackgroundColor", "controlBackgroundColor", true); + } +} Modified: trunk/ui/inputnumber-slider/src/main/resources/org/richfaces/renderkit/html/css/slider.xcss =================================================================== --- trunk/ui/inputnumber-slider/src/main/resources/org/richfaces/renderkit/html/css/slider.xcss 2008-12-05 17:46:45 UTC (rev 11593) +++ trunk/ui/inputnumber-slider/src/main/resources/org/richfaces/renderkit/html/css/slider.xcss 2008-12-05 18:12:58 UTC (rev 11594) @@ -8,17 +8,25 @@ /*width : 200px;*/ height : 20px; } +.dr-insldr-vertical { + width : 20px; +} .dr-insldr-tip { - position : absolute; - white-space : nowrap; - padding : 0px 2px 0px 2px; - border : 1px solid; + position : absolute; + white-space : nowrap; + padding : 2px 2px 2px 2px; + border : 1px solid; } .dr-insldr-size { width: 100%; } +.dr-insldr-size-height { + height: 100%; + width: 7px; + padding: 0px 3px; +} .dr-insldr-left-num { text-align : left; @@ -30,8 +38,30 @@ border-right : 1px solid; padding : 0px 3px 0px 3px; } +.dr-insldr-top-num { + text-align : left; + border-top: 1px solid; + border-color: #C4C0B9; + color: #000000; + font-family: Arial,Verdana,sans-serif; + font-size: 11px; + line-height: 11px; + vertical-align: top; +} +.dr-insldr-bottom-num{ + text-align : left; + border-bottom : 1px solid; + padding : 0px 3px 0px 3px; + border-color: #C4C0B9; + color: #000000; + font-family: Arial,Verdana,sans-serif; + font-size: 11px; + line-height: 11px; + vertical-align: bottom; +} .dr-insldr-vert-spacer{ - padding-top : 3px; + padding : 3px 0px; + vertical-align: bottom; } .dr-insldr-handler{ background-color : transparent; @@ -42,6 +72,24 @@ text-align : center; z-index : 1; } + +.dr-insldr-handler-vertical { + background-color : transparent; + width : 7px; + height : 8px; + font-size : 1px; + position : absolute; + text-align : center; + z-index : 1; +} + +.dr-insldr-tip { + position : absolute; + white-space : nowrap; + padding : 2px 2px 2px 2px; + border : 1px solid; +} + .dr-insldr-handler-sel{ background-color : transparent; width : 7px; @@ -57,6 +105,14 @@ height : 8px; font-size : 1px; } +.dr-insldr-track-vertical{ + background-position: left top; + background-repeat: repeat-y; + height : 100%; + font-size : 1px; + width: 7px; + background-color:#FFFFFF; +} .dr-insldr-track-decor-1 { height : 100%; width : 100%; @@ -80,6 +136,45 @@ .dr-insldr-field-right { margin-left: 10px; } +.dr-insldr-field-top { + margin-bottom: 7px; +} +.dr-insldr-field-bottom { + margin-top: 7px; +} +.dr-insldr-arrow { + background-repeat:no-repeat; + width: 15px; + height: 15px; +} +.dr-insldr-dec-horizontal { + background-position: 5px 4px; +} +.dr-insldr-inc-horizontal { + background-position: 4px 4px; +} +.dr-insldr-inc-vertical { + background-position: 3px 5px; +} +.dr-insldr-dec-vertical { + background-position: 3px 3px; +} +.dr-insldr-dec-horizontal-sel { + background-position: 5px 4px; +} +.dr-insldr-inc-horizontal-sel { + background-position: 4px 4px; +} +.dr-insldr-inc-vertical-sel { + background-position: 3px 5px; +} +.dr-insldr-dec-vertical-sel { + background-position: 3px 3px; +} +.dr-insldr-td-arrow { + text-align: left; + vertical-align: bottom; +} ]]> </f:verbatim> @@ -91,6 +186,13 @@ <u:style name="font-size" skin="generalSizeFont"/> </u:selector> + <u:selector name=".dr-insldr-tip-step"> + <u:style name="background-color" skin="tipBackgroundColor"/> + <u:style name="border-color" skin="tipBorderColor"/> + <u:style name="font-family" skin="generalFamilyFont"/> + <u:style name="font-size" skin="generalSizeFont"/> + </u:selector> + <u:selector name=".dr-insldr-left-num"> <u:style name="font-family" skin="generalFamilyFont"/> <u:style name="font-size" skin="generalSizeFont"/> @@ -123,12 +225,72 @@ <f:resource f:key="org.richfaces.renderkit.html.images.SliderArrowImage" /> </u:style> </u:selector> + + <u:selector name=".dr-insldr-handler-vertical"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.SliderArrowImageRight" /> + </u:style> + </u:selector> + + <u:selector name=".dr-insldr-track-vertical"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.SliderTrackGradientVertical" /> + </u:style> + </u:selector> + + <u:selector name=".dr-insldr-dec-horizontal"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.SliderArrowImageLeft" /> + </u:style> + </u:selector> + <u:selector name=".dr-insldr-inc-horizontal"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.SliderArrowImageRight" /> + </u:style> + </u:selector> + <u:selector name=".dr-insldr-inc-vertical"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.SliderArrowImageTop" /> + </u:style> + </u:selector> + <u:selector name=".dr-insldr-dec-vertical"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.SliderArrowImage" /> + </u:style> + </u:selector> + + <u:selector name=".dr-insldr-dec-horizontal-sel"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.SliderArrowSelectedImageLeft" /> + </u:style> + </u:selector> + <u:selector name=".dr-insldr-inc-horizontal-sel"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.SliderArrowSelectedImageRight" /> + </u:style> + </u:selector> + <u:selector name=".dr-insldr-inc-vertical-sel"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.SliderArrowSelectedImageTop" /> + </u:style> + </u:selector> + <u:selector name=".dr-insldr-dec-vertical-sel"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.SliderArrowSelectedImage" /> + </u:style> + </u:selector> <u:selector name=".dr-insldr-handler-sel"> <u:style name="background-image"> <f:resource f:key="org.richfaces.renderkit.html.images.SliderArrowSelectedImage" /> </u:style> </u:selector> + + <u:selector name=".dr-insldr-handler-sel-vertical"> + <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.SliderArrowSelectedImageRight" /> + </u:style> + </u:selector> <u:selector name=".dr-insldr-track-decor-2"> <u:style name="border-color" skin="controlBackgroundColor"/> Modified: trunk/ui/inputnumber-slider/src/main/resources/org/richfaces/renderkit/html/script/SliderScript.js =================================================================== --- trunk/ui/inputnumber-slider/src/main/resources/org/richfaces/renderkit/html/script/SliderScript.js 2008-12-05 17:46:45 UTC (rev 11593) +++ trunk/ui/inputnumber-slider/src/main/resources/org/richfaces/renderkit/html/script/SliderScript.js 2008-12-05 18:12:58 UTC (rev 11594) @@ -1,7 +1,7 @@ if(!window.Richfaces) window.Richfaces = {}; Richfaces.Slider = Class.create(); Richfaces.Slider.prototype = { - initialize: function(handle, track, tip, table, handleSelectedClass, options) { + initialize: function(handle, track, tip, table, handleSelectedClass, increaseSelectedClass, decreaseSelectedClass, options) { var slider = this; this.handle = $( handle ); this.tip = $( tip ); @@ -13,13 +13,28 @@ //this.optionInput = $(this.optionsInputId) || document.getElementById(this.optionsInputId); this.input = $( options.inputId ) || document.getElementsByName(options.inputId)[0]; + if(options.showArrows){ + this.arrowInc = $( options.arrowInc ) || document.getElementsByName(options.arrowInc)[0]; + this.arrowDec = $( options.arrowDec ) || document.getElementsByName(options.arrowDec)[0]; + this.tipArrowInc = $( options.tipArrowInc ) || document.getElementsByName(options.tipArrowInc)[0]; + this.tipArrowDec = $( options.tipArrowDec ) || document.getElementsByName(options.tipArrowDec)[0]; + } this.options= options || {}; + this.orientation = this.options.orientation; + this.classes = {}; this.classes.arrow = "dr-insldr-handler rich-inslider-handler"; this.classes.arrowSelected = "dr-insldr-handler-sel rich-inslider-handler-selected"; this.classes.temp = this.handle.className; this.classes.base = " " + this.trim(this.classes.temp.replace("dr-insldr-handler rich-inslider-handler","")); + + if(this.orientation=="vertical"){ + this.classes.arrow = "dr-insldr-handler-vertical rich-inslider-handler-vertical"; + this.classes.arrowSelected = "dr-insldr-handler-sel-vertical rich-inslider-handler-selected-vertical"; + this.classes.base = " " + this.trim(this.classes.temp.replace("dr-insldr-handler-vertical rich-inslider-handler-vertical","")); + } + this.classes.handleSelected = " " + handleSelectedClass; this.table = this.findTableForTrack(this.track); @@ -32,6 +47,10 @@ this.minimum = this.options.minimum || this.range.start; this.maximum = this.options.maximum || this.range.end; this.digCount = 0; + this.delay = this.options.delay; + if("" == this.input.value){ + this.input.value = this.options.minimum; + } this.step = this.options.step; if ( (this.step+"").indexOf(".")!=-1 ){ @@ -41,7 +60,11 @@ this.availableValues = this.calculateAvailableValues(); this.tip.maxlength = (this.maximum + "").length + (this.digCount != 0 ? this.digCount + 1 : 0); - + if(this.options.showArrows){ + this.tipArrowInc.maxlength = this.tip.maxlength; + this.tipArrowDec.maxlength = this.tip.maxlength; + } + this.handleLength = 9; this.active = false; @@ -60,6 +83,8 @@ this.eventWindowResized = this.windowResized.bindAsEventListener(this); Event.observe(window, "resize", this.eventWindowResized); + + this.period = ""; if(!this.options.disabled){ //this.eventMouseUp = this.endDrag.bindAsEventListener(this); @@ -72,6 +97,12 @@ this.eventEditValidate = this.inputValidate.bindAsEventListener(this); this.eventInputChange = this.inputChange.bindAsEventListener(this); this.eventWindowMouseOut= this.windowMouseOut.bindAsEventListener(this); + this.eventIncrease = this.increase.bindAsEventListener(this); + this.eventDecrease = this.decrease.bindAsEventListener(this); + this.eventIncreaseDown = this.increaseDown.bindAsEventListener(this); + this.eventDecreaseDown = this.decreaseDown.bindAsEventListener(this); + this.eventIncreaseUp = this.increaseUp.bindAsEventListener(this); + this.eventDecreaseUp = this.decreaseUp.bindAsEventListener(this); if (this.options.onerr) { this.eventError = new Function("event","clientErrorMessage",this.options.onerr); @@ -92,6 +123,12 @@ this.input.onchange = null; } Event.observe(this.input, "change", this.eventInputChange); + if(this.options.showArrows){ + Event.observe(this.arrowInc, "mousedown", this.eventIncreaseDown); + Event.observe(this.arrowDec, "mousedown", this.eventDecreaseDown); + Event.observe(this.arrowInc, "mouseup", this.eventIncreaseUp); + Event.observe(this.arrowDec, "mouseup", this.eventDecreaseUp); + } } this.initialized = true; @@ -110,6 +147,10 @@ { this.handle = null; this.tip = null; + this.tipArrowInc = null; + this.tipArrowDec = null; + this.arrowInc = null; + this.arrowDec = null; this.track = null; this.mainTable.component = null; this.mainTable = null; @@ -128,6 +169,16 @@ this.handle.style.visibility="visible"; this.prevValue = this.value; this.valueChanged = false; + if(this.options.showArrows){ + if(this.orientation=="vertical"){ + this.tipArrowInc.style.left = (this.arrowInc.offsetWidth) + "px"; + this.tipArrowDec.style.left = (this.arrowDec.offsetWidth) + "px"; + //this.tipArrowDec.style.top = "-" + (this.arrowDec.offsetHeight) + "px"; + } else { + this.tipArrowInc.style.top = "-" + (this.arrowInc.offsetHeight + 3) + "px"; + this.tipArrowDec.style.top = "-" + (this.arrowDec.offsetHeight + 3) + "px"; + } + } }, calculateAvailableValues : function(){ @@ -213,32 +264,67 @@ if ((!this.editInFocus || newValue==sliderValue) && (this.required || "" != this.input.value || this.updating)){ this.input.value = this.value; // this.optionInput.value = this.value; - this.handle.style.left = this.translateToPx(this.value); + if(this.options.orientation == "vertical"){ + this.handle.style.top = this.translateToPx(this.value); + } else { + this.handle.style.left = this.translateToPx(this.value); + } } else { - this.handle.style.left = "-2px"; + if(this.options.orientation == "vertical"){ + this.handle.style.top = "-9px"; + } else { + this.handle.style.left = "0px"; + } } if (!this.tip.firstChild) { this.tip.appendChild(window.document.createTextNode(this.value)); } - this.tip.firstChild.nodeValue= this.value; - this.tip.style.left = this.handle.offsetLeft /*+ this.handle.offsetWidth*/ + "px"; + if(this.options.showArrows){ + if (!this.tipArrowInc.firstChild) { + this.tipArrowInc.appendChild(window.document.createTextNode(this.value)); + } + if (!this.tipArrowDec.firstChild) { + this.tipArrowDec.appendChild(window.document.createTextNode(this.value)); + } + this.tipArrowInc.firstChild.nodeValue= this.value; + this.tipArrowDec.firstChild.nodeValue= this.value; + } + + this.tip.firstChild.nodeValue= this.value; + if(this.options.orientation == "vertical"){ + this.tip.style.top = (this.handle.offsetTop) + "px"; + } else { + this.tip.style.left = this.handle.offsetLeft /*+ this.handle.offsetWidth*/ + "px"; + } }, translateToPx: function(value) { + if(this.options.orientation == "vertical"){ + return Math.round( + ((this.maximumOffset() - this.handleLength)/(this.range.end-this.range.start)) * + (this.range.end - value) - this.maximumOffset()) + "px"; + } return Math.round( ((this.maximumOffset() - this.handleLength)/(this.range.end-this.range.start)) * (value - this.range.start)) + "px"; }, translateToValue: function(offset) { + if(this.options.orientation == "vertical"){ + return (this.range.end -((offset/(this.maximumOffset() - this.handleLength) * + (this.range.end-this.range.start)))); + } return ((offset/(this.maximumOffset() - this.handleLength) * (this.range.end-this.range.start)) + this.range.start); }, maximumOffset: function(){ + if(this.options.orientation == "vertical"){ + return this.removePx(this.track.style.height || this.track.offsetHeight || this.options.height); + } return this.removePx(this.track.style.width || this.track.offsetWidth || this.options.width); }, @@ -268,18 +354,33 @@ Richfaces.createEvent("mousedown", this.mainTable, null, null).fire(); this.active = true; var handle = Event.element(event); - var pointer = Event.pointerX(event); + + var pointer; + if(this.orientation=="vertical"){ + pointer = Event.pointerY(event); + } else { + pointer = Event.pointerX(event); + } var offsets = Position.cumulativeOffset(this.track); this.updating = true; - var value = this.translateToValue( ( pointer - offsets[0] ) -(this.handleLength/2)); + var value; + if(this.orientation=="vertical"){ + value = this.translateToValue( ( pointer - offsets[1] ) -(this.handleLength/2)); + } else { + value = this.translateToValue( ( pointer - offsets[0] ) -(this.handleLength/2)); + } if(this.invokeEvent("slide",event,this.getNearestValue(value),this.input)){ this.setValue(value); } this.updating = false; var offsets = Position.cumulativeOffset(this.handle); - this.offsetX = pointer - offsets[0]; + if(this.orientation=="vertical"){ + this.offsetX = pointer - offsets[1]; + } else { + this.offsetX = pointer - offsets[0]; + } } Event.stop(event); } @@ -296,10 +397,17 @@ }, draw: function(event) { - var pointer = Event.pointerX(event); - var offsets = Position.cumulativeOffset(this.track); - pointer -= this.offsetX + offsets[0]; - this.setValue(this.translateToValue( pointer )); + if(this.orientation=="vertical"){ + var pointer = Event.pointerY(event); + var offsets = Position.cumulativeOffset(this.track); + pointer -= this.offsetX + offsets[1]; + this.setValue(this.translateToValue( pointer )); + } else{ + var pointer = Event.pointerX(event); + var offsets = Position.cumulativeOffset(this.track); + pointer -= this.offsetX + offsets[0]; + this.setValue(this.translateToValue( pointer )); + } }, processMouseUp: function(event) { @@ -344,6 +452,68 @@ return ret; }, + increase : function(event){ + var v = parseFloat(this.value) + parseFloat(this.step); + this.setValue(Number( v < this.maximum ? v : this.maximum)); + this.input.value = this.value; + if (this.eventChanged && this.isValueChanged()){ + this.eventChanged(event); + } + }, + + decrease : function(event){ + var v = parseFloat(this.value) - parseFloat(this.step); + this.setValue(Number(v > this.minimum ? v : this.minimum)); + this.input.value = this.value; + if (this.eventChanged && this.isValueChanged()){ + this.eventChanged(event); + } + }, + + increaseDown : function(event){ + this.arrowButton = $(event.target); + this.arrowButton.className = this.arrowButton.className.replace("Class","SelectedClass").replace("al","al-sel"); + window.document.onmouseup = this.eventIncreaseUp.bindAsEventListener(this); + if(!this.disabled){ + if (this.options.currValue){ + Element.show(this.tipArrowInc); + } + } + this.eventIncrease(event); + this._periodicalExecuter = new PeriodicalExecuter(this.eventIncrease,this.delay/1000); + }, + + decreaseDown : function(event){ + this.arrowButton = $(event.target); + this.arrowButton.className = this.arrowButton.className.replace("Class","SelectedClass").replace("al","al-sel"); + window.document.onmouseup = this.eventDecreaseUp.bindAsEventListener(this); + if(!this.disabled){ + if (this.options.currValue){ + Element.show(this.tipArrowDec); + } + } + this.eventDecrease(event); + this._periodicalExecuter = new PeriodicalExecuter(this.eventDecrease,this.delay/1000); + }, + + increaseUp : function(event){ + this._periodicalExecuter.stop(); + if (this.options.currValue){ + Element.hide(this.tipArrowInc); + } + this.arrowButton.className = this.arrowButton.className.replace("SelectedClass","Class").replace("al-sel","al"); + window.document.onmouseup = this.prevMouseUp; + }, + + decreaseUp : function(event){ + this._periodicalExecuter.stop(); + if (this.options.currValue){ + Element.hide(this.tipArrowDec); + } + this.arrowButton.className = this.arrowButton.className.replace("SelectedClass","Class").replace("al-sel","al"); + window.document.onmouseup = this.prevMouseUp; + }, + inputChange: function(e) { this.editInFocus = false; if (isNaN(Number(this.input.value))){ Modified: trunk/ui/inputnumber-slider/src/main/templates/inputNumberSlider.jspx =================================================================== --- trunk/ui/inputnumber-slider/src/main/templates/inputNumberSlider.jspx 2008-12-05 17:46:45 UTC (rev 11593) +++ trunk/ui/inputnumber-slider/src/main/templates/inputNumberSlider.jspx 2008-12-05 18:12:58 UTC (rev 11594) @@ -5,6 +5,7 @@ xmlns:ui=" http://ajax4jsf.org/cdk/ui" xmlns:u=" http://ajax4jsf.org/cdk/u" xmlns:x=" http://ajax4jsf.org/cdk/x" + xmlns:h="http://jsf.exadel.com/header" class="org.richfaces.renderkit.html.InputNumberSliderRenderer" baseclass="org.richfaces.renderkit.InputNumberSliderRendererBase" component="org.richfaces.component.UIInputNumberSlider" @@ -13,8 +14,8 @@ <h:styles>css/slider.xcss</h:styles> <h:scripts>new org.ajax4jsf.javascript.PrototypeScript(),script/SliderScript.js,/org/richfaces/renderkit/html/scripts/browser_info.js,/org/richfaces/renderkit/html/scripts/events.js</h:scripts> - <f:clientid var="clientId"/> - + <f:clientid var="clientId"/> + <f:call name="prepareVariables" /> <f:resource name="/org/richfaces/renderkit/html/images/spacer.gif" var="spacer" /> @@ -23,15 +24,292 @@ <jsp:scriptlet> <![CDATA[ - String width = (String) component.getAttributes().get("width"); - if (width == null || width.length() == 0) { - width = "200px"; - } else { - width = HtmlUtil.qualifySize(width); - } - variables.setVariable("width", width); - ]]> + String width = (String) component.getAttributes().get("width"); + if (width == null || width.length() == 0) { + if ("vertical".equalsIgnoreCase((String)variables.getVariable("orientation"))) { + width = "20px"; + } else { + width = "200px"; + } + } else { + width = HtmlUtil.qualifySize(width); + } + variables.setVariable("width", width); + String height = (String) component.getAttributes().get("height"); + if (height == null || height.length() == 0) { + if ("vertical".equalsIgnoreCase((String)variables.getVariable("orientation"))) { + height = "200px"; + } else { + height = "20px"; + } + } else { + height = HtmlUtil.qualifySize(height); + } + variables.setVariable("height", height); + ]]> </jsp:scriptlet> + + <jsp:scriptlet> + <![CDATA[ + if ("vertical".equalsIgnoreCase((String)variables.getVariable("orientation"))) { + + ]]> + </jsp:scriptlet> + + <table id="#{clientId}" border="0" cellpadding="0" cellspacing="0" class="dr-insldr-vertical rich-slider #{component.attributes['styleClass']}" + style="height: #{height};#{style}" x:passThruWithExclusions="id,boundClass,tipClass,class,width,height,style,border"> + <tbody> + <tr> + <jsp:scriptlet><![CDATA[ + if ("right".equalsIgnoreCase((String)variables.getVariable("inputPosition"))) { + ]]></jsp:scriptlet> + <td style="text-align: left; vertical-align: bottom"> + <jsp:scriptlet><![CDATA[ + if (((Boolean)variables.getVariable("showInput")).booleanValue()) { + ]]></jsp:scriptlet> + <input id="#{clientId}Input" + name="#{clientId}" + value="#{this:getInputValue(context,component)}" + type="text" + class="dr-insldr-field dr-insldr-field-top rich-inslider-field #{component.attributes['inputClass']}" + style="#{component.attributes['inputStyle']}; #{color}" + readonly="#{inputReadOnly}" + disabled="#{inputDisabled}" + onselect="#{component.attributes['onselect']}" + onfocus="#{component.attributes['onfocus']}" + onblur="#{component.attributes['onblur']}" + accesskey="#{component.attributes['accesskey']}" + size="#{inputSize}" + maxlength="#{component.attributes['maxlength']}" + + onclick='#{component.attributes["oninputclick"]}' + ondblclick='#{component.attributes["oninputdblclick"]}' + onkeydown='#{component.attributes["oninputkeydown"]}' + onkeypress='#{component.attributes["oninputkeypress"]}' + onkeyup='#{component.attributes["oninputkeyup"]}' + onmousedown='#{component.attributes["oninputmousedown"]}' + onmousemove='#{component.attributes["oninputmousemove"]}' + onmouseout='#{component.attributes["oninputmouseout"]}' + onmouseover='#{component.attributes["oninputmouseover"]}' + onmouseup='#{component.attributes["oninputmouseup"]}' + /> + <jsp:scriptlet><![CDATA[ + } else { + ]]></jsp:scriptlet> + <input id="#{clientId}Input" + name="#{clientId}" + value="#{this:getInputValue(context,component)}" + type="hidden" + /> + <jsp:scriptlet><![CDATA[ + } + ]]></jsp:scriptlet> + </td> + <jsp:scriptlet><![CDATA[ + } + ]]></jsp:scriptlet> + </tr> + <jsp:scriptlet><![CDATA[ + if (((Boolean)variables.getVariable("showArrows")).booleanValue()) { + ]]></jsp:scriptlet> + <tr> + <td class="dr-insldr-td-arrow"> + <div style="position : relative"> + <div id="#{clientId}TipArrowInc" class="dr-insldr-tip rich-inslider-tip #{component.attributes['tipClass']}" style="display: none; #{component.attributes['tipStyle']}"> + <jsp:scriptlet><![CDATA[ + writer.write("&#160;"); + ]]></jsp:scriptlet> + </div> + <div id="#{clientId}ArrowInc" + class="dr-insldr-inc-vertical dr-insldr-arrow #{component.attributes['increaseClass']}" + style="#{component.attributes['increaseStyle']}" + /> + </div> + </td> + </tr> + <jsp:scriptlet><![CDATA[ + } + ]]></jsp:scriptlet> + <tr> + <td style="height: 100%;"> + <table border="0" cellpadding="0" cellspacing="0" style="height: 100%;"> + <tbody> + <tr> + <td rowspan="2" id="#{clientId}Track" class="dr-insldr-size-height"> + <div class="dr-insldr-track-vertical rich-inslider-track #{component.attributes['barClass']}" + style="#{component.attributes['barStyle']}"> + <table class="dr-insldr-track-decor-1 rich-inslider-track-border" cellpadding="0" cellspacing="0" > + <tbody> + <tr style="height: 98%"> + <td class="dr-insldr-track-decor-2"> + <img src="#{spacer}" style="display: block;" /> + </td> + </tr> + </tbody> + </table> + </div> + <div style="position : relative"> + <div id="#{clientId}Tip" class="dr-insldr-tip rich-inslider-tip #{component.attributes['tipClass']}" style="display: none;left: 9px; #{component.attributes['tipStyle']}"> + <jsp:scriptlet><![CDATA[ + writer.write("&#160;"); + ]]></jsp:scriptlet> + </div> + <div class="dr-insldr-handler-vertical #{component.attributes['handleClass']}" id="#{clientId}Handle" style="visibility:visible; top: -7px; left:1px;"> + <jsp:scriptlet><![CDATA[ + writer.write("&#160;"); + ]]></jsp:scriptlet> + </div> + </div> + </td> + <jsp:scriptlet><![CDATA[ + if (attributeToBoolean(component, "showBoundaryValues")){ + ]]></jsp:scriptlet> + <td class="dr-insldr-top-num #{component.attributes['boundClass']}"> + #{component.attributes['maxValue']} + </td> + <jsp:scriptlet><![CDATA[ + } else{ + ]]></jsp:scriptlet> + <td></td> + <jsp:scriptlet><![CDATA[ + } + ]]></jsp:scriptlet> + </tr> + <tr> + <jsp:scriptlet><![CDATA[ + if (attributeToBoolean(component, "showBoundaryValues")){ + ]]></jsp:scriptlet> + <td class="dr-insldr-bottom-num #{component.attributes['boundClass']}"> + #{component.attributes['minValue']} + </td> + <jsp:scriptlet><![CDATA[ + } else { + ]]></jsp:scriptlet> + <td></td> + <jsp:scriptlet><![CDATA[ + } + ]]></jsp:scriptlet> + </tr> + + </tbody> + </table> + </td> + </tr> + <jsp:scriptlet><![CDATA[ + if (((Boolean)variables.getVariable("showArrows")).booleanValue()) { + ]]></jsp:scriptlet> + <tr> + <td class="dr-insldr-td-arrow"> + <div style="position : relative"> + <div id="#{clientId}TipArrowDec" class="dr-insldr-tip rich-inslider-tip #{component.attributes['tipClass']}" style="display: none; #{component.attributes['tipStyle']}"> + <jsp:scriptlet><![CDATA[ + writer.write("&#160;"); + ]]></jsp:scriptlet> + </div> + <div id="#{clientId}ArrowDec" + class="dr-insldr-dec-vertical dr-insldr-arrow #{component.attributes['decreaseClass']}" + style="#{component.attributes['decreaseStyle']}" + /> + </div> + </td> + </tr> + <jsp:scriptlet><![CDATA[ + } + ]]></jsp:scriptlet> + <tr> + <jsp:scriptlet><![CDATA[ + if ("left".equalsIgnoreCase((String)variables.getVariable("inputPosition"))) { + ]]></jsp:scriptlet> + <td style="text-align: left; vertical-align: bottom"> + <jsp:scriptlet><![CDATA[ + if (((Boolean)variables.getVariable("showInput")).booleanValue()) { + ]]></jsp:scriptlet> + <input id="#{clientId}Input" + name="#{clientId}" + value="#{this:getInputValue(context,component)}" + type="text" + class="dr-insldr-field dr-insldr-field-bottom rich-inslider-field #{component.attributes['inputClass']}" + style="#{component.attributes['inputStyle']}; #{color}" + readonly="#{inputReadOnly}" + disabled="#{inputDisabled}" + onselect="#{component.attributes['onselect']}" + onfocus="#{component.attributes['onfocus']}" + onblur="#{component.attributes['onblur']}" + accesskey="#{component.attributes['accesskey']}" + size="#{inputSize}" + maxlength="#{component.attributes['maxlength']}" + + onclick='#{component.attributes["oninputclick"]}' + ondblclick='#{component.attributes["oninputdblclick"]}' + onkeydown='#{component.attributes["oninputkeydown"]}' + onkeypress='#{component.attributes["oninputkeypress"]}' + onkeyup='#{component.attributes["oninputkeyup"]}' + onmousedown='#{component.attributes["oninputmousedown"]}' + onmousemove='#{component.attributes["oninputmousemove"]}' + onmouseout='#{component.attributes["oninputmouseout"]}' + onmouseover='#{component.attributes["oninputmouseover"]}' + onmouseup='#{component.attributes["oninputmouseup"]}' + /> + <jsp:scriptlet><![CDATA[ + } else { + ]]></jsp:scriptlet> + <input id="#{clientId}Input" + name="#{clientId}" + value="#{this:getInputValue(context,component)}" + type="hidden" + /> + <jsp:scriptlet><![CDATA[ + } + ]]></jsp:scriptlet> + </td> + <jsp:scriptlet><![CDATA[ + } + ]]></jsp:scriptlet> + </tr> + <tr><td> + <script type="text/javascript"> + new Richfaces.Slider( + "#{clientId}Handle", + "#{clientId}Track", + "#{clientId}Tip", + "#{clientId}", + "#{component.attributes['handleSelectedClass']}", + "#{component.attributes['decreaseSelectedClass']}", + "#{component.attributes['increaseSelectedClass']}", + { + range : $R(#{component.attributes['minValue']},#{component.attributes['maxValue']}), + step : "#{component.attributes['step']}", + sliderValue : "#{this:getInputValue(context,component)}", + disabled : #{component.attributes['disabled']}, + currValue : #{component.attributes['showToolTip']}, + inputId : "#{clientId}Input", + arrowInc : "#{clientId}ArrowInc", + arrowDec : "#{clientId}ArrowDec", + tipArrowInc : "#{clientId}TipArrowInc", + tipArrowDec : "#{clientId}TipArrowDec", + arrowSelected : "#{arrowSelected}", + onerr : "#{component.attributes['onerror']}", + clientErrorMsg : "#{component.attributes['clientErrorMessage']}", + <f:call name="writeEventHandlerFunction"><f:parameter value="onslide" /></f:call>, + onchange : "#{component.attributes['onchange']}", + required : #{component.attributes['required']}, + height : "#{height}", + width : "#{width}", + orientation : "vertical", + showArrows : #{component.attributes['showArrows']}, + delay : "#{component.attributes['delay']}" + }) + </script> + </td></tr> + </tbody> + </table> + + <jsp:scriptlet> + <![CDATA[ + } else { + ]]> + </jsp:scriptlet> + <table id="#{clientId}" border="0" cellpadding="0" cellspacing="0" class="dr-insldr rich-slider #{component.attributes['styleClass']}" style="width: #{width};#{style}" x:passThruWithExclusions="id,boundClass,tipClass,class,width,height,style,border"> <tbody> @@ -56,17 +334,17 @@ onblur="#{component.attributes['onblur']}" accesskey="#{component.attributes['accesskey']}" size="#{inputSize}" - maxlength="#{component.attributes['maxlength']}" - - onclick='#{component.attributes["oninputclick"]}' - ondblclick='#{component.attributes["oninputdblclick"]}' - onkeydown='#{component.attributes["oninputkeydown"]}' - onkeypress='#{component.attributes["oninputkeypress"]}' - onkeyup='#{component.attributes["oninputkeyup"]}' - onmousedown='#{component.attributes["oninputmousedown"]}' - onmousemove='#{component.attributes["oninputmousemove"]}' - onmouseout='#{component.attributes["oninputmouseout"]}' - onmouseover='#{component.attributes["oninputmouseover"]}' + maxlength="#{component.attributes['maxlength']}" + + onclick='#{component.attributes["oninputclick"]}' + ondblclick='#{component.attributes["oninputdblclick"]}' + onkeydown='#{component.attributes["oninputkeydown"]}' + onkeypress='#{component.attributes["oninputkeypress"]}' + onkeyup='#{component.attributes["oninputkeyup"]}' + onmousedown='#{component.attributes["oninputmousedown"]}' + onmousemove='#{component.attributes["oninputmousemove"]}' + onmouseout='#{component.attributes["oninputmouseout"]}' + onmouseover='#{component.attributes["oninputmouseover"]}' onmouseup='#{component.attributes["oninputmouseup"]}' /> <jsp:scriptlet><![CDATA[ @@ -85,6 +363,26 @@ } ]]></jsp:scriptlet> + <jsp:scriptlet><![CDATA[ + if (((Boolean)variables.getVariable("showArrows")).booleanValue()) { + ]]></jsp:scriptlet> + <td rowspan="2" class="dr-insldr-td-arrow"> + <div style="position : relative"> + <div id="#{clientId}TipArrowDec" class="dr-insldr-tip rich-inslider-tip #{component.attributes['tipClass']}" style="display: none; #{component.attributes['tipStyle']}"> + <jsp:scriptlet><![CDATA[ + writer.write("&#160;"); + ]]></jsp:scriptlet> + </div> + <div id="#{clientId}ArrowDec" + class="dr-insldr-dec-horizontal dr-insldr-arrow #{component.attributes['decreaseClass']}" + style="#{component.attributes['decreaseStyle']}" + /> + </div> + </td> + <jsp:scriptlet><![CDATA[ + } + ]]></jsp:scriptlet> + <td class="dr-insldr-left-num rich-inslider-left-num #{component.attributes['boundClass']}"> <jsp:scriptlet><![CDATA[ if (attributeToBoolean(component, "showBoundaryValues")){ @@ -103,6 +401,26 @@ } ]]></jsp:scriptlet> </td> + + <jsp:scriptlet><![CDATA[ + if (((Boolean)variables.getVariable("showArrows")).booleanValue()) { + ]]></jsp:scriptlet> + <td rowspan="2" class="dr-insldr-td-arrow"> + <div style="position : relative"> + <div id="#{clientId}TipArrowInc" class="dr-insldr-tip rich-inslider-tip #{component.attributes['tipClass']}" style="display: none; #{component.attributes['tipStyle']}"> + <jsp:scriptlet><![CDATA[ + writer.write("&#160;"); + ]]></jsp:scriptlet> + </div> + <div id="#{clientId}ArrowInc" + class="dr-insldr-inc-horizontal dr-insldr-arrow #{component.attributes['increaseClass']}" + style="#{component.attributes['increaseStyle']}" + /> + </div> + </td> + <jsp:scriptlet><![CDATA[ + } + ]]></jsp:scriptlet> <jsp:scriptlet><![CDATA[ if ("right".equalsIgnoreCase((String)variables.getVariable("inputPosition"))) { @@ -124,17 +442,17 @@ onblur="#{component.attributes['onblur']}" accesskey="#{component.attributes['accesskey']}" size="#{inputSize}" - maxlength="#{component.attributes['maxlength']}" - - onclick='#{component.attributes["oninputclick"]}' - ondblclick='#{component.attributes["oninputdblclick"]}' - onkeydown='#{component.attributes["oninputkeydown"]}' - onkeypress='#{component.attributes["oninputkeypress"]}' - onkeyup='#{component.attributes["oninputkeyup"]}' - onmousedown='#{component.attributes["oninputmousedown"]}' - onmousemove='#{component.attributes["oninputmousemove"]}' - onmouseout='#{component.attributes["oninputmouseout"]}' - onmouseover='#{component.attributes["oninputmouseover"]}' + maxlength="#{component.attributes['maxlength']}" + + onclick='#{component.attributes["oninputclick"]}' + ondblclick='#{component.attributes["oninputdblclick"]}' + onkeydown='#{component.attributes["oninputkeydown"]}' + onkeypress='#{component.attributes["oninputkeypress"]}' + onkeyup='#{component.attributes["oninputkeyup"]}' + onmousedown='#{component.attributes["oninputmousedown"]}' + onmousemove='#{component.attributes["oninputmousemove"]}' + onmouseout='#{component.attributes["oninputmouseout"]}' + onmouseover='#{component.attributes["oninputmouseover"]}' onmouseup='#{component.attributes["oninputmouseup"]}' /> <jsp:scriptlet><![CDATA[ @@ -189,6 +507,8 @@ "#{clientId}Tip", "#{clientId}", "#{component.attributes['handleSelectedClass']}", + "#{component.attributes['increaseSelectedClass']}", + "#{component.attributes['decreaseSelectedClass']}", { range : $R(#{component.attributes['minValue']},#{component.attributes['maxValue']}), step : "#{component.attributes['step']}", @@ -196,13 +516,21 @@ disabled : #{component.attributes['disabled']}, currValue : #{component.attributes['showToolTip']}, inputId : "#{clientId}Input", - arrowSelected : "#{arrowSelected}", + arrowInc : "#{clientId}ArrowInc", + arrowDec : "#{clientId}ArrowDec", + tipArrowInc : "#{clientId}TipArrowInc", + tipArrowDec : "#{clientId}TipArrowDec", + arrowSelected : "#{arrowSelected}", onerr : "#{component.attributes['onerror']}", clientErrorMsg : "#{component.attributes['clientErrorMessage']}", <f:call name="writeEventHandlerFunction"><f:parameter value="onslide" /></f:call>, onchange : "#{component.attributes['onchange']}", required : #{component.attributes['required']}, - width : "#{width}" + width : "#{width}", + height : "#{height}", + orientation : "horizontal", + showArrows : #{component.attributes['showArrows']}, + delay : "#{component.attributes['delay']}" }) </script> </td> @@ -213,4 +541,11 @@ </tr> </tbody> </table> + + <jsp:scriptlet> + <![CDATA[ + } + ]]> + </jsp:scriptlet> + </f:root>