1 // $Id: farbtastic.js,v 1.2 2007/01/08 22:53:01 unconed Exp $ |
1 /*! |
2 // Farbtastic 1.2 |
2 * Farbtastic: jQuery color picker plug-in v1.3u |
3 |
3 * |
4 var farbtastic_click = false; |
4 * Licensed under the GPL license: |
5 |
5 * http://www.gnu.org/licenses/gpl.html |
6 jQuery.fn.farbtastic = function (callback) { |
6 */ |
7 jQuery.farbtastic(this, callback); |
7 (function($) { |
|
8 |
|
9 $.fn.farbtastic = function (options) { |
|
10 $.farbtastic(this, options); |
8 return this; |
11 return this; |
9 }; |
12 }; |
10 |
13 |
11 jQuery.farbtastic = function (container, callback) { |
14 $.farbtastic = function (container, callback) { |
12 var container = jQuery(container).get(0); |
15 var container = $(container).get(0); |
13 return container.farbtastic || (container.farbtastic = new jQuery._farbtastic(container, callback)); |
16 return container.farbtastic || (container.farbtastic = new $._farbtastic(container, callback)); |
14 } |
17 }; |
15 |
18 |
16 jQuery._farbtastic = function (container, callback) { |
19 $._farbtastic = function (container, callback) { |
17 // Store farbtastic object |
20 // Store farbtastic object |
18 var fb = this; |
21 var fb = this; |
19 |
22 |
20 // Insert markup |
23 // Insert markup |
21 jQuery(container).html('<div class="farbtastic"><div class="color"></div><div class="wheel"></div><div class="overlay"></div><div class="h-marker marker"></div><div class="sl-marker marker"></div></div>'); |
24 $(container).html('<div class="farbtastic"><div class="color"></div><div class="wheel"></div><div class="overlay"></div><div class="h-marker marker"></div><div class="sl-marker marker"></div></div>'); |
22 var e = jQuery('.farbtastic', container); |
25 var e = $('.farbtastic', container); |
23 fb.wheel = jQuery('.wheel', container).get(0); |
26 fb.wheel = $('.wheel', container).get(0); |
24 // Dimensions |
27 // Dimensions |
25 fb.radius = 84; |
28 fb.radius = 84; |
26 fb.square = 100; |
29 fb.square = 100; |
27 fb.width = 194; |
30 fb.width = 194; |
28 |
31 |
29 // Fix background PNGs in IE6 |
32 // Fix background PNGs in IE6 |
30 if (navigator.appVersion.match(/MSIE [0-6]\./)) { |
33 if (navigator.appVersion.match(/MSIE [0-6]\./)) { |
31 jQuery('*', e).each(function () { |
34 $('*', e).each(function () { |
32 if (this.currentStyle.backgroundImage != 'none') { |
35 if (this.currentStyle.backgroundImage != 'none') { |
33 var image = this.currentStyle.backgroundImage; |
36 var image = this.currentStyle.backgroundImage; |
34 image = this.currentStyle.backgroundImage.substring(5, image.length - 2); |
37 image = this.currentStyle.backgroundImage.substring(5, image.length - 2); |
35 jQuery(this).css({ |
38 $(this).css({ |
36 'backgroundImage': 'none', |
39 'backgroundImage': 'none', |
37 'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image + "')" |
40 'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image + "')" |
38 }); |
41 }); |
39 } |
42 } |
40 }); |
43 }); |
44 * Link to the given element(s) or callback. |
47 * Link to the given element(s) or callback. |
45 */ |
48 */ |
46 fb.linkTo = function (callback) { |
49 fb.linkTo = function (callback) { |
47 // Unbind previous nodes |
50 // Unbind previous nodes |
48 if (typeof fb.callback == 'object') { |
51 if (typeof fb.callback == 'object') { |
49 jQuery(fb.callback).unbind('keyup', fb.updateValue); |
52 $(fb.callback).unbind('keyup', fb.updateValue); |
50 } |
53 } |
51 |
54 |
52 // Reset color |
55 // Reset color |
53 fb.color = null; |
56 fb.color = null; |
54 |
57 |
55 // Bind callback or elements |
58 // Bind callback or elements |
56 if (typeof callback == 'function') { |
59 if (typeof callback == 'function') { |
57 fb.callback = callback; |
60 fb.callback = callback; |
58 } |
61 } |
59 else if (typeof callback == 'object' || typeof callback == 'string') { |
62 else if (typeof callback == 'object' || typeof callback == 'string') { |
60 fb.callback = jQuery(callback); |
63 fb.callback = $(callback); |
61 fb.callback.bind('keyup', fb.updateValue); |
64 fb.callback.bind('keyup', fb.updateValue); |
62 if (fb.callback.get(0).value) { |
65 if (fb.callback.get(0).value) { |
63 fb.setColor(fb.callback.get(0).value); |
66 fb.setColor(fb.callback.get(0).value); |
64 } |
67 } |
65 } |
68 } |
66 return this; |
69 return this; |
67 } |
70 }; |
68 fb.updateValue = function (event) { |
71 fb.updateValue = function (event) { |
69 if (this.value && this.value != fb.color) { |
72 if (this.value && this.value != fb.color) { |
70 fb.setColor(this.value); |
73 fb.setColor(this.value); |
71 } |
74 } |
72 } |
75 }; |
73 |
76 |
74 /** |
77 /** |
75 * Change color with HTML syntax #123456 |
78 * Change color with HTML syntax #123456 |
76 */ |
79 */ |
77 fb.setColor = function (color) { |
80 fb.setColor = function (color) { |
81 fb.rgb = unpack; |
84 fb.rgb = unpack; |
82 fb.hsl = fb.RGBToHSL(fb.rgb); |
85 fb.hsl = fb.RGBToHSL(fb.rgb); |
83 fb.updateDisplay(); |
86 fb.updateDisplay(); |
84 } |
87 } |
85 return this; |
88 return this; |
86 } |
89 }; |
87 |
90 |
88 /** |
91 /** |
89 * Change color with HSL triplet [0..1, 0..1, 0..1] |
92 * Change color with HSL triplet [0..1, 0..1, 0..1] |
90 */ |
93 */ |
91 fb.setHSL = function (hsl) { |
94 fb.setHSL = function (hsl) { |
92 fb.hsl = hsl; |
95 fb.hsl = hsl; |
93 fb.rgb = fb.HSLToRGB(hsl); |
96 fb.rgb = fb.HSLToRGB(hsl); |
94 fb.color = fb.pack(fb.rgb); |
97 fb.color = fb.pack(fb.rgb); |
95 fb.updateDisplay(); |
98 fb.updateDisplay(); |
96 return this; |
99 return this; |
97 } |
100 }; |
98 |
101 |
99 ///////////////////////////////////////////////////// |
102 ///////////////////////////////////////////////////// |
100 |
103 |
101 /** |
104 /** |
102 * Retrieve the coordinates of the given event relative to the center |
105 * Retrieve the coordinates of the given event relative to the center |
103 * of the widget. |
106 * of the widget. |
104 */ |
107 */ |
105 fb.widgetCoords = function (event) { |
108 fb.widgetCoords = function (event) { |
106 var x, y; |
109 var offset = $(fb.wheel).offset(); |
107 var el = event.target || event.srcElement; |
110 return { x: (event.pageX - offset.left) - fb.width / 2, y: (event.pageY - offset.top) - fb.width / 2 }; |
108 var reference = fb.wheel; |
111 }; |
109 |
|
110 if (typeof event.offsetX != 'undefined') { |
|
111 // Use offset coordinates and find common offsetParent |
|
112 var pos = { x: event.offsetX, y: event.offsetY }; |
|
113 |
|
114 // Send the coordinates upwards through the offsetParent chain. |
|
115 var e = el; |
|
116 while (e) { |
|
117 e.mouseX = pos.x; |
|
118 e.mouseY = pos.y; |
|
119 pos.x += e.offsetLeft; |
|
120 pos.y += e.offsetTop; |
|
121 e = e.offsetParent; |
|
122 } |
|
123 |
|
124 // Look for the coordinates starting from the wheel widget. |
|
125 var e = reference; |
|
126 var offset = { x: 0, y: 0 } |
|
127 while (e) { |
|
128 if (typeof e.mouseX != 'undefined') { |
|
129 x = e.mouseX - offset.x; |
|
130 y = e.mouseY - offset.y; |
|
131 break; |
|
132 } |
|
133 offset.x += e.offsetLeft; |
|
134 offset.y += e.offsetTop; |
|
135 e = e.offsetParent; |
|
136 } |
|
137 |
|
138 // Reset stored coordinates |
|
139 e = el; |
|
140 while (e) { |
|
141 e.mouseX = undefined; |
|
142 e.mouseY = undefined; |
|
143 e = e.offsetParent; |
|
144 } |
|
145 } |
|
146 else { |
|
147 // Use absolute coordinates |
|
148 var pos = fb.absolutePosition(reference); |
|
149 x = (event.pageX || 0*(event.clientX + jQuery('html').get(0).scrollLeft)) - pos.x; |
|
150 y = (event.pageY || 0*(event.clientY + jQuery('html').get(0).scrollTop)) - pos.y; |
|
151 } |
|
152 // Subtract distance to middle |
|
153 return { x: x - fb.width / 2, y: y - fb.width / 2 }; |
|
154 } |
|
155 |
112 |
156 /** |
113 /** |
157 * Mousedown handler |
114 * Mousedown handler |
158 */ |
115 */ |
159 fb.mousedown = function (event) { |
116 fb.mousedown = function (event) { |
160 farbtastic_click = true; |
|
161 // Capture mouse |
117 // Capture mouse |
162 if (!document.dragging) { |
118 if (!document.dragging) { |
163 jQuery(document).bind('mousemove', fb.mousemove).bind('mouseup', fb.mouseup); |
119 $(document).bind('mousemove', fb.mousemove).bind('mouseup', fb.mouseup); |
164 document.dragging = true; |
120 document.dragging = true; |
165 } |
121 } |
166 |
122 |
167 // Check which area is being dragged |
123 // Check which area is being dragged |
168 var pos = fb.widgetCoords(event); |
124 var pos = fb.widgetCoords(event); |
169 fb.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) * 2 > fb.square; |
125 fb.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) * 2 > fb.square; |
170 |
126 |
171 // Process |
127 // Process |
172 fb.mousemove(event); |
128 fb.mousemove(event); |
173 return false; |
129 return false; |
174 } |
130 }; |
175 |
131 |
176 /** |
132 /** |
177 * Mousemove handler |
133 * Mousemove handler |
178 */ |
134 */ |
179 fb.mousemove = function (event) { |
135 fb.mousemove = function (event) { |
190 var sat = Math.max(0, Math.min(1, -(pos.x / fb.square) + .5)); |
146 var sat = Math.max(0, Math.min(1, -(pos.x / fb.square) + .5)); |
191 var lum = Math.max(0, Math.min(1, -(pos.y / fb.square) + .5)); |
147 var lum = Math.max(0, Math.min(1, -(pos.y / fb.square) + .5)); |
192 fb.setHSL([fb.hsl[0], sat, lum]); |
148 fb.setHSL([fb.hsl[0], sat, lum]); |
193 } |
149 } |
194 return false; |
150 return false; |
195 } |
151 }; |
196 |
152 |
197 /** |
153 /** |
198 * Mouseup handler |
154 * Mouseup handler |
199 */ |
155 */ |
200 fb.mouseup = function () { |
156 fb.mouseup = function () { |
201 // Uncapture mouse |
157 // Uncapture mouse |
202 farbtastic_click = false; |
158 $(document).unbind('mousemove', fb.mousemove); |
203 jQuery(document).unbind('mousemove', fb.mousemove); |
159 $(document).unbind('mouseup', fb.mouseup); |
204 jQuery(document).unbind('mouseup', fb.mouseup); |
|
205 document.dragging = false; |
160 document.dragging = false; |
206 } |
161 }; |
207 |
162 |
208 /** |
163 /** |
209 * Update the markers and styles |
164 * Update the markers and styles |
210 */ |
165 */ |
211 fb.updateDisplay = function () { |
166 fb.updateDisplay = function () { |
212 // Markers |
167 // Markers |
213 var angle = fb.hsl[0] * 6.28; |
168 var angle = fb.hsl[0] * 6.28; |
214 jQuery('.h-marker', e).css({ |
169 $('.h-marker', e).css({ |
215 left: Math.round(Math.sin(angle) * fb.radius + fb.width / 2) + 'px', |
170 left: Math.round(Math.sin(angle) * fb.radius + fb.width / 2) + 'px', |
216 top: Math.round(-Math.cos(angle) * fb.radius + fb.width / 2) + 'px' |
171 top: Math.round(-Math.cos(angle) * fb.radius + fb.width / 2) + 'px' |
217 }); |
172 }); |
218 |
173 |
219 jQuery('.sl-marker', e).css({ |
174 $('.sl-marker', e).css({ |
220 left: Math.round(fb.square * (.5 - fb.hsl[1]) + fb.width / 2) + 'px', |
175 left: Math.round(fb.square * (.5 - fb.hsl[1]) + fb.width / 2) + 'px', |
221 top: Math.round(fb.square * (.5 - fb.hsl[2]) + fb.width / 2) + 'px' |
176 top: Math.round(fb.square * (.5 - fb.hsl[2]) + fb.width / 2) + 'px' |
222 }); |
177 }); |
223 |
178 |
224 // Saturation/Luminance gradient |
179 // Saturation/Luminance gradient |
225 jQuery('.color', e).css('backgroundColor', fb.pack(fb.HSLToRGB([fb.hsl[0], 1, 0.5]))); |
180 $('.color', e).css('backgroundColor', fb.pack(fb.HSLToRGB([fb.hsl[0], 1, 0.5]))); |
226 |
181 |
227 // Linked elements or callback |
182 // Linked elements or callback |
228 if (typeof fb.callback == 'object') { |
183 if (typeof fb.callback == 'object') { |
229 // Set background/foreground color |
184 // Set background/foreground color |
230 jQuery(fb.callback).css({ |
185 $(fb.callback).css({ |
231 backgroundColor: fb.color, |
186 backgroundColor: fb.color, |
232 color: fb.hsl[2] > 0.5 ? '#000' : '#fff' |
187 color: fb.hsl[2] > 0.5 ? '#000' : '#fff' |
233 }); |
188 }); |
234 |
189 |
235 // Change linked value |
190 // Change linked value |
236 jQuery(fb.callback).each(function() { |
191 $(fb.callback).each(function() { |
237 if (this.value && this.value != fb.color) { |
192 if (this.value && this.value != fb.color) { |
238 this.value = fb.color; |
193 this.value = fb.color; |
239 } |
194 } |
240 }); |
195 }); |
241 } |
196 } |
242 else if (typeof fb.callback == 'function') { |
197 else if (typeof fb.callback == 'function') { |
243 fb.callback.call(fb, fb.color); |
198 fb.callback.call(fb, fb.color); |
244 } |
199 } |
245 } |
|
246 |
|
247 /** |
|
248 * Get absolute position of element |
|
249 */ |
|
250 fb.absolutePosition = function (el) { |
|
251 var r = { x: el.offsetLeft, y: el.offsetTop }; |
|
252 // Resolve relative to offsetParent |
|
253 if (el.offsetParent) { |
|
254 var tmp = fb.absolutePosition(el.offsetParent); |
|
255 r.x += tmp.x; |
|
256 r.y += tmp.y; |
|
257 } |
|
258 return r; |
|
259 }; |
200 }; |
260 |
201 |
261 /* Various color utility functions */ |
202 /* Various color utility functions */ |
262 fb.pack = function (rgb) { |
203 fb.pack = function (rgb) { |
263 var r = Math.round(rgb[0] * 255); |
204 var r = Math.round(rgb[0] * 255); |
264 var g = Math.round(rgb[1] * 255); |
205 var g = Math.round(rgb[1] * 255); |
265 var b = Math.round(rgb[2] * 255); |
206 var b = Math.round(rgb[2] * 255); |
266 return '#' + (r < 16 ? '0' : '') + r.toString(16) + |
207 return '#' + (r < 16 ? '0' : '') + r.toString(16) + |
267 (g < 16 ? '0' : '') + g.toString(16) + |
208 (g < 16 ? '0' : '') + g.toString(16) + |
268 (b < 16 ? '0' : '') + b.toString(16); |
209 (b < 16 ? '0' : '') + b.toString(16); |
269 } |
210 }; |
270 |
211 |
271 fb.unpack = function (color) { |
212 fb.unpack = function (color) { |
272 if (color.length == 7) { |
213 if (color.length == 7) { |
273 return [parseInt('0x' + color.substring(1, 3)) / 255, |
214 return [parseInt('0x' + color.substring(1, 3)) / 255, |
274 parseInt('0x' + color.substring(3, 5)) / 255, |
215 parseInt('0x' + color.substring(3, 5)) / 255, |
277 else if (color.length == 4) { |
218 else if (color.length == 4) { |
278 return [parseInt('0x' + color.substring(1, 2)) / 15, |
219 return [parseInt('0x' + color.substring(1, 2)) / 15, |
279 parseInt('0x' + color.substring(2, 3)) / 15, |
220 parseInt('0x' + color.substring(2, 3)) / 15, |
280 parseInt('0x' + color.substring(3, 4)) / 15]; |
221 parseInt('0x' + color.substring(3, 4)) / 15]; |
281 } |
222 } |
282 } |
223 }; |
283 |
224 |
284 fb.HSLToRGB = function (hsl) { |
225 fb.HSLToRGB = function (hsl) { |
285 var m1, m2, r, g, b; |
226 var m1, m2, r, g, b; |
286 var h = hsl[0], s = hsl[1], l = hsl[2]; |
227 var h = hsl[0], s = hsl[1], l = hsl[2]; |
287 m2 = (l <= 0.5) ? l * (s + 1) : l + s - l*s; |
228 m2 = (l <= 0.5) ? l * (s + 1) : l + s - l*s; |
288 m1 = l * 2 - m2; |
229 m1 = l * 2 - m2; |
289 return [this.hueToRGB(m1, m2, h+0.33333), |
230 return [this.hueToRGB(m1, m2, h+0.33333), |
290 this.hueToRGB(m1, m2, h), |
231 this.hueToRGB(m1, m2, h), |
291 this.hueToRGB(m1, m2, h-0.33333)]; |
232 this.hueToRGB(m1, m2, h-0.33333)]; |
292 } |
233 }; |
293 |
234 |
294 fb.hueToRGB = function (m1, m2, h) { |
235 fb.hueToRGB = function (m1, m2, h) { |
295 h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h); |
236 h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h); |
296 if (h * 6 < 1) return m1 + (m2 - m1) * h * 6; |
237 if (h * 6 < 1) return m1 + (m2 - m1) * h * 6; |
297 if (h * 2 < 1) return m2; |
238 if (h * 2 < 1) return m2; |
298 if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6; |
239 if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6; |
299 return m1; |
240 return m1; |
300 } |
241 }; |
301 |
242 |
302 fb.RGBToHSL = function (rgb) { |
243 fb.RGBToHSL = function (rgb) { |
303 var min, max, delta, h, s, l; |
244 var min, max, delta, h, s, l; |
304 var r = rgb[0], g = rgb[1], b = rgb[2]; |
245 var r = rgb[0], g = rgb[1], b = rgb[2]; |
305 min = Math.min(r, Math.min(g, b)); |
246 min = Math.min(r, Math.min(g, b)); |