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
|
---|
453 | function 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 | }
|
---|
476 | function hexToDec(hex) {
|
---|
477 | var colorChars = hex.split('');
|
---|
478 | var dec = (getDec(colorChars[0]) * 16) + getDec(colorChars[1]);
|
---|
479 | return dec;
|
---|
480 | }
|
---|
481 | function 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 | } |
---|