root / hci / trunk / eneraptor-web-app / web-app / js / flot / jquery.colorhelpers.js @ 11
History | View | Annotate | Download (5.78 KB)
1 | 11 | alexbesir | /* 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 | })(); |