source: trunk/www.guidonia.net/wp/wp-content/plugins/wordpress-mobile-edition/carrington-mobile-1.0.2/carrington-core/js/colorpicker.js@ 44

Last change on this file since 44 was 44, checked in by luciano, 14 years ago
File size: 17.0 KB
Line 
1/**
2 *
3 * Color picker
4 * Author: Stefan Petre www.eyecon.ro
5 *
6 */
7(function ($) {
8 var ColorPicker = function () {
9 var
10 ids = {},
11 inAction,
12 charMin = 65,
13 visible,
14 tpl = '<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>',
15 defaults = {
16 eventName: 'click',
17 onShow: function () {},
18 onBeforeShow: function(){},
19 onHide: function () {},
20 onChange: function () {},
21 onSubmit: function () {},
22 color: 'ff0000',
23 livePreview: true,
24 flat: false
25 },
26 fillRGBFields = function (hsb, cal) {
27 var rgb = HSBToRGB(hsb);
28 $(cal).data('colorpicker').fields
29 .eq(1).val(rgb.r).end()
30 .eq(2).val(rgb.g).end()
31 .eq(3).val(rgb.b).end();
32 },
33 fillHSBFields = function (hsb, cal) {
34 $(cal).data('colorpicker').fields
35 .eq(4).val(hsb.h).end()
36 .eq(5).val(hsb.s).end()
37 .eq(6).val(hsb.b).end();
38 },
39 fillHexFields = function (hsb, cal) {
40 $(cal).data('colorpicker').fields
41 .eq(0).val(HSBToHex(hsb)).end();
42 },
43 setSelector = function (hsb, cal) {
44 $(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({h: hsb.h, s: 100, b: 100}));
45 $(cal).data('colorpicker').selectorIndic.css({
46 left: parseInt(150 * hsb.s/100, 10),
47 top: parseInt(150 * (100-hsb.b)/100, 10)
48 });
49 },
50 setHue = function (hsb, cal) {
51 $(cal).data('colorpicker').hue.css('top', parseInt(150 - 150 * hsb.h/360, 10));
52 },
53 setCurrentColor = function (hsb, cal) {
54 $(cal).data('colorpicker').currentColor.css('backgroundColor', '#' + HSBToHex(hsb));
55 },
56 setNewColor = function (hsb, cal) {
57 $(cal).data('colorpicker').newColor.css('backgroundColor', '#' + HSBToHex(hsb));
58 },
59 keyDown = function (ev) {
60 var pressedKey = ev.charCode || ev.keyCode || -1;
61 if ((pressedKey > charMin && pressedKey <= 90) || pressedKey == 32) {
62 return false;
63 }
64 var cal = $(this).parent().parent();
65 if (cal.data('colorpicker').livePreview === true) {
66 change.apply(this);
67 }
68 },
69 change = function (ev) {
70 var cal = $(this).parent().parent(), col;
71 if (this.parentNode.className.indexOf('_hex') > 0) {
72 cal.data('colorpicker').color = col = HexToHSB(fixHex(this.value));
73 } else if (this.parentNode.className.indexOf('_hsb') > 0) {
74 cal.data('colorpicker').color = col = fixHSB({
75 h: parseInt(cal.data('colorpicker').fields.eq(4).val(), 10),
76 s: parseInt(cal.data('colorpicker').fields.eq(5).val(), 10),
77 b: parseInt(cal.data('colorpicker').fields.eq(6).val(), 10)
78 });
79 } else {
80 cal.data('colorpicker').color = col = RGBToHSB(fixRGB({
81 r: parseInt(cal.data('colorpicker').fields.eq(1).val(), 10),
82 g: parseInt(cal.data('colorpicker').fields.eq(2).val(), 10),
83 b: parseInt(cal.data('colorpicker').fields.eq(3).val(), 10)
84 }));
85 }
86 if (ev) {
87 fillRGBFields(col, cal.get(0));
88 fillHexFields(col, cal.get(0));
89 fillHSBFields(col, cal.get(0));
90 }
91 setSelector(col, cal.get(0));
92 setHue(col, cal.get(0));
93 setNewColor(col, cal.get(0));
94 cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);
95 },
96 blur = function (ev) {
97 var cal = $(this).parent().parent();
98 cal.data('colorpicker').fields.parent().removeClass('colorpicker_focus')
99 },
100 focus = function () {
101 charMin = this.parentNode.className.indexOf('_hex') > 0 ? 70 : 65;
102 $(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker_focus');
103 $(this).parent().addClass('colorpicker_focus');
104 },
105 downIncrement = function (ev) {
106 var field = $(this).parent().find('input').focus();
107 var current = {
108 el: $(this).parent().addClass('colorpicker_slider'),
109 max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),
110 y: ev.pageY,
111 field: field,
112 val: parseInt(field.val(), 10),
113 preview: $(this).parent().parent().data('colorpicker').livePreview
114 };
115 $(document).bind('mouseup', current, upIncrement);
116 $(document).bind('mousemove', current, moveIncrement);
117 },
118 moveIncrement = function (ev) {
119 ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val + ev.pageY - ev.data.y, 10))));
120 if (ev.data.preview) {
121 change.apply(ev.data.field.get(0), [true]);
122 }
123 return false;
124 },
125 upIncrement = function (ev) {
126 change.apply(ev.data.field.get(0), [true]);
127 ev.data.el.removeClass('colorpicker_slider').find('input').focus();
128 $(document).unbind('mouseup', upIncrement);
129 $(document).unbind('mousemove', moveIncrement);
130 return false;
131 },
132 downHue = function (ev) {
133 var current = {
134 cal: $(this).parent(),
135 y: $(this).offset().top
136 };
137 current.preview = current.cal.data('colorpicker').livePreview;
138 $(document).bind('mouseup', current, upHue);
139 $(document).bind('mousemove', current, moveHue);
140 },
141 moveHue = function (ev) {
142 change.apply(
143 ev.data.cal.data('colorpicker')
144 .fields
145 .eq(4)
146 .val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.y))))/150, 10))
147 .get(0),
148 [ev.data.preview]
149 );
150 return false;
151 },
152 upHue = function (ev) {
153 fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
154 fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
155 $(document).unbind('mouseup', upHue);
156 $(document).unbind('mousemove', moveHue);
157 return false;
158 },
159 downSelector = function (ev) {
160 var current = {
161 cal: $(this).parent(),
162 pos: $(this).offset()
163 };
164 current.preview = current.cal.data('colorpicker').livePreview;
165 $(document).bind('mouseup', current, upSelector);
166 $(document).bind('mousemove', current, moveSelector);
167 },
168 moveSelector = function (ev) {
169 change.apply(
170 ev.data.cal.data('colorpicker')
171 .fields
172 .eq(6)
173 .val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10))
174 .end()
175 .eq(5)
176 .val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10))
177 .get(0),
178 [ev.data.preview]
179 );
180 return false;
181 },
182 upSelector = function (ev) {
183 fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
184 fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
185 $(document).unbind('mouseup', upSelector);
186 $(document).unbind('mousemove', moveSelector);
187 return false;
188 },
189 enterSubmit = function (ev) {
190 $(this).addClass('colorpicker_focus');
191 },
192 leaveSubmit = function (ev) {
193 $(this).removeClass('colorpicker_focus');
194 },
195 clickSubmit = function (ev) {
196 var cal = $(this).parent();
197 var col = cal.data('colorpicker').color;
198 cal.data('colorpicker').origColor = col;
199 setCurrentColor(col, cal.get(0));
200 cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col));
201 },
202 show = function (ev) {
203 var cal = $('#' + $(this).data('colorpickerId'));
204 cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);
205 var pos = $(this).offset();
206 var viewPort = getViewport();
207 var top = pos.top + this.offsetHeight;
208 var left = pos.left;
209 if (top + 176 > viewPort.t + viewPort.h) {
210 top -= this.offsetHeight + 176;
211 }
212 if (left + 356 > viewPort.l + viewPort.w) {
213 left -= 356;
214 }
215 cal.css({left: left + 'px', top: top + 'px'});
216 if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
217 cal.show();
218 }
219 $(document).bind('mousedown', {cal: cal}, hide);
220 return false;
221 },
222 hide = function (ev) {
223 if (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) {
224 if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
225 ev.data.cal.hide();
226 }
227 $(document).unbind('mousedown', hide);
228 }
229 },
230 isChildOf = function(parentEl, el, container) {
231 if (parentEl == el) {
232 return true;
233 }
234 if (parentEl.contains) {
235 return parentEl.contains(el);
236 }
237 if ( parentEl.compareDocumentPosition ) {
238 return !!(parentEl.compareDocumentPosition(el) & 16);
239 }
240 var prEl = el.parentNode;
241 while(prEl && prEl != container) {
242 if (prEl == parentEl)
243 return true;
244 prEl = prEl.parentNode;
245 }
246 return false;
247 },
248 getViewport = function () {
249 var m = document.compatMode == 'CSS1Compat';
250 return {
251 l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
252 t : window.pageYOffset || (m ? document.documentElement.scrollTop : document.body.scrollTop),
253 w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth),
254 h : window.innerHeight || (m ? document.documentElement.clientHeight : document.body.clientHeight)
255 };
256 },
257 fixHSB = function (hsb) {
258 return {
259 h: Math.min(360, Math.max(0, hsb.h)),
260 s: Math.min(100, Math.max(0, hsb.s)),
261 b: Math.min(100, Math.max(0, hsb.b))
262 };
263 },
264 fixRGB = function (rgb) {
265 return {
266 r: Math.min(255, Math.max(0, rgb.r)),
267 g: Math.min(255, Math.max(0, rgb.g)),
268 b: Math.min(255, Math.max(0, rgb.b))
269 };
270 },
271 fixHex = function (hex) {
272 var len = 6 - hex.length;
273 if (len > 0) {
274 var o = [];
275 for (var i=0; i<len; i++) {
276 o.push('0');
277 }
278 o.push(hex);
279 hex = o.join('');
280 }
281 return hex;
282 },
283 HexToRGB = function (hex) {
284 var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
285 return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
286 },
287 HexToHSB = function (hex) {
288 return RGBToHSB(HexToRGB(hex));
289 },
290 RGBToHSB = function (rgb) {
291 var hsb = {};
292 hsb.b = Math.max(Math.max(rgb.r,rgb.g),rgb.b);
293 hsb.s = (hsb.b <= 0) ? 0 : Math.round(100*(hsb.b - Math.min(Math.min(rgb.r,rgb.g),rgb.b))/hsb.b);
294 hsb.b = Math.round((hsb.b /255)*100);
295 if((rgb.r==rgb.g) && (rgb.g==rgb.b)) hsb.h = 0;
296 else if(rgb.r>=rgb.g && rgb.g>=rgb.b) hsb.h = 60*(rgb.g-rgb.b)/(rgb.r-rgb.b);
297 else if(rgb.g>=rgb.r && rgb.r>=rgb.b) hsb.h = 60 + 60*(rgb.g-rgb.r)/(rgb.g-rgb.b);
298 else if(rgb.g>=rgb.b && rgb.b>=rgb.r) hsb.h = 120 + 60*(rgb.b-rgb.r)/(rgb.g-rgb.r);
299 else if(rgb.b>=rgb.g && rgb.g>=rgb.r) hsb.h = 180 + 60*(rgb.b-rgb.g)/(rgb.b-rgb.r);
300 else if(rgb.b>=rgb.r && rgb.r>=rgb.g) hsb.h = 240 + 60*(rgb.r-rgb.g)/(rgb.b-rgb.g);
301 else if(rgb.r>=rgb.b && rgb.b>=rgb.g) hsb.h = 300 + 60*(rgb.r-rgb.b)/(rgb.r-rgb.g);
302 else hsb.h = 0;
303 hsb.h = Math.round(hsb.h);
304 return hsb;
305 },
306 HSBToRGB = function (hsb) {
307 var rgb = {};
308 var h = Math.round(hsb.h);
309 var s = Math.round(hsb.s*255/100);
310 var v = Math.round(hsb.b*255/100);
311 if(s == 0) {
312 rgb.r = rgb.g = rgb.b = v;
313 } else {
314 var t1 = v;
315 var t2 = (255-s)*v/255;
316 var t3 = (t1-t2)*(h%60)/60;
317 if(h==360) h = 0;
318 if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
319 else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
320 else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
321 else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
322 else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
323 else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
324 else {rgb.r=0; rgb.g=0; rgb.b=0}
325 }
326 return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
327 },
328 RGBToHex = function (rgb) {
329 var hex = [
330 rgb.r.toString(16),
331 rgb.g.toString(16),
332 rgb.b.toString(16)
333 ];
334 $.each(hex, function (nr, val) {
335 if (val.length == 1) {
336 hex[nr] = '0' + val;
337 }
338 });
339 return hex.join('');
340 },
341 HSBToHex = function (hsb) {
342 return RGBToHex(HSBToRGB(hsb));
343 };
344 return {
345 init: function (options) {
346 options = $.extend({}, defaults, options||{});
347 if (typeof options.color == 'string') {
348 options.color = HexToHSB(options.color);
349 } else if (options.color.r != undefined && options.color.g != undefined && options.color.b != undefined) {
350 options.color = RGBToHSB(options.color);
351 } else if (options.color.h != undefined && options.color.s != undefined && options.color.b != undefined) {
352 options.color = fixHSB(options.color);
353 } else {
354 return this;
355 }
356 options.origColor = options.color;
357 return this.each(function () {
358 if (!$(this).data('colorpickerId')) {
359 var id = 'collorpicker_' + parseInt(Math.random() * 1000);
360 $(this).data('colorpickerId', id);
361 var cal = $(tpl).attr('id', id);
362 if (options.flat) {
363 cal.appendTo(this).show();
364 } else {
365 cal.appendTo(document.body);
366 }
367 options.fields = cal
368 .find('input')
369 .bind('keydown', keyDown)
370 .bind('change', change)
371 .bind('blur', blur)
372 .bind('focus', focus);
373 cal.find('span').bind('mousedown', downIncrement);
374 options.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector);
375 options.selectorIndic = options.selector.find('div div');
376 options.hue = cal.find('div.colorpicker_hue div');
377 cal.find('div.colorpicker_hue').bind('mousedown', downHue);
378 options.newColor = cal.find('div.colorpicker_new_color');
379 options.currentColor = cal.find('div.colorpicker_current_color');
380 cal.data('colorpicker', options);
381 cal.find('div.colorpicker_submit')
382 .bind('mouseenter', enterSubmit)
383 .bind('mouseleave', leaveSubmit)
384 .bind('click', clickSubmit);
385 fillRGBFields(options.color, cal.get(0));
386 fillHSBFields(options.color, cal.get(0));
387 fillHexFields(options.color, cal.get(0));
388 setHue(options.color, cal.get(0));
389 setSelector(options.color, cal.get(0));
390 setCurrentColor(options.color, cal.get(0));
391 setNewColor(options.color, cal.get(0));
392 if (options.flat) {
393 cal.css({
394 position: 'relative',
395 display: 'block'
396 });
397 } else {
398 $(this).bind(options.eventName, show);
399 }
400 }
401 });
402 },
403 showPicker: function() {
404 return this.each( function () {
405 if ($(this).data('colorpickerId')) {
406 show.apply(this);
407 }
408 });
409 },
410 hidePicker: function() {
411 return this.each( function () {
412 if ($(this).data('colorpickerId')) {
413 $('#' + $(this).data('colorpickerId')).hide();
414 }
415 });
416 },
417 setColor: function(col) {
418 if (typeof col == 'string') {
419 col = HexToHSB(col);
420 } else if (col.r != undefined && col.g != undefined && col.b != undefined) {
421 col = RGBToHSB(col);
422 } else if (col.h != undefined && col.s != undefined && col.b != undefined) {
423 col = fixHSB(col);
424 } else {
425 return this;
426 }
427 return this.each(function(){
428 if ($(this).data('colorpickerId')) {
429 var cal = $('#' + $(this).data('colorpickerId'));
430 cal.data('colorpicker').color = col;
431 cal.data('colorpicker').origColor = col;
432 fillRGBFields(col, cal.get(0));
433 fillHSBFields(col, cal.get(0));
434 fillHexFields(col, cal.get(0));
435 setHue(col, cal.get(0));
436 setSelector(col, cal.get(0));
437 setCurrentColor(col, cal.get(0));
438 setNewColor(col, cal.get(0));
439 }
440 });
441 }
442 };
443 }();
444 $.fn.extend({
445 ColorPicker: ColorPicker.init,
446 ColorPickerHide: ColorPicker.hide,
447 ColorPickerShow: ColorPicker.show,
448 ColorPickerSetColor: ColorPicker.setColor
449 });
450})(jQuery)
451
452// hex to decimal code found here and used with minor modification: http://www.telerik.com/community/forums/aspnet-ajax/colorpicker/calculate-color-contrast-in-javascript.aspx
453function getDec(hexChar) {
454 if (typeof hexChar == 'undefined') {
455 return 0;
456 }
457 switch(hexChar.toUpperCase()) {
458 case '0': return 0;
459 case '1': return 1;
460 case '2': return 2;
461 case '3': return 3;
462 case '4': return 4;
463 case '5': return 5;
464 case '6': return 6;
465 case '7': return 7;
466 case '8': return 8;
467 case '9': return 9;
468 case 'A': return 10;
469 case 'B': return 11;
470 case 'C': return 12;
471 case 'D': return 13;
472 case 'E': return 14;
473 case 'F': return 15;
474 };
475}
476function hexToDec(hex) {
477 var colorChars = hex.split('');
478 var dec = (getDec(colorChars[0]) * 16) + getDec(colorChars[1]);
479 return dec;
480}
481function getRGB(color) {
482 // remove the '#'
483 if (color.indexOf('#') != -1) {
484 color = color.substring(color.indexOf('#') + 1);
485 }
486 var r = hexToDec(color.substr(0, 2));
487 var g = hexToDec(color.substr(2, 2));
488 var b = hexToDec(color.substr(4, 2));
489 return { r: r, g: g, b: b};
490}
Note: See TracBrowser for help on using the repository browser.