source: other-projects/nz-flag-design/trunk/design-2d/Original editor.method.ac/method-draw/lib/jgraduate/jpicker.min.js@ 29468

Last change on this file since 29468 was 29468, checked in by sjs49, 9 years ago

Initial commit for editor.method.ac for flag design
  • Property svn:executable set to *
File size: 97.7 KB
Line 
1/*
2 * jPicker 1.1.6
3 *
4 * jQuery Plugin for Photoshop style color picker
5 *
6 * Copyright (c) 2010 Christopher T. Tillman
7 * Digital Magic Productions, Inc. (http://www.digitalmagicpro.com/)
8 * MIT style license, FREE to use, alter, copy, sell, and especially ENHANCE
9 *
10 * Painstakingly ported from John Dyers' excellent work on his own color picker based on the Prototype framework.
11 *
12 * John Dyers' website: (http://johndyer.name)
13 * Color Picker page: (http://johndyer.name/post/2007/09/PhotoShop-like-JavaScript-Color-Picker.aspx)
14 *
15 */
16(function($, version)
17{
18 Math.precision = function(value, precision)
19 {
20 if (precision === undefined) precision = 0;
21 return Math.round(value * Math.pow(10, precision)) / Math.pow(10, precision);
22 };
23 var Slider = // encapsulate slider functionality for the ColorMap and ColorBar - could be useful to use a jQuery UI draggable for this with certain extensions
24 function(bar, options)
25 {
26 var $this = this, // private properties, methods, and events - keep these variables and classes invisible to outside code
27 arrow = bar.find('img:first'), // the arrow image to drag
28 minX = 0,
29 maxX = 100,
30 rangeX = 100,
31 minY = 0,
32 maxY = 100,
33 rangeY = 100,
34 x = 0,
35 y = 0,
36 offset,
37 timeout,
38 changeEvents = new Array(),
39 fireChangeEvents =
40 function(context)
41 {
42 for (var i = 0; i < changeEvents.length; i++) changeEvents[i].call($this, $this, context);
43 },
44 mouseDown = // bind the mousedown to the bar not the arrow for quick snapping to the clicked location
45 function(e)
46 {
47 var off = bar.offset();
48 offset = { l: off.left | 0, t: off.top | 0 };
49 clearTimeout(timeout);
50 timeout = setTimeout( // using setTimeout for visual updates - once the style is updated the browser will re-render internally allowing the next Javascript to run
51 function()
52 {
53 setValuesFromMousePosition.call($this, e);
54 }, 0);
55 // Bind mousemove and mouseup event to the document so it responds when dragged of of the bar - we will unbind these when on mouseup to save processing
56 $(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp);
57 e.preventDefault(); // don't try to select anything or drag the image to the desktop
58 },
59 mouseMove = // set the values as the mouse moves
60 function(e)
61 {
62 clearTimeout(timeout);
63 timeout = setTimeout(
64 function()
65 {
66 setValuesFromMousePosition.call($this, e);
67 }, 0);
68 e.stopPropagation();
69 e.preventDefault();
70 return false;
71 },
72 mouseUp = // unbind the document events - they aren't needed when not dragging
73 function(e)
74 {
75 $(document).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove);
76 e.stopPropagation();
77 e.preventDefault();
78 return false;
79 },
80 setValuesFromMousePosition = // calculate mouse position and set value within the current range
81 function(e)
82 {
83 var locX = e.pageX - offset.l,
84 locY = e.pageY - offset.t,
85 barW = bar.w, // local copies for YUI compressor
86 barH = bar.h;
87 // keep the arrow within the bounds of the bar
88 if (locX < 0) locX = 0;
89 else if (locX > barW) locX = barW;
90 if (locY < 0) locY = 0;
91 else if (locY > barH) locY = barH;
92 val.call($this, 'xy', { x: ((locX / barW) * rangeX) + minX, y: ((locY / barH) * rangeY) + minY });
93 },
94 draw =
95 function()
96 {
97 var arrowOffsetX = 0,
98 arrowOffsetY = 0,
99 barW = bar.w,
100 barH = bar.h,
101 arrowW = arrow.w,
102 arrowH = arrow.h;
103 setTimeout(
104 function()
105 {
106 if (rangeX > 0) // range is greater than zero
107 {
108 // constrain to bounds
109 if (x == maxX) arrowOffsetX = barW;
110 else arrowOffsetX = ((x / rangeX) * barW) | 0;
111 }
112 if (rangeY > 0) // range is greater than zero
113 {
114 // constrain to bounds
115 if (y == maxY) arrowOffsetY = barH;
116 else arrowOffsetY = ((y / rangeY) * barH) | 0;
117 }
118 // if arrow width is greater than bar width, center arrow and prevent horizontal dragging
119 if (arrowW >= barW) arrowOffsetX = (barW >> 1) - (arrowW >> 1); // number >> 1 - superfast bitwise divide by two and truncate (move bits over one bit discarding lowest)
120 else arrowOffsetX -= arrowW >> 1;
121 // if arrow height is greater than bar height, center arrow and prevent vertical dragging
122 if (arrowH >= barH) arrowOffsetY = (barH >> 1) - (arrowH >> 1);
123 else arrowOffsetY -= arrowH >> 1;
124 // set the arrow position based on these offsets
125 arrow.css({ left: arrowOffsetX + 'px', top: arrowOffsetY + 'px' });
126 }, 0);
127 },
128 val =
129 function(name, value, context)
130 {
131 var set = value !== undefined;
132 if (!set)
133 {
134 if (name === undefined || name == null) name = 'xy';
135 switch (name.toLowerCase())
136 {
137 case 'x': return x;
138 case 'y': return y;
139 case 'xy':
140 default: return { x: x, y: y };
141 }
142 }
143 if (context != null && context == $this) return;
144 var changed = false,
145 newX,
146 newY;
147 if (name == null) name = 'xy';
148 switch (name.toLowerCase())
149 {
150 case 'x':
151 newX = value && (value.x && value.x | 0 || value | 0) || 0;
152 break;
153 case 'y':
154 newY = value && (value.y && value.y | 0 || value | 0) || 0;
155 break;
156 case 'xy':
157 default:
158 newX = value && value.x && value.x | 0 || 0;
159 newY = value && value.y && value.y | 0 || 0;
160 break;
161 }
162 if (newX != null)
163 {
164 if (newX < minX) newX = minX;
165 else if (newX > maxX) newX = maxX;
166 if (x != newX)
167 {
168 x = newX;
169 changed = true;
170 }
171 }
172 if (newY != null)
173 {
174 if (newY < minY) newY = minY;
175 else if (newY > maxY) newY = maxY;
176 if (y != newY)
177 {
178 y = newY;
179 changed = true;
180 }
181 }
182 changed && fireChangeEvents.call($this, context || $this);
183 },
184 range =
185 function (name, value)
186 {
187 var set = value !== undefined;
188 if (!set)
189 {
190 if (name === undefined || name == null) name = 'all';
191 switch (name.toLowerCase())
192 {
193 case 'minx': return minX;
194 case 'maxx': return maxX;
195 case 'rangex': return { minX: minX, maxX: maxX, rangeX: rangeX };
196 case 'miny': return minY;
197 case 'maxy': return maxY;
198 case 'rangey': return { minY: minY, maxY: maxY, rangeY: rangeY };
199 case 'all':
200 default: return { minX: minX, maxX: maxX, rangeX: rangeX, minY: minY, maxY: maxY, rangeY: rangeY };
201 }
202 }
203 var changed = false,
204 newMinX,
205 newMaxX,
206 newMinY,
207 newMaxY;
208 if (name == null) name = 'all';
209 switch (name.toLowerCase())
210 {
211 case 'minx':
212 newMinX = value && (value.minX && value.minX | 0 || value | 0) || 0;
213 break;
214 case 'maxx':
215 newMaxX = value && (value.maxX && value.maxX | 0 || value | 0) || 0;
216 break;
217 case 'rangex':
218 newMinX = value && value.minX && value.minX | 0 || 0;
219 newMaxX = value && value.maxX && value.maxX | 0 || 0;
220 break;
221 case 'miny':
222 newMinY = value && (value.minY && value.minY | 0 || value | 0) || 0;
223 break;
224 case 'maxy':
225 newMaxY = value && (value.maxY && value.maxY | 0 || value | 0) || 0;
226 break;
227 case 'rangey':
228 newMinY = value && value.minY && value.minY | 0 || 0;
229 newMaxY = value && value.maxY && value.maxY | 0 || 0;
230 break;
231 case 'all':
232 default:
233 newMinX = value && value.minX && value.minX | 0 || 0;
234 newMaxX = value && value.maxX && value.maxX | 0 || 0;
235 newMinY = value && value.minY && value.minY | 0 || 0;
236 newMaxY = value && value.maxY && value.maxY | 0 || 0;
237 break;
238 }
239 if (newMinX != null && minX != newMinX)
240 {
241 minX = newMinX;
242 rangeX = maxX - minX;
243 }
244 if (newMaxX != null && maxX != newMaxX)
245 {
246 maxX = newMaxX;
247 rangeX = maxX - minX;
248 }
249 if (newMinY != null && minY != newMinY)
250 {
251 minY = newMinY;
252 rangeY = maxY - minY;
253 }
254 if (newMaxY != null && maxY != newMaxY)
255 {
256 maxY = newMaxY;
257 rangeY = maxY - minY;
258 }
259 },
260 bind =
261 function (callback)
262 {
263 if ($.isFunction(callback)) changeEvents.push(callback);
264 },
265 unbind =
266 function (callback)
267 {
268 if (!$.isFunction(callback)) return;
269 var i;
270 while ((i = $.inArray(callback, changeEvents)) != -1) changeEvents.splice(i, 1);
271 },
272 destroy =
273 function()
274 {
275 // unbind all possible events and null objects
276 $(document).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove);
277 bar.unbind('mousedown', mouseDown);
278 bar = null;
279 arrow = null;
280 changeEvents = null;
281 };
282 $.extend(true, $this, // public properties, methods, and event bindings - these we need to access from other controls
283 {
284 val: val,
285 range: range,
286 bind: bind,
287 unbind: unbind,
288 destroy: destroy
289 });
290 // initialize this control
291 arrow.src = options.arrow && options.arrow.image;
292 arrow.w = options.arrow && options.arrow.width || arrow.width();
293 arrow.h = options.arrow && options.arrow.height || arrow.height();
294 bar.w = options.map && options.map.width || bar.width();
295 bar.h = options.map && options.map.height || bar.height();
296 // bind mousedown event
297 bar.bind('mousedown', mouseDown);
298 bind.call($this, draw);
299 },
300 ColorValuePicker = // controls for all the input elements for the typing in color values
301 function(picker, color, bindedHex, alphaPrecision)
302 {
303 var $this = this, // private properties and methods
304 inputs = picker.find('td.Text input'),
305 red = inputs.eq(3),
306 green = inputs.eq(4),
307 blue = inputs.eq(5),
308 alpha = inputs.length > 7 ? inputs.eq(6) : null,
309 hue = inputs.eq(0),
310 saturation = inputs.eq(1),
311 value = inputs.eq(2),
312 hex = inputs.eq(inputs.length > 7 ? 7 : 6),
313 ahex = inputs.length > 7 ? inputs.eq(8) : null,
314 keyDown = // input box key down - use arrows to alter color
315 function(e)
316 {
317 if (e.target.value == '' && e.target != hex.get(0) && (bindedHex != null && e.target != bindedHex.get(0) || bindedHex == null)) return;
318 if (!validateKey(e)) return e;
319 switch (e.target)
320 {
321 case red.get(0):
322 switch (e.keyCode)
323 {
324 case 38:
325 red.val(setValueInRange.call($this, (red.val() << 0) + 1, 0, 255));
326 color.val('r', red.val(), e.target);
327 return false;
328 case 40:
329 red.val(setValueInRange.call($this, (red.val() << 0) - 1, 0, 255));
330 color.val('r', red.val(), e.target);
331 return false;
332 }
333 break;
334 case green.get(0):
335 switch (e.keyCode)
336 {
337 case 38:
338 green.val(setValueInRange.call($this, (green.val() << 0) + 1, 0, 255));
339 color.val('g', green.val(), e.target);
340 return false;
341 case 40:
342 green.val(setValueInRange.call($this, (green.val() << 0) - 1, 0, 255));
343 color.val('g', green.val(), e.target);
344 return false;
345 }
346 break;
347 case blue.get(0):
348 switch (e.keyCode)
349 {
350 case 38:
351 blue.val(setValueInRange.call($this, (blue.val() << 0) + 1, 0, 255));
352 color.val('b', blue.val(), e.target);
353 return false;
354 case 40:
355 blue.val(setValueInRange.call($this, (blue.val() << 0) - 1, 0, 255));
356 color.val('b', blue.val(), e.target);
357 return false;
358 }
359 break;
360 case alpha && alpha.get(0):
361 switch (e.keyCode)
362 {
363 case 38:
364 alpha.val(setValueInRange.call($this, parseFloat(alpha.val()) + 1, 0, 100));
365 color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target);
366 return false;
367 case 40:
368 alpha.val(setValueInRange.call($this, parseFloat(alpha.val()) - 1, 0, 100));
369 color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target);
370 return false;
371 }
372 break;
373 case hue.get(0):
374 switch (e.keyCode)
375 {
376 case 38:
377 hue.val(setValueInRange.call($this, (hue.val() << 0) + 1, 0, 360));
378 color.val('h', hue.val(), e.target);
379 return false;
380 case 40:
381 hue.val(setValueInRange.call($this, (hue.val() << 0) - 1, 0, 360));
382 color.val('h', hue.val(), e.target);
383 return false;
384 }
385 break;
386 case saturation.get(0):
387 switch (e.keyCode)
388 {
389 case 38:
390 saturation.val(setValueInRange.call($this, (saturation.val() << 0) + 1, 0, 100));
391 color.val('s', saturation.val(), e.target);
392 return false;
393 case 40:
394 saturation.val(setValueInRange.call($this, (saturation.val() << 0) - 1, 0, 100));
395 color.val('s', saturation.val(), e.target);
396 return false;
397 }
398 break;
399 case value.get(0):
400 switch (e.keyCode)
401 {
402 case 38:
403 value.val(setValueInRange.call($this, (value.val() << 0) + 1, 0, 100));
404 color.val('v', value.val(), e.target);
405 return false;
406 case 40:
407 value.val(setValueInRange.call($this, (value.val() << 0) - 1, 0, 100));
408 color.val('v', value.val(), e.target);
409 return false;
410 }
411 break;
412 }
413 },
414 keyUp = // input box key up - validate value and set color
415 function(e)
416 {
417 if (e.target.value == '' && e.target != hex.get(0) && (bindedHex != null && e.target != bindedHex.get(0) || bindedHex == null)) return;
418 if (!validateKey(e)) return e;
419 switch (e.target)
420 {
421 case red.get(0):
422 red.val(setValueInRange.call($this, red.val(), 0, 255));
423 color.val('r', red.val(), e.target);
424 break;
425 case green.get(0):
426 green.val(setValueInRange.call($this, green.val(), 0, 255));
427 color.val('g', green.val(), e.target);
428 break;
429 case blue.get(0):
430 blue.val(setValueInRange.call($this, blue.val(), 0, 255));
431 color.val('b', blue.val(), e.target);
432 break;
433 case alpha && alpha.get(0):
434 alpha.val(setValueInRange.call($this, alpha.val(), 0, 100));
435 color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target);
436 break;
437 case hue.get(0):
438 hue.val(setValueInRange.call($this, hue.val(), 0, 360));
439 color.val('h', hue.val(), e.target);
440 break;
441 case saturation.get(0):
442 saturation.val(setValueInRange.call($this, saturation.val(), 0, 100));
443 color.val('s', saturation.val(), e.target);
444 break;
445 case value.get(0):
446 value.val(setValueInRange.call($this, value.val(), 0, 100));
447 color.val('v', value.val(), e.target);
448 break;
449 case hex.get(0):
450 hex.val(hex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 6));
451 bindedHex && bindedHex.val(hex.val());
452 color.val('hex', hex.val() != '' ? hex.val() : null, e.target);
453 break;
454 case bindedHex && bindedHex.get(0):
455 bindedHex.val(bindedHex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 6));
456 hex.val(bindedHex.val());
457 color.val('hex', bindedHex.val() != '' ? bindedHex.val() : null, e.target);
458 break;
459 case ahex && ahex.get(0):
460 ahex.val(ahex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 2));
461 color.val('a', ahex.val() != null ? parseInt(ahex.val(), 16) : null, e.target);
462 break;
463 }
464 },
465 blur = // input box blur - reset to original if value empty
466 function(e)
467 {
468 if (color.val() != null)
469 {
470 switch (e.target)
471 {
472 case red.get(0): red.val(color.val('r')); break;
473 case green.get(0): green.val(color.val('g')); break;
474 case blue.get(0): blue.val(color.val('b')); break;
475 case alpha && alpha.get(0): alpha.val(Math.precision((color.val('a') * 100) / 255, alphaPrecision)); break;
476 case hue.get(0): hue.val(color.val('h')); break;
477 case saturation.get(0): saturation.val(color.val('s')); break;
478 case value.get(0): value.val(color.val('v')); break;
479 case hex.get(0):
480 case bindedHex && bindedHex.get(0):
481 hex.val(color.val('hex'));
482 bindedHex && bindedHex.val(color.val('hex'));
483 break;
484 case ahex && ahex.get(0): ahex.val(color.val('ahex').substring(6)); break;
485 }
486 }
487 },
488 validateKey = // validate key
489 function(e)
490 {
491 switch(e.keyCode)
492 {
493 case 9:
494 case 16:
495 case 29:
496 case 37:
497 case 39:
498 return false;
499 case 'c'.charCodeAt():
500 case 'v'.charCodeAt():
501 if (e.ctrlKey) return false;
502 }
503 return true;
504 },
505 setValueInRange = // constrain value within range
506 function(value, min, max)
507 {
508 if (value == '' || isNaN(value)) return min;
509 if (value > max) return max;
510 if (value < min) return min;
511 return value;
512 },
513 colorChanged =
514 function(ui, context)
515 {
516 var all = ui.val('all');
517 if (context != red.get(0)) red.val(all != null ? all.r : '');
518 if (context != green.get(0)) green.val(all != null ? all.g : '');
519 if (context != blue.get(0)) blue.val(all != null ? all.b : '');
520 if (alpha && context != alpha.get(0)) alpha.val(all != null ? Math.precision((all.a * 100) / 255, alphaPrecision) : '');
521 if (context != hue.get(0)) hue.val(all != null ? all.h : '');
522 if (context != saturation.get(0)) saturation.val(all != null ? all.s : '');
523 if (context != value.get(0)) value.val(all != null ? all.v : '');
524 if (context != hex.get(0) && (bindedHex && context != bindedHex.get(0) || !bindedHex)) hex.val(all != null ? all.hex : '');
525 if (bindedHex && context != bindedHex.get(0) && context != hex.get(0)) bindedHex.val(all != null ? all.hex : '');
526 if (ahex && context != ahex.get(0)) ahex.val(all != null ? all.ahex.substring(6) : '');
527 },
528 destroy =
529 function()
530 {
531 // unbind all events and null objects
532 red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).unbind('keyup', keyUp).unbind('blur', blur);
533 red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).unbind('keydown', keyDown);
534 color.unbind(colorChanged);
535 red = null;
536 green = null;
537 blue = null;
538 alpha = null;
539 hue = null;
540 saturation = null;
541 value = null;
542 hex = null;
543 ahex = null;
544 };
545 $.extend(true, $this, // public properties and methods
546 {
547 destroy: destroy
548 });
549 red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).bind('keyup', keyUp).bind('blur', blur);
550 red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).bind('keydown', keyDown);
551 color.bind(colorChanged);
552 };
553 $.jPicker =
554 {
555 List: [], // array holding references to each active instance of the control
556 Color: // color object - we will be able to assign by any color space type or retrieve any color space info
557 // we want this public so we can optionally assign new color objects to initial values using inputs other than a string hex value (also supported)
558 function(init)
559 {
560 var $this = this,
561 r,
562 g,
563 b,
564 a,
565 h,
566 s,
567 v,
568 changeEvents = new Array(),
569 fireChangeEvents =
570 function(context)
571 {
572 for (var i = 0; i < changeEvents.length; i++) changeEvents[i].call($this, $this, context);
573 },
574 val =
575 function(name, value, context)
576 {
577 var set = value !== undefined;
578 if (!set)
579 {
580 if (name === undefined || name == null || name == '') name = 'all';
581 if (r == null) return null;
582 switch (name.toLowerCase())
583 {
584 case 'ahex': return ColorMethods.rgbaToHex({ r: r, g: g, b: b, a: a });
585 case 'hex': return val('ahex').substring(0, 6);
586 case 'all': return { r: r, g: g, b: b, a: a, h: h, s: s, v: v, hex: val.call($this, 'hex'), ahex: val.call($this, 'ahex') };
587 default:
588 var ret={};
589 for (var i = 0; i < name.length; i++)
590 {
591 switch (name.charAt(i))
592 {
593 case 'r':
594 if (name.length == 1) ret = r;
595 else ret.r = r;
596 break;
597 case 'g':
598 if (name.length == 1) ret = g;
599 else ret.g = g;
600 break;
601 case 'b':
602 if (name.length == 1) ret = b;
603 else ret.b = b;
604 break;
605 case 'a':
606 if (name.length == 1) ret = a;
607 else ret.a = a;
608 break;
609 case 'h':
610 if (name.length == 1) ret = h;
611 else ret.h = h;
612 break;
613 case 's':
614 if (name.length == 1) ret = s;
615 else ret.s = s;
616 break;
617 case 'v':
618 if (name.length == 1) ret = v;
619 else ret.v = v;
620 break;
621 }
622 }
623 return ret == {} ? val.call($this, 'all') : ret;
624 break;
625 }
626 }
627 if (context != null && context == $this) return;
628 var changed = false;
629 if (name == null) name = '';
630 if (value == null)
631 {
632 if (r != null)
633 {
634 r = null;
635 changed = true;
636 }
637 if (g != null)
638 {
639 g = null;
640 changed = true;
641 }
642 if (b != null)
643 {
644 b = null;
645 changed = true;
646 }
647 if (a != null)
648 {
649 a = null;
650 changed = true;
651 }
652 if (h != null)
653 {
654 h = null;
655 changed = true;
656 }
657 if (s != null)
658 {
659 s = null;
660 changed = true;
661 }
662 if (v != null)
663 {
664 v = null;
665 changed = true;
666 }
667 changed && fireChangeEvents.call($this, context || $this);
668 return;
669 }
670 switch (name.toLowerCase())
671 {
672 case 'ahex':
673 case 'hex':
674 var ret = ColorMethods.hexToRgba(value && (value.ahex || value.hex) || value || '00000000');
675 val.call($this, 'rgba', { r: ret.r, g: ret.g, b: ret.b, a: name == 'ahex' ? ret.a : a != null ? a : 255 }, context);
676 break;
677 default:
678 if (value && (value.ahex != null || value.hex != null))
679 {
680 val.call($this, 'ahex', value.ahex || value.hex || '00000000', context);
681 return;
682 }
683 var newV = {}, rgb = false, hsv = false;
684 if (value.r !== undefined && !name.indexOf('r') == -1) name += 'r';
685 if (value.g !== undefined && !name.indexOf('g') == -1) name += 'g';
686 if (value.b !== undefined && !name.indexOf('b') == -1) name += 'b';
687 if (value.a !== undefined && !name.indexOf('a') == -1) name += 'a';
688 if (value.h !== undefined && !name.indexOf('h') == -1) name += 'h';
689 if (value.s !== undefined && !name.indexOf('s') == -1) name += 's';
690 if (value.v !== undefined && !name.indexOf('v') == -1) name += 'v';
691 for (var i = 0; i < name.length; i++)
692 {
693 switch (name.charAt(i))
694 {
695 case 'r':
696 if (hsv) continue;
697 rgb = true;
698 newV.r = value && value.r && value.r | 0 || value && value | 0 || 0;
699 if (newV.r < 0) newV.r = 0;
700 else if (newV.r > 255) newV.r = 255;
701 if (r != newV.r)
702 {
703 r = newV.r;
704 changed = true;
705 }
706 break;
707 case 'g':
708 if (hsv) continue;
709 rgb = true;
710 newV.g = value && value.g && value.g | 0 || value && value | 0 || 0;
711 if (newV.g < 0) newV.g = 0;
712 else if (newV.g > 255) newV.g = 255;
713 if (g != newV.g)
714 {
715 g = newV.g;
716 changed = true;
717 }
718 break;
719 case 'b':
720 if (hsv) continue;
721 rgb = true;
722 newV.b = value && value.b && value.b | 0 || value && value | 0 || 0;
723 if (newV.b < 0) newV.b = 0;
724 else if (newV.b > 255) newV.b = 255;
725 if (b != newV.b)
726 {
727 b = newV.b;
728 changed = true;
729 }
730 break;
731 case 'a':
732 newV.a = value && value.a != null ? value.a | 0 : value != null ? value | 0 : 255;
733 if (newV.a < 0) newV.a = 0;
734 else if (newV.a > 255) newV.a = 255;
735 if (a != newV.a)
736 {
737 a = newV.a;
738 changed = true;
739 }
740 break;
741 case 'h':
742 if (rgb) continue;
743 hsv = true;
744 newV.h = value && value.h && value.h | 0 || value && value | 0 || 0;
745 if (newV.h < 0) newV.h = 0;
746 else if (newV.h > 360) newV.h = 360;
747 if (h != newV.h)
748 {
749 h = newV.h;
750 changed = true;
751 }
752 break;
753 case 's':
754 if (rgb) continue;
755 hsv = true;
756 newV.s = value && value.s != null ? value.s | 0 : value != null ? value | 0 : 100;
757 if (newV.s < 0) newV.s = 0;
758 else if (newV.s > 100) newV.s = 100;
759 if (s != newV.s)
760 {
761 s = newV.s;
762 changed = true;
763 }
764 break;
765 case 'v':
766 if (rgb) continue;
767 hsv = true;
768 newV.v = value && value.v != null ? value.v | 0 : value != null ? value | 0 : 100;
769 if (newV.v < 0) newV.v = 0;
770 else if (newV.v > 100) newV.v = 100;
771 if (v != newV.v)
772 {
773 v = newV.v;
774 changed = true;
775 }
776 break;
777 }
778 }
779 if (changed)
780 {
781 if (rgb)
782 {
783 r = r || 0;
784 g = g || 0;
785 b = b || 0;
786 var ret = ColorMethods.rgbToHsv({ r: r, g: g, b: b });
787 h = ret.h;
788 s = ret.s;
789 v = ret.v;
790 }
791 else if (hsv)
792 {
793 h = h || 0;
794 s = s != null ? s : 100;
795 v = v != null ? v : 100;
796 var ret = ColorMethods.hsvToRgb({ h: h, s: s, v: v });
797 r = ret.r;
798 g = ret.g;
799 b = ret.b;
800 }
801 a = a != null ? a : 255;
802 fireChangeEvents.call($this, context || $this);
803 }
804 break;
805 }
806 },
807 bind =
808 function(callback)
809 {
810 if ($.isFunction(callback)) changeEvents.push(callback);
811 },
812 unbind =
813 function(callback)
814 {
815 if (!$.isFunction(callback)) return;
816 var i;
817 while ((i = $.inArray(callback, changeEvents)) != -1) changeEvents.splice(i, 1);
818 },
819 destroy =
820 function()
821 {
822 changeEvents = null;
823 }
824 $.extend(true, $this, // public properties and methods
825 {
826 val: val,
827 bind: bind,
828 unbind: unbind,
829 destroy: destroy
830 });
831 if (init)
832 {
833 if (init.ahex != null) val('ahex', init);
834 else if (init.hex != null) val((init.a != null ? 'a' : '') + 'hex', init.a != null ? { ahex: init.hex + ColorMethods.intToHex(init.a) } : init);
835 else if (init.r != null && init.g != null && init.b != null) val('rgb' + (init.a != null ? 'a' : ''), init);
836 else if (init.h != null && init.s != null && init.v != null) val('hsv' + (init.a != null ? 'a' : ''), init);
837 }
838 },
839 ColorMethods: // color conversion methods - make public to give use to external scripts
840 {
841 hexToRgba:
842 function(hex)
843 {
844 hex = this.validateHex(hex);
845 if (hex == '') return { r: null, g: null, b: null, a: null };
846 var r = '00', g = '00', b = '00', a = '255';
847 if (hex.length == 6) hex += 'ff';
848 if (hex.length > 6)
849 {
850 r = hex.substring(0, 2);
851 g = hex.substring(2, 4);
852 b = hex.substring(4, 6);
853 a = hex.substring(6, hex.length);
854 }
855 else
856 {
857 if (hex.length > 4)
858 {
859 r = hex.substring(4, hex.length);
860 hex = hex.substring(0, 4);
861 }
862 if (hex.length > 2)
863 {
864 g = hex.substring(2, hex.length);
865 hex = hex.substring(0, 2);
866 }
867 if (hex.length > 0) b = hex.substring(0, hex.length);
868 }
869 return { r: this.hexToInt(r), g: this.hexToInt(g), b: this.hexToInt(b), a: this.hexToInt(a) };
870 },
871 validateHex:
872 function(hex)
873 {
874 if (typeof hex == "object") return '';
875 hex = hex.toLowerCase().replace(/[^a-f0-9]/g, '');
876 if (hex.length > 8) hex = hex.substring(0, 8);
877 return hex;
878 },
879 rgbaToHex:
880 function(rgba)
881 {
882 return this.intToHex(rgba.r) + this.intToHex(rgba.g) + this.intToHex(rgba.b) + this.intToHex(rgba.a);
883 },
884 intToHex:
885 function(dec)
886 {
887 var result = (dec | 0).toString(16);
888 if (result.length == 1) result = ('0' + result);
889 return result.toLowerCase();
890 },
891 hexToInt:
892 function(hex)
893 {
894 return parseInt(hex, 16);
895 },
896 rgbToHsv:
897 function(rgb)
898 {
899 var r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255, hsv = { h: 0, s: 0, v: 0 }, min = 0, max = 0, delta;
900 if (r >= g && r >= b)
901 {
902 max = r;
903 min = g > b ? b : g;
904 }
905 else if (g >= b && g >= r)
906 {
907 max = g;
908 min = r > b ? b : r;
909 }
910 else
911 {
912 max = b;
913 min = g > r ? r : g;
914 }
915 hsv.v = max;
916 hsv.s = max ? (max - min) / max : 0;
917 if (!hsv.s) hsv.h = 0;
918 else
919 {
920 delta = max - min;
921 if (r == max) hsv.h = (g - b) / delta;
922 else if (g == max) hsv.h = 2 + (b - r) / delta;
923 else hsv.h = 4 + (r - g) / delta;
924 hsv.h = parseInt(hsv.h * 60);
925 if (hsv.h < 0) hsv.h += 360;
926 }
927 hsv.s = (hsv.s * 100) | 0;
928 hsv.v = (hsv.v * 100) | 0;
929 return hsv;
930 },
931 hsvToRgb:
932 function(hsv)
933 {
934 var rgb = { r: 0, g: 0, b: 0, a: 100 }, h = hsv.h, s = hsv.s, v = hsv.v;
935 if (s == 0)
936 {
937 if (v == 0) rgb.r = rgb.g = rgb.b = 0;
938 else rgb.r = rgb.g = rgb.b = (v * 255 / 100) | 0;
939 }
940 else
941 {
942 if (h == 360) h = 0;
943 h /= 60;
944 s = s / 100;
945 v = v / 100;
946 var i = h | 0,
947 f = h - i,
948 p = v * (1 - s),
949 q = v * (1 - (s * f)),
950 t = v * (1 - (s * (1 - f)));
951 switch (i)
952 {
953 case 0:
954 rgb.r = v;
955 rgb.g = t;
956 rgb.b = p;
957 break;
958 case 1:
959 rgb.r = q;
960 rgb.g = v;
961 rgb.b = p;
962 break;
963 case 2:
964 rgb.r = p;
965 rgb.g = v;
966 rgb.b = t;
967 break;
968 case 3:
969 rgb.r = p;
970 rgb.g = q;
971 rgb.b = v;
972 break;
973 case 4:
974 rgb.r = t;
975 rgb.g = p;
976 rgb.b = v;
977 break;
978 case 5:
979 rgb.r = v;
980 rgb.g = p;
981 rgb.b = q;
982 break;
983 }
984 rgb.r = (rgb.r * 255) | 0;
985 rgb.g = (rgb.g * 255) | 0;
986 rgb.b = (rgb.b * 255) | 0;
987 }
988 return rgb;
989 }
990 }
991 };
992 var Color = $.jPicker.Color, List = $.jPicker.List, ColorMethods = $.jPicker.ColorMethods; // local copies for YUI compressor
993 $.fn.jPicker =
994 function(options)
995 {
996 var $arguments = arguments;
997 return this.each(
998 function()
999 {
1000 var $this = this, settings = $.extend(true, {}, $.fn.jPicker.defaults, options); // local copies for YUI compressor
1001 if ($($this).get(0).nodeName.toLowerCase() == 'input') // Add color picker icon if binding to an input element and bind the events to the input
1002 {
1003 $.extend(true, settings,
1004 {
1005 window:
1006 {
1007 bindToInput: true,
1008 expandable: true,
1009 input: $($this)
1010 }
1011 });
1012 if($($this).val()=='')
1013 {
1014 settings.color.active = new Color({ hex: null });
1015 settings.color.current = new Color({ hex: null });
1016 }
1017 else if (ColorMethods.validateHex($($this).val()))
1018 {
1019 settings.color.active = new Color({ hex: $($this).val(), a: settings.color.active.val('a') });
1020 settings.color.current = new Color({ hex: $($this).val(), a: settings.color.active.val('a') });
1021 }
1022 }
1023 if (settings.window.expandable)
1024 $($this).after('<span class="jPicker"><span class="Icon"><span class="Color">&nbsp;</span><span class="Alpha">&nbsp;</span><span class="Image" title="Click To Open Color Picker">&nbsp;</span><span class="Container">&nbsp;</span></span></span>');
1025 else settings.window.liveUpdate = false; // Basic control binding for inline use - You will need to override the liveCallback or commitCallback function to retrieve results
1026 var isLessThanIE7 = parseFloat(navigator.appVersion.split('MSIE')[1]) < 7 && document.body.filters, // needed to run the AlphaImageLoader function for IE6
1027 container = null,
1028 colorMapDiv = null,
1029 colorBarDiv = null,
1030 colorMapL1 = null, // different layers of colorMap and colorBar
1031 colorMapL2 = null,
1032 colorMapL3 = null,
1033 colorBarL1 = null,
1034 colorBarL2 = null,
1035 colorBarL3 = null,
1036 colorBarL4 = null,
1037 colorBarL5 = null,
1038 colorBarL6 = null,
1039 colorMap = null, // color maps
1040 colorBar = null,
1041 colorPicker = null,
1042 elementStartX = null, // Used to record the starting css positions for dragging the control
1043 elementStartY = null,
1044 pageStartX = null, // Used to record the mousedown coordinates for dragging the control
1045 pageStartY = null,
1046 activePreview = null, // color boxes above the radio buttons
1047 currentPreview = null,
1048 okButton = null,
1049 cancelButton = null,
1050 grid = null, // preset colors grid
1051 iconColor = null, // iconColor for popup icon
1052 iconAlpha = null, // iconAlpha for popup icon
1053 iconImage = null, // iconImage popup icon
1054 moveBar = null, // drag bar
1055 setColorMode = // set color mode and update visuals for the new color mode
1056 function(colorMode)
1057 {
1058 var active = color.active, // local copies for YUI compressor
1059 clientPath = images.clientPath,
1060 hex = active.val('hex'),
1061 rgbMap,
1062 rgbBar;
1063 settings.color.mode = colorMode;
1064 switch (colorMode)
1065 {
1066 case 'h':
1067 setTimeout(
1068 function()
1069 {
1070 setBG.call($this, colorMapDiv, 'transparent');
1071 setImgLoc.call($this, colorMapL1, 0);
1072 setAlpha.call($this, colorMapL1, 100);
1073 setImgLoc.call($this, colorMapL2, 260);
1074 setAlpha.call($this, colorMapL2, 100);
1075 setBG.call($this, colorBarDiv, 'transparent');
1076 setImgLoc.call($this, colorBarL1, 0);
1077 setAlpha.call($this, colorBarL1, 100);
1078 setImgLoc.call($this, colorBarL2, 260);
1079 setAlpha.call($this, colorBarL2, 100);
1080 setImgLoc.call($this, colorBarL3, 260);
1081 setAlpha.call($this, colorBarL3, 100);
1082 setImgLoc.call($this, colorBarL4, 260);
1083 setAlpha.call($this, colorBarL4, 100);
1084 setImgLoc.call($this, colorBarL6, 260);
1085 setAlpha.call($this, colorBarL6, 100);
1086 }, 0);
1087 colorMap.range('all', { minX: 0, maxX: 100, minY: 0, maxY: 100 });
1088 colorBar.range('rangeY', { minY: 0, maxY: 360 });
1089 if (active.val('ahex') == null) break;
1090 colorMap.val('xy', { x: active.val('s'), y: 100 - active.val('v') }, colorMap);
1091 colorBar.val('y', 360 - active.val('h'), colorBar);
1092 break;
1093 case 's':
1094 setTimeout(
1095 function()
1096 {
1097 setBG.call($this, colorMapDiv, 'transparent');
1098 setImgLoc.call($this, colorMapL1, -260);
1099 setImgLoc.call($this, colorMapL2, -520);
1100 setImgLoc.call($this, colorBarL1, -260);
1101 setImgLoc.call($this, colorBarL2, -520);
1102 setImgLoc.call($this, colorBarL6, 260);
1103 setAlpha.call($this, colorBarL6, 100);
1104 }, 0);
1105 colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 });
1106 colorBar.range('rangeY', { minY: 0, maxY: 100 });
1107 if (active.val('ahex') == null) break;
1108 colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('v') }, colorMap);
1109 colorBar.val('y', 100 - active.val('s'), colorBar);
1110 break;
1111 case 'v':
1112 setTimeout(
1113 function()
1114 {
1115 setBG.call($this, colorMapDiv, '000000');
1116 setImgLoc.call($this, colorMapL1, -780);
1117 setImgLoc.call($this, colorMapL2, 260);
1118 setBG.call($this, colorBarDiv, hex);
1119 setImgLoc.call($this, colorBarL1, -520);
1120 setImgLoc.call($this, colorBarL2, 260);
1121 setAlpha.call($this, colorBarL2, 100);
1122 setImgLoc.call($this, colorBarL6, 260);
1123 setAlpha.call($this, colorBarL6, 100);
1124 }, 0);
1125 colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 });
1126 colorBar.range('rangeY', { minY: 0, maxY: 100 });
1127 if (active.val('ahex') == null) break;
1128 colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('s') }, colorMap);
1129 colorBar.val('y', 100 - active.val('v'), colorBar);
1130 break;
1131 case 'r':
1132 rgbMap = -1040;
1133 rgbBar = -780;
1134 colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 });
1135 colorBar.range('rangeY', { minY: 0, maxY: 255 });
1136 if (active.val('ahex') == null) break;
1137 colorMap.val('xy', { x: active.val('b'), y: 255 - active.val('g') }, colorMap);
1138 colorBar.val('y', 255 - active.val('r'), colorBar);
1139 break;
1140 case 'g':
1141 rgbMap = -1560;
1142 rgbBar = -1820;
1143 colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 });
1144 colorBar.range('rangeY', { minY: 0, maxY: 255 });
1145 if (active.val('ahex') == null) break;
1146 colorMap.val('xy', { x: active.val('b'), y: 255 - active.val('r') }, colorMap);
1147 colorBar.val('y', 255 - active.val('g'), colorBar);
1148 break;
1149 case 'b':
1150 rgbMap = -2080;
1151 rgbBar = -2860;
1152 colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 });
1153 colorBar.range('rangeY', { minY: 0, maxY: 255 });
1154 if (active.val('ahex') == null) break;
1155 colorMap.val('xy', { x: active.val('r'), y: 255 - active.val('g') }, colorMap);
1156 colorBar.val('y', 255 - active.val('b'), colorBar);
1157 break;
1158 case 'a':
1159 setTimeout(
1160 function()
1161 {
1162 setBG.call($this, colorMapDiv, 'transparent');
1163 setImgLoc.call($this, colorMapL1, -260);
1164 setImgLoc.call($this, colorMapL2, -520);
1165 setImgLoc.call($this, colorBarL1, 260);
1166 setImgLoc.call($this, colorBarL2, 260);
1167 setAlpha.call($this, colorBarL2, 100);
1168 setImgLoc.call($this, colorBarL6, 0);
1169 setAlpha.call($this, colorBarL6, 100);
1170 }, 0);
1171 colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 });
1172 colorBar.range('rangeY', { minY: 0, maxY: 255 });
1173 if (active.val('ahex') == null) break;
1174 colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('v') }, colorMap);
1175 colorBar.val('y', 255 - active.val('a'), colorBar);
1176 break;
1177 default:
1178 throw ('Invalid Mode');
1179 break;
1180 }
1181 switch (colorMode)
1182 {
1183 case 'h':
1184 break;
1185 case 's':
1186 case 'v':
1187 case 'a':
1188 setTimeout(
1189 function()
1190 {
1191 setAlpha.call($this, colorMapL1, 100);
1192 setAlpha.call($this, colorBarL1, 100);
1193 setImgLoc.call($this, colorBarL3, 260);
1194 setAlpha.call($this, colorBarL3, 100);
1195 setImgLoc.call($this, colorBarL4, 260);
1196 setAlpha.call($this, colorBarL4, 100);
1197 }, 0);
1198 break;
1199 case 'r':
1200 case 'g':
1201 case 'b':
1202 setTimeout(
1203 function()
1204 {
1205 setBG.call($this, colorMapDiv, 'transparent');
1206 setBG.call($this, colorBarDiv, 'transparent');
1207 setAlpha.call($this, colorBarL1, 100);
1208 setAlpha.call($this, colorMapL1, 100);
1209 setImgLoc.call($this, colorMapL1, rgbMap);
1210 setImgLoc.call($this, colorMapL2, rgbMap - 260);
1211 setImgLoc.call($this, colorBarL1, rgbBar - 780);
1212 setImgLoc.call($this, colorBarL2, rgbBar - 520);
1213 setImgLoc.call($this, colorBarL3, rgbBar);
1214 setImgLoc.call($this, colorBarL4, rgbBar - 260);
1215 setImgLoc.call($this, colorBarL6, 260);
1216 setAlpha.call($this, colorBarL6, 100);
1217 }, 0);
1218 break;
1219 }
1220 if (active.val('ahex') == null) return;
1221 activeColorChanged.call($this, active);
1222 },
1223 activeColorChanged = // Update color when user changes text values
1224 function(ui, context)
1225 {
1226 if (context == null || (context != colorBar && context != colorMap)) positionMapAndBarArrows.call($this, ui, context);
1227 setTimeout(
1228 function()
1229 {
1230 updatePreview.call($this, ui);
1231 updateMapVisuals.call($this, ui);
1232 updateBarVisuals.call($this, ui);
1233 }, 0);
1234 },
1235 mapValueChanged = // user has dragged the ColorMap pointer
1236 function(ui, context)
1237 {
1238 var active = color.active;
1239 if (context != colorMap && active.val() == null) return;
1240 var xy = ui.val('all');
1241 switch (settings.color.mode)
1242 {
1243 case 'h':
1244 active.val('sv', { s: xy.x, v: 100 - xy.y }, context);
1245 break;
1246 case 's':
1247 case 'a':
1248 active.val('hv', { h: xy.x, v: 100 - xy.y }, context);
1249 break;
1250 case 'v':
1251 active.val('hs', { h: xy.x, s: 100 - xy.y }, context);
1252 break;
1253 case 'r':
1254 active.val('gb', { g: 255 - xy.y, b: xy.x }, context);
1255 break;
1256 case 'g':
1257 active.val('rb', { r: 255 - xy.y, b: xy.x }, context);
1258 break;
1259 case 'b':
1260 active.val('rg', { r: xy.x, g: 255 - xy.y }, context);
1261 break;
1262 }
1263 },
1264 colorBarValueChanged = // user has dragged the ColorBar slider
1265 function(ui, context)
1266 {
1267 var active = color.active;
1268 if (context != colorBar && active.val() == null) return;
1269 switch (settings.color.mode)
1270 {
1271 case 'h':
1272 active.val('h', { h: 360 - ui.val('y') }, context);
1273 break;
1274 case 's':
1275 active.val('s', { s: 100 - ui.val('y') }, context);
1276 break;
1277 case 'v':
1278 active.val('v', { v: 100 - ui.val('y') }, context);
1279 break;
1280 case 'r':
1281 active.val('r', { r: 255 - ui.val('y') }, context);
1282 break;
1283 case 'g':
1284 active.val('g', { g: 255 - ui.val('y') }, context);
1285 break;
1286 case 'b':
1287 active.val('b', { b: 255 - ui.val('y') }, context);
1288 break;
1289 case 'a':
1290 active.val('a', 255 - ui.val('y'), context);
1291 break;
1292 }
1293 },
1294 positionMapAndBarArrows = // position map and bar arrows to match current color
1295 function(ui, context)
1296 {
1297 if (context != colorMap)
1298 {
1299 switch (settings.color.mode)
1300 {
1301 case 'h':
1302 var sv = ui.val('sv');
1303 colorMap.val('xy', { x: sv != null ? sv.s : 100, y: 100 - (sv != null ? sv.v : 100) }, context);
1304 break;
1305 case 's':
1306 case 'a':
1307 var hv = ui.val('hv');
1308 colorMap.val('xy', { x: hv && hv.h || 0, y: 100 - (hv != null ? hv.v : 100) }, context);
1309 break;
1310 case 'v':
1311 var hs = ui.val('hs');
1312 colorMap.val('xy', { x: hs && hs.h || 0, y: 100 - (hs != null ? hs.s : 100) }, context);
1313 break;
1314 case 'r':
1315 var bg = ui.val('bg');
1316 colorMap.val('xy', { x: bg && bg.b || 0, y: 255 - (bg && bg.g || 0) }, context);
1317 break;
1318 case 'g':
1319 var br = ui.val('br');
1320 colorMap.val('xy', { x: br && br.b || 0, y: 255 - (br && br.r || 0) }, context);
1321 break;
1322 case 'b':
1323 var rg = ui.val('rg');
1324 colorMap.val('xy', { x: rg && rg.r || 0, y: 255 - (rg && rg.g || 0) }, context);
1325 break;
1326 }
1327 }
1328 if (context != colorBar)
1329 {
1330 switch (settings.color.mode)
1331 {
1332 case 'h':
1333 colorBar.val('y', 360 - (ui.val('h') || 0), context);
1334 break;
1335 case 's':
1336 var s = ui.val('s');
1337 colorBar.val('y', 100 - (s != null ? s : 100), context);
1338 break;
1339 case 'v':
1340 var v = ui.val('v');
1341 colorBar.val('y', 100 - (v != null ? v : 100), context);
1342 break;
1343 case 'r':
1344 colorBar.val('y', 255 - (ui.val('r') || 0), context);
1345 break;
1346 case 'g':
1347 colorBar.val('y', 255 - (ui.val('g') || 0), context);
1348 break;
1349 case 'b':
1350 colorBar.val('y', 255 - (ui.val('b') || 0), context);
1351 break;
1352 case 'a':
1353 var a = ui.val('a');
1354 colorBar.val('y', 255 - (a != null ? a : 255), context);
1355 break;
1356 }
1357 }
1358 },
1359 updatePreview =
1360 function(ui)
1361 {
1362 try
1363 {
1364 var all = ui.val('all');
1365 activePreview.css({ backgroundColor: all && '#' + all.hex || 'transparent' });
1366 setAlpha.call($this, activePreview, all && Math.precision((all.a * 100) / 255, 4) || 0);
1367 }
1368 catch (e) { }
1369 },
1370 updateMapVisuals =
1371 function(ui)
1372 {
1373 switch (settings.color.mode)
1374 {
1375 case 'h':
1376 setBG.call($this, colorMapDiv, new Color({ h: ui.val('h') || 0, s: 100, v: 100 }).val('hex'));
1377 break;
1378 case 's':
1379 case 'a':
1380 var s = ui.val('s');
1381 setAlpha.call($this, colorMapL2, 100 - (s != null ? s : 100));
1382 break;
1383 case 'v':
1384 var v = ui.val('v');
1385 setAlpha.call($this, colorMapL1, v != null ? v : 100);
1386 break;
1387 case 'r':
1388 setAlpha.call($this, colorMapL2, Math.precision((ui.val('r') || 0) / 255 * 100, 4));
1389 break;
1390 case 'g':
1391 setAlpha.call($this, colorMapL2, Math.precision((ui.val('g') || 0) / 255 * 100, 4));
1392 break;
1393 case 'b':
1394 setAlpha.call($this, colorMapL2, Math.precision((ui.val('b') || 0) / 255 * 100));
1395 break;
1396 }
1397 var a = ui.val('a');
1398 setAlpha.call($this, colorMapL3, Math.precision(((255 - (a || 0)) * 100) / 255, 4));
1399 },
1400 updateBarVisuals =
1401 function(ui)
1402 {
1403 switch (settings.color.mode)
1404 {
1405 case 'h':
1406 var a = ui.val('a');
1407 setAlpha.call($this, colorBarL5, Math.precision(((255 - (a || 0)) * 100) / 255, 4));
1408 break;
1409 case 's':
1410 var hva = ui.val('hva'),
1411 saturatedColor = new Color({ h: hva && hva.h || 0, s: 100, v: hva != null ? hva.v : 100 });
1412 setBG.call($this, colorBarDiv, saturatedColor.val('hex'));
1413 setAlpha.call($this, colorBarL2, 100 - (hva != null ? hva.v : 100));
1414 setAlpha.call($this, colorBarL5, Math.precision(((255 - (hva && hva.a || 0)) * 100) / 255, 4));
1415 break;
1416 case 'v':
1417 var hsa = ui.val('hsa'),
1418 valueColor = new Color({ h: hsa && hsa.h || 0, s: hsa != null ? hsa.s : 100, v: 100 });
1419 setBG.call($this, colorBarDiv, valueColor.val('hex'));
1420 setAlpha.call($this, colorBarL5, Math.precision(((255 - (hsa && hsa.a || 0)) * 100) / 255, 4));
1421 break;
1422 case 'r':
1423 case 'g':
1424 case 'b':
1425 var hValue = 0, vValue = 0, rgba = ui.val('rgba');
1426 if (settings.color.mode == 'r')
1427 {
1428 hValue = rgba && rgba.b || 0;
1429 vValue = rgba && rgba.g || 0;
1430 }
1431 else if (settings.color.mode == 'g')
1432 {
1433 hValue = rgba && rgba.b || 0;
1434 vValue = rgba && rgba.r || 0;
1435 }
1436 else if (settings.color.mode == 'b')
1437 {
1438 hValue = rgba && rgba.r || 0;
1439 vValue = rgba && rgba.g || 0;
1440 }
1441 var middle = vValue > hValue ? hValue : vValue;
1442 setAlpha.call($this, colorBarL2, hValue > vValue ? Math.precision(((hValue - vValue) / (255 - vValue)) * 100, 4) : 0);
1443 setAlpha.call($this, colorBarL3, vValue > hValue ? Math.precision(((vValue - hValue) / (255 - hValue)) * 100, 4) : 0);
1444 setAlpha.call($this, colorBarL4, Math.precision((middle / 255) * 100, 4));
1445 setAlpha.call($this, colorBarL5, Math.precision(((255 - (rgba && rgba.a || 0)) * 100) / 255, 4));
1446 break;
1447 case 'a':
1448 var a = ui.val('a');
1449 setBG.call($this, colorBarDiv, ui.val('hex') || '000000');
1450 setAlpha.call($this, colorBarL5, a != null ? 0 : 100);
1451 setAlpha.call($this, colorBarL6, a != null ? 100 : 0);
1452 break;
1453 }
1454 },
1455 setBG =
1456 function(el, c)
1457 {
1458 el.css({ backgroundColor: c && c.length == 6 && '#' + c || 'transparent' });
1459 },
1460 setImg =
1461 function(img, src)
1462 {
1463 if (isLessThanIE7 && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1))
1464 {
1465 img.attr('pngSrc', src);
1466 img.css({ backgroundImage: 'none', filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')' });
1467 }
1468 else img.css({ backgroundImage: 'url(\'' + src + '\')' });
1469 },
1470 setImgLoc =
1471 function(img, y)
1472 {
1473 img.css({ top: y + 'px' });
1474 },
1475 setAlpha =
1476 function(obj, alpha)
1477 {
1478 obj.css({ visibility: alpha > 0 ? 'visible' : 'hidden' });
1479 if (alpha > 0 && alpha < 100)
1480 {
1481 if (isLessThanIE7)
1482 {
1483 var src = obj.attr('pngSrc');
1484 if (src != null && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1))
1485 obj.css({ filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\') progid:DXImageTransform.Microsoft.Alpha(opacity=' + alpha + ')' });
1486 else obj.css({ opacity: Math.precision(alpha / 100, 4) });
1487 }
1488 else obj.css({ opacity: Math.precision(alpha / 100, 4) });
1489 }
1490 else if (alpha == 0 || alpha == 100)
1491 {
1492 if (isLessThanIE7)
1493 {
1494 var src = obj.attr('pngSrc');
1495 if (src != null && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1))
1496 obj.css({ filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')' });
1497 else obj.css({ opacity: '' });
1498 }
1499 else obj.css({ opacity: '' });
1500 }
1501 },
1502 revertColor = // revert color to original color when opened
1503 function()
1504 {
1505 color.active.val('ahex', color.current.val('ahex'));
1506 },
1507 commitColor = // commit the color changes
1508 function()
1509 {
1510 color.current.val('ahex', color.active.val('ahex'));
1511 },
1512 radioClicked =
1513 function(e)
1514 {
1515 $(this).parents('tbody:first').find('input:radio[value!="'+e.target.value+'"]').removeAttr('checked');
1516 setColorMode.call($this, e.target.value);
1517 },
1518 currentClicked =
1519 function()
1520 {
1521 revertColor.call($this);
1522 },
1523 cancelClicked =
1524 function()
1525 {
1526 revertColor.call($this);
1527 settings.window.expandable && hide.call($this);
1528 $.isFunction(cancelCallback) && cancelCallback.call($this, color.active, cancelButton);
1529 },
1530 okClicked =
1531 function()
1532 {
1533 commitColor.call($this);
1534 settings.window.expandable && hide.call($this);
1535 $.isFunction(commitCallback) && commitCallback.call($this, color.active, okButton);
1536 },
1537 iconImageClicked =
1538 function()
1539 {
1540 show.call($this);
1541 },
1542 currentColorChanged =
1543 function(ui, context)
1544 {
1545 var hex = ui.val('hex');
1546 currentPreview.css({ backgroundColor: hex && '#' + hex || 'transparent' });
1547 setAlpha.call($this, currentPreview, Math.precision(((ui.val('a') || 0) * 100) / 255, 4));
1548 },
1549 expandableColorChanged =
1550 function(ui, context)
1551 {
1552 var hex = ui.val('hex');
1553 var va = ui.val('va');
1554 iconColor.css({ backgroundColor: hex && '#' + hex || 'transparent' });
1555 setAlpha.call($this, iconAlpha, Math.precision(((255 - (va && va.a || 0)) * 100) / 255, 4));
1556 if (settings.window.bindToInput&&settings.window.updateInputColor)
1557 settings.window.input.css(
1558 {
1559 backgroundColor: hex && '#' + hex || 'transparent',
1560 color: va == null || va.v > 75 ? '#000000' : '#ffffff'
1561 });
1562 },
1563 moveBarMouseDown =
1564 function(e)
1565 {
1566 var element = settings.window.element, // local copies for YUI compressor
1567 page = settings.window.page;
1568 elementStartX = parseInt(container.css('left'));
1569 elementStartY = parseInt(container.css('top'));
1570 pageStartX = e.pageX;
1571 pageStartY = e.pageY;
1572 // bind events to document to move window - we will unbind these on mouseup
1573 $(document).bind('mousemove', documentMouseMove).bind('mouseup', documentMouseUp);
1574 e.preventDefault(); // prevent attempted dragging of the column
1575 },
1576 documentMouseMove =
1577 function(e)
1578 {
1579 container.css({ left: elementStartX - (pageStartX - e.pageX) + 'px', top: elementStartY - (pageStartY - e.pageY) + 'px' });
1580 if (settings.window.expandable && !$.support.boxModel) container.prev().css({ left: container.css("left"), top: container.css("top") });
1581 e.stopPropagation();
1582 e.preventDefault();
1583 return false;
1584 },
1585 documentMouseUp =
1586 function(e)
1587 {
1588 $(document).unbind('mousemove', documentMouseMove).unbind('mouseup', documentMouseUp);
1589 e.stopPropagation();
1590 e.preventDefault();
1591 return false;
1592 },
1593 quickPickClicked =
1594 function(e)
1595 {
1596 e.preventDefault();
1597 e.stopPropagation();
1598 color.active.val('ahex', $(this).attr('title') || null, e.target);
1599 return false;
1600 },
1601 commitCallback = $.isFunction($arguments[1]) && $arguments[1] || null,
1602 liveCallback = $.isFunction($arguments[2]) && $arguments[2] || null,
1603 cancelCallback = $.isFunction($arguments[3]) && $arguments[3] || null,
1604 show =
1605 function()
1606 {
1607 color.current.val('ahex', color.active.val('ahex'));
1608 var attachIFrame = function()
1609 {
1610 if (!settings.window.expandable || $.support.boxModel) return;
1611 var table = container.find('table:first');
1612 container.before('<iframe/>');
1613 container.prev().css({ width: table.width(), height: container.height(), opacity: 0, position: 'absolute', left: container.css("left"), top: container.css("top") });
1614 };
1615 if (settings.window.expandable)
1616 {
1617 $(document.body).children('div.jPicker.Container').css({zIndex:10});
1618 container.css({zIndex:20});
1619 }
1620 switch (settings.window.effects.type)
1621 {
1622 case 'fade':
1623 container.fadeIn(settings.window.effects.speed.show, attachIFrame);
1624 break;
1625 case 'slide':
1626 container.slideDown(settings.window.effects.speed.show, attachIFrame);
1627 break;
1628 case 'show':
1629 default:
1630 container.show(settings.window.effects.speed.show, attachIFrame);
1631 break;
1632 }
1633 },
1634 hide =
1635 function()
1636 {
1637 var removeIFrame = function()
1638 {
1639 if (settings.window.expandable) container.css({ zIndex: 10 });
1640 if (!settings.window.expandable || $.support.boxModel) return;
1641 container.prev().remove();
1642 };
1643 switch (settings.window.effects.type)
1644 {
1645 case 'fade':
1646 container.fadeOut(settings.window.effects.speed.hide, removeIFrame);
1647 break;
1648 case 'slide':
1649 container.slideUp(settings.window.effects.speed.hide, removeIFrame);
1650 break;
1651 case 'show':
1652 default:
1653 container.hide(settings.window.effects.speed.hide, removeIFrame);
1654 break;
1655 }
1656 },
1657 initialize =
1658 function()
1659 {
1660 var win = settings.window,
1661 popup = win.expandable ? $($this).next().find('.Container:first') : null;
1662 container = win.expandable ? $('<div/>') : $($this);
1663 container.addClass('jPicker Container');
1664 if (win.expandable) container.hide();
1665 container.get(0).onselectstart = function(event){ if (event.target.nodeName.toLowerCase() !== 'input') return false; };
1666 // inject html source code - we are using a single table for this control - I know tables are considered bad, but it takes care of equal height columns and
1667 // this control really is tabular data, so I believe it is the right move
1668 var all = color.active.val('all');
1669 if (win.alphaPrecision < 0) win.alphaPrecision = 0;
1670 else if (win.alphaPrecision > 2) win.alphaPrecision = 2;
1671 var controlHtml='<table class="jPicker" cellpadding="0" cellspacing="0"><tbody>' + (win.expandable ? '<tr><td class="Move" colspan="5">&nbsp;</td></tr>' : '') + '<tr><td rowspan="9"><h2 class="Title">' + (win.title || localization.text.title) + '</h2><div class="Map"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><img src="' + images.clientPath + images.colorMap.arrow.file + '" class="Arrow"/></div></td><td rowspan="9"><div class="Bar"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><span class="Map4">&nbsp;</span><span class="Map5">&nbsp;</span><span class="Map6">&nbsp;</span><img src="' + images.clientPath + images.colorBar.arrow.file + '" class="Arrow"/></div></td><td colspan="2" class="Preview"><div class="prev_div">' + localization.text.newColor + '<div class="color_preview"><span class="Active" title="' + localization.tooltips.colors.newColor + '">&nbsp;</span><span class="Current" title="' + localization.tooltips.colors.currentColor + '">&nbsp;</span></div></div>' + localization.text.currentColor + '</td><td rowspan="9" class="Button"><input type="button" class="Ok" value="' + localization.text.ok + '" title="' + localization.tooltips.buttons.ok + '"/><input type="button" class="Cancel" value="' + localization.text.cancel + '" title="' + localization.tooltips.buttons.cancel + '"/><div class="Grid">&nbsp;</div></td></tr><tr class="Hue"><td class="Radio"><label title="' + localization.tooltips.hue.radio + '"><input type="radio" value="h"' + (settings.color.mode == 'h' ? ' checked="checked"' : '') + '/>H:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.h : '') + '" title="' + localization.tooltips.hue.textbox + '"/>&nbsp;º</td></tr><tr class="Saturation"><td class="Radio"><label title="' + localization.tooltips.saturation.radio + '"><input type="radio" value="s"' + (settings.color.mode == 's' ? ' checked="checked"' : '') + '/>S:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.s : '') + '" title="' + localization.tooltips.saturation.textbox + '"/>&nbsp;%</td></tr><tr class="Value"><td class="Radio"><label title="' + localization.tooltips.value.radio + '"><input type="radio" value="v"' + (settings.color.mode == 'v' ? ' checked="checked"' : '') + '/>V:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.v : '') + '" title="' + localization.tooltips.value.textbox + '"/>&nbsp;%<br/><br/></td></tr><tr class="Red"><td class="Radio"><label title="' + localization.tooltips.red.radio + '"><input type="radio" value="r"' + (settings.color.mode == 'r' ? ' checked="checked"' : '') + '/>R:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.r : '') + '" title="' + localization.tooltips.red.textbox + '"/></td></tr><tr class="Green"><td class="Radio"><label title="' + localization.tooltips.green.radio + '"><input type="radio" value="g"' + (settings.color.mode == 'g' ? ' checked="checked"' : '') + '/>G:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.g : '') + '" title="' + localization.tooltips.green.textbox + '"/></td></tr><tr class="Blue"><td class="Radio"><label title="' + localization.tooltips.blue.radio + '"><input type="radio" value="b"' + (settings.color.mode == 'b' ? ' checked="checked"' : '') + '/>B:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.b : '') + '" title="' + localization.tooltips.blue.textbox + '"/></td></tr><tr class="Alpha"><td class="Radio">' + (win.alphaSupport ? '<label title="' + localization.tooltips.alpha.radio + '"><input type="radio" value="a"' + (settings.color.mode == 'a' ? ' checked="checked"' : '') + '/>A:</label>' : '&nbsp;') + '</td><td class="Text">' + (win.alphaSupport ? '<input type="text" maxlength="' + (3 + win.alphaPrecision) + '" value="' + (all != null ? Math.precision((all.a * 100) / 255, win.alphaPrecision) : '') + '" title="' + localization.tooltips.alpha.textbox + '"/>&nbsp;%' : '&nbsp;') + '</td></tr><tr class="Hex"><td colspan="2" class="Text"><label title="' + localization.tooltips.hex.textbox + '">#:<input type="text" maxlength="6" class="Hex" value="' + (all != null ? all.hex : '') + '"/></label>' + (win.alphaSupport ? '<input type="text" maxlength="2" class="AHex" value="' + (all != null ? all.ahex.substring(6) : '') + '" title="' + localization.tooltips.hex.alpha + '"/></td>' : '&nbsp;') + '</tr></tbody></table>';
1672 if (win.expandable)
1673 {
1674 container.html(controlHtml);
1675 if($(document.body).children('div.jPicker.Container').length==0)$(document.body).prepend(container);
1676 else $(document.body).children('div.jPicker.Container:last').after(container);
1677 container.mousedown(
1678 function()
1679 {
1680 $(document.body).children('div.jPicker.Container').css({zIndex:10});
1681 container.css({zIndex:20});
1682 });
1683 container.css( // positions must be set and display set to absolute before source code injection or IE will size the container to fit the window
1684 {
1685 left:
1686 win.position.x == 'left' ? (popup.offset().left - 530 - (win.position.y == 'center' ? 25 : 0)) + 'px' :
1687 win.position.x == 'center' ? (popup.offset().left - 260) + 'px' :
1688 win.position.x == 'right' ? (popup.offset().left - 10 + (win.position.y == 'center' ? 25 : 0)) + 'px' :
1689 win.position.x == 'screenCenter' ? (($(document).width() >> 1) - 260) + 'px' : (popup.offset().left + parseInt(win.position.x)) + 'px',
1690 position: 'absolute',
1691 top: win.position.y == 'top' ? (popup.offset().top - 312) + 'px' :
1692 win.position.y == 'center' ? (popup.offset().top - 156) + 'px' :
1693 win.position.y == 'bottom' ? (popup.offset().top + 25) + 'px' : (popup.offset().top + parseInt(win.position.y)) + 'px'
1694 });
1695 }
1696 else
1697 {
1698 container = $($this);
1699 container.html(controlHtml);
1700 }
1701 // initialize the objects to the source code just injected
1702 var tbody = container.find('tbody:first');
1703 colorMapDiv = tbody.find('div.Map:first');
1704 colorBarDiv = tbody.find('div.Bar:first');
1705 var MapMaps = colorMapDiv.find('span'),
1706 BarMaps = colorBarDiv.find('span');
1707 colorMapL1 = MapMaps.filter('.Map1:first');
1708 colorMapL2 = MapMaps.filter('.Map2:first');
1709 colorMapL3 = MapMaps.filter('.Map3:first');
1710 colorBarL1 = BarMaps.filter('.Map1:first');
1711 colorBarL2 = BarMaps.filter('.Map2:first');
1712 colorBarL3 = BarMaps.filter('.Map3:first');
1713 colorBarL4 = BarMaps.filter('.Map4:first');
1714 colorBarL5 = BarMaps.filter('.Map5:first');
1715 colorBarL6 = BarMaps.filter('.Map6:first');
1716 // create color pickers and maps
1717 colorMap = new Slider(colorMapDiv,
1718 {
1719 map:
1720 {
1721 width: images.colorMap.width,
1722 height: images.colorMap.height
1723 },
1724 arrow:
1725 {
1726 image: images.clientPath + images.colorMap.arrow.file,
1727 width: images.colorMap.arrow.width,
1728 height: images.colorMap.arrow.height
1729 }
1730 });
1731 colorMap.bind(mapValueChanged);
1732 colorBar = new Slider(colorBarDiv,
1733 {
1734 map:
1735 {
1736 width: images.colorBar.width,
1737 height: images.colorBar.height
1738 },
1739 arrow:
1740 {
1741 image: images.clientPath + images.colorBar.arrow.file,
1742 width: images.colorBar.arrow.width,
1743 height: images.colorBar.arrow.height
1744 }
1745 });
1746 colorBar.bind(colorBarValueChanged);
1747 colorPicker = new ColorValuePicker(tbody, color.active, win.expandable && win.bindToInput ? win.input : null, win.alphaPrecision);
1748 var hex = all != null ? all.hex : null,
1749 preview = tbody.find('.Preview'),
1750 button = tbody.find('.Button');
1751 activePreview = preview.find('.Active:first').css({ backgroundColor: hex && '#' + hex || 'transparent' });
1752 currentPreview = preview.find('.Current:first').css({ backgroundColor: hex && '#' + hex || 'transparent' }).bind('click', currentClicked);
1753 setAlpha.call($this, currentPreview, Math.precision(color.current.val('a') * 100) / 255, 4);
1754 okButton = button.find('.Ok:first').bind('click touchstart', okClicked);
1755 cancelButton = button.find('.Cancel:first').bind('click touchstart', cancelClicked);
1756 grid = button.find('.Grid:first');
1757 setTimeout(
1758 function()
1759 {
1760 setImg.call($this, colorMapL1, images.clientPath + 'Maps.png');
1761 setImg.call($this, colorMapL2, images.clientPath + 'Maps.png');
1762 setImg.call($this, colorMapL3, images.clientPath + 'map-opacity.png');
1763 setImg.call($this, colorBarL1, images.clientPath + 'Bars.png');
1764 setImg.call($this, colorBarL2, images.clientPath + 'Bars.png');
1765 setImg.call($this, colorBarL3, images.clientPath + 'Bars.png');
1766 setImg.call($this, colorBarL4, images.clientPath + 'Bars.png');
1767 setImg.call($this, colorBarL5, images.clientPath + 'bar-opacity.png');
1768 setImg.call($this, colorBarL6, images.clientPath + 'AlphaBar.png');
1769 setImg.call($this, preview.find('div:last'), images.clientPath + 'preview-opacity.png');
1770 }, 0);
1771 tbody.find('td.Radio input').bind('click touchstart', radioClicked);
1772 // initialize quick list
1773 if (color.quickList && color.quickList.length > 0)
1774 {
1775 var html = '';
1776 for (i = 0; i < color.quickList.length; i++)
1777 {
1778 /* if default colors are hex strings, change them to color objects */
1779 if ((typeof (color.quickList[i])).toString().toLowerCase() == 'string') color.quickList[i] = new Color({ hex: color.quickList[i] });
1780 var alpha = color.quickList[i].val('a');
1781 var ahex = color.quickList[i].val('ahex');
1782 if (!win.alphaSupport && ahex) ahex = ahex.substring(0, 6) + 'ff';
1783 var quickHex = color.quickList[i].val('hex');
1784 html+='<span class="QuickColor"' + (ahex && ' title="#' + ahex + '"' || '') + ' style="background-color:' + (quickHex && '#' + quickHex || '') + ';' + (quickHex ? '' : 'background-image:url(' + images.clientPath + 'NoColor.png)') + (win.alphaSupport && alpha && alpha < 255 ? ';opacity:' + Math.precision(alpha / 255, 4) + ';filter:Alpha(opacity=' + Math.precision(alpha / 2.55, 4) + ')' : '') + '">&nbsp;</span>';
1785 }
1786 setImg.call($this, grid, images.clientPath + 'bar-opacity.png');
1787 grid.html(html);
1788 grid.find('.QuickColor').click(quickPickClicked);
1789 }
1790 setColorMode.call($this, settings.color.mode);
1791 color.active.bind(activeColorChanged);
1792 $.isFunction(liveCallback) && color.active.bind(liveCallback);
1793 color.current.bind(currentColorChanged);
1794 // bind to input
1795 if (win.expandable)
1796 {
1797 $this.icon = popup.parents('.Icon:first');
1798 iconColor = $this.icon.find('.Color:first').css({ backgroundColor: hex && '#' + hex || 'transparent' });
1799 iconAlpha = $this.icon.find('.Alpha:first');
1800 setImg.call($this, iconAlpha, images.clientPath + 'bar-opacity.png');
1801 setAlpha.call($this, iconAlpha, Math.precision(((255 - (all != null ? all.a : 0)) * 100) / 255, 4));
1802 iconImage = $this.icon.find('.Image:first').css(
1803 {
1804 backgroundImage: 'url(\'' + images.clientPath + images.picker.file + '\')'
1805 }).bind('click', iconImageClicked);
1806 if (win.bindToInput&&win.updateInputColor)
1807 win.input.css(
1808 {
1809 backgroundColor: hex && '#' + hex || 'transparent',
1810 color: all == null || all.v > 75 ? '#000000' : '#ffffff'
1811 });
1812 moveBar = tbody.find('.Move:first').bind('mousedown', moveBarMouseDown);
1813 color.active.bind(expandableColorChanged);
1814 }
1815 else show.call($this);
1816 },
1817 destroy =
1818 function()
1819 {
1820 container.find('td.Radio input touchstart').unbind('click', radioClicked);
1821 currentPreview.unbind('click touchstart', currentClicked);
1822 cancelButton.unbind('click touchstart', cancelClicked);
1823 okButton.unbind('click touchstart', okClicked);
1824 if (settings.window.expandable)
1825 {
1826 iconImage.unbind('click', iconImageClicked);
1827 moveBar.unbind('mousedown', moveBarMouseDown);
1828 $this.icon = null;
1829 }
1830 container.find('.QuickColor').unbind('click', quickPickClicked);
1831 colorMapDiv = null;
1832 colorBarDiv = null;
1833 colorMapL1 = null;
1834 colorMapL2 = null;
1835 colorMapL3 = null;
1836 colorBarL1 = null;
1837 colorBarL2 = null;
1838 colorBarL3 = null;
1839 colorBarL4 = null;
1840 colorBarL5 = null;
1841 colorBarL6 = null;
1842 colorMap.destroy();
1843 colorMap = null;
1844 colorBar.destroy();
1845 colorBar = null;
1846 colorPicker.destroy();
1847 colorPicker = null;
1848 activePreview = null;
1849 currentPreview = null;
1850 okButton = null;
1851 cancelButton = null;
1852 grid = null;
1853 commitCallback = null;
1854 cancelCallback = null;
1855 liveCallback = null;
1856 container.html('');
1857 for (i = 0; i < List.length; i++) if (List[i] == $this) List.splice(i, 1);
1858 },
1859 images = settings.images, // local copies for YUI compressor
1860 localization = settings.localization,
1861 color =
1862 {
1863 active: (typeof(settings.color.active)).toString().toLowerCase() == 'string' ? new Color({ ahex: !settings.window.alphaSupport && settings.color.active ? settings.color.active.substring(0, 6) + 'ff' : settings.color.active }) : new Color({ ahex: !settings.window.alphaSupport && settings.color.active.val('ahex') ? settings.color.active.val('ahex').substring(0, 6) + 'ff' : settings.color.active.val('ahex') }),
1864 current: (typeof(settings.color.active)).toString().toLowerCase() == 'string' ? new Color({ ahex: !settings.window.alphaSupport && settings.color.active ? settings.color.active.substring(0, 6) + 'ff' : settings.color.active }) : new Color({ ahex: !settings.window.alphaSupport && settings.color.active.val('ahex') ? settings.color.active.val('ahex').substring(0, 6) + 'ff' : settings.color.active.val('ahex') }),
1865 quickList: settings.color.quickList
1866 };
1867 $.extend(true, $this, // public properties, methods, and callbacks
1868 {
1869 commitCallback: commitCallback, // commitCallback function can be overridden to return the selected color to a method you specify when the user clicks "OK"
1870 liveCallback: liveCallback, // liveCallback function can be overridden to return the selected color to a method you specify in live mode (continuous update)
1871 cancelCallback: cancelCallback, // cancelCallback function can be overridden to a method you specify when the user clicks "Cancel"
1872 color: color,
1873 show: show,
1874 hide: hide,
1875 destroy: destroy // destroys this control entirely, removing all events and objects, and removing itself from the List
1876 });
1877 List.push($this);
1878 setTimeout(
1879 function()
1880 {
1881 initialize.call($this);
1882 }, 0);
1883 });
1884 };
1885 $.fn.jPicker.defaults = /* jPicker defaults - you can change anything in this section (such as the clientPath to your images) without fear of breaking the program */
1886 {
1887 window:
1888 {
1889 title: null, /* any title for the jPicker window itself - displays "Drag Markers To Pick A Color" if left null */
1890 effects:
1891 {
1892 type: 'slide', /* effect used to show/hide an expandable picker. Acceptable values "slide", "show", "fade" */
1893 speed:
1894 {
1895 show: 'slow', /* duration of "show" effect. Acceptable values are "fast", "slow", or time in ms */
1896 hide: 'fast' /* duration of "hide" effect. Acceptable values are "fast", "slow", or time in ms */
1897 }
1898 },
1899 position:
1900 {
1901 x: 'screenCenter', /* acceptable values "left", "center", "right", "screenCenter", or relative px value */
1902 y: 'top' /* acceptable values "top", "bottom", "center", or relative px value */
1903 },
1904 expandable: false, /* default to large static picker - set to true to make an expandable picker (small icon with popup) - set automatically when binded to input element */
1905 liveUpdate: true, /* set false if you want the user to have to click "OK" before the binded input box updates values (always "true" for expandable picker) */
1906 alphaSupport: false, /* set to true to enable alpha picking */
1907 alphaPrecision: 0, /* set decimal precision for alpha percentage display - hex codes do not map directly to percentage integers - range 0-2 */
1908 updateInputColor: true /* set to false to prevent binded input colors from changing */
1909 },
1910 color:
1911 {
1912 mode: 'h', /* acceptabled values "h" (hue), "s" (saturation), "v" (value), "r" (red), "g" (green), "b" (blue), "a" (alpha) */
1913 active: new Color({ ahex: '#ffcc00ff' }), /* acceptable values are any declared $.jPicker.Color object or string HEX value (e.g. #ffc000) WITH OR WITHOUT the "#" prefix */
1914 quickList: /* the quick pick color list */
1915 [
1916 new Color({ h: 360, s: 33, v: 100 }), /* acceptable values are any declared $.jPicker.Color object or string HEX value (e.g. #ffc000) WITH OR WITHOUT the "#" prefix */
1917 new Color({ h: 360, s: 66, v: 100 }),
1918 new Color({ h: 360, s: 100, v: 100 }),
1919 new Color({ h: 360, s: 100, v: 75 }),
1920 new Color({ h: 360, s: 100, v: 50 }),
1921 new Color({ h: 180, s: 0, v: 100 }),
1922 new Color({ h: 30, s: 33, v: 100 }),
1923 new Color({ h: 30, s: 66, v: 100 }),
1924 new Color({ h: 30, s: 100, v: 100 }),
1925 new Color({ h: 30, s: 100, v: 75 }),
1926 new Color({ h: 30, s: 100, v: 50 }),
1927 new Color({ h: 180, s: 0, v: 90 }),
1928 new Color({ h: 60, s: 33, v: 100 }),
1929 new Color({ h: 60, s: 66, v: 100 }),
1930 new Color({ h: 60, s: 100, v: 100 }),
1931 new Color({ h: 60, s: 100, v: 75 }),
1932 new Color({ h: 60, s: 100, v: 50 }),
1933 new Color({ h: 180, s: 0, v: 80 }),
1934 new Color({ h: 90, s: 33, v: 100 }),
1935 new Color({ h: 90, s: 66, v: 100 }),
1936 new Color({ h: 90, s: 100, v: 100 }),
1937 new Color({ h: 90, s: 100, v: 75 }),
1938 new Color({ h: 90, s: 100, v: 50 }),
1939 new Color({ h: 180, s: 0, v: 70 }),
1940 new Color({ h: 120, s: 33, v: 100 }),
1941 new Color({ h: 120, s: 66, v: 100 }),
1942 new Color({ h: 120, s: 100, v: 100 }),
1943 new Color({ h: 120, s: 100, v: 75 }),
1944 new Color({ h: 120, s: 100, v: 50 }),
1945 new Color({ h: 180, s: 0, v: 60 }),
1946 new Color({ h: 150, s: 33, v: 100 }),
1947 new Color({ h: 150, s: 66, v: 100 }),
1948 new Color({ h: 150, s: 100, v: 100 }),
1949 new Color({ h: 150, s: 100, v: 75 }),
1950 new Color({ h: 150, s: 100, v: 50 }),
1951 new Color({ h: 180, s: 0, v: 50 }),
1952 new Color({ h: 180, s: 33, v: 100 }),
1953 new Color({ h: 180, s: 66, v: 100 }),
1954 new Color({ h: 180, s: 100, v: 100 }),
1955 new Color({ h: 180, s: 100, v: 75 }),
1956 new Color({ h: 180, s: 100, v: 50 }),
1957 new Color({ h: 180, s: 0, v: 40 }),
1958 new Color({ h: 210, s: 33, v: 100 }),
1959 new Color({ h: 210, s: 66, v: 100 }),
1960 new Color({ h: 210, s: 100, v: 100 }),
1961 new Color({ h: 210, s: 100, v: 75 }),
1962 new Color({ h: 210, s: 100, v: 50 }),
1963 new Color({ h: 180, s: 0, v: 30 }),
1964 new Color({ h: 240, s: 33, v: 100 }),
1965 new Color({ h: 240, s: 66, v: 100 }),
1966 new Color({ h: 240, s: 100, v: 100 }),
1967 new Color({ h: 240, s: 100, v: 75 }),
1968 new Color({ h: 240, s: 100, v: 50 }),
1969 new Color({ h: 180, s: 0, v: 20 }),
1970 new Color({ h: 270, s: 33, v: 100 }),
1971 new Color({ h: 270, s: 66, v: 100 }),
1972 new Color({ h: 270, s: 100, v: 100 }),
1973 new Color({ h: 270, s: 100, v: 75 }),
1974 new Color({ h: 270, s: 100, v: 50 }),
1975 new Color({ h: 180, s: 0, v: 10 }),
1976 new Color({ h: 300, s: 33, v: 100 }),
1977 new Color({ h: 300, s: 66, v: 100 }),
1978 new Color({ h: 300, s: 100, v: 100 }),
1979 new Color({ h: 300, s: 100, v: 75 }),
1980 new Color({ h: 300, s: 100, v: 50 }),
1981 new Color({ h: 180, s: 0, v: 0 }),
1982 new Color({ h: 330, s: 33, v: 100 }),
1983 new Color({ h: 330, s: 66, v: 100 }),
1984 new Color({ h: 330, s: 100, v: 100 }),
1985 new Color({ h: 330, s: 100, v: 75 }),
1986 new Color({ h: 330, s: 100, v: 50 }),
1987 new Color()
1988 ]
1989 },
1990 images:
1991 {
1992 clientPath: '/jPicker/images/', /* Path to image files */
1993 colorMap:
1994 {
1995 width: 256,
1996 height: 256,
1997 arrow:
1998 {
1999 file: 'mappoint.gif', /* ColorMap arrow icon */
2000 width: 15,
2001 height: 15
2002 }
2003 },
2004 colorBar:
2005 {
2006 width: 20,
2007 height: 256,
2008 arrow:
2009 {
2010 file: 'rangearrows.gif', /* ColorBar arrow icon */
2011 width: 20,
2012 height: 7
2013 }
2014 },
2015 picker:
2016 {
2017 file: 'picker.gif', /* Color Picker icon */
2018 width: 25,
2019 height: 24
2020 }
2021 },
2022 localization: /* alter these to change the text presented by the picker (e.g. different language) */
2023 {
2024 text:
2025 {
2026 title: 'Drag Markers To Pick A Color',
2027 newColor: 'new',
2028 currentColor: 'current',
2029 ok: 'OK',
2030 cancel: 'Cancel'
2031 },
2032 tooltips:
2033 {
2034 colors:
2035 {
2036 newColor: 'New Color - Press &ldquo;OK&rdquo; To Commit',
2037 currentColor: 'Click To Revert To Original Color'
2038 },
2039 buttons:
2040 {
2041 ok: 'Commit To This Color Selection',
2042 cancel: 'Cancel And Revert To Original Color'
2043 },
2044 hue:
2045 {
2046 radio: 'Set To &ldquo;Hue&rdquo; Color Mode',
2047 textbox: 'Enter A &ldquo;Hue&rdquo; Value (0-360&deg;)'
2048 },
2049 saturation:
2050 {
2051 radio: 'Set To &ldquo;Saturation&rdquo; Color Mode',
2052 textbox: 'Enter A &ldquo;Saturation&rdquo; Value (0-100%)'
2053 },
2054 value:
2055 {
2056 radio: 'Set To &ldquo;Value&rdquo; Color Mode',
2057 textbox: 'Enter A &ldquo;Value&rdquo; Value (0-100%)'
2058 },
2059 red:
2060 {
2061 radio: 'Set To &ldquo;Red&rdquo; Color Mode',
2062 textbox: 'Enter A &ldquo;Red&rdquo; Value (0-255)'
2063 },
2064 green:
2065 {
2066 radio: 'Set To &ldquo;Green&rdquo; Color Mode',
2067 textbox: 'Enter A &ldquo;Green&rdquo; Value (0-255)'
2068 },
2069 blue:
2070 {
2071 radio: 'Set To &ldquo;Blue&rdquo; Color Mode',
2072 textbox: 'Enter A &ldquo;Blue&rdquo; Value (0-255)'
2073 },
2074 alpha:
2075 {
2076 radio: 'Set To &ldquo;Alpha&rdquo; Color Mode',
2077 textbox: 'Enter A &ldquo;Alpha&rdquo; Value (0-100)'
2078 },
2079 hex:
2080 {
2081 textbox: 'Enter A &ldquo;Hex&rdquo; Color Value (#000000-#ffffff)',
2082 alpha: 'Enter A &ldquo;Alpha&rdquo; Value (#00-#ff)'
2083 }
2084 }
2085 }
2086 };
2087})(jQuery, '1.1.6');
Note: See TracBrowser for help on using the repository browser.