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