1/*! 2 * Bootstrap Colorpicker v2.3.6 3 * https://itsjavi.com/bootstrap-colorpicker/ 4 * 5 * Originally written by (c) 2012 Stefan Petre 6 * Licensed under the Apache License v2.0 7 * http://www.apache.org/licenses/LICENSE-2.0.txt 8 * 9 */ 10 11(function(factory) { 12 "use strict"; 13 if (typeof exports === 'object') { 14 module.exports = factory(window.jQuery); 15 } else if (typeof define === 'function' && define.amd) { 16 define(['jquery'], factory); 17 } else if (window.jQuery && !window.jQuery.fn.colorpicker) { 18 factory(window.jQuery); 19 } 20}(function($) { 21 'use strict'; 22 23 /** 24 * Color manipulation helper class 25 * 26 * @param {Object|String} val 27 * @param {Object} predefinedColors 28 * @constructor 29 */ 30 var Color = function(val, predefinedColors) { 31 this.value = { 32 h: 0, 33 s: 0, 34 b: 0, 35 a: 1 36 }; 37 this.origFormat = null; // original string format 38 if (predefinedColors) { 39 $.extend(this.colors, predefinedColors); 40 } 41 if (val) { 42 if (val.toLowerCase !== undefined) { 43 // cast to string 44 val = val + ''; 45 this.setColor(val); 46 } else if (val.h !== undefined) { 47 this.value = val; 48 } 49 } 50 }; 51 52 Color.prototype = { 53 constructor: Color, 54 // 140 predefined colors from the HTML Colors spec 55 colors: { 56 "aliceblue": "#f0f8ff", 57 "antiquewhite": "#faebd7", 58 "aqua": "#00ffff", 59 "aquamarine": "#7fffd4", 60 "azure": "#f0ffff", 61 "beige": "#f5f5dc", 62 "bisque": "#ffe4c4", 63 "black": "#000000", 64 "blanchedalmond": "#ffebcd", 65 "blue": "#0000ff", 66 "blueviolet": "#8a2be2", 67 "brown": "#a52a2a", 68 "burlywood": "#deb887", 69 "cadetblue": "#5f9ea0", 70 "chartreuse": "#7fff00", 71 "chocolate": "#d2691e", 72 "coral": "#ff7f50", 73 "cornflowerblue": "#6495ed", 74 "cornsilk": "#fff8dc", 75 "crimson": "#dc143c", 76 "cyan": "#00ffff", 77 "darkblue": "#00008b", 78 "darkcyan": "#008b8b", 79 "darkgoldenrod": "#b8860b", 80 "darkgray": "#a9a9a9", 81 "darkgreen": "#006400", 82 "darkkhaki": "#bdb76b", 83 "darkmagenta": "#8b008b", 84 "darkolivegreen": "#556b2f", 85 "darkorange": "#ff8c00", 86 "darkorchid": "#9932cc", 87 "darkred": "#8b0000", 88 "darksalmon": "#e9967a", 89 "darkseagreen": "#8fbc8f", 90 "darkslateblue": "#483d8b", 91 "darkslategray": "#2f4f4f", 92 "darkturquoise": "#00ced1", 93 "darkviolet": "#9400d3", 94 "deeppink": "#ff1493", 95 "deepskyblue": "#00bfff", 96 "dimgray": "#696969", 97 "dodgerblue": "#1e90ff", 98 "firebrick": "#b22222", 99 "floralwhite": "#fffaf0", 100 "forestgreen": "#228b22", 101 "fuchsia": "#ff00ff", 102 "gainsboro": "#dcdcdc", 103 "ghostwhite": "#f8f8ff", 104 "gold": "#ffd700", 105 "goldenrod": "#daa520", 106 "gray": "#808080", 107 "green": "#008000", 108 "greenyellow": "#adff2f", 109 "honeydew": "#f0fff0", 110 "hotpink": "#ff69b4", 111 "indianred": "#cd5c5c", 112 "indigo": "#4b0082", 113 "ivory": "#fffff0", 114 "khaki": "#f0e68c", 115 "lavender": "#e6e6fa", 116 "lavenderblush": "#fff0f5", 117 "lawngreen": "#7cfc00", 118 "lemonchiffon": "#fffacd", 119 "lightblue": "#add8e6", 120 "lightcoral": "#f08080", 121 "lightcyan": "#e0ffff", 122 "lightgoldenrodyellow": "#fafad2", 123 "lightgrey": "#d3d3d3", 124 "lightgreen": "#90ee90", 125 "lightpink": "#ffb6c1", 126 "lightsalmon": "#ffa07a", 127 "lightseagreen": "#20b2aa", 128 "lightskyblue": "#87cefa", 129 "lightslategray": "#778899", 130 "lightsteelblue": "#b0c4de", 131 "lightyellow": "#ffffe0", 132 "lime": "#00ff00", 133 "limegreen": "#32cd32", 134 "linen": "#faf0e6", 135 "magenta": "#ff00ff", 136 "maroon": "#800000", 137 "mediumaquamarine": "#66cdaa", 138 "mediumblue": "#0000cd", 139 "mediumorchid": "#ba55d3", 140 "mediumpurple": "#9370d8", 141 "mediumseagreen": "#3cb371", 142 "mediumslateblue": "#7b68ee", 143 "mediumspringgreen": "#00fa9a", 144 "mediumturquoise": "#48d1cc", 145 "mediumvioletred": "#c71585", 146 "midnightblue": "#191970", 147 "mintcream": "#f5fffa", 148 "mistyrose": "#ffe4e1", 149 "moccasin": "#ffe4b5", 150 "navajowhite": "#ffdead", 151 "navy": "#000080", 152 "oldlace": "#fdf5e6", 153 "olive": "#808000", 154 "olivedrab": "#6b8e23", 155 "orange": "#ffa500", 156 "orangered": "#ff4500", 157 "orchid": "#da70d6", 158 "palegoldenrod": "#eee8aa", 159 "palegreen": "#98fb98",
160 "paleturquoise": "#afeeee", 161 "palevioletred": "#d87093", 162 "papayawhip": "#ffefd5", 163 "peachpuff": "#ffdab9", 164 "peru": "#cd853f", 165 "pink": "#ffc0cb", 166 "plum": "#dda0dd", 167 "powderblue": "#b0e0e6", 168 "purple": "#800080", 169 "red": "#ff0000", 170 "rosybrown": "#bc8f8f", 171 "royalblue": "#4169e1", 172 "saddlebrown": "#8b4513", 173 "salmon": "#fa8072", 174 "sandybrown": "#f4a460", 175 "seagreen": "#2e8b57", 176 "seashell": "#fff5ee", 177 "sienna": "#a0522d", 178 "silver": "#c0c0c0", 179 "skyblue": "#87ceeb", 180 "slateblue": "#6a5acd", 181 "slategray": "#708090", 182 "snow": "#fffafa", 183 "springgreen": "#00ff7f", 184 "steelblue": "#4682b4", 185 "tan": "#d2b48c", 186 "teal": "#008080", 187 "thistle": "#d8bfd8", 188 "tomato": "#ff6347", 189 "turquoise": "#40e0d0", 190 "violet": "#ee82ee", 191 "wheat": "#f5deb3", 192 "white": "#ffffff", 193 "whitesmoke": "#f5f5f5", 194 "yellow": "#ffff00", 195 "yellowgreen": "#9acd32", 196 "transparent": "transparent" 197 }, 198 _sanitizeNumber: function(val) { 199 if (typeof val === 'number') { 200 return val; 201 } 202 if (isNaN(val) || (val === null) || (val === '') || (val === undefined)) { 203 return 1; 204 } 205 if (val === '') { 206 return 0; 207 } 208 if (val.toLowerCase !== undefined) { 209 if (val.match(/^\./)) { 210 val = "0" + val; 211 } 212 return Math.ceil(parseFloat(val) * 100) / 100; 213 } 214 return 1; 215 }, 216 isTransparent: function(strVal) { 217 if (!strVal) { 218 return false; 219 } 220 strVal = strVal.toLowerCase().trim(); 221 return (strVal === 'transparent') || (strVal.match(/#?00000000/)) || (strVal.match(/(rgba|hsla)\(0,0,0,0?\.?0\)/)); 222 }, 223 rgbaIsTransparent: function(rgba) { 224 return ((rgba.r === 0) && (rgba.g === 0) && (rgba.b === 0) && (rgba.a === 0)); 225 }, 226 //parse a string to HSB 227 setColor: function(strVal) { 228 strVal = strVal.toLowerCase().trim(); 229 if (strVal) { 230 if (this.isTransparent(strVal)) { 231 this.value = { 232 h: 0, 233 s: 0, 234 b: 0, 235 a: 0 236 }; 237 } else { 238 this.value = this.stringToHSB(strVal) || { 239 h: 0, 240 s: 0, 241 b: 0, 242 a: 1 243 }; // if parser fails, defaults to black 244 } 245 } 246 }, 247 stringToHSB: function(strVal) { 248 strVal = strVal.toLowerCase(); 249 var alias; 250 if (typeof this.colors[strVal] !== 'undefined') { 251 strVal = this.colors[strVal]; 252 alias = 'alias'; 253 } 254 var that = this, 255 result = false;
256 $.each(this.stringParsers, function(i, parser) { 257 var match = parser.re.exec(strVal), 258 values = match && parser.parse.apply(that, [match]), 259 format = alias || parser.format || 'rgba'; 260 if (values) { 261 if (format.match(/hsla?/)) { 262 result = that.RGBtoHSB.apply(that, that.HSLtoRGB.apply(that, values)); 263 } else { 264 result = that.RGBtoHSB.apply(that, values); 265 } 266 that.origFormat = format; 267 return false; 268 } 269 return true; 270 }); 271 return result; 272 }, 273 setHue: function(h) { 274 this.value.h = 1 - h; 275 }, 276 setSaturation: function(s) { 277 this.value.s = s; 278 }, 279 setBrightness: function(b) { 280 this.value.b = 1 - b; 281 }, 282 setAlpha: function(a) { 283 this.value.a = Math.round((parseInt((1 - a) * 100, 10) / 100) * 100) / 100; 284 }, 285 toRGB: function(h, s, b, a) { 286 if (!h) { 287 h = this.value.h; 288 s = this.value.s; 289 b = this.value.b; 290 } 291 h *= 360; 292 var R, G, B, X, C; 293 h = (h % 360) / 60; 294 C = b * s; 295 X = C * (1 - Math.abs(h % 2 - 1)); 296 R = G = B = b - C; 297 298 h = ~~h; 299 R += [C, X, 0, 0, X, C][h]; 300 G += [X, C, C, X, 0, 0][h]; 301 B += [0, 0, X, C, C, X][h]; 302 return { 303 r: Math.round(R * 255), 304 g: Math.round(G * 255), 305 b: Math.round(B * 255), 306 a: a || this.value.a 307 }; 308 }, 309 toHex: function(h, s, b, a) { 310 var rgb = this.toRGB(h, s, b, a); 311 if (this.rgbaIsTransparent(rgb)) { 312 return 'transparent'; 313 } 314 return '#' + ((1 << 24) | (parseInt(rgb.r) << 16) | (parseInt(rgb.g) << 8) | parseInt(rgb.b)).toString(16).substr(1); 315 }, 316 toHSL: function(h, s, b, a) { 317 h = h || this.value.h; 318 s = s || this.value.s; 319 b = b || this.value.b; 320 a = a || this.value.a; 321 322 var H = h, 323 L = (2 - s) * b, 324 S = s * b; 325 if (L > 0 && L <= 1) { 326 S /= L; 327 } else { 328 S /= 2 - L; 329 } 330 L /= 2; 331 if (S > 1) { 332 S = 1; 333 } 334 return { 335 h: isNaN(H) ? 0 : H, 336 s: isNaN(S) ? 0 : S, 337 l: isNaN(L) ? 0 : L, 338 a: isNaN(a) ? 0 : a 339 }; 340 }, 341 toAlias: function(r, g, b, a) { 342 var rgb = this.toHex(r, g, b, a); 343 for (var alias in this.colors) { 344 if (this.colors[alias] === rgb) { 345 return alias; 346 } 347 } 348 return false; 349 }, 350 RGBtoHSB: function(r, g, b, a) { 351 r /= 255; 352 g /= 255; 353 b /= 255; 354 355 var H, S, V, C; 356 V = Math.max(r, g, b); 357 C = V - Math.min(r, g, b); 358 H = (C === 0 ? null : 359 V === r ? (g - b) / C : 360 V === g ? (b - r) / C + 2 : 361 (r - g) / C + 4 362 ); 363 H = ((H + 360) % 6) * 60 / 360; 364 S = C === 0 ? 0 : C / V; 365 return { 366 h: this._sanitizeNumber(H), 367 s: S, 368 b: V, 369 a: this._sanitizeNumber(a) 370 }; 371 }, 372 HueToRGB: function(p, q, h) { 373 if (h < 0) { 374 h += 1; 375 } else if (h > 1) { 376 h -= 1; 377 } 378 if ((h * 6) < 1) { 379 return p + (q - p) * h * 6; 380 } else if ((h * 2) < 1) { 381 return q; 382 } else if ((h * 3) < 2) { 383 return p + (q - p) * ((2 / 3) - h) * 6; 384 } else { 385 return p; 386 } 387 }, 388 HSLtoRGB: function(h, s, l, a) { 389 if (s < 0) { 390 s = 0; 391 } 392 var q; 393 if (l <= 0.5) { 394 q = l * (1 + s); 395 } else { 396 q = l + s - (l * s); 397 } 398 399 var p = 2 * l - q; 400 401 var tr = h + (1 / 3); 402 var tg = h; 403 var tb = h - (1 / 3); 404 405 var r = Math.round(this.HueToRGB(p, q, tr) * 255); 406 var g = Math.round(this.HueToRGB(p, q, tg) * 255); 407 var b = Math.round(this.HueToRGB(p, q, tb) * 255); 408 return [r, g, b, this._sanitizeNumber(a)]; 409 }, 410 toString: function(format) { 411 format = format || 'rgba'; 412 var c = false; 413 switch (format) { 414 case 'rgb': 415 { 416 c = this.toRGB(); 417 if (this.rgbaIsTransparent(c)) { 418 return 'transparent'; 419 } 420 return 'rgb(' + c.r + ',' + c.g + ',' + c.b + ')'; 421 } 422 break; 423 case 'rgba': 424 { 425 c = this.toRGB(); 426 return 'rgba(' + c.r + ',' + c.g + ',' + c.b + ',' + c.a + ')'; 427 } 428 break; 429 case 'hsl': 430 { 431 c = this.toHSL(); 432 return 'hsl(' + Math.round(c.h * 360) + ',' + Math.round(c.s * 100) + '%,' + Math.round(c.l * 100) + '%)'; 433 } 434 break; 435 case 'hsla': 436 { 437 c = this.toHSL(); 438 return 'hsla(' + Math.round(c.h * 360) + ',' + Math.round(c.s * 100) + '%,' + Math.round(c.l * 100) + '%,' + c.a + ')'; 439 } 440 break; 441 case 'hex': 442 { 443 return this.toHex(); 444 } 445 break; 446 case 'alias': 447 return this.toAlias() || this.toHex(); 448 default: 449 { 450 return c; 451 } 452 break; 453 } 454 }, 455 // a set of RE's that can match strings and generate color tuples. 456 // from John Resig color plugin 457 // https://github.com/jquery/jquery-color/ 458 stringParsers: [{ 459 re: /rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*?\)/, 460 format: 'rgb', 461 parse: function(execResult) { 462 return [ 463 execResult[1], 464 execResult[2], 465 execResult[3], 466 1 467 ]; 468 } 469 }, {
470 re: /rgb\(\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*?\)/, 471 format: 'rgb', 472 parse: function(execResult) { 473 return [ 474 2.55 * execResult[1], 475 2.55 * execResult[2], 476 2.55 * execResult[3], 477 1 478 ]; 479 } 480 }, { 481 re: /rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d*(?:\.\d+)?)\s*)?\)/, 482 format: 'rgba', 483 parse: function(execResult) { 484 return [ 485 execResult[1], 486 execResult[2], 487 execResult[3], 488 execResult[4] 489 ]; 490 } 491 }, { 492 re: /rgba\(\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*(?:,\s*(\d*(?:\.\d+)?)\s*)?\)/, 493 format: 'rgba', 494 parse: function(execResult) { 495 return [ 496 2.55 * execResult[1], 497 2.55 * execResult[2], 498 2.55 * execResult[3], 499 execResult[4] 500 ]; 501 } 502 }, { 503 re: /hsl\(\s*(\d*(?:\.\d+)?)\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*?\)/, 504 format: 'hsl', 505 parse: function(execResult) { 506 return [ 507 execResult[1] / 360, 508 execResult[2] / 100, 509 execResult[3] / 100, 510 execResult[4] 511 ]; 512 } 513 }, { 514 re: /hsla\(\s*(\d*(?:\.\d+)?)\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*(?:,\s*(\d*(?:\.\d+)?)\s*)?\)/, 515 format: 'hsla', 516 parse: function(execResult) { 517 return [ 518 execResult[1] / 360, 519 execResult[2] / 100, 520 execResult[3] / 100, 521 execResult[4] 522 ]; 523 } 524 }, { 525 re: /#?([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/, 526 format: 'hex', 527 parse: function(execResult) { 528 return [ 529 parseInt(execResult[1], 16), 530 parseInt(execResult[2], 16), 531 parseInt(execResult[3], 16), 532 1 533 ]; 534 } 535 }, { 536 re: /#?([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/, 537 format: 'hex', 538 parse: function(execResult) { 539 return [ 540 parseInt(execResult[1] + execResult[1], 16), 541 parseInt(execResult[2] + execResult[2], 16), 542 parseInt(execResult[3] + execResult[3], 16), 543 1 544 ]; 545 } 546 }], 547 colorNameToHex: function(name) { 548 if (typeof this.colors[name.toLowerCase()] !== 'undefined') { 549 return this.colors[name.toLowerCase()]; 550 } 551 return false; 552 } 553 }; 554 555 /* 556 * Default plugin options 557 */ 558 var defaults = { 559 horizontal: false, // horizontal mode layout ? 560 inline: false, //forces to show the colorpicker as an inline element 561 color: false, //forces a color 562 format: false, //forces a format 563 input: 'input', // children input selector 564 container: false, // container selector 565 component: '.add-on, .input-group-addon', // children component selector 566 sliders: { 567 saturation: { 568 maxLeft: 100, 569 maxTop: 100, 570 callLeft: 'setSaturation', 571 callTop: 'setBrightness' 572 }, 573 hue: { 574 maxLeft: 0, 575 maxTop: 100, 576 callLeft: false, 577 callTop: 'setHue' 578 }, 579 alpha: { 580 maxLeft: 0, 581 maxTop: 100, 582 callLeft: false, 583 callTop: 'setAlpha' 584 } 585 }, 586 slidersHorz: { 587 saturation: { 588 maxLeft: 100, 589 maxTop: 100, 590 callLeft: 'setSaturation', 591 callTop: 'setBrightness' 592 }, 593 hue: { 594 maxLeft: 100, 595 maxTop: 0, 596 callLeft: 'setHue', 597 callTop: false 598 }, 599 alpha: { 600 maxLeft: 100, 601 maxTop: 0, 602 callLeft: 'setAlpha', 603 callTop: false 604 } 605 }, 606 template: '<div class="colorpicker dropdown-menu">' + 607 '<div class="colorpicker-saturation"><i><b></b></i></div>' + 608 '<div class="colorpicker-hue"><i></i></div>' + 609 '<div class="colorpicker-alpha"><i></i></div>' + 610 '<div class="colorpicker-color"><div /></div>' + 611 '<div class="colorpicker-selectors"></div>' + 612 '</div>', 613 align: 'right', 614 customClass: null, 615 colorSelectors: null 616 }; 617 618 /** 619 * Colorpicker component class 620 * 621 * @param {Object|String} element 622 * @param {Object} options 623 * @constructor 624 */ 625 var Colorpicker = function(element, options) { 626 this.element = $(element).addClass('colorpicker-element'); 627 this.options = $.extend(true, {}, defaults, this.element.data(), options); 628 this.component = this.options.component; 629 this.component = (this.component !== false) ? this.element.find(this.component) : false;
630 if (this.component && (this.component.length === 0)) { 631 this.component = false; 632 } 633 this.container = (this.options.container === true) ? this.element : this.options.container; 634 this.container = (this.container !== false) ? $(this.container) : false; 635 636 // Is the element an input? Should we search inside for any input? 637 this.input = this.element.is('input') ? this.element : (this.options.input ? 638 this.element.find(this.options.input) : false); 639 if (this.input && (this.input.length === 0)) { 640 this.input = false; 641 } 642 // Set HSB color 643 this.color = new Color(this.options.color !== false ? this.options.color : this.getValue(), this.options.colorSelectors); 644 this.format = this.options.format !== false ? this.options.format : this.color.origFormat; 645 646 if (this.options.color !== false) { 647 this.updateInput(this.color); 648 this.updateData(this.color); 649 } 650 651 // Setup picker 652 this.picker = $(this.options.template); 653 if (this.options.customClass) { 654 this.picker.addClass(this.options.customClass); 655 } 656 if (this.options.inline) { 657 this.picker.addClass('colorpicker-inline colorpicker-visible'); 658 } else { 659 this.picker.addClass('colorpicker-hidden'); 660 } 661 if (this.options.horizontal) { 662 this.picker.addClass('colorpicker-horizontal'); 663 } 664 if (this.format === 'rgba' || this.format === 'hsla' || this.options.format === false) { 665 this.picker.addClass('colorpicker-with-alpha'); 666 } 667 if (this.options.align === 'right') { 668 this.picker.addClass('colorpicker-right'); 669 } 670 if (this.options.inline === true) { 671 this.picker.addClass('colorpicker-no-arrow'); 672 } 673 if (this.options.colorSelectors) { 674 var colorpicker = this; 675 $.each(this.options.colorSelectors, function(name, color) { 676 var $btn = $('<i />').css('background-color', color).data('class', name); 677 $btn.click(function() { 678 colorpicker.setValue($(this).css('background-color')); 679 }); 680 colorpicker.picker.find('.colorpicker-selectors').append($btn); 681 }); 682 this.picker.find('.colorpicker-selectors').show(); 683 } 684 this.picker.on('mousedown.colorpicker touchstart.colorpicker', $.proxy(this.mousedown, this)); 685 this.picker.appendTo(this.container ? this.container : $('body')); 686 687 // Bind events 688 if (this.input !== false) { 689 this.input.on({ 690 'keyup.colorpicker': $.proxy(this.keyup, this) 691 }); 692 this.input.on({ 693 'change.colorpicker': $.proxy(this.change, this) 694 }); 695 if (this.component === false) { 696 this.element.on({ 697 'focus.colorpicker': $.proxy(this.show, this) 698 }); 699 } 700 if (this.options.inline === false) { 701 this.element.on({ 702 'focusout.colorpicker': $.proxy(this.hide, this) 703 }); 704 } 705 } 706 707 if (this.component !== false) { 708 this.component.on({ 709 'click.colorpicker': $.proxy(this.show, this) 710 }); 711 } 712 713 if ((this.input === false) && (this.component === false)) { 714 this.element.on({ 715 'click.colorpicker': $.proxy(this.show, this) 716 }); 717 } 718 719 // for HTML5 input[type='color'] 720 if ((this.input !== false) && (this.component !== false) && (this.input.attr('type') === 'color')) { 721 722 this.input.on({ 723 'click.colorpicker': $.proxy(this.show, this), 724 'focus.colorpicker': $.proxy(this.show, this) 725 }); 726 } 727 this.update(); 728 729 $($.proxy(function() { 730 this.element.trigger('create'); 731 }, this)); 732 }; 733 734 Colorpicker.Color = Color; 735 736 Colorpicker.prototype = { 737 constructor: Colorpicker, 738 destroy: function() { 739 this.picker.remove(); 740 this.element.removeData('colorpicker', 'color').off('.colorpicker'); 741 if (this.input !== false) { 742 this.input.off('.colorpicker'); 743 } 744 if (this.component !== false) { 745 this.component.off('.colorpicker'); 746 } 747 this.element.removeClass('colorpicker-element'); 748 this.element.trigger({ 749 type: 'destroy' 750 }); 751 }, 752 reposition: function() { 753 if (this.options.inline !== false || this.options.container) { 754 return false;
755 } 756 var type = this.container && this.container[0] !== document.body ? 'position' : 'offset'; 757 var element = this.component || this.element; 758 var offset = element[type](); 759 if (this.options.align === 'right') { 760 offset.left -= this.picker.outerWidth() - element.outerWidth(); 761 } 762 this.picker.css({ 763 top: offset.top + element.outerHeight(), 764 left: offset.left 765 }); 766 }, 767 show: function(e) { 768 if (this.isDisabled()) { 769 return false; 770 } 771 this.picker.addClass('colorpicker-visible').removeClass('colorpicker-hidden'); 772 this.reposition(); 773 $(window).on('resize.colorpicker', $.proxy(this.reposition, this)); 774 if (e && (!this.hasInput() || this.input.attr('type') === 'color')) { 775 if (e.stopPropagation && e.preventDefault) { 776 e.stopPropagation(); 777 e.preventDefault(); 778 } 779 } 780 if ((this.component || !this.input) && (this.options.inline === false)) { 781 $(window.document).on({ 782 'mousedown.colorpicker': $.proxy(this.hide, this) 783 }); 784 } 785 this.element.trigger({ 786 type: 'showPicker', 787 color: this.color 788 }); 789 }, 790 hide: function() { 791 this.picker.addClass('colorpicker-hidden').removeClass('colorpicker-visible'); 792 $(window).off('resize.colorpicker', this.reposition); 793 $(document).off({ 794 'mousedown.colorpicker': this.hide 795 }); 796 this.update(); 797 this.element.trigger({ 798 type: 'hidePicker', 799 color: this.color 800 }); 801 }, 802 updateData: function(val) { 803 val = val || this.color.toString(this.format); 804 this.element.data('color', val); 805 return val; 806 }, 807 updateInput: function(val) { 808 val = val || this.color.toString(this.format); 809 if (this.input !== false) { 810 if (this.options.colorSelectors) { 811 var color = new Color(val, this.options.colorSelectors); 812 var alias = color.toAlias(); 813 if (typeof this.options.colorSelectors[alias] !== 'undefined') { 814 val = alias; 815 } 816 } 817 this.input.prop('value', val); 818 } 819 return val; 820 }, 821 updatePicker: function(val) { 822 if (val !== undefined) { 823 this.color = new Color(val, this.options.colorSelectors); 824 } 825 var sl = (this.options.horizontal === false) ? this.options.sliders : this.options.slidersHorz; 826 var icns = this.picker.find('i'); 827 if (icns.length === 0) { 828 return; 829 } 830 if (this.options.horizontal === false) { 831 sl = this.options.sliders; 832 icns.eq(1).css('top', sl.hue.maxTop * (1 - this.color.value.h)).end() 833 .eq(2).css('top', sl.alpha.maxTop * (1 - this.color.value.a)); 834 } else { 835 sl = this.options.slidersHorz; 836 icns.eq(1).css('left', sl.hue.maxLeft * (1 - this.color.value.h)).end() 837 .eq(2).css('left', sl.alpha.maxLeft * (1 - this.color.value.a)); 838 } 839 icns.eq(0).css({ 840 'top': sl.saturation.maxTop - this.color.value.b * sl.saturation.maxTop, 841 'left': this.color.value.s * sl.saturation.maxLeft 842 }); 843 this.picker.find('.colorpicker-saturation').css('backgroundColor', this.color.toHex(this.color.value.h, 1, 1, 1)); 844 this.picker.find('.colorpicker-alpha').css('backgroundColor', this.color.toHex()); 845 this.picker.find('.colorpicker-color, .colorpicker-color div').css('backgroundColor', this.color.toString(this.format)); 846 return val; 847 }, 848 updateComponent: function(val) { 849 val = val || this.color.toString(this.format); 850 if (this.component !== false) { 851 var icn = this.component.find('i').eq(0); 852 if (icn.length > 0) { 853 icn.css({ 854 'backgroundColor': val 855 }); 856 } else { 857 this.component.css({ 858 'backgroundColor': val 859 }); 860 } 861 } 862 return val; 863 }, 864 update: function(force) { 865 var val; 866 if ((this.getValue(false) !== false) || (force === true)) { 867 // Update input/data only if the current value is not empty 868 val = this.updateComponent(); 869 this.updateInput(val); 870 this.updateData(val); 871 this.updatePicker(); // only update picker if value is not empty 872 } 873 return val; 874 875 }, 876 setValue: function(val) { // set color manually 877 this.color = new Color(val, this.options.colorSelectors); 878 this.update(true); 879 this.element.trigger({ 880 type: 'changeColor', 881 color: this.color, 882 value: val 883 }); 884 }, 885 getValue: function(defaultValue) { 886 defaultValue = (defaultValue === undefined) ? '#000000' : defaultValue; 887 var val; 888 if (this.hasInput()) { 889 val = this.input.val(); 890 } else { 891 val = this.element.data('color'); 892 } 893 if ((val === undefined) || (val === '') || (val === null)) { 894 // if not defined or empty, return default 895 val = defaultValue; 896 } 897 return val; 898 },
899 hasInput: function() { 900 return (this.input !== false); 901 }, 902 isDisabled: function() { 903 if (this.hasInput()) { 904 return (this.input.prop('disabled') === true); 905 } 906 return false; 907 }, 908 disable: function() { 909 if (this.hasInput()) { 910 this.input.prop('disabled', true); 911 this.element.trigger({ 912 type: 'disable', 913 color: this.color, 914 value: this.getValue() 915 }); 916 return true; 917 } 918 return false; 919 }, 920 enable: function() { 921 if (this.hasInput()) { 922 this.input.prop('disabled', false); 923 this.element.trigger({ 924 type: 'enable', 925 color: this.color, 926 value: this.getValue() 927 }); 928 return true; 929 } 930 return false; 931 }, 932 currentSlider: null, 933 mousePointer: { 934 left: 0, 935 top: 0 936 }, 937 mousedown: function(e) { 938 if (!e.pageX && !e.pageY && e.originalEvent && e.originalEvent.touches) { 939 e.pageX = e.originalEvent.touches[0].pageX; 940 e.pageY = e.originalEvent.touches[0].pageY; 941 } 942 e.stopPropagation(); 943 e.preventDefault(); 944 945 var target = $(e.target); 946 947 //detect the slider and set the limits and callbacks 948 var zone = target.closest('div'); 949 var sl = this.options.horizontal ? this.options.slidersHorz : this.options.sliders; 950 if (!zone.is('.colorpicker')) { 951 if (zone.is('.colorpicker-saturation')) { 952 this.currentSlider = $.extend({}, sl.saturation); 953 } else if (zone.is('.colorpicker-hue')) { 954 this.currentSlider = $.extend({}, sl.hue); 955 } else if (zone.is('.colorpicker-alpha')) { 956 this.currentSlider = $.extend({}, sl.alpha); 957 } else { 958 return false; 959 } 960 var offset = zone.offset(); 961 //reference to guide's style 962 this.currentSlider.guide = zone.find('i')[0].style; 963 this.currentSlider.left = e.pageX - offset.left; 964 this.currentSlider.top = e.pageY - offset.top; 965 this.mousePointer = { 966 left: e.pageX, 967 top: e.pageY 968 }; 969 //trigger mousemove to move the guide to the current position 970 $(document).on({ 971 'mousemove.colorpicker': $.proxy(this.mousemove, this), 972 'touchmove.colorpicker': $.proxy(this.mousemove, this), 973 'mouseup.colorpicker': $.proxy(this.mouseup, this), 974 'touchend.colorpicker': $.proxy(this.mouseup, this) 975 }).trigger('mousemove'); 976 } 977 return false; 978 }, 979 mousemove: function(e) { 980 if (!e.pageX && !e.pageY && e.originalEvent && e.originalEvent.touches) { 981 e.pageX = e.originalEvent.touches[0].pageX; 982 e.pageY = e.originalEvent.touches[0].pageY; 983 } 984 e.stopPropagation(); 985 e.preventDefault(); 986 var left = Math.max( 987 0, 988 Math.min( 989 this.currentSlider.maxLeft, 990 this.currentSlider.left + ((e.pageX || this.mousePointer.left) - this.mousePointer.left) 991 ) 992 ); 993 var top = Math.max( 994 0, 995 Math.min( 996 this.currentSlider.maxTop, 997 this.currentSlider.top + ((e.pageY || this.mousePointer.top) - this.mousePointer.top) 998 ) 999 ); 1000 this.currentSlider.guide.left = left + 'px'; 1001 this.currentSlider.guide.top = top + 'px'; 1002 if (this.currentSlider.callLeft) { 1003 this.color[this.currentSlider.callLeft].call(this.color, left / this.currentSlider.maxLeft); 1004 } 1005 if (this.currentSlider.callTop) { 1006 this.color[this.currentSlider.callTop].call(this.color, top / this.currentSlider.maxTop); 1007 } 1008 // Change format dynamically 1009 // Only occurs if user choose the dynamic format by 1010 // setting option format to false 1011 if (this.currentSlider.callTop === 'setAlpha' && this.options.format === false) { 1012 1013 // Converting from hex / rgb to rgba 1014 if (this.color.value.a !== 1) { 1015 this.format = 'rgba'; 1016 this.color.origFormat = 'rgba'; 1017 } 1018 1019 // Converting from rgba to hex 1020 else { 1021 this.format = 'hex'; 1022 this.color.origFormat = 'hex'; 1023 } 1024 } 1025 this.update(true); 1026 1027 this.element.trigger({ 1028 type: 'changeColor', 1029 color: this.color 1030 }); 1031 return false;
1032 }, 1033 mouseup: function(e) { 1034 e.stopPropagation(); 1035 e.preventDefault(); 1036 $(document).off({ 1037 'mousemove.colorpicker': this.mousemove, 1038 'touchmove.colorpicker': this.mousemove, 1039 'mouseup.colorpicker': this.mouseup, 1040 'touchend.colorpicker': this.mouseup 1041 }); 1042 return false; 1043 }, 1044 change: function(e) { 1045 this.keyup(e); 1046 }, 1047 keyup: function(e) { 1048 if ((e.keyCode === 38)) { 1049 if (this.color.value.a < 1) { 1050 this.color.value.a = Math.round((this.color.value.a + 0.01) * 100) / 100; 1051 } 1052 this.update(true); 1053 } else if ((e.keyCode === 40)) { 1054 if (this.color.value.a > 0) { 1055 this.color.value.a = Math.round((this.color.value.a - 0.01) * 100) / 100; 1056 } 1057 this.update(true); 1058 } else { 1059 this.color = new Color(this.input.val(), this.options.colorSelectors); 1060 // Change format dynamically 1061 // Only occurs if user choose the dynamic format by 1062 // setting option format to false 1063 if (this.color.origFormat && this.options.format === false) { 1064 this.format = this.color.origFormat; 1065 } 1066 if (this.getValue(false) !== false) { 1067 this.updateData(); 1068 this.updateComponent(); 1069 this.updatePicker(); 1070 } 1071 } 1072 this.element.trigger({ 1073 type: 'changeColor', 1074 color: this.color, 1075 value: this.input.val() 1076 }); 1077 } 1078 }; 1079 1080 $.colorpicker = Colorpicker; 1081 1082 $.fn.colorpicker = function(option) { 1083 var apiArgs = Array.prototype.slice.call(arguments, 1), 1084 isSingleElement = (this.length === 1), 1085 returnValue = null; 1086 1087 var $jq = this.each(function() { 1088 var $this = $(this), 1089 inst = $this.data('colorpicker'), 1090 options = ((typeof option === 'object') ? option : {}); 1091 1092 if (!inst) { 1093 inst = new Colorpicker(this, options); 1094 $this.data('colorpicker', inst); 1095 } 1096 1097 if (typeof option === 'string') { 1098 if ($.isFunction(inst[option])) { 1099 returnValue = inst[option].apply(inst, apiArgs); 1100 } else { // its a property ? 1101 if (apiArgs.length) { 1102 // set property 1103 inst[option] = apiArgs[0]; 1104 } 1105 returnValue = inst[option]; 1106 } 1107 } else { 1108 returnValue = $this; 1109 } 1110 }); 1111 return isSingleElement ? returnValue : $jq; 1112 }; 1113 1114 $.fn.colorpicker.constructor = Colorpicker; 1115 1116}));
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.