[richfaces-svn-commits] JBoss Rich Faces SVN: r13516 - in trunk/ui/colorPicker/src/main: templates/org/richfaces and 1 other directory.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Sun Apr 12 11:36:49 EDT 2009
Author: nbelaevski
Date: 2009-04-12 11:36:48 -0400 (Sun, 12 Apr 2009)
New Revision: 13516
Modified:
trunk/ui/colorPicker/src/main/resources/org/richfaces/renderkit/html/scripts/ui.colorpicker.js
trunk/ui/colorPicker/src/main/templates/org/richfaces/htmlColorPicker.jspx
Log:
https://jira.jboss.org/jira/browse/RF-6595
Modified: trunk/ui/colorPicker/src/main/resources/org/richfaces/renderkit/html/scripts/ui.colorpicker.js
===================================================================
--- trunk/ui/colorPicker/src/main/resources/org/richfaces/renderkit/html/scripts/ui.colorpicker.js 2009-04-11 18:24:51 UTC (rev 13515)
+++ trunk/ui/colorPicker/src/main/resources/org/richfaces/renderkit/html/scripts/ui.colorpicker.js 2009-04-12 15:36:48 UTC (rev 13516)
@@ -1,17 +1,117 @@
if (!window.Richfaces) window.Richfaces = {};
(function ($) {
+
+ var RGBColor = function(colors) {
+ this.r = Math.min(255, Math.max(0, colors[0]));
+ this.g = Math.min(255, Math.max(0, colors[1]));
+ this.b = Math.min(255, Math.max(0, colors[2]));
+ };
+
+ RGBColor.prototype.toHSB = function() {
+ if (!this.hsb) {
+ var r = this.r, g = this.g, b = this.b;
+ var low = Math.min(r, Math.min(g,b));
+ var high = Math.max(r, Math.max(g,b));
+
+ this.hsb = {b: high*100/255};
+
+ var diff = high-low;
+ if (diff) {
+ this.hsb.s = Math.round(100*(diff/high));
+ if (r == high) {
+ this.hsb.h = Math.round(((g-b)/diff)*60);
+ } else if (g == high) {
+ this.hsb.h = Math.round((2 + (b-r)/diff)*60);
+ } else {
+ this.hsb.h = Math.round((4 + (r-g)/diff)*60);
+ }
+
+ if (this.hsb.h > 360) {
+ this.hsb.h -= 360;
+ } else if (this.hsb.h < 0) {
+ this.hsb.h += 360;
+ }
+ } else {
+ this.hsb.h = this.hsb.s = 0;
+ }
+
+ this.hsb.b = Math.round(this.hsb.b);
+ }
+
+ return this.hsb;
+ };
+
+ RGBColor.prototype.toRGB = function() {
+ return this;
+ };
+
+ var HSBColor = function(colors) {
+ this.h = Math.min(360, Math.max(0, colors[0]));
+ this.s = Math.min(100, Math.max(0, colors[1]));
+ this.b = Math.min(100, Math.max(0, colors[2]));
+ };
+
+ HSBColor.prototype.toHSB = function() {
+ return this;
+ };
+
+ HSBColor.prototype.toRGB = function() {
+ if (!this.rgb) {
+ this.rgb = {};
+ var h = Math.round(this.h);
+ var s = Math.round(this.s*255/100);
+ var v = Math.round(this.b*255/100);
+
+ if (s == 0) {
+ this.rgb.r = this.rgb.g = this.rgb.b = v;
+ } else {
+ var t1 = v;
+ var t2 = (255-s) * v / 255;
+ var t3 = (t1-t2) * (h%60) / 60;
+ if (h == 360) {
+ h = 0;
+ }
+ if (h < 60) {
+ this.rgb.r = t1; this.rgb.b = t2; this.rgb.g = t2 + t3;
+ } else if (h < 120) {
+ this.rgb.g = t1; this.rgb.b = t2; this.rgb.r = t1-t3;
+ } else if (h < 180) {
+ this.rgb.g=t1; this.rgb.r=t2; this.rgb.b=t2+t3;
+ } else if (h < 240) {
+ this.rgb.b=t1; this.rgb.r=t2; this.rgb.g=t1-t3;
+ } else if (h < 300) {
+ this.rgb.b=t1; this.rgb.g=t2; this.rgb.r=t2+t3;
+ } else if (h < 360) {
+ this.rgb.r=t1; this.rgb.g=t2; this.rgb.b=t1-t3;
+ } else {
+ this.rgb.r=0; this.rgb.g=0; this.rgb.b=0;
+ }
+ }
+
+ this.rgb.r = Math.round(this.rgb.r);
+ this.rgb.g = Math.round(this.rgb.g);
+ this.rgb.b = Math.round(this.rgb.b);
+ }
+
+ return this.rgb;
+ };
+
+
$.widget("ui.colorPicker", {
_fixColors: function(cff, mode) {
- cff.toLowerCase();
+ cff = 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;
+
+ var colors = cff.match(pattern);
+
+ if (mode == 'hsb') {
+ return new HSBColor(colors);
+ } else if (mode == 'rgb') {
+ return new RGBColor(colors);
+ } else if (mode == 'hex') {
+ var hex = parseInt(((cff.indexOf('#') > -1) ? cff.substring(1) : cff), 16);
+ return new RGBColor([hex >> 16, (hex & 0x00FF00) >> 8, (hex & 0x0000FF)]);
}
},
@@ -24,22 +124,17 @@
var o = this.options, self = this,
tpl = $(o.clientId.toString()+"-colorPicker-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);
-
+ if (o.color.indexOf('hsb') > -1) {
+ this.color = this._fixColors(o.color, 'hsb');// this._fixHSB(this._fixColors(o.color, 'hsb'));
+ } else if (o.color.indexOf('rgb') > -1) {
+ this.color = this._fixColors(o.color, 'rgb');//this._RGBToHSB(this._fixColors(o.color, 'rgb'));
+ } else if (o.color.indexOf('#') > -1) {
+ this.color = this._fixColors(o.color, 'hex');
} else{
return this;
-
}
this.showEvent = o.showEvent;
- this.origColor = this.color;
this.picker = $(tpl);
this.picker[0].component = this;
@@ -100,42 +195,52 @@
},
- _fillRGBFields: function(hsb) {
- var rgb = this._HSBToRGB(hsb);
+ _fillRGBFields: function(color) {
+ var rgb = color.toRGB();
this.fields
.eq(1).val(rgb.r).end()
.eq(2).val(rgb.g).end()
.eq(3).val(rgb.b).end();
},
- _fillHSBFields: function(hsb) {
+
+ _fillHSBFields: function(color) {
+ var hsb = color.toHSB();
+
this.fields
.eq(4).val(hsb.h).end()
.eq(5).val(hsb.s).end()
.eq(6).val(hsb.b).end();
},
- _fillHexFields: function (hsb) {
+
+ _fillHexFields: function (color) {
+ var rgb = color.toRGB();
+
this.fields
- .eq(0).val(this._HSBToHex(hsb)).end();
+ .eq(0).val(this._RGBToHex(rgb)).end();
},
- _setSelector: function(hsb) {
- this.selector.css('backgroundColor', '#' + this._HSBToHex({h: hsb.h, s: 100, b: 100}));
+
+ _setSelector: function(color) {
+ var rgb = color.toRGB();
+ var hsb = color.toHSB();
+ this.selector.css('backgroundColor', '#' + this._RGBToHex(rgb));
this.selectorIndic.css({
left: parseInt(150 * hsb.s/100, 10),
top: parseInt(150 * (100-hsb.b)/100, 10)
});
},
- _setHue: function(hsb) {
+ _setHue: function(color) {
+ var hsb = color.toHSB();
this.hue.css('top', parseInt(150 - 150 * hsb.h/360, 10));
},
- _setCurrentColor: function(hsb) {
- this.currentColor.css('backgroundColor', '#' + this._HSBToHex(hsb));
+ _setCurrentColor: function(color) {
+ this.currentColor.css('backgroundColor', '#' + this._RGBToHex(color.toRGB()));
},
- _setIconColor: function(hsb) {
- this.iconColor.css('backgroundColor', '#' + this._HSBToHex(hsb));
+ _setIconColor: function(color) {
+ this.iconColor.css('backgroundColor', '#' + this._RGBToHex(color.toRGB()));
},
- _setNewColor: function(hsb) {
- this.newColor.css('backgroundColor', '#' + this._HSBToHex(hsb));
+ _setNewColor: function(color) {
+ this.newColor.css('backgroundColor', '#' + this._RGBToHex(color.toRGB()));
},
_keyDown: function(e) {
@@ -144,6 +249,15 @@
return false;
}
},
+
+ _createEventArgument: function(color) {
+ return { options: this.options,
+ hsb: color.toHSB(),
+ hex: this._RGBToHex(color.toRGB()),
+ rgb: color.toRGB()
+ };
+ },
+
_change: function(e, target) {
var col;
@@ -167,29 +281,25 @@
if (target.parentNode.className.indexOf('-hex') > 0) {
- col = this._HexToHSB(this.fields.eq(0).val());
-
- this.color = col;
+ this.color = col = this._fixColors(this.fields.eq(0).val(), 'hex');
this._fillHexFields(col);
this._fillRGBFields(col);
this._fillHSBFields(col);
} else if (target.parentNode.className.indexOf('-hsb') > 0) {
- col = this._fixHSB({
- h: parseInt(this.fields.eq(4).val(), 10),
- s: parseInt(this.fields.eq(5).val(), 10),
- b: parseInt(this.fields.eq(6).val(), 10)
- });
- this.color = col;
+ this.color = col = new HSBColor([
+ parseInt(this.fields.eq(4).val(), 10),
+ parseInt(this.fields.eq(5).val(), 10),
+ parseInt(this.fields.eq(6).val(), 10)]);
+
this._fillHSBFields(col);
this._fillRGBFields(col);
this._fillHexFields(col);
} else {
- col = this._RGBToHSB(this._fixRGB({
- r: parseInt(this.fields.eq(1).val(), 10),
- g: parseInt(this.fields.eq(2).val(), 10),
- b: parseInt(this.fields.eq(3).val(), 10)
- }));
- this.color = col;
+ this.color = col = new RGBColor([
+ parseInt(this.fields.eq(1).val(), 10),
+ parseInt(this.fields.eq(2).val(), 10),
+ parseInt(this.fields.eq(3).val(), 10)]);
+
this._fillRGBFields(col);
this._fillHexFields(col);
this._fillHSBFields(col);
@@ -197,7 +307,7 @@
this._setSelector(col);
this._setHue(col);
this._setNewColor(col);
- this._trigger('change', e, { options: this.options, hsb: col, hex: this._HSBToHex(col), rgb: this._HSBToRGB(col) });
+ this._trigger('change', e, this._createEventArgument(col));
},
_blur: function(e) {
this.fields.parent().removeClass('rich-colorPicker-focus');
@@ -299,11 +409,9 @@
_clickSubmit: function(e) {
var col = this.color;
- this.origColor = col;
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, this._createEventArgument(col));
this.picker.hide();
$(document).unbind('mousedown.colorPicker');
return false;
@@ -315,7 +423,7 @@
},
_show: function(e) {
- this._trigger("beforeShow", e, { options: this.options, hsb: this.color, hex: this._HSBToHex(this.color), rgb: this._HSBToRGB(this.color) });
+ this._trigger("beforeShow", e, this._createEventArgument(this.color));
var top = 0;
var left = 0;
@@ -329,7 +437,7 @@
this.picker.css('visibility', 'visible');
- if (this._trigger("show", e, { options: this.options, hsb: this.color, hex: this._HSBToHex(this.color), rgb: this._HSBToRGB(this.color) }) != false) {
+ if (this._trigger("show", e, this._createEventArgument(this.color)) != false) {
this.picker.show();
}
@@ -342,7 +450,7 @@
_hide: function(e) {
if (!this._isChildOf(this.picker[0], e.target, this.picker[0])) {
- if (this._trigger("hide", e, { options: this.options, hsb: this.color, hex: this._HSBToHex(this.color), rgb: this._HSBToRGB(this.color) }) != false) {
+ if (this._trigger("hide", e, this._createEventArgument(this.color)) != false) {
this.picker.hide();
}
$(document).unbind('mousedown.colorPicker');
@@ -368,66 +476,6 @@
return false;
},
- _fixHSB: function(hsb) {
- return {
- h: Math.min(360, Math.max(0, hsb.h)),
- s: Math.min(100, Math.max(0, hsb.s)),
- b: Math.min(100, Math.max(0, hsb.b))
- };
- },
- _fixRGB: function(rgb) {
- return {
- r: Math.min(255, Math.max(0, rgb.r)),
- g: Math.min(255, Math.max(0, rgb.g)),
- b: Math.min(255, Math.max(0, rgb.b))
- };
- },
- _HexToRGB: function (hex) {
- var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
- return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
- },
- _HexToHSB: function(hex) {
- return this._RGBToHSB(this._HexToRGB(hex));
- },
- _RGBToHSB: function(rgb) {
- var r = rgb.r, g = rgb.g, b = rgb.b;
- var low = Math.min(r,Math.min(g,b));
- var high = Math.max(r,Math.max(g,b));
- var hsb = {b: high*100/255};
- var diff = high-low;
- if (diff){
- hsb.s = Math.round(100*(diff/high));
- if(r == high) hsb.h = Math.round(((g-b)/diff)*60);
- else if(g == high) hsb.h = Math.round((2 + (b-r)/diff)*60);
- else hsb.h = Math.round((4 + (r-g)/diff)*60);
- if (hsb.h > 360) hsb.h -= 360;
- else if (hsb.h < 0) hsb.h += 360;
- }else hsb.h = hsb.s = 0;
- hsb.b = Math.round(hsb.b);
- return hsb;
- },
- _HSBToRGB: function(hsb) {
- var rgb = {};
- var h = Math.round(hsb.h);
- var s = Math.round(hsb.s*255/100);
- var v = Math.round(hsb.b*255/100);
- if(s == 0) {
- rgb.r = rgb.g = rgb.b = v;
- } else {
- var t1 = v;
- var t2 = (255-s)*v/255;
- var t3 = (t1-t2)*(h%60)/60;
- if(h==360) h = 0;
- if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3;}
- else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3;}
- else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3;}
- else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3;}
- else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3;}
- else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3;}
- else {rgb.r=0; rgb.g=0; rgb.b=0;}
- }
- return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
- },
_RGBToHex: function(rgb) {
var hex = [
rgb.r.toString(16),
@@ -441,22 +489,18 @@
});
return hex.join('');
},
- _HSBToHex: function(hsb) {
- return this._RGBToHex(this._HSBToRGB(hsb));
- },
setColor: function(col) {
if (typeof col == 'string') {
- col = this._HexToHSB(col);
+ col = this._fixColors(col, 'hex');
} else if (col.r != undefined && col.g != undefined && col.b != undefined) {
- col = this._RGBToHSB(col);
+ col = new RGBColor([col.r, col.g, col.b]);
} else if (col.h != undefined && col.s != undefined && col.b != undefined) {
- col = this._fixHSB(col);
+ col = new HSBColor([col.h, col.s, col.b]);
} else {
return this;
}
this.color = col;
- this.origColor = col;
this._fillRGBFields(col);
this._fillHSBFields(col);
this._fillHexFields(col);
Modified: trunk/ui/colorPicker/src/main/templates/org/richfaces/htmlColorPicker.jspx
===================================================================
--- trunk/ui/colorPicker/src/main/templates/org/richfaces/htmlColorPicker.jspx 2009-04-11 18:24:51 UTC (rev 13515)
+++ trunk/ui/colorPicker/src/main/templates/org/richfaces/htmlColorPicker.jspx 2009-04-12 15:36:48 UTC (rev 13516)
@@ -134,13 +134,13 @@
submit: function(e, ui) {
switch("#{colorMode}"){
case "hex":
- jQuery('\##{clientIdJquery} input').val(ui.hex);
+ jQuery('\##{clientIdJquery} input').val('#' + ui.hex);
break;
case "rgb":
- jQuery('\##{clientIdJquery} input').val(ui.rgb);
+ jQuery('\##{clientIdJquery} input').val('rgb('+ui.rgb.r+', '+ui.rgb.g+', '+ui.rgb.b+')');
break;
default:
- jQuery('\##{clientIdJquery} input').val(ui.hex);
+ jQuery('\##{clientIdJquery} input').val('#' + ui.hex);
}
}
});
More information about the richfaces-svn-commits
mailing list