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