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