Author: artdaw Date: 2009-01-20 07:24:53 -0500 (Tue, 20 Jan 2009) New Revision: 12346 Modified: trunk/sandbox/ui/colorPicker/src/main/config/component/colorPicker.xml trunk/sandbox/ui/colorPicker/src/main/resources/org/richfaces/ui/renderkit/html/css/colorPicker.xcss trunk/sandbox/ui/colorPicker/src/main/resources/org/richfaces/ui/renderkit/html/scripts/ui.colorpicker.js trunk/sandbox/ui/colorPicker/src/main/templates/org/richfaces/ui/htmlColorPicker.jspx Log: colorPicker: JavaScript bugs were fixed. New attribute "colorMode" was added Modified: trunk/sandbox/ui/colorPicker/src/main/config/component/colorPicker.xml =================================================================== --- trunk/sandbox/ui/colorPicker/src/main/config/component/colorPicker.xml 2009-01-20 11:23:18 UTC (rev 12345) +++ trunk/sandbox/ui/colorPicker/src/main/config/component/colorPicker.xml 2009-01-20 12:24:53 UTC (rev 12346) @@ -22,15 +22,6 @@ </superclass> </tag> <property> - <name>value</name> - <classname>java.lang.Object</classname> - <description> - The value of the component - </description> - </property> - - - <property> <name>flat</name> <classname>java.lang.Boolean</classname> <description> @@ -39,13 +30,12 @@ <defaultvalue>false</defaultvalue> </property> <property> - <name>initColor</name> + <name>colorMode</name> <classname>java.lang.String</classname> <description> - Defines initial color for the component. - You can use hex, RGB or HSB values. + Defines a color mode for the component input. Possible values are hex, rgb. </description> - <defaultvalue><![CDATA["#ffffff"]]></defaultvalue> + <defaultvalue><![CDATA["hex"]]></defaultvalue> </property> <property> <name>showEvent</name> @@ -56,14 +46,11 @@ </description> <defaultvalue><![CDATA["onclick"]]></defaultvalue> </property> - - - <property> <name>value</name> - <classname>java.lang.Object</classname> + <classname>java.lang.String</classname> <description> - The value of the component + The value of the component. You can define value as hex, RGB or HSB. </description> </property> &ui_component_attributes; Modified: trunk/sandbox/ui/colorPicker/src/main/resources/org/richfaces/ui/renderkit/html/css/colorPicker.xcss =================================================================== --- trunk/sandbox/ui/colorPicker/src/main/resources/org/richfaces/ui/renderkit/html/css/colorPicker.xcss 2009-01-20 11:23:18 UTC (rev 12345) +++ trunk/sandbox/ui/colorPicker/src/main/resources/org/richfaces/ui/renderkit/html/css/colorPicker.xcss 2009-01-20 12:24:53 UTC (rev 12346) @@ -13,8 +13,6 @@ position:absolute; width:350px; margin-top: 2px; - !margin-top: -6px; - !margin-left: -2px; } .rich-colorPicker-ext{ position: relative; @@ -25,6 +23,9 @@ margin: 0px; } +.rich-colorPicker-rainbow div{ + background: transparent no-repeat scroll left top; +} .rich-colorPicker-color { background:#FF0000 none repeat scroll 0 0; cursor:crosshair; Modified: trunk/sandbox/ui/colorPicker/src/main/resources/org/richfaces/ui/renderkit/html/scripts/ui.colorpicker.js =================================================================== --- trunk/sandbox/ui/colorPicker/src/main/resources/org/richfaces/ui/renderkit/html/scripts/ui.colorpicker.js 2009-01-20 11:23:18 UTC (rev 12345) +++ trunk/sandbox/ui/colorPicker/src/main/resources/org/richfaces/ui/renderkit/html/scripts/ui.colorpicker.js 2009-01-20 12:24:53 UTC (rev 12346) @@ -305,12 +305,12 @@ this._trigger("submit", e, { options: this.options, hex: '#'+this._HSBToHex(col), rgb: 'rgb('+RGBCol.r+', '+RGBCol.g+', '+RGBCol.b+')' }); // this._trigger("submit", e, { options: this.options, hsb: col, hex: this._HSBToHex(col), rgb: this._HSBToRGB(col) }); this.picker.hide(); - $(document).unbind('mousedown.colorPicker'); + $(window).unbind('mousedown.colorPicker'); return false; }, _clickCancel: function(e) { this.picker.hide(); - $(document).unbind('mousedown.colorPicker'); + $(window).unbind('mousedown.colorPicker'); return false; }, _show: function(e) { @@ -339,7 +339,7 @@ } var self = this; - $(document).bind('mousedown.colorPicker', function(e) { return self._hide.call(self, e); }); + $(window).bind('mousedown.colorPicker', function(e) { return self._hide.call(self, e); }); return false; }, Modified: trunk/sandbox/ui/colorPicker/src/main/templates/org/richfaces/ui/htmlColorPicker.jspx =================================================================== --- trunk/sandbox/ui/colorPicker/src/main/templates/org/richfaces/ui/htmlColorPicker.jspx 2009-01-20 11:23:18 UTC (rev 12345) +++ trunk/sandbox/ui/colorPicker/src/main/templates/org/richfaces/ui/htmlColorPicker.jspx 2009-01-20 12:24:53 UTC (rev 12346) @@ -18,8 +18,8 @@ <c:object var="showEvent" type="java.lang.String" /> <c:object var="clientIdJquery" type="java.lang.String" /> + <c:object var="colorMode" type="java.lang.String" /> - <div style="display: none;" id="#{clientId}-colorPickerScript"> <script type="text/javascript"> $(document).ready(function(){ @@ -29,22 +29,37 @@ } <jsp:scriptlet><![CDATA[ - Boolean flat = (Boolean) component.getAttributes().get("flat"); - String initColor = (String) component.getAttributes().get("initColor"); + Boolean flat = (Boolean) component.getAttributes().get("flat"); + colorMode = (String) component.getAttributes().get("colorMode"); showEvent = (String) component.getAttributes().get("showEvent"); if(showEvent.startsWith("on")){ showEvent = showEvent.substring(2); } clientIdJquery = convertToString(clientId); - clientIdJquery = clientIdJquery.replace(":", "\\\\:"); - ]]></jsp:scriptlet> + clientIdJquery = clientIdJquery.replace(":", "\\\\:"); + + colorMode = colorMode.toLowerCase(); + java.util.regex.Pattern pattern = java.util.regex.Pattern.compile("\\s+"); + colorMode = pattern.matcher(colorMode).replaceAll(""); + + ]]></jsp:scriptlet> + $('\##{clientIdJquery}colorPicker').colorPicker({ flat: #{component.attributes['flat']}, - color: '#{component.attributes['initColor']}', - showEvent: '#{showEvent}', + color: "#{component.attributes['value']}", + showEvent: "#{showEvent}", clientId: '\##{clientIdJquery}colorPicker', - submit: function(e, ui) { - $('\##{clientIdJquery}colorPicker input').val(ui.hex); + submit: function(e, ui) { + switch("#{colorMode}"){ + case "hex": + $('\##{clientIdJquery}colorPicker input').val(ui.hex); + break; + case "rgb": + $('\##{clientIdJquery}colorPicker input').val(ui.rgb); + break; + default: + $('\##{clientIdJquery}colorPicker input').val(ui.hex); + } } }); });