1/*
2 * jQuery miniColors: A small color selector
3 *
4 * Copyright 2011 Cory LaViska for A Beautiful Site, LLC. (http://abeautifulsite.net/)
5 *
6 * Dual licensed under the MIT or GPL Version 2 licenses
7 *
8*/
9if(jQuery) (function($) {
10
11 $.extend($.fn, {
12
13 miniColors: function(o, data) {
14
15 var create = function(input, o, data) {
16 //
17 // Creates a new instance of the miniColors selector
18 //
19
20 // Determine initial color (defaults to white)
21 var color = expandHex(input.val());
22 if( !color ) color = 'ffffff';
23 var hsb = hex2hsb(color);
24
25 // Create trigger
26 var trigger = $('<a class="miniColors-trigger" style="background-color: #' + color + '" href="#"></a>');
27 trigger.insertAfter(input);
28
29 // Set input data and update attributes
30 input
31 .addClass('miniColors')
32 .data('original-maxlength', input.attr('maxlength') || null)
33 .data('original-autocomplete', input.attr('autocomplete') || null)
34 .data('letterCase', 'uppercase')
35 .data('trigger', trigger)
36 .data('hsb', hsb)
37 .data('change', o.change ? o.change : null)
38 .attr('maxlength', 7)
39 .attr('autocomplete', 'off')
40 .val('#' + convertCase(color, o.letterCase));
41
42 // Handle options
43 if( o.readonly ) input.prop('readonly', true);
44 if( o.disabled ) disable(input);
45
46 // Show selector when trigger is clicked
47 trigger.bind('click.miniColors', function(event) {
48 event.preventDefault();
49 if( input.val() === '' ) input.val('#');
50 show(input);
51
52 });
53
54 // Show selector when input receives focus
55 input.bind('focus.miniColors', function(event) {
56 if( input.val() === '' ) input.val('#');
57 show(input);
58 });
59
60 // Hide on blur
61 input.bind('blur.miniColors', function(event) {
62 var hex = expandHex(input.val());
63 input.val( hex ? '#' + convertCase(hex, input.data('letterCase')) : '' );
64 });
65
66 // Hide when tabbing out of the input
67 input.bind('keydown.miniColors', function(event) {
68 if( event.keyCode === 9 ) hide(input);
69 });
70
71 // Update when color is typed in
72 input.bind('keyup.miniColors', function(event) {
73 setColorFromInput(input);
74 });
75
76 // Handle pasting
77 input.bind('paste.miniColors', function(event) {
78 // Short pause to wait for paste to complete
79 setTimeout( function() {
80 setColorFromInput(input);
81 }, 5);
82 });
83
84 };
85
86 var destroy = function(input) {
87 //
88 // Destroys an active instance of the miniColors selector
89 //
90
91 hide();
92 input = $(input);
93
94 // Restore to original state
95 input.data('trigger').remove();
96 input
97 .attr('autocomplete', input.data('original-autocomplete'))
98 .attr('maxlength', input.data('original-maxlength'))
99 .removeData()
100 .removeClass('miniColors')
101 .unbind('.miniColors');
102 $(document).unbind('.miniColors');
103 };
104
105 var enable = function(input) {
106 //
107 // Enables the input control and the selector
108 //
109 input
110 .prop('disabled', false)
111 .data('trigger')
112 .css('opacity', 1);
113 };
114
115 var disable = function(input) {
116 //
117 // Disables the input control and the selector
118 //
119 hide(input);
120 input
121 .prop('disabled', true)
122 .data('trigger')
123 .css('opacity', 0.5);
124 };
125
126 var show = function(input) {
127 //
128 // Shows the miniColors selector
129 //
130 if( input.prop('disabled') ) return false;
131
132 // Hide all other instances
133 hide();
134
135 // Generate the selector
136 var selector = $('<div class="miniColors-selector"></div>');
137 selector
138 .append('<div class="miniColors-colors" style="background-color: #FFF;"><div class="miniColors-colorPicker"></div></div>')
139 .append('<div class="miniColors-hues"><div class="miniColors-huePicker"></div></div>')
140 .css({
141 top: input.is(':visible') ? input.offset().top + input.outerHeight() : input.data('trigger').offset().top + input.data('trigger').outerHeight(),
142 left: input.is(':visible') ? input.offset().left : input.data('trigger').offset().left,
143 display: 'none'
144 })
145 .addClass( input.attr('class') );
146
147 // Set background for colors
148 var hsb = input.data('hsb');
149 selector
150 .find('.miniColors-colors')
151 .css('backgroundColor', '#' + hsb2hex({ h: hsb.h, s: 100, b: 100 }));
152
153 // Set colorPicker position
154 var colorPosition = input.data('colorPosition');
155 if( !colorPosition ) colorPosition = getColorPositionFromHSB(hsb);
156 selector.find('.miniColors-colorPicker')
157 .css('top', colorPosition.y + 'px')
158 .css('left', colorPosition.x + 'px');
159
160 // Set huePicker position
161 var huePosition = input.data('huePosition');
162 if( !huePosition ) huePosition = getHuePositionFromHSB(hsb);
163 selector.find('.miniColors-huePicker').css('top', huePosition.y + 'px');
164
165 // Set input data
166 input
167 .data('selector', selector)
168 .data('huePicker', selector.find('.miniColors-huePicker'))
169 .data('colorPicker', selector.find('.miniColors-colorPicker'))
170 .data('mousebutton', 0);
171
172 $('BODY').append(selector);
173 selector.fadeIn(100);
174
175 // Prevent text selection in IE
176 selector.bind('selectstart', function() { return false; });
177
178 $(document).bind('mousedown.miniColors touchstart.miniColors', function(event) {
179
180 input.data('mousebutton', 1);
181
182 if( $(event.target).parents().andSelf().hasClass('miniColors-colors') ) {
183 event.preventDefault();
184 input.data('moving', 'colors');
185 moveColor(input, event);
186 }
187
188 if( $(event.target).parents().andSelf().hasClass('miniColors-hues') ) {
189 event.preventDefault();
190 input.data('moving', 'hues');
191 moveHue(input, event);
192 }
193
194 if( $(event.target).parents().andSelf().hasClass('miniColors-selector') ) {
195 event.preventDefault();
196 return;
197 }
198
199 if( $(event.target).parents().andSelf().hasClass('miniColors') ) return;
200
201 hide(input);
202 });
203
204 $(document)
205 .bind('mouseup.miniColors touchend.miniColors', function(event) {
206 event.preventDefault();
207 input.data('mousebutton', 0).removeData('moving');
208 })
209 .bind('mousemove.miniColors touchmove.miniColors', function(event) {
210 event.preventDefault();
211 if( input.data('mousebutton') === 1 ) {
212 if( input.data('moving') === 'colors' ) moveColor(input, event);
213 if( input.data('moving') === 'hues' ) moveHue(input, event);
214 }
215 });
216
217 };
218
219 var hide = function(input) {
220
221 //
222 // Hides one or more miniColors selectors
223 //
224
225 // Hide all other instances if input isn't specified
226 if( !input ) input = '.miniColors';
227
228 $(input).each( function() {
229 var selector = $(this).data('selector');
230 $(this).removeData('selector');
231 $(selector).fadeOut(100, function() {
232 $(this).remove();
233 });
234 });
235
236 $(document).unbind('.miniColors');
237
238 };
239
240 var moveColor = function(input, event) {
241
242 var colorPicker = input.data('colorPicker');
243
244 colorPicker.hide();
245
246 var position = {
247 x: event.pageX,
248 y: event.pageY
249 };
250
251 // Touch support
252 if( event.originalEvent.changedTouches ) {
253 position.x = event.originalEvent.changedTouches[0].pageX;
254 position.y = event.originalEvent.changedTouches[0].pageY;
255 }
256 position.x = position.x - input.data('selector').find('.miniColors-colors').offset().left - 5;
257 position.y = position.y - input.data('selector').find('.miniColors-colors').offset().top - 5;
258 if( position.x <= -5 ) position.x = -5;
259 if( position.x >= 144 ) position.x = 144;
260 if( position.y <= -5 ) position.y = -5;
261 if( position.y >= 144 ) position.y = 144;
262
263 input.data('colorPosition', position);
264 colorPicker.css('left', position.x).css('top', position.y).show();
265
266 // Calculate saturation
267 var s = Math.round((position.x + 5) * 0.67);
268 if( s < 0 ) s = 0;
269 if( s > 100 ) s = 100;
270
271 // Calculate brightness
272 var b = 100 - Math.round((position.y + 5) * 0.67);
273 if( b < 0 ) b = 0;
274 if( b > 100 ) b = 100;
275
276 // Update HSB values
277 var hsb = input.data('hsb');
278 hsb.s = s;
279 hsb.b = b;
280
281 // Set color
282 setColor(input, hsb, true);
283 };
284
285 var moveHue = function(input, event) {
286
287 var huePicker = input.data('huePicker');
288
289 huePicker.hide();
290
291 var position = {
292 y: event.pageY
293 };
294
295 // Touch support
296 if( event.originalEvent.changedTouches ) {
297 position.y = event.originalEvent.changedTouches[0].pageY;
298 }
299
300 position.y = position.y - input.data('selector').find('.miniColors-colors').offset().top - 1;
301 if( position.y <= -1 ) position.y = -1;
302 if( position.y >= 149 ) position.y = 149;
303 input.data('huePosition', position);
304 huePicker.css('top', position.y).show();
305
306 // Calculate hue
307 var h = Math.round((150 - position.y - 1) * 2.4);
308 if( h < 0 ) h = 0;
309 if( h > 360 ) h = 360;
310
311 // Update HSB values
312 var hsb = input.data('hsb');
313 hsb.h = h;
314
315 // Set color
316 setColor(input, hsb, true);
317
318 };
319
320 var setColor = function(input, hsb, updateInput) {
321 input.data('hsb', hsb);
322 var hex = hsb2hex(hsb);
323 if( updateInput ) input.val( '#' + convertCase(hex, input.data('letterCase')) );
324 input.data('trigger').css('backgroundColor', '#' + hex);
325 if( input.data('selector') ) input.data('selector').find('.miniColors-colors').css('backgroundColor', '#' + hsb2hex({ h: hsb.h, s: 100, b: 100 }));
326
327 // Fire change callback
328 if( input.data('change') ) {
329 if( hex === input.data('lastChange') ) return;
330 input.data('change').call(input.get(0), '#' + hex, hsb2rgb(hsb));
331 input.data('lastChange', hex);
332 }
333
334 };
335
336 var setColorFromInput = function(input) {
337
338 input.val('#' + cleanHex(input.val()));
339 var hex = expandHex(input.val());
340 if( !hex ) return false;
341
342 // Get HSB equivalent
343 var hsb = hex2hsb(hex);
344
345 // If color is the same, no change required
346 var currentHSB = input.data('hsb');
347 if( hsb.h === currentHSB.h && hsb.s === currentHSB.s && hsb.b === currentHSB.b ) return true;
348
349 // Set colorPicker position
350 var colorPosition = getColorPositionFromHSB(hsb);
351 var colorPicker = $(input.data('colorPicker'));
352 colorPicker.css('top', colorPosition.y + 'px').css('left', colorPosition.x + 'px');
353 input.data('colorPosition', colorPosition);
354
355 // Set huePosition position
356 var huePosition = getHuePositionFromHSB(hsb);
357 var huePicker = $(input.data('huePicker'));
358 huePicker.css('top', huePosition.y + 'px');
359 input.data('huePosition', huePosition);
360
361 setColor(input, hsb);
362
363 return true;
364
365 };
366
367 var convertCase = function(string, letterCase) {
368 if( letterCase === 'lowercase' ) return string.toLowerCase();
369 if( letterCase === 'uppercase' ) return string.toUpperCase();
370 return string;
371 };
372
373 var getColorPositionFromHSB = function(hsb) {
374 var x = Math.ceil(hsb.s / 0.67);
375 if( x < 0 ) x = 0;
376 if( x > 150 ) x = 150;
377 var y = 150 - Math.ceil(hsb.b / 0.67);
378 if( y < 0 ) y = 0;
379 if( y > 150 ) y = 150;
380 return { x: x - 5, y: y - 5 };
381 };
382
383 var getHuePositionFromHSB = function(hsb) {
384 var y = 150 - (hsb.h / 2.4);
385 if( y < 0 ) h = 0;
386 if( y > 150 ) h = 150;
387 return { y: y - 1 };
388 };
389
390 var cleanHex = function(hex) {
391 return hex.replace(/[^A-F0-9]/ig, '');
392 };
393
394 var expandHex = function(hex) {
395 hex = cleanHex(hex);
396 if( !hex ) return null;
397 if( hex.length === 3 ) hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
398 return hex.length === 6 ? hex : null;
399 };
400
401 var hsb2rgb = function(hsb) {
402 var rgb = {};
403 var h = Math.round(hsb.h);
404 var s = Math.round(hsb.s*255/100);
405 var v = Math.round(hsb.b*255/100);
406 if(s === 0) {
407 rgb.r = rgb.g = rgb.b = v;
408 } else {
409 var t1 = v;
410 var t2 = (255 - s) * v / 255;
411 var t3 = (t1 - t2) * (h % 60) / 60;
412 if( h === 360 ) h = 0;
413 if( h < 60 ) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3; }
414 else if( h < 120 ) {rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3; }
415 else if( h < 180 ) {rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3; }
416 else if( h < 240 ) {rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3; }
417 else if( h < 300 ) {rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3; }
418 else if( h < 360 ) {rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3; }
419 else { rgb.r = 0; rgb.g = 0; rgb.b = 0; }
420 }
421 return {
422 r: Math.round(rgb.r),
423 g: Math.round(rgb.g),
424 b: Math.round(rgb.b)
425 };
426 };
427
428 var rgb2hex = function(rgb) {
429 var hex = [
430 rgb.r.toString(16),
431 rgb.g.toString(16),
432 rgb.b.toString(16)
433 ];
434 $.each(hex, function(nr, val) {
435 if (val.length === 1) hex[nr] = '0' + val;
436 });
437 return hex.join('');
438 };
439
440 var hex2rgb = function(hex) {
441 hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
442
443 return {
444 r: hex >> 16,
445 g: (hex & 0x00FF00) >> 8,
446 b: (hex & 0x0000FF)
447 };
448 };
449
450 var rgb2hsb = function(rgb) {
451 var hsb = { h: 0, s: 0, b: 0 };
452 var min = Math.min(rgb.r, rgb.g, rgb.b);
453 var max = Math.max(rgb.r, rgb.g, rgb.b);
454 var delta = max - min;
455 hsb.b = max;
456 hsb.s = max !== 0 ? 255 * delta / max : 0;
457 if( hsb.s !== 0 ) {
458 if( rgb.r === max ) {
459 hsb.h = (rgb.g - rgb.b) / delta;
460 } else if( rgb.g === max ) {
461 hsb.h = 2 + (rgb.b - rgb.r) / delta;
462 } else {
463 hsb.h = 4 + (rgb.r - rgb.g) / delta;
464 }
465 } else {
466 hsb.h = -1;
467 }
468 hsb.h *= 60;
469 if( hsb.h < 0 ) {
470 hsb.h += 360;
471 }
472 hsb.s *= 100/255;
473 hsb.b *= 100/255;
474 return hsb;
475 };
476
477 var hex2hsb = function(hex) {
478 var hsb = rgb2hsb(hex2rgb(hex));
479 // Zero out hue marker for black, white, and grays (saturation === 0)
480 if( hsb.s === 0 ) hsb.h = 360;
481 return hsb;
482 };
483
484 var hsb2hex = function(hsb) {
485 return rgb2hex(hsb2rgb(hsb));
486 };
487
488
489 // Handle calls to $([selector]).miniColors()
490 switch(o) {
491
492 case 'readonly':
493
494 $(this).each( function() {
495 if( !$(this).hasClass('miniColors') ) return;
496 $(this).prop('readonly', data);
497 });
498
499 return $(this);
500
501 case 'disabled':
502
503 $(this).each( function() {
504 if( !$(this).hasClass('miniColors') ) return;
505 if( data ) {
506 disable($(this));
507 } else {
508 enable($(this));
509 }
510 });
511
512 return $(this);
513
514 case 'value':
515
516 // Getter
517 if( data === undefined ) {
518 if( !$(this).hasClass('miniColors') ) return;
519 var input = $(this),
520 hex = expandHex(input.val());
521 return hex ? '#' + convertCase(hex, input.data('letterCase')) : null;
522 }
523
524 // Setter
525 $(this).each( function() {
526 if( !$(this).hasClass('miniColors') ) return;
527 $(this).val(data);
528 setColorFromInput($(this));
529 });
530
531 return $(this);
532
533 case 'destroy':
534
535 $(this).each( function() {
536 if( !$(this).hasClass('miniColors') ) return;
537 destroy($(this));
538 });
539
540 return $(this);
541
542 default:
543
544 if( !o ) o = {};
545
546 $(this).each( function() {
547
548 // Must be called on an input element
549 if( $(this)[0].tagName.toLowerCase() !== 'input' ) return;
550
551 // If a trigger is present, the control was already created
552 if( $(this).data('trigger') ) return;
553
554 // Create the control
555 create($(this), o, data);
556
557 });
558
559 return $(this);
560
561 }
562
563 }
564
565 });
566
567})(jQuery);
568