[44] | 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 | } |
---|