Author: artdaw Date: 2009-01-20 15:27:13 -0500 (Tue, 20 Jan 2009) New Revision: 12355 Modified: trunk/sandbox/ui/colorPicker/design/colorPicker.html trunk/sandbox/ui/colorPicker/design/ui.colorpicker.js 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: bugs were fixed Modified: trunk/sandbox/ui/colorPicker/design/colorPicker.html =================================================================== --- trunk/sandbox/ui/colorPicker/design/colorPicker.html 2009-01-20 18:19:06 UTC (rev 12354) +++ trunk/sandbox/ui/colorPicker/design/colorPicker.html 2009-01-20 20:27:13 UTC (rev 12355) @@ -180,17 +180,17 @@ if(navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 7.0") == -1){ $('div.rich-colorPicker-color').pngFix(); } - $("#rich-colorPicker").colorPicker({ + $("#rich-colorPicker input, img").colorPicker({ eventName: 'click', - flat: false, - color: "#807540", + flat: true, + color: "rgb(255, 250, 240)", /*color: {r:128,g:117,b:64},*/ /*color: {h:50,s:50,b:50}*/ clientId: "#rich-colorPicker", submit: function(e, ui) { // Possibility to choose color modes for the input -// $("#rich-colorPicker input").val(ui.hex); - $("#rich-colorPicker input").val(ui.rgb); + $("#rich-colorPicker input").val(ui.hex); +// $("#rich-colorPicker input").val(ui.rgb); } }); }); Modified: trunk/sandbox/ui/colorPicker/design/ui.colorpicker.js =================================================================== --- trunk/sandbox/ui/colorPicker/design/ui.colorpicker.js 2009-01-20 18:19:06 UTC (rev 12354) +++ trunk/sandbox/ui/colorPicker/design/ui.colorpicker.js 2009-01-20 20:27:13 UTC (rev 12355) @@ -55,13 +55,40 @@ (function ($) { $.widget("ui.colorPicker", { - + + + _fixColors: function(cff, mode) { + cff.toLowerCase(); + var pattern = /[0-9]+/g; + cff = cff.match(pattern); + + if(mode == 'hsb'){ + result = {h:cff[0], s: cff[1], b: cff[2]}; + return result; + } else if(mode == 'rgb'){ + result = {r:cff[0], g: cff[1], b: cff[2]}; + return result; + } + }, + _init: function() { this.charMin = 65; var o = this.options, self = this, - tpl = $(o.clientId.toString()+"-ui"); + tpl = $(o.clientId.toString()+"-ui"); + + if(o.color.indexOf('hsb') > -1){ + this.color = this._fixHSB(this._fixColors(o.color, 'hsb')); + } else if(o.color.indexOf('rgb') > -1){ + this.color = this._RGBToHSB(this._fixColors(o.color, 'rgb')); + } else if(o.color.indexOf('#') > -1){ + this.color = this._HexToHSB(o.color); + } else{ + return this; + } + + /* if (typeof o.color == 'string') { this.color = this._HexToHSB(o.color); } else if (o.color.r != undefined && o.color.g != undefined && o.color.b != undefined) { @@ -71,6 +98,7 @@ } else { return this; } +*/ this.origColor = this.color; this.picker = $(tpl); @@ -115,17 +143,22 @@ this._setIconColor(this.color); this._setNewColor(this.color); - if (o.flat) { + if (o.flat) { + this.picker.css({ - position: 'relative', + position: 'absolute', display: 'block' - }); + }); + $(this.element).bind(o.eventName+".colorPicker", function(e) { return self._show.call(self, e); }); } else { $(this.element).bind(o.eventName+".colorPicker", function(e) { return self._show.call(self, e); }); - } + } + }, - + + + destroy: function() { this.picker.remove(); Modified: trunk/sandbox/ui/colorPicker/src/main/config/component/colorPicker.xml =================================================================== --- trunk/sandbox/ui/colorPicker/src/main/config/component/colorPicker.xml 2009-01-20 18:19:06 UTC (rev 12354) +++ trunk/sandbox/ui/colorPicker/src/main/config/component/colorPicker.xml 2009-01-20 20:27:13 UTC (rev 12355) @@ -52,6 +52,13 @@ <description> The value of the component. You can define value as hex, RGB or HSB. </description> + </property> + <property> + <name>disabled</name> + <classname>java.lang.Boolean</classname> + <description> + Defines whether the component is disabled. + </description> </property> &ui_component_attributes; &html_events; 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 18:19:06 UTC (rev 12354) +++ trunk/sandbox/ui/colorPicker/src/main/resources/org/richfaces/ui/renderkit/html/css/colorPicker.xcss 2009-01-20 20:27:13 UTC (rev 12355) @@ -6,7 +6,6 @@ <![CDATA[ .rich-colorPicker-wrapper{ display:none; - font-family:Arial,Helvetica,sans-serif; height:176px; !height:166px; overflow:hidden; @@ -15,9 +14,8 @@ margin-top: 2px; } .rich-colorPicker-ext{ + border: 1px solid; position: relative; - background-color: #ECF4FE; - border: 1px solid #BED6F8; height: 170px; padding: 0px; margin: 0px; @@ -35,11 +33,10 @@ overflow:hidden; height:150px; width:150px; - border: 1px solid #BED6F8; + border: 1px solid; } .rich-colorPicker-color div { -/* background:transparent url(images/colorpicker_overlay.png) repeat scroll 0 0;*/ left:0; position:absolute; top:0; @@ -48,7 +45,6 @@ } .rich-colorPicker-color div div { -/* background:transparent url(images/colorpicker_select.gif) repeat scroll 0 0;*/ left:0; top:0; position:absolute; @@ -68,7 +64,6 @@ text-align: center; } .rich-colorPicker-rainbow div{ -/* background:transparent url(images/rangearrows.gif) no-repeat scroll left top; */ height:9px; left:1px; margin:-4px 0 0; @@ -82,7 +77,7 @@ top:7px; width: 60px; height: 30px; - border: 1px solid #BED6F8; + border: 1px solid; } .rich-colorPicker-current-color{ @@ -135,13 +130,9 @@ font-size: 16px; } -.rich-colorPicker-rgb-wrapper input, .rich-colorPicker-hex-wrapper input, .rich-colorPicker-hsb-wrapper input{ +.rich-colorPicker-colors-input{ width: 35px; - background-color: #fff; - border: 1px solid #BED6F8; - color: #000; - font-family: Arial,Verdana,sans-serif; - font-size: 16px; + border: 1px solid; } .rich-colorPicker-hex-wrapper input{ @@ -151,16 +142,15 @@ .rich-colorPicker-submit, .rich-colorPicker-cancel{ position:absolute; -right:75px; -top:144px; - border: 1px solid #BED6F8; + right:75px; + top:144px; + border: 1px solid; } .rich-colorPicker-cancel{ -right:7px; + right:7px; } .rich-colorPicker-span input{ - border: 1px solid #BED6F8; - font-size: 12px; + border: 1px solid; width:130px; vertical-align:middle; } @@ -170,34 +160,62 @@ height:16px; width:16px; vertical-align:middle; - border: 1px solid #BED6F8; + border: 1px solid; } +.rich-colorPicker-icon-disabled{ + background-color: #cccccc; + height:16px; + width:16px; +} ]]> </f:verbatim> - <u:selector name=".rich-colorPicker-color div"> + <u:selector name=".rich-colorPicker-ext"> + <u:style name="border-color" skin="panelBorderColor"/> + <u:style name="background-color" skin="additionalBackgroundColor"/> + <u:style name="font-family" skin="generalFamilyFont"/> + </u:selector> + <u:selector name=".rich-colorPicker-span input"> <u:style name="background-image"> + <f:resource f:key="org.richfaces.renderkit.html.images.InputBackgroundImage" /> + </u:style> + <u:style name="border-color" skin="panelBorderColor"/> + <u:style name="font-size" skin="generalSizeFont"/> + <u:style name="font-family" skin="generalFamilyFont"/> + </u:selector> + <u:selector name=".rich-colorPicker-icon"> + <u:style name="border-color" skin="panelBorderColor"/> + </u:selector> + <u:selector name=".rich-colorPicker-color"> + <u:style name="border-color" skin="panelBorderColor"/> + </u:selector> + <u:selector name=".rich-colorPicker-new-color"> + <u:style name="border-color" skin="panelBorderColor"/> + </u:selector> + <u:selector name=".rich-colorPicker-current-color"> + <u:style name="border-color" skin="panelBorderColor"/> + </u:selector> + <u:selector name=".rich-colorPicker-color div"> + <u:style name="background-image"> <f:resource f:key="org/richfaces/ui/renderkit/html/images/colorpicker_overlay.png" /> </u:style> </u:selector> + <u:selector name=".rich-colorPicker-colors-input"> + <u:style name="font-size" skin="generalSizeFont"/> + <u:style name="font-family" skin="generalFamilyFont"/> + <u:style name="color" skin="generalTextColor"/> + <u:style name="border-color" skin="panelBorderColor"/> + <u:style name="background-color" skin="controlBackgroundColor"/> + </u:selector> <u:selector name=".rich-colorPicker-color div div"> <u:style name="background-image"> <f:resource f:key="org/richfaces/ui/renderkit/html/images/colorpicker_select.gif" /> </u:style> </u:selector> - <u:selector name=".rich-colorPicker-rainbow div"> <u:style name="background-image"> <f:resource f:key="org/richfaces/ui/renderkit/html/images/rangearrows.gif" /> </u:style> </u:selector> - - <!--u:selector name=".my-inputDate-icon"> - <u:style name="border-color" skin="panelBorderColor"/> - <u:style name="background-image"> - <f:resource f:key="org/richfaces/ui/renderkit/html/images/colorpicker_overlay.png" /> - </u:style> - </u:selector--> - </f:template> \ No newline at end of file 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 18:19:06 UTC (rev 12354) +++ trunk/sandbox/ui/colorPicker/src/main/resources/org/richfaces/ui/renderkit/html/scripts/ui.colorpicker.js 2009-01-20 20:27:13 UTC (rev 12355) @@ -1,26 +1,43 @@ if (!window.Richfaces) window.Richfaces = {}; (function ($) { $.widget("ui.colorPicker", { + + _fixColors: function(cff, mode) { + cff.toLowerCase(); + var pattern = /[0-9]+/g; + cff = cff.match(pattern); + if(mode == 'hsb'){ + result = {h:cff[0], s: cff[1], b: cff[2]}; + return result; + } else if(mode == 'rgb'){ + result = {r:cff[0], g: cff[1], b: cff[2]}; + return result; + } + }, + _init: function() { this.charMin = 65; var o = this.options, self = this, - tpl = $(o.clientId.toString()+"-popup"); - if (typeof o.color == 'string') { + tpl = $(o.clientId.toString()+"-popup"); + + if(o.color.indexOf('hsb') > -1){ + this.color = this._fixHSB(this._fixColors(o.color, 'hsb')); + + } else if(o.color.indexOf('rgb') > -1){ + this.color = this._RGBToHSB(this._fixColors(o.color, 'rgb')); + + } else if(o.color.indexOf('#') > -1){ this.color = this._HexToHSB(o.color); - } else if (o.color.r != undefined && o.color.g != undefined && o.color.b != undefined) { - this.color = this._RGBToHSB(o.color); - } else if (o.color.h != undefined && o.color.s != undefined && o.color.b != undefined) { - this.color = this._fixHSB(o.color); - } else { + + } else{ return this; + } this.showEvent = o.showEvent; this.origColor = this.color; this.picker = $(tpl); - if (o.flat) { - this.picker.show(); - } + this.fields = this.picker.find('input') .bind('keydown', function(e) { return self._keyDown.call(self, e); }) @@ -28,8 +45,8 @@ .bind('blur', function(e) { return self._blur.call(self, e); }) .bind('focus', function(e) { return self._focus.call(self, e); }); -/* this.picker.find('span').bind('mousedown', function(e) { return self._downIncrement.call(self, e); }); */ + this.selector = this.picker.find('div.rich-colorPicker-color').bind('mousedown', function(e) { return self._downSelector.call(self, e); }); this.selectorIndic = this.selector.find('div div'); this.hue = this.picker.find('div.rich-colorPicker-rainbow div'); @@ -37,7 +54,7 @@ this.newColor = this.picker.find('div.rich-colorPicker-new-color'); this.currentColor = this.picker.find('div.rich-colorPicker-current-color'); - this.iconColor = $('img.rich-colorPicker-icon'); + this.iconColor = $(o.clientId.toString()+' .rich-colorPicker-icon'); this.picker.find('.rich-colorPicker-submit') .bind('mouseenter', function(e) { return self._enterSubmit.call(self, e); }) @@ -60,10 +77,12 @@ if (o.flat) { this.picker.css({ - position: 'relative', - display: 'block' + position: 'absolute' }); + this.picker.show(); + $(this.element).bind(this.showEvent+".colorPicker", function(e) { return self._show.call(self, e); }); } else { + this.picker.hide(); $(this.element).bind(this.showEvent+".colorPicker", function(e) { return self._show.call(self, e); }); } @@ -159,16 +178,6 @@ this._trigger('change', e, { options: this.options, hsb: col, hex: this._HSBToHex(col), rgb: this._HSBToRGB(col) }); }, _blur: function(e) { -/* - var col = this.color; - this._fillRGBFields(col); - this._fillHSBFields(col); - this._fillHexFields(col); - this._setHue(col); - this._setSelector(col); - this._setNewColor(col); - this._setIconColor(col); -*/ this.fields.parent().removeClass('rich-colorPicker-focus'); }, @@ -179,35 +188,6 @@ $(e.target.parentNode).addClass('rich-colorPicker-focus'); }, -/* - _downIncrement: function(e) { - - var field = $(e.target).parent().find('input').focus(), self = this; - this.currentIncrement = { - el: $(e.target).parent().addClass('ui-colorPicker-slider'), - max: e.target.parentNode.className.indexOf('-hsb-h') > 0 ? 360 : (e.target.parentNode.className.indexOf('-hsb') > 0 ? 100 : 255), - y: e.pageY, - field: field, - val: parseInt(field.val(), 10) - }; - $(document).bind('mouseup.cpSlider', function(e) { return self._upIncrement.call(self, e); }); - $(document).bind('mousemove.cpSlider', function(e) { return self._moveIncrement.call(self, e); }); - return false; - - }, - _moveIncrement: function(e) { - this.currentIncrement.field.val(Math.max(0, Math.min(this.currentIncrement.max, parseInt(this.currentIncrement.val + e.pageY - this.currentIncrement.y, 10)))); - this._change.apply(this, [e, this.currentIncrement.field.get(0)]); - return false; - }, - _upIncrement: function(e) { - this.currentIncrement.el.removeClass('ui-colorPicker-slider').find('input').focus(); - this._change.apply(this, [e, this.currentIncrement.field.get(0)]); - $(document).unbind('mouseup.cpSlider'); - $(document).unbind('mousemove.cpSlider'); - return false; - }, -*/ _downHue: function(e) { this.currentHue = { @@ -301,16 +281,14 @@ this._setCurrentColor(col); this._setIconColor(col); var RGBCol = this._HSBToRGB(col); - 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(); - $(window).unbind('mousedown.colorPicker'); + $(document).unbind('mousedown.colorPicker'); return false; }, _clickCancel: function(e) { this.picker.hide(); - $(window).unbind('mousedown.colorPicker'); + $(document).unbind('mousedown.colorPicker'); return false; }, _show: function(e) { @@ -339,7 +317,7 @@ } var self = this; - $(window).bind('mousedown.colorPicker', function(e) { return self._hide.call(self, e); }); + $(document).bind('mousedown.colorPicker', function(e) { return self._hide.call(self, e); }); return false; }, @@ -396,25 +374,7 @@ } return false; }, -/* - _getScroll: function() { - var t,l,w,h,iw,ih; - if (document.documentElement) { - t = document.documentElement.scrollTop; - l = document.documentElement.scrollLeft; - w = document.documentElement.scrollWidth; - h = document.documentElement.scrollHeight; - } else { - t = document.body.scrollTop; - l = document.body.scrollLeft; - w = document.body.scrollWidth; - h = document.body.scrollHeight; - } - iw = self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0; - ih = self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0; - return { t: t, l: l, w: w, h: h, iw: iw, ih: ih }; - }, -*/ + _fixHSB: function(hsb) { return { h: Math.min(360, Math.max(0, hsb.h)), @@ -491,14 +451,18 @@ return this._RGBToHex(this._HSBToRGB(hsb)); }, setColor: function(col) { - if (typeof col == 'string') { - col = this._HexToHSB(col); - } else if (col.r != undefined && col.g != undefined && col.b != undefined) { - col = this._RGBToHSB(col); - } else if (col.h != undefined && col.s != undefined && col.b != undefined) { - col = this._fixHSB(col); - } else { + if(o.color.indexOf('hsb') > -1){ + this.color = this._fixHSB(this._fixColors(o.color, 'hsb')); + + } else if(o.color.indexOf('rgb') > -1){ + this.color = this._RGBToHSB(this._fixColors(o.color, 'rgb')); + + } else if(o.color.indexOf('#') > -1){ + this.color = this._HexToHSB(o.color); + + } else{ return this; + } this.color = col; 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 18:19:06 UTC (rev 12354) +++ trunk/sandbox/ui/colorPicker/src/main/templates/org/richfaces/ui/htmlColorPicker.jspx 2009-01-20 20:27:13 UTC (rev 12355) @@ -41,7 +41,9 @@ colorMode = colorMode.toLowerCase(); java.util.regex.Pattern pattern = java.util.regex.Pattern.compile("\\s+"); colorMode = pattern.matcher(colorMode).replaceAll(""); - + + boolean disabled = getUtils().isBooleanAttribute(component, "disabled"); + variables.setVariable("disabled",new Boolean(disabled)); ]]></jsp:scriptlet> $('\##{clientIdJquery}colorPicker').colorPicker({ @@ -66,7 +68,7 @@ </script> </div> <span id="#{clientId}colorPicker" class="rich-colorPicker-span" x:passThruWithExclusions="value,name,type,id,styleClass,class,style"> - <input readonly="readonly" type="text" /> + <input readonly="readonly" disabled="#{disabled}" type="text" /> <jsp:scriptlet> <![CDATA[if(component.getFacet("icon")!=null && component.getFacet("icon").isRendered()) {]]> </jsp:scriptlet> @@ -92,38 +94,54 @@ </div> </div> <div class="rich-colorPicker-rainbow"> - <img src="#{rainbow}" alt="rainbow" /> + <img src="#{rainbow}" alt="rainbow" /> + <jsp:scriptlet> + <![CDATA[if(component.getFacet("arrows")!=null && component.getFacet("arrows").isRendered()) {]]> + </jsp:scriptlet> + <u:insertFacet name="arrows" /> + <jsp:scriptlet> + <![CDATA[ + }else{ + ]]> + </jsp:scriptlet> <div></div> + <jsp:scriptlet> + <![CDATA[ + } + ]]> + </jsp:scriptlet> + + </div> <div class="rich-colorPicker-new-color"></div> <div class="rich-colorPicker-current-color"></div> <div class="rich-colorPicker-hex-wrapper"> <label for="rich-colorPicker-hex-wrapper" title="hex">#:</label> - <input id="#{clientId}-colorPicker-hex" type="text" maxlength="6" size="6" /> + <input id="#{clientId}-colorPicker-hex" class="rich-colorPicker-colors-input" type="text" maxlength="6" size="6" /> </div> <div class="rich-colorPicker-rgb-wrapper rich-colorPicker-rgb-r"> <label for="rgb">R:</label> - <input id="#{clientId}-colorPicker-rgb-r" type="text" maxlength="3" size="2" /> + <input id="#{clientId}-colorPicker-rgb-r" class="rich-colorPicker-colors-input" type="text" maxlength="3" size="2" /> </div> <div class="rich-colorPicker-rgb-wrapper rich-colorPicker-rgb-g"> <label for="rgb-g">G:</label> - <input id="#{clientId}-colorPicker-rgb-g" type="text" maxlength="3" size="2" /> + <input id="#{clientId}-colorPicker-rgb-g" class="rich-colorPicker-colors-input" type="text" maxlength="3" size="2" /> </div> <div class="rich-colorPicker-rgb-wrapper rich-colorPicker-rgb-b"> <label for="rgb-b">B:</label> - <input id="#{clientId}-colorPicker-rgb-b" type="text" maxlength="3" size="2" /> + <input id="#{clientId}-colorPicker-rgb-b" class="rich-colorPicker-colors-input" type="text" maxlength="3" size="2" /> </div> <div class="rich-colorPicker-hsb-h rich-colorPicker-hsb-wrapper"> <label for="hsb-h">H:</label> - <input id="#{clientId}-colorPicker-hsb-h" type="text" maxlength="3" size="2" /> + <input id="#{clientId}-colorPicker-hsb-h" class="rich-colorPicker-colors-input" type="text" maxlength="3" size="2" /> </div> <div class="rich-colorPicker-hsb-s rich-colorPicker-hsb-wrapper"> <label for="hsb-s">S:</label> - <input id="#{clientId}-colorPicker-hsb-s" type="text" maxlength="3" size="2" /> + <input id="#{clientId}-colorPicker-hsb-s" class="rich-colorPicker-colors-input" type="text" maxlength="3" size="2" /> </div> <div class="rich-colorPicker-hsb-b rich-colorPicker-hsb-wrapper"> <label for="hsb-b">B:</label> - <input id="#{clientId}-colorPicker-hsb-b" type="text" maxlength="3" size="2" /> + <input id="#{clientId}-colorPicker-hsb-b" class="rich-colorPicker-colors-input" type="text" maxlength="3" size="2" /> </div> <button type="button" class="rich-colorPicker-submit" name="submit">Apply</button> <button type="button" class="rich-colorPicker-cancel" name="cancel">Cancel</button>