root / hci / trunk / eneraptor-web-app / web-app / js / flot / jquery.colorhelpers.js @ 11
History | View | Annotate | Download (5.78 KB)
1 |
/* Plugin for jQuery for working with colors.
|
---|---|
2 |
*
|
3 |
* Version 1.0.
|
4 |
*
|
5 |
* Inspiration from jQuery color animation plugin by John Resig.
|
6 |
*
|
7 |
* Released under the MIT license by Ole Laursen, October 2009.
|
8 |
*
|
9 |
* Examples:
|
10 |
*
|
11 |
* $.color.parse("#fff").scale('rgb', 0.25).add('a', -0.5).toString()
|
12 |
* var c = $.color.extract($("#mydiv"), 'background-color');
|
13 |
* console.log(c.r, c.g, c.b, c.a);
|
14 |
* $.color.make(100, 50, 25, 0.4).toString() // returns "rgba(100,50,25,0.4)"
|
15 |
*
|
16 |
* Note that .scale() and .add() work in-place instead of returning
|
17 |
* new objects.
|
18 |
*/
|
19 |
|
20 |
(function() {
|
21 |
jQuery.color = {}; |
22 |
|
23 |
// construct color object with some convenient chainable helpers
|
24 |
jQuery.color.make = function (r, g, b, a) { |
25 |
var o = {};
|
26 |
o.r = r || 0;
|
27 |
o.g = g || 0;
|
28 |
o.b = b || 0;
|
29 |
o.a = a != null ? a : 1; |
30 |
|
31 |
o.add = function (c, d) { |
32 |
for (var i = 0; i < c.length; ++i) |
33 |
o[c.charAt(i)] += d; |
34 |
return o.normalize();
|
35 |
}; |
36 |
|
37 |
o.scale = function (c, f) { |
38 |
for (var i = 0; i < c.length; ++i) |
39 |
o[c.charAt(i)] *= f; |
40 |
return o.normalize();
|
41 |
}; |
42 |
|
43 |
o.toString = function () { |
44 |
if (o.a >= 1.0) { |
45 |
return "rgb("+[o.r, o.g, o.b].join(",")+")"; |
46 |
} else {
|
47 |
return "rgba("+[o.r, o.g, o.b, o.a].join(",")+")"; |
48 |
} |
49 |
}; |
50 |
|
51 |
o.normalize = function () { |
52 |
function clamp(min, value, max) { |
53 |
return value < min ? min: (value > max ? max: value);
|
54 |
} |
55 |
|
56 |
o.r = clamp(0, parseInt(o.r), 255); |
57 |
o.g = clamp(0, parseInt(o.g), 255); |
58 |
o.b = clamp(0, parseInt(o.b), 255); |
59 |
o.a = clamp(0, o.a, 1); |
60 |
return o;
|
61 |
}; |
62 |
|
63 |
o.clone = function () { |
64 |
return jQuery.color.make(o.r, o.b, o.g, o.a);
|
65 |
}; |
66 |
|
67 |
return o.normalize();
|
68 |
} |
69 |
|
70 |
// extract CSS color property from element, going up in the DOM
|
71 |
// if it's "transparent"
|
72 |
jQuery.color.extract = function (elem, css) { |
73 |
var c;
|
74 |
do {
|
75 |
c = elem.css(css).toLowerCase(); |
76 |
// keep going until we find an element that has color, or
|
77 |
// we hit the body
|
78 |
if (c != '' && c != 'transparent') |
79 |
break;
|
80 |
elem = elem.parent(); |
81 |
} while (!jQuery.nodeName(elem.get(0), "body")); |
82 |
|
83 |
// catch Safari's way of signalling transparent
|
84 |
if (c == "rgba(0, 0, 0, 0)") |
85 |
c = "transparent";
|
86 |
|
87 |
return jQuery.color.parse(c);
|
88 |
} |
89 |
|
90 |
// parse CSS color string (like "rgb(10, 32, 43)" or "#fff"),
|
91 |
// returns color object
|
92 |
jQuery.color.parse = function (str) { |
93 |
var res, m = jQuery.color.make;
|
94 |
|
95 |
// Look for rgb(num,num,num)
|
96 |
if (res = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(str)) |
97 |
return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10)); |
98 |
|
99 |
// Look for rgba(num,num,num,num)
|
100 |
if (res = /rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str)) |
101 |
return m(parseInt(res[1], 10), parseInt(res[2], 10), parseInt(res[3], 10), parseFloat(res[4])); |
102 |
|
103 |
// Look for rgb(num%,num%,num%)
|
104 |
if (res = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(str)) |
105 |
return m(parseFloat(res[1])*2.55, parseFloat(res[2])*2.55, parseFloat(res[3])*2.55); |
106 |
|
107 |
// Look for rgba(num%,num%,num%,num)
|
108 |
if (res = /rgba\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\s*\)/.exec(str)) |
109 |
return m(parseFloat(res[1])*2.55, parseFloat(res[2])*2.55, parseFloat(res[3])*2.55, parseFloat(res[4])); |
110 |
|
111 |
// Look for #a0b1c2
|
112 |
if (res = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(str)) |
113 |
return m(parseInt(res[1], 16), parseInt(res[2], 16), parseInt(res[3], 16)); |
114 |
|
115 |
// Look for #fff
|
116 |
if (res = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(str)) |
117 |
return m(parseInt(res[1]+res[1], 16), parseInt(res[2]+res[2], 16), parseInt(res[3]+res[3], 16)); |
118 |
|
119 |
// Otherwise, we're most likely dealing with a named color
|
120 |
var name = jQuery.trim(str).toLowerCase();
|
121 |
if (name == "transparent") |
122 |
return m(255, 255, 255, 0); |
123 |
else {
|
124 |
res = lookupColors[name]; |
125 |
return m(res[0], res[1], res[2]); |
126 |
} |
127 |
} |
128 |
|
129 |
var lookupColors = {
|
130 |
aqua:[0,255,255], |
131 |
azure:[240,255,255], |
132 |
beige:[245,245,220], |
133 |
black:[0,0,0], |
134 |
blue:[0,0,255], |
135 |
brown:[165,42,42], |
136 |
cyan:[0,255,255], |
137 |
darkblue:[0,0,139], |
138 |
darkcyan:[0,139,139], |
139 |
darkgrey:[169,169,169], |
140 |
darkgreen:[0,100,0], |
141 |
darkkhaki:[189,183,107], |
142 |
darkmagenta:[139,0,139], |
143 |
darkolivegreen:[85,107,47], |
144 |
darkorange:[255,140,0], |
145 |
darkorchid:[153,50,204], |
146 |
darkred:[139,0,0], |
147 |
darksalmon:[233,150,122], |
148 |
darkviolet:[148,0,211], |
149 |
fuchsia:[255,0,255], |
150 |
gold:[255,215,0], |
151 |
green:[0,128,0], |
152 |
indigo:[75,0,130], |
153 |
khaki:[240,230,140], |
154 |
lightblue:[173,216,230], |
155 |
lightcyan:[224,255,255], |
156 |
lightgreen:[144,238,144], |
157 |
lightgrey:[211,211,211], |
158 |
lightpink:[255,182,193], |
159 |
lightyellow:[255,255,224], |
160 |
lime:[0,255,0], |
161 |
magenta:[255,0,255], |
162 |
maroon:[128,0,0], |
163 |
navy:[0,0,128], |
164 |
olive:[128,128,0], |
165 |
orange:[255,165,0], |
166 |
pink:[255,192,203], |
167 |
purple:[128,0,128], |
168 |
violet:[128,0,128], |
169 |
red:[255,0,0], |
170 |
silver:[192,192,192], |
171 |
white:[255,255,255], |
172 |
yellow:[255,255,0] |
173 |
}; |
174 |
})(); |