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