vendor: 5,708 bytes, lines 1-143
1// Spectrum Colorpicker v1.8.0 2// https://github.com/bgrins/spectrum 3// Author: Brian Grinstead 4// License: MIT 5 6(function (factory) { 7 "use strict"; 8 9 if (typeof define === 'function' && define.amd) { // AMD 10 define(['jquery'], factory); 11 } 12 else if (typeof exports == "object" && typeof module == "object") { // CommonJS 13 module.exports = factory(require('jquery')); 14 } 15 else { // Browser 16 factory(jQuery); 17 } 18})(function($, undefined) { 19 "use strict"; 20 21 var defaultOpts = { 22 23 // Callbacks 24 beforeShow: noop, 25 move: noop, 26 change: noop, 27 show: noop, 28 hide: noop, 29 30 // Options 31 color: false, 32 flat: false, 33 showInput: false, 34 allowEmpty: false, 35 showButtons: true, 36 clickoutFiresChange: true, 37 showInitial: false, 38 showPalette: false, 39 showPaletteOnly: false, 40 hideAfterPaletteSelect: false, 41 togglePaletteOnly: false, 42 showSelectionPalette: true, 43 localStorageKey: false, 44 appendTo: "body", 45 maxSelectionSize: 7, 46 cancelText: "cancel", 47 chooseText: "choose", 48 togglePaletteMoreText: "more", 49 togglePaletteLessText: "less", 50 clearText: "Clear Color Selection", 51 noColorSelectedText: "No Color Selected", 52 preferredFormat: false, 53 className: "", // Deprecated - use containerClassName and replacerClassName instead. 54 containerClassName: "", 55 replacerClassName: "", 56 showAlpha: false, 57 theme: "sp-light", 58 palette: [["#ffffff", "#000000", "#ff0000", "#ff8000", "#ffff00", "#008000", "#0000ff", "#4b0082", "#9400d3"]], 59 selectionPalette: [], 60 disabled: false, 61 offset: null 62 }, 63 spectrums = [], 64 IE = !!/msie/i.exec( window.navigator.userAgent ), 65 rgbaSupport = (function() { 66 function contains( str, substr ) { 67 return !!~('' + str).indexOf(substr); 68 } 69 70 var elem = document.createElement('div'); 71 var style = elem.style; 72 style.cssText = 'background-color:rgba(0,0,0,.5)'; 73 return contains(style.backgroundColor, 'rgba') || contains(style.backgroundColor, 'hsla'); 74 })(), 75 replaceInput = [ 76 "<div class='sp-replacer'>", 77 "<div class='sp-preview'><div class='sp-preview-inner'></div></div>", 78 "<div class='sp-dd'>▼</div>", 79 "</div>" 80 ].join(''), 81 markup = (function () { 82 83 // IE does not support gradients with multiple stops, so we need to simulate 84 // that for the rainbow slider with 8 divs that each have a single gradient 85 var gradientFix = ""; 86 if (IE) { 87 for (var i = 1; i <= 6; i++) { 88 gradientFix += "<div class='sp-" + i + "'></div>"; 89 } 90 } 91 92 return [ 93 "<div class='sp-container sp-hidden'>", 94 "<div class='sp-palette-container'>", 95 "<div class='sp-palette sp-thumb sp-cf'></div>", 96 "<div class='sp-palette-button-container sp-cf'>", 97 "<button type='button' class='sp-palette-toggle'></button>", 98 "</div>", 99 "</div>", 100 "<div class='sp-picker-container'>", 101 "<div class='sp-top sp-cf'>", 102 "<div class='sp-fill'></div>", 103 "<div class='sp-top-inner'>", 104 "<div class='sp-color'>", 105 "<div class='sp-sat'>", 106 "<div class='sp-val'>", 107 "<div class='sp-dragger'></div>", 108 "</div>", 109 "</div>", 110 "</div>", 111 "<div class='sp-clear sp-clear-display'>", 112 "</div>", 113 "<div class='sp-hue'>", 114 "<div class='sp-slider'></div>", 115 gradientFix, 116 "</div>", 117 "</div>", 118 "<div class='sp-alpha'><div class='sp-alpha-inner'><div class='sp-alpha-handle'></div></div></div>", 119 "</div>", 120 "<div class='sp-input-container sp-cf'>", 121 "<input class='sp-input' type='text' spellcheck='false' />", 122 "</div>", 123 "<div class='sp-initial sp-thumb sp-cf'></div>", 124 "<div class='sp-button-container sp-cf'>", 125 "<a class='sp-cancel' href='#'></a>", 126 "<button type='button' class='sp-choose'></button>", 127 "</div>", 128 "</div>", 129 "</div>" 130 ].join(""); 131 })(); 132 133 function paletteTemplate (p, color, className, opts) { 134 var html = []; 135 for (var i = 0; i < p.length; i++) { 136 var current = p[i]; 137 if(current) { 138 var tiny = tinycolor(current); 139 var c = tiny.toHsl().l < 0.5 ? "sp-thumb-el sp-thumb-dark" : "sp-thumb-el sp-thumb-light"; 140 c += (tinycolor.equals(color, current)) ? " sp-thumb-active" : ""; 141 var formattedString = tiny.toString(opts.preferredFormat || "rgb"); 142 var swatchStyle = rgbaSupport ? ("background-color:" + tiny.toRgbString()) : "filter:" + tiny.toFilter(); 143 html.push('<span title="' + formattedString + '" data-color="' + tiny.toRgbString() + '" class="' + c + '"><span class="sp-thumb-inner" style="' + swatchStyle + ';" /
vendor: 37,977 bytes, lines 143-1260
143></span>'); 144 } else { 145 var cls = 'sp-clear-display'; 146 html.push($('<div />') 147 .append($('<span data-color="" style="background-color:transparent;" class="' + cls + '"></span>') 148 .attr('title', opts.noColorSelectedText) 149 ) 150 .html() 151 ); 152 } 153 } 154 return "<div class='sp-cf " + className + "'>" + html.join('') + "</div>"; 155 } 156 157 function hideAll() { 158 for (var i = 0; i < spectrums.length; i++) { 159 if (spectrums[i]) { 160 spectrums[i].hide(); 161 } 162 } 163 } 164 165 function instanceOptions(o, callbackContext) { 166 var opts = $.extend({}, defaultOpts, o); 167 opts.callbacks = { 168 'move': bind(opts.move, callbackContext), 169 'change': bind(opts.change, callbackContext), 170 'show': bind(opts.show, callbackContext), 171 'hide': bind(opts.hide, callbackContext), 172 'beforeShow': bind(opts.beforeShow, callbackContext) 173 }; 174 175 return opts; 176 } 177 178 function spectrum(element, o) { 179 180 var opts = instanceOptions(o, element), 181 flat = opts.flat, 182 showSelectionPalette = opts.showSelectionPalette, 183 localStorageKey = opts.localStorageKey, 184 theme = opts.theme, 185 callbacks = opts.callbacks, 186 resize = throttle(reflow, 10), 187 visible = false, 188 isDragging = false, 189 dragWidth = 0, 190 dragHeight = 0, 191 dragHelperHeight = 0, 192 slideHeight = 0, 193 slideWidth = 0, 194 alphaWidth = 0, 195 alphaSlideHelperWidth = 0, 196 slideHelperHeight = 0, 197 currentHue = 0, 198 currentSaturation = 0, 199 currentValue = 0, 200 currentAlpha = 1, 201 palette = [], 202 paletteArray = [], 203 paletteLookup = {}, 204 selectionPalette = opts.selectionPalette.slice(0), 205 maxSelectionSize = opts.maxSelectionSize, 206 draggingClass = "sp-dragging", 207 shiftMovementDirection = null; 208 209 var doc = element.ownerDocument, 210 body = doc.body, 211 boundElement = $(element), 212 disabled = false, 213 container = $(markup, doc).addClass(theme), 214 pickerContainer = container.find(".sp-picker-container"), 215 dragger = container.find(".sp-color"), 216 dragHelper = container.find(".sp-dragger"), 217 slider = container.find(".sp-hue"), 218 slideHelper = container.find(".sp-slider"), 219 alphaSliderInner = container.find(".sp-alpha-inner"), 220 alphaSlider = container.find(".sp-alpha"), 221 alphaSlideHelper = container.find(".sp-alpha-handle"), 222 textInput = container.find(".sp-input"), 223 paletteContainer = container.find(".sp-palette"), 224 initialColorContainer = container.find(".sp-initial"), 225 cancelButton = container.find(".sp-cancel"), 226 clearButton = container.find(".sp-clear"), 227 chooseButton = container.find(".sp-choose"), 228 toggleButton = container.find(".sp-palette-toggle"), 229 isInput = boundElement.is("input"), 230 isInputTypeColor = isInput && boundElement.attr("type") === "color" && inputTypeColorSupport(), 231 shouldReplace = isInput && !flat, 232 replacer = (shouldReplace) ? $(replaceInput).addClass(theme).addClass(opts.className).addClass(opts.replacerClassName) : $([]), 233 offsetElement = (shouldReplace) ? replacer : boundElement, 234 previewElement = replacer.find(".sp-preview-inner"), 235 initialColor = opts.color || (isInput && boundElement.val()), 236 colorOnShow = false, 237 currentPreferredFormat = opts.preferredFormat, 238 clickoutFiresChange = !opts.showButtons || opts.clickoutFiresChange, 239 isEmpty = !initialColor, 240 allowEmpty = opts.allowEmpty && !isInputTypeColor; 241 242 function applyOptions() { 243 244 if (opts.showPaletteOnly) { 245 opts.showPalette = true; 246 } 247 248 toggleButton.text(opts.showPaletteOnly ? opts.togglePaletteMoreText : opts.togglePaletteLessText); 249 250 if (opts.palette) { 251 palette = opts.palette.slice(0); 252 paletteArray = $.isArray(palette[0]) ? palette : [palette]; 253 paletteLookup = {}; 254 for (var i = 0; i < paletteArray.length; i++) { 255 for (var j = 0; j < paletteArray[i].length; j++) { 256 var rgb = tinycolor(paletteArray[i][j]).toRgbString(); 257 paletteLookup[rgb] = true; 258 } 259 } 260 } 261 262 container.toggleClass("sp-flat", flat); 263 container.toggleClass("sp-input-disabled", !opts.showInput); 264 container.toggleClass("sp-alpha-enabled", opts.showAlpha); 265 container.toggleClass("sp-clear-enabled", allowEmpty); 266 container.toggleClass("sp-buttons-disabled", !opts.showButtons); 267 container.toggleClass("sp-palette-buttons-disabled", !opts.togglePaletteOnly); 268 container.toggleClass("sp-palette-disabled", !opts.showPalette); 269 container.toggleClass("sp-palette-only", opts.showPaletteOnly); 270 container.toggleClass("sp-initial-disabled", !opts.showInitial); 271 container.addClass(opts.className).addClass(opts.containerClassName); 272 273 reflow(); 274 } 275 276 function initialize() { 277 278 if (IE) { 279 container.find("*:not(input)").attr("unselectable", "on"); 280 } 281 282 applyOptions(); 283 284 if (shouldReplace) { 285 boundElement.after(replacer).hide(); 286 } 287 288 if (!allowEmpty) { 289 clearButton.hide(); 290 } 291 292 if (flat) { 293 boundElement.after(container).hide(); 294 } 295 else { 296 297 var appendTo = opts.appendTo === "parent" ? boundElement.parent() : $(opts.appendTo); 298 if (appendTo.length !== 1) { 299 appendTo = $("body"); 300 } 301 302 appendTo.append(container); 303 } 304 305 updateSelectionPaletteFromStorage(); 306 307 offsetElement.on("click.spectrum touchstart.spectrum", function (e) { 308 if (!disabled) { 309 toggle(); 310 } 311 312 e.stopPropagation(); 313 314 if (!$(e.target).is("input")) { 315 e.preventDefault(); 316 } 317 }); 318 319 if(boundElement.is(":disabled") || (opts.disabled === true)) { 320 disable(); 321 } 322 323 // Prevent clicks from bubbling up to document. This would cause it to be hidden. 324 container.click(stopPropagation); 325 326 // Handle user typed input 327 textInput.change(setFromTextInput); 328 textInput.on("paste", function () { 329 setTimeout(setFromTextInput, 1); 330 }); 331 textInput.keydown(function (e) { if (e.keyCode == 13) { setFromTextInput(); } }); 332 333 cancelButton.text(opts.cancelText); 334 cancelButton.on("click.spectrum", function (e) { 335 e.stopPropagation(); 336 e.preventDefault(); 337 revert(); 338 hide(); 339 }); 340 341 clearButton.attr("title", opts.clearText); 342 clearButton.on("click.spectrum", function (e) { 343 e.stopPropagation(); 344 e.preventDefault(); 345 isEmpty = true; 346 move(); 347 348 if(flat) { 349 //for the flat style, this is a change event 350 updateOriginalInput(true); 351 } 352 }); 353 354 chooseButton.text(opts.chooseText); 355 chooseButton.on("click.spectrum", function (e) { 356 e.stopPropagation(); 357 e.preventDefault(); 358 359 if (IE && textInput.is(":focus")) { 360 textInput.trigger('change'); 361 } 362 363 if (isValid()) { 364 updateOriginalInput(true); 365 hide(); 366 } 367 }); 368 369 toggleButton.text(opts.showPaletteOnly ? opts.togglePaletteMoreText : opts.togglePaletteLessText); 370 toggleButton.on("click.spectrum", function (e) { 371 e.stopPropagation(); 372 e.preventDefault(); 373 374 opts.showPaletteOnly = !opts.showPaletteOnly; 375 376 // To make sure the Picker area is drawn on the right, next to the 377 // Palette area (and not below the palette), first move the Palette 378 // to the left to make space for the picker, plus 5px extra. 379 // The 'applyOptions' function puts the whole container back into place 380 // and takes care of the button-text and the sp-palette-only CSS class. 381 if (!opts.showPaletteOnly && !flat) { 382 container.css('left', '-=' + (pickerContainer.outerWidth(true) + 5)); 383 } 384 applyOptions(); 385 }); 386 387 draggable(alphaSlider, function (dragX, dragY, e) { 388 currentAlpha = (dragX / alphaWidth); 389 isEmpty = false; 390 if (e.shiftKey) { 391 currentAlpha = Math.round(currentAlpha * 10) / 10; 392 } 393 394 move(); 395 }, dragStart, dragStop); 396 397 draggable(slider, function (dragX, dragY) { 398 currentHue = parseFloat(dragY / slideHeight); 399 isEmpty = false; 400 if (!opts.showAlpha) { 401 currentAlpha = 1; 402 } 403 move(); 404 }, dragStart, dragStop); 405 406 draggable(dragger, function (dragX, dragY, e) { 407 408 // shift+drag should snap the movement to either the x or y axis. 409 if (!e.shiftKey) { 410 shiftMovementDirection = null; 411 } 412 else if (!shiftMovementDirection) { 413 var oldDragX = currentSaturation * dragWidth; 414 var oldDragY = dragHeight - (currentValue * dragHeight); 415 var furtherFromX = Math.abs(dragX - oldDragX) > Math.abs(dragY - oldDragY); 416 417 shiftMovementDirection = furtherFromX ? "x" : "y"; 418 } 419 420 var setSaturation = !shiftMovementDirection || shiftMovementDirection === "x"; 421 var setValue = !shiftMovementDirection || shiftMovementDirection === "y"; 422 423 if (setSaturation) { 424 currentSaturation = parseFloat(dragX / dragWidth); 425 } 426 if (setValue) { 427 currentValue = parseFloat((dragHeight - dragY) / dragHeight); 428 } 429 430 isEmpty = false; 431 if (!opts.showAlpha) { 432 currentAlpha = 1; 433 } 434 435 move(); 436 437 }, dragStart, dragStop); 438 439 if (!!initialColor) { 440 set(initialColor); 441 442 // In case color was black - update the preview UI and set the format 443 // since the set function will not run (default color is black). 444 updateUI(); 445 currentPreferredFormat = opts.preferredFormat || tinycolor(initialColor).format; 446 447 addColorToSelectionPalette(initialColor); 448 } 449 else { 450 updateUI(); 451 } 452 453 if (flat) { 454 show(); 455 } 456 457 function paletteElementClick(e) { 458 if (e.data && e.data.ignore) { 459 set($(e.target).closest(".sp-thumb-el").data("color")); 460 move(); 461 } 462 else { 463 set($(e.target).closest(".sp-thumb-el").data("color")); 464 move(); 465 466 // If the picker is going to close immediately, a palette selection 467 // is a change. Otherwise, it's a move only. 468 if (opts.hideAfterPaletteSelect) { 469 updateOriginalInput(true); 470 hide(); 471 } else { 472 updateOriginalInput(); 473 } 474 } 475 476 return false; 477 } 478 479 var paletteEvent = IE ? "mousedown.spectrum" : "click.spectrum touchstart.spectrum"; 480 paletteContainer.on(paletteEvent, ".sp-thumb-el", paletteElementClick); 481 initialColorContainer.on(paletteEvent, ".sp-thumb-el:nth-child(1)", { ignore: true }, paletteElementClick); 482 } 483 484 function updateSelectionPaletteFromStorage() { 485 486 if (localStorageKey && window.localStorage) { 487 488 // Migrate old palettes over to new format. May want to remove this eventually. 489 try { 490 var oldPalette = window.localStorage[localStorageKey].split(",#"); 491 if (oldPalette.length > 1) { 492 delete window.localStorage[localStorageKey]; 493 $.each(oldPalette, function(i, c) { 494 addColorToSelectionPalette(c); 495 }); 496 } 497 } 498 catch(e) { } 499 500 try { 501 selectionPalette = window.localStorage[localStorageKey].split(";"); 502 } 503 catch (e) { } 504 } 505 } 506 507 function addColorToSelectionPalette(color) { 508 if (showSelectionPalette) { 509 var rgb = tinycolor(color).toRgbString(); 510 if (!paletteLookup[rgb] && $.inArray(rgb, selectionPalette) === -1) { 511 selectionPalette.push(rgb); 512 while(selectionPalette.length > maxSelectionSize) { 513 selectionPalette.shift(); 514 } 515 } 516 517 if (localStorageKey && window.localStorage) { 518 try { 519 window.localStorage[localStorageKey] = selectionPalette.join(";"); 520 } 521 catch(e) { } 522 } 523 } 524 } 525 526 function getUniqueSelectionPalette() { 527 var unique = []; 528 if (opts.showPalette) { 529 for (var i = 0; i < selectionPalette.length; i++) { 530 var rgb = tinycolor(selectionPalette[i]).toRgbString(); 531 532 if (!paletteLookup[rgb]) { 533 unique.push(selectionPalette[i]); 534 } 535 } 536 } 537 538 return unique.reverse().slice(0, opts.maxSelectionSize); 539 } 540 541 function drawPalette() { 542 543 var currentColor = get(); 544 545 var html = $.map(paletteArray, function (palette, i) { 546 return paletteTemplate(palette, currentColor, "sp-palette-row sp-palette-row-" + i, opts); 547 }); 548 549 updateSelectionPaletteFromStorage(); 550 551 if (selectionPalette) { 552 html.push(paletteTemplate(getUniqueSelectionPalette(), currentColor, "sp-palette-row sp-palette-row-selection", opts)); 553 } 554 555 paletteContainer.html(html.join("")); 556 } 557 558 function drawInitial() { 559 if (opts.showInitial) { 560 var initial = colorOnShow; 561 var current = get(); 562 initialColorContainer.html(paletteTemplate([initial, current], current, "sp-palette-row-initial", opts)); 563 } 564 } 565 566 function dragStart() { 567 if (dragHeight <= 0 || dragWidth <= 0 || slideHeight <= 0) { 568 reflow(); 569 } 570 isDragging = true; 571 container.addClass(draggingClass); 572 shiftMovementDirection = null; 573 boundElement.trigger('dragstart.spectrum', [ get() ]); 574 } 575 576 function dragStop() { 577 isDragging = false; 578 container.removeClass(draggingClass); 579 boundElement.trigger('dragstop.spectrum', [ get() ]); 580 } 581 582 function setFromTextInput() { 583 584 var value = textInput.val(); 585 586 if ((value === null || value === "") && allowEmpty) { 587 set(null); 588 move(); 589 updateOriginalInput(); 590 } 591 else { 592 var tiny = tinycolor(value); 593 if (tiny.isValid()) { 594 set(tiny); 595 move(); 596 updateOriginalInput(); 597 } 598 else { 599 textInput.addClass("sp-validation-error"); 600 } 601 } 602 } 603 604 function toggle() { 605 if (visible) { 606 hide(); 607 } 608 else { 609 show(); 610 } 611 } 612 613 function show() { 614 var event = $.Event('beforeShow.spectrum'); 615 616 if (visible) { 617 reflow(); 618 return; 619 } 620 621 boundElement.trigger(event, [ get() ]); 622 623 if (callbacks.beforeShow(get()) === false || event.isDefaultPrevented()) { 624 return; 625 } 626 627 hideAll(); 628 visible = true; 629 630 $(doc).on("keydown.spectrum", onkeydown); 631 $(doc).on("click.spectrum", clickout); 632 $(window).on("resize.spectrum", resize); 633 replacer.addClass("sp-active"); 634 container.removeClass("sp-hidden"); 635 636 reflow(); 637 updateUI(); 638 639 colorOnShow = get(); 640 641 drawInitial(); 642 callbacks.show(colorOnShow); 643 boundElement.trigger('show.spectrum', [ colorOnShow ]); 644 } 645 646 function onkeydown(e) { 647 // Close on ESC 648 if (e.keyCode === 27) { 649 hide(); 650 } 651 } 652 653 function clickout(e) { 654 // Return on right click. 655 if (e.button == 2) { return; } 656 657 // If a drag event was happening during the mouseup, don't hide 658 // on click. 659 if (isDragging) { return; } 660 661 if (clickoutFiresChange) { 662 updateOriginalInput(true); 663 } 664 else { 665 revert(); 666 } 667 hide(); 668 } 669 670 function hide() { 671 // Return if hiding is unnecessary 672 if (!visible || flat) { return; } 673 visible = false; 674 675 $(doc).off("keydown.spectrum", onkeydown); 676 $(doc).off("click.spectrum", clickout); 677 $(window).off("resize.spectrum", resize); 678 679 replacer.removeClass("sp-active"); 680 container.addClass("sp-hidden"); 681 682 callbacks.hide(get()); 683 boundElement.trigger('hide.spectrum', [ get() ]); 684 } 685 686 function revert() { 687 set(colorOnShow, true); 688 updateOriginalInput(true); 689 } 690 691 function set(color, ignoreFormatChange) { 692 if (tinycolor.equals(color, get())) { 693 // Update UI just in case a validation error needs 694 // to be cleared. 695 updateUI(); 696 return; 697 } 698 699 var newColor, newHsv; 700 if (!color && allowEmpty) { 701 isEmpty = true; 702 } else { 703 isEmpty = false; 704 newColor = tinycolor(color); 705 newHsv = newColor.toHsv(); 706 707 currentHue = (newHsv.h % 360) / 360; 708 currentSaturation = newHsv.s; 709 currentValue = newHsv.v; 710 currentAlpha = newHsv.a; 711 } 712 updateUI(); 713 714 if (newColor && newColor.isValid() && !ignoreFormatChange) { 715 currentPreferredFormat = opts.preferredFormat || newColor.getFormat(); 716 } 717 } 718 719 function get(opts) { 720 opts = opts || { }; 721 722 if (allowEmpty && isEmpty) { 723 return null; 724 } 725 726 return tinycolor.fromRatio({ 727 h: currentHue, 728 s: currentSaturation, 729 v: currentValue, 730 a: Math.round(currentAlpha * 1000) / 1000 731 }, { format: opts.format || currentPreferredFormat }); 732 } 733 734 function isValid() { 735 return !textInput.hasClass("sp-validation-error"); 736 } 737 738 function move() { 739 updateUI(); 740 741 callbacks.move(get()); 742 boundElement.trigger('move.spectrum', [ get() ]); 743 } 744 745 function updateUI() { 746 747 textInput.removeClass("sp-validation-error"); 748 749 updateHelperLocations(); 750 751 // Update dragger background color (gradients take care of saturation and value). 752 var flatColor = tinycolor.fromRatio({ h: currentHue, s: 1, v: 1 }); 753 dragger.css("background-color", flatColor.toHexString()); 754 755 // Get a format that alpha will be included in (hex and names ignore alpha) 756 var format = currentPreferredFormat; 757 if (currentAlpha < 1 && !(currentAlpha === 0 && format === "name")) { 758 if (format === "hex" || format === "hex3" || format === "hex6" || format === "name") { 759 format = "rgb"; 760 } 761 } 762 763 var realColor = get({ format: format }), 764 displayColor = ''; 765 766 //reset background info for preview element 767 previewElement.removeClass("sp-clear-display"); 768 previewElement.css('background-color', 'transparent'); 769 770 if (!realColor && allowEmpty) { 771 // Update the replaced elements background with icon indicating no color selection 772 previewElement.addClass("sp-clear-display"); 773 } 774 else { 775 var realHex = realColor.toHexString(), 776 realRgb = realColor.toRgbString(); 777 778 // Update the replaced elements background color (with actual selected color) 779 if (rgbaSupport || realColor.alpha === 1) { 780 previewElement.css("background-color", realRgb); 781 } 782 else { 783 previewElement.css("background-color", "transparent"); 784 previewElement.css("filter", realColor.toFilter()); 785 } 786 787 if (opts.showAlpha) { 788 var rgb = realColor.toRgb(); 789 rgb.a = 0; 790 var realAlpha = tinycolor(rgb).toRgbString(); 791 var gradient = "linear-gradient(left, " + realAlpha + ", " + realHex + ")"; 792 793 if (IE) { 794 alphaSliderInner.css("filter", tinycolor(realAlpha).toFilter({ gradientType: 1 }, realHex)); 795 } 796 else { 797 alphaSliderInner.css("background", "-webkit-" + gradient); 798 alphaSliderInner.css("background", "-moz-" + gradient); 799 alphaSliderInner.css("background", "-ms-" + gradient); 800 // Use current syntax gradient on unprefixed property. 801 alphaSliderInner.css("background", 802 "linear-gradient(to right, " + realAlpha + ", " + realHex + ")"); 803 } 804 } 805 806 displayColor = realColor.toString(format); 807 } 808 809 // Update the text entry input as it changes happen 810 if (opts.showInput) { 811 textInput.val(displayColor); 812 } 813 814 if (opts.showPalette) { 815 drawPalette(); 816 } 817 818 drawInitial(); 819 } 820 821 function updateHelperLocations() { 822 var s = currentSaturation; 823 var v = currentValue; 824 825 if(allowEmpty && isEmpty) { 826 //if selected color is empty, hide the helpers 827 alphaSlideHelper.hide(); 828 slideHelper.hide(); 829 dragHelper.hide(); 830 } 831 else { 832 //make sure helpers are visible 833 alphaSlideHelper.show(); 834 slideHelper.show(); 835 dragHelper.show(); 836 837 // Where to show the little circle in that displays your current selected color 838 var dragX = s * dragWidth; 839 var dragY = dragHeight - (v * dragHeight); 840 dragX = Math.max( 841 -dragHelperHeight, 842 Math.min(dragWidth - dragHelperHeight, dragX - dragHelperHeight) 843 ); 844 dragY = Math.max( 845 -dragHelperHeight, 846 Math.min(dragHeight - dragHelperHeight, dragY - dragHelperHeight) 847 ); 848 dragHelper.css({ 849 "top": dragY + "px", 850 "left": dragX + "px" 851 }); 852 853 var alphaX = currentAlpha * alphaWidth; 854 alphaSlideHelper.css({ 855 "left": (alphaX - (alphaSlideHelperWidth / 2)) + "px" 856 }); 857 858 // Where to show the bar that displays your current selected hue 859 var slideY = (currentHue) * slideHeight; 860 slideHelper.css({ 861 "top": (slideY - slideHelperHeight) + "px" 862 }); 863 } 864 } 865 866 function updateOriginalInput(fireCallback) { 867 var color = get(), 868 displayColor = '', 869 hasChanged = !tinycolor.equals(color, colorOnShow); 870 871 if (color) { 872 displayColor = color.toString(currentPreferredFormat); 873 // Update the selection palette with the current color 874 addColorToSelectionPalette(color); 875 } 876 877 if (isInput) { 878 boundElement.val(displayColor); 879 } 880 881 if (fireCallback && hasChanged) { 882 callbacks.change(color); 883 boundElement.trigger('change', [ color ]); 884 } 885 } 886 887 function reflow() { 888 if (!visible) { 889 return; // Calculations would be useless and wouldn't be reliable anyways 890 } 891 dragWidth = dragger.width(); 892 dragHeight = dragger.height(); 893 dragHelperHeight = dragHelper.height(); 894 slideWidth = slider.width(); 895 slideHeight = slider.height(); 896 slideHelperHeight = slideHelper.height(); 897 alphaWidth = alphaSlider.width(); 898 alphaSlideHelperWidth = alphaSlideHelper.width(); 899 900 if (!flat) { 901 container.css("position", "absolute"); 902 if (opts.offset) { 903 container.offset(opts.offset); 904 } else { 905 container.offset(getOffset(container, offsetElement)); 906 } 907 } 908 909 updateHelperLocations(); 910 911 if (opts.showPalette) { 912 drawPalette(); 913 } 914 915 boundElement.trigger('reflow.spectrum'); 916 } 917 918 function destroy() { 919 boundElement.show(); 920 offsetElement.off("click.spectrum touchstart.spectrum"); 921 container.remove(); 922 replacer.remove(); 923 spectrums[spect.id] = null; 924 } 925 926 function option(optionName, optionValue) { 927 if (optionName === undefined) { 928 return $.extend({}, opts); 929 } 930 if (optionValue === undefined) { 931 return opts[optionName]; 932 } 933 934 opts[optionName] = optionValue; 935 936 if (optionName === "preferredFormat") { 937 currentPreferredFormat = opts.preferredFormat; 938 } 939 applyOptions(); 940 } 941 942 function enable() { 943 disabled = false; 944 boundElement.attr("disabled", false); 945 offsetElement.removeClass("sp-disabled"); 946 } 947 948 function disable() { 949 hide(); 950 disabled = true; 951 boundElement.attr("disabled", true); 952 offsetElement.addClass("sp-disabled"); 953 } 954 955 function setOffset(coord) { 956 opts.offset = coord; 957 reflow(); 958 } 959 960 initialize(); 961 962 var spect = { 963 show: show, 964 hide: hide, 965 toggle: toggle, 966 reflow: reflow, 967 option: option, 968 enable: enable, 969 disable: disable, 970 offset: setOffset, 971 set: function (c) { 972 set(c); 973 updateOriginalInput(); 974 }, 975 get: get, 976 destroy: destroy, 977 container: container 978 }; 979 980 spect.id = spectrums.push(spect) - 1; 981 982 return spect; 983 } 984 985 /** 986 * checkOffset - get the offset below/above and left/right element depending on screen position 987 * Thanks https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.datepicker.js 988 */ 989 function getOffset(picker, input) { 990 var extraY = 0; 991 var dpWidth = picker.outerWidth(); 992 var dpHeight = picker.outerHeight(); 993 var inputHeight = input.outerHeight(); 994 var doc = picker[0].ownerDocument; 995 var docElem = doc.documentElement; 996 var viewWidth = docElem.clientWidth + $(doc).scrollLeft(); 997 var viewHeight = docElem.clientHeight + $(doc).scrollTop(); 998 var offset = input.offset(); 999 var offsetLeft = offset.left; 1000 var offsetTop = offset.top; 1001 1002 offsetTop += inputHeight; 1003 1004 offsetLeft -= 1005 Math.min(offsetLeft, (offsetLeft + dpWidth > viewWidth && viewWidth > dpWidth) ? 1006 Math.abs(offsetLeft + dpWidth - viewWidth) : 0); 1007 1008 offsetTop -= 1009 Math.min(offsetTop, ((offsetTop + dpHeight > viewHeight && viewHeight > dpHeight) ? 1010 Math.abs(dpHeight + inputHeight - extraY) : extraY)); 1011 1012 return { 1013 top: offsetTop, 1014 bottom: offset.bottom, 1015 left: offsetLeft, 1016 right: offset.right, 1017 width: offset.width, 1018 height: offset.height 1019 }; 1020 } 1021 1022 /** 1023 * noop - do nothing 1024 */ 1025 function noop() { 1026 1027 } 1028 1029 /** 1030 * stopPropagation - makes the code only doing this a little easier to read in line 1031 */ 1032 function stopPropagation(e) { 1033 e.stopPropagation(); 1034 } 1035 1036 /** 1037 * Create a function bound to a given object 1038 * Thanks to underscore.js 1039 */ 1040 function bind(func, obj) { 1041 var slice = Array.prototype.slice; 1042 var args = slice.call(arguments, 2); 1043 return function () { 1044 return func.apply(obj, args.concat(slice.call(arguments))); 1045 }; 1046 } 1047 1048 /** 1049 * Lightweight drag helper. Handles containment within the element, so that 1050 * when dragging, the x is within [0,element.width] and y is within [0,element.height] 1051 */ 1052 function draggable(element, onmove, onstart, onstop) { 1053 onmove = onmove || function () { }; 1054 onstart = onstart || function () { }; 1055 onstop = onstop || function () { }; 1056 var doc = document; 1057 var dragging = false; 1058 var offset = {}; 1059 var maxHeight = 0; 1060 var maxWidth = 0; 1061 var hasTouch = ('ontouchstart' in window); 1062 1063 var duringDragEvents = {}; 1064 duringDragEvents["selectstart"] = prevent; 1065 duringDragEvents["dragstart"] = prevent; 1066 duringDragEvents["touchmove mousemove"] = move; 1067 duringDragEvents["touchend mouseup"] = stop; 1068 1069 function prevent(e) { 1070 if (e.stopPropagation) { 1071 e.stopPropagation(); 1072 } 1073 if (e.preventDefault) { 1074 e.preventDefault(); 1075 } 1076 e.returnValue = false; 1077 } 1078 1079 function move(e) { 1080 if (dragging) { 1081 // Mouseup happened outside of window 1082 if (IE && doc.documentMode < 9 && !e.button) { 1083 return stop(); 1084 } 1085 1086 var t0 = e.originalEvent && e.originalEvent.touches && e.originalEvent.touches[0]; 1087 var pageX = t0 && t0.pageX || e.pageX; 1088 var pageY = t0 && t0.pageY || e.pageY; 1089 1090 var dragX = Math.max(0, Math.min(pageX - offset.left, maxWidth)); 1091 var dragY = Math.max(0, Math.min(pageY - offset.top, maxHeight)); 1092 1093 if (hasTouch) { 1094 // Stop scrolling in iOS 1095 prevent(e); 1096 } 1097 1098 onmove.apply(element, [dragX, dragY, e]); 1099 } 1100 } 1101 1102 function start(e) { 1103 var rightclick = (e.which) ? (e.which == 3) : (e.button == 2); 1104 1105 if (!rightclick && !dragging) { 1106 if (onstart.apply(element, arguments) !== false) { 1107 dragging = true; 1108 maxHeight = $(element).height(); 1109 maxWidth = $(element).width(); 1110 offset = $(element).offset(); 1111 1112 $(doc).on(duringDragEvents); 1113 $(doc.body).addClass("sp-dragging"); 1114 1115 move(e); 1116 1117 prevent(e); 1118 } 1119 } 1120 } 1121 1122 function stop() { 1123 if (dragging) { 1124 $(doc).off(duringDragEvents); 1125 $(doc.body).removeClass("sp-dragging"); 1126 1127 // Wait a tick before notifying observers to allow the click event 1128 // to fire in Chrome. 1129 setTimeout(function() { 1130 onstop.apply(element, arguments); 1131 }, 0); 1132 } 1133 dragging = false; 1134 } 1135 1136 $(element).on("touchstart mousedown", start); 1137 } 1138 1139 function throttle(func, wait, debounce) { 1140 var timeout; 1141 return function () { 1142 var context = this, args = arguments; 1143 var throttler = function () { 1144 timeout = null; 1145 func.apply(context, args); 1146 }; 1147 if (debounce) clearTimeout(timeout); 1148 if (debounce || !timeout) timeout = setTimeout(throttler, wait); 1149 }; 1150 } 1151 1152 function inputTypeColorSupport() { 1153 return $.fn.spectrum.inputTypeColorSupport(); 1154 } 1155 1156 /** 1157 * Define a jQuery plugin 1158 */ 1159 var dataID = "spectrum.id"; 1160 $.fn.spectrum = function (opts, extra) { 1161 1162 if (typeof opts == "string") { 1163 1164 var returnValue = this; 1165 var args = Array.prototype.slice.call( arguments, 1 ); 1166 1167 this.each(function () { 1168 var spect = spectrums[$(this).data(dataID)]; 1169 if (spect) { 1170 var method = spect[opts]; 1171 if (!method) { 1172 throw new Error( "Spectrum: no such method: '" + opts + "'" ); 1173 } 1174 1175 if (opts == "get") { 1176 returnValue = spect.get(); 1177 } 1178 else if (opts == "container") { 1179 returnValue = spect.container; 1180 } 1181 else if (opts == "option") { 1182 returnValue = spect.option.apply(spect, args); 1183 } 1184 else if (opts == "destroy") { 1185 spect.destroy(); 1186 $(this).removeData(dataID); 1187 } 1188 else { 1189 method.apply(spect, args); 1190 } 1191 } 1192 }); 1193 1194 return returnValue; 1195 } 1196 1197 // Initializing a new instance of spectrum 1198 return this.spectrum("destroy").each(function () { 1199 var options = $.extend({}, $(this).data(), opts); 1200 var spect = spectrum(this, options); 1201 $(this).data(dataID, spect.id); 1202 }); 1203 }; 1204 1205 $.fn.spectrum.load = true; 1206 $.fn.spectrum.loadOpts = {}; 1207 $.fn.spectrum.draggable = draggable; 1208 $.fn.spectrum.defaults = defaultOpts; 1209 $.fn.spectrum.inputTypeColorSupport = function inputTypeColorSupport() { 1210 if (typeof inputTypeColorSupport._cachedResult === "undefined") { 1211 var colorInput = $("<input type='color'/>")[0]; // if color element is supported, value will default to not null 1212 inputTypeColorSupport._cachedResult = colorInput.type === "color" && colorInput.value !== ""; 1213 } 1214 return inputTypeColorSupport._cachedResult; 1215 }; 1216 1217 $.spectrum = { }; 1218 $.spectrum.localization = { }; 1219 $.spectrum.palettes = { }; 1220 1221 $.fn.spectrum.processNativeColorInputs = function () { 1222 var colorInputs = $("input[type=color]"); 1223 if (colorInputs.length && !inputTypeColorSupport()) { 1224 colorInputs.spectrum({ 1225 preferredFormat: "hex6" 1226 }); 1227 } 1228 }; 1229 1230 // TinyColor v1.1.2 1231 // https://github.com/bgrins/TinyColor 1232 // Brian Grinstead, MIT License 1233 1234 (function() { 1235 1236 var trimLeft = /^[\s,#]+/, 1237 trimRight = /\s+$/, 1238 tinyCounter = 0, 1239 math = Math, 1240 mathRound = math.round, 1241 mathMin = math.min, 1242 mathMax = math.max, 1243 mathRandom = math.random; 1244 1245 var tinycolor = function(color, opts) { 1246 1247 color = (color) ? color : ''; 1248 opts = opts || { }; 1249 1250 // If input is already a tinycolor, return itself 1251 if (color instanceof tinycolor) { 1252 return color; 1253 } 1254 // If we are called as a function, call using new instead 1255 if (!(this instanceof tinycolor)) { 1256 return new tinycolor(color, opts); 1257 } 1258 1259 var rgb = inputToRGB(color); 1260 this._originalInput = color
1260, 1261 this._r = rgb.r, 1262 this._g = rgb.g, 1263 this._b = rgb.b, 1264 this._a = rgb.a, 1265 this._roundA = mathRound(1000 * this._a) / 1000,
vendor: 35,972 bytes, lines 1265-2341
1265 1266 this._format = opts.format || rgb.format; 1267 this._gradientType = opts.gradientType; 1268 1269 // Don't let the range of [0,255] come back in [0,1]. 1270 // Potentially lose a little bit of precision here, but will fix issues where 1271 // .5 gets interpreted as half of the total, instead of half of 1 1272 // If it was supposed to be 128, this was already taken care of by `inputToRgb` 1273 if (this._r < 1) { this._r = mathRound(this._r); } 1274 if (this._g < 1) { this._g = mathRound(this._g); } 1275 if (this._b < 1) { this._b = mathRound(this._b); } 1276 1277 this._ok = rgb.ok; 1278 this._tc_id = tinyCounter++; 1279 }; 1280 1281 tinycolor.prototype = { 1282 isDark: function() { 1283 return this.getBrightness() < 128; 1284 }, 1285 isLight: function() { 1286 return !this.isDark(); 1287 }, 1288 isValid: function() { 1289 return this._ok; 1290 }, 1291 getOriginalInput: function() { 1292 return this._originalInput; 1293 }, 1294 getFormat: function() { 1295 return this._format; 1296 }, 1297 getAlpha: function() { 1298 return this._a; 1299 }, 1300 getBrightness: function() { 1301 var rgb = this.toRgb(); 1302 return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000; 1303 }, 1304 setAlpha: function(value) { 1305 this._a = boundAlpha(value); 1306 this._roundA = mathRound(1000 * this._a) / 1000; 1307 return this; 1308 }, 1309 toHsv: function() { 1310 var hsv = rgbToHsv(this._r, this._g, this._b); 1311 return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a }; 1312 }, 1313 toHsvString: function() { 1314 var hsv = rgbToHsv(this._r, this._g, this._b); 1315 var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100); 1316 return (this._a == 1) ? 1317 "hsv(" + h + ", " + s + "%, " + v + "%)" : 1318 "hsva(" + h + ", " + s + "%, " + v + "%, "+ this._roundA + ")"; 1319 }, 1320 toHsl: function() { 1321 var hsl = rgbToHsl(this._r, this._g, this._b); 1322 return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this._a }; 1323 }, 1324 toHslString: function() { 1325 var hsl = rgbToHsl(this._r, this._g, this._b); 1326 var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100); 1327 return (this._a == 1) ? 1328 "hsl(" + h + ", " + s + "%, " + l + "%)" : 1329 "hsla(" + h + ", " + s + "%, " + l + "%, "+ this._roundA + ")"; 1330 }, 1331 toHex: function(allow3Char) { 1332 return rgbToHex(this._r, this._g, this._b, allow3Char); 1333 }, 1334 toHexString: function(allow3Char) { 1335 return '#' + this.toHex(allow3Char); 1336 }, 1337 toHex8: function() { 1338 return rgbaToHex(this._r, this._g, this._b, this._a); 1339 }, 1340 toHex8String: function() { 1341 return '#' + this.toHex8(); 1342 }, 1343 toRgb: function() { 1344 return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a }; 1345 }, 1346 toRgbString: function() { 1347 return (this._a == 1) ? 1348 "rgb(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" : 1349 "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")"; 1350 }, 1351 toPercentageRgb: function() { 1352 return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a }; 1353 }, 1354 toPercentageRgbString: function() { 1355 return (this._a == 1) ? 1356 "rgb(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" : 1357 "rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")"; 1358 }, 1359 toName: function() { 1360 if (this._a === 0) { 1361 return "transparent"; 1362 } 1363 1364 if (this._a < 1) { 1365 return false; 1366 } 1367 1368 return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false; 1369 }, 1370 toFilter: function(secondColor) { 1371 var hex8String = '#' + rgbaToHex(this._r, this._g, this._b, this._a); 1372 var secondHex8String = hex8String; 1373 var gradientType = this._gradientType ? "GradientType = 1, " : ""; 1374 1375 if (secondColor) { 1376 var s = tinycolor(secondColor); 1377 secondHex8String = s.toHex8String(); 1378 } 1379 1380 return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")"; 1381 }, 1382 toString: function(format) { 1383 var formatSet = !!format; 1384 format = format || this._format; 1385 1386 var formattedString = false; 1387 var hasAlpha = this._a < 1 && this._a >= 0; 1388 var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "name"); 1389 1390 if (needsAlphaFormat) { 1391 // Special case for "transparent", all other non-alpha formats 1392 // will return rgba when there is transparency. 1393 if (format === "name" && this._a === 0) { 1394 return this.toName(); 1395 } 1396 return this.toRgbString(); 1397 } 1398 if (format === "rgb") { 1399 formattedString = this.toRgbString(); 1400 } 1401 if (format === "prgb") { 1402 formattedString = this.toPercentageRgbString(); 1403 } 1404 if (format === "hex" || format === "hex6") { 1405 formattedString = this.toHexString(); 1406 } 1407 if (format === "hex3") { 1408 formattedString = this.toHexString(true); 1409 } 1410 if (format === "hex8") { 1411 formattedString = this.toHex8String(); 1412 } 1413 if (format === "name") { 1414 formattedString = this.toName(); 1415 } 1416 if (format === "hsl") { 1417 formattedString = this.toHslString(); 1418 } 1419 if (format === "hsv") { 1420 formattedString = this.toHsvString(); 1421 } 1422 1423 return formattedString || this.toHexString(); 1424 }, 1425 1426 _applyModification: function(fn, args) { 1427 var color = fn.apply(null, [this].concat([].slice.call(args))); 1428 this._r = color._r; 1429 this._g = color._g; 1430 this._b = color._b; 1431 this.setAlpha(color._a); 1432 return this; 1433 }, 1434 lighten: function() { 1435 return this._applyModification(lighten, arguments); 1436 }, 1437 brighten: function() { 1438 return this._applyModification(brighten, arguments); 1439 }, 1440 darken: function() { 1441 return this._applyModification(darken, arguments); 1442 }, 1443 desaturate: function() { 1444 return this._applyModification(desaturate, arguments); 1445 }, 1446 saturate: function() { 1447 return this._applyModification(saturate, arguments); 1448 }, 1449 greyscale: function() { 1450 return this._applyModification(greyscale, arguments); 1451 }, 1452 spin: function() { 1453 return this._applyModification(spin, arguments); 1454 }, 1455 1456 _applyCombination: function(fn, args) { 1457 return fn.apply(null, [this].concat([].slice.call(args))); 1458 }, 1459 analogous: function() { 1460 return this._applyCombination(analogous, arguments); 1461 }, 1462 complement: function() { 1463 return this._applyCombination(complement, arguments); 1464 }, 1465 monochromatic: function() { 1466 return this._applyCombination(monochromatic, arguments); 1467 }, 1468 splitcomplement: function() { 1469 return this._applyCombination(splitcomplement, arguments); 1470 }, 1471 triad: function() { 1472 return this._applyCombination(triad, arguments); 1473 }, 1474 tetrad: function() { 1475 return this._applyCombination(tetrad, arguments); 1476 } 1477 }; 1478 1479 // If input is an object, force 1 into "1.0" to handle ratios properly 1480 // String input requires "1.0" as input, so 1 will be treated as 1 1481 tinycolor.fromRatio = function(color, opts) { 1482 if (typeof color == "object") { 1483 var newColor = {}; 1484 for (var i in color) { 1485 if (color.hasOwnProperty(i)) { 1486 if (i === "a") { 1487 newColor[i] = color[i]; 1488 } 1489 else { 1490 newColor[i] = convertToPercentage(color[i]); 1491 } 1492 } 1493 } 1494 color = newColor; 1495 } 1496 1497 return tinycolor(color, opts); 1498 }; 1499 1500 // Given a string or object, convert that input to RGB 1501 // Possible string inputs: 1502 // 1503 // "red" 1504 // "#f00" or "f00" 1505 // "#ff0000" or "ff0000" 1506 // "#ff000000" or "ff000000" 1507 // "rgb 255 0 0" or "rgb (255, 0, 0)" 1508 // "rgb 1.0 0 0" or "rgb (1, 0, 0)" 1509 // "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1" 1510 // "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1" 1511 // "hsl(0, 100%, 50%)" or "hsl 0 100% 50%" 1512 // "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1" 1513 // "hsv(0, 100%, 100%)" or "hsv 0 100% 100%" 1514 // 1515 function inputToRGB(color) { 1516 1517 var rgb = { r: 0, g: 0, b: 0 }; 1518 var a = 1; 1519 var ok = false; 1520 var format = false; 1521 1522 if (typeof color == "string") { 1523 color = stringInputToObject(color); 1524 } 1525 1526 if (typeof color == "object") { 1527 if (color.hasOwnProperty("r") && color.hasOwnProperty("g") && color.hasOwnProperty("b")) { 1528 rgb = rgbToRgb(color.r, color.g, color.b); 1529 ok = true; 1530 format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb"; 1531 } 1532 else if (color.hasOwnProperty("h") && color.hasOwnProperty("s") && color.hasOwnProperty("v")) { 1533 color.s = convertToPercentage(color.s); 1534 color.v = convertToPercentage(color.v); 1535 rgb = hsvToRgb(color.h, color.s, color.v); 1536 ok = true; 1537 format = "hsv"; 1538 } 1539 else if (color.hasOwnProperty("h") && color.hasOwnProperty("s") && color.hasOwnProperty("l")) { 1540 color.s = convertToPercentage(color.s); 1541 color.l = convertToPercentage(color.l); 1542 rgb = hslToRgb(color.h, color.s, color.l); 1543 ok = true; 1544 format = "hsl"; 1545 } 1546 1547 if (color.hasOwnProperty("a")) { 1548 a = color.a; 1549 } 1550 } 1551 1552 a = boundAlpha(a); 1553 1554 return { 1555 ok: ok, 1556 format: color.format || format, 1557 r: mathMin(255, mathMax(rgb.r, 0)), 1558 g: mathMin(255, mathMax(rgb.g, 0)), 1559 b: mathMin(255, mathMax(rgb.b, 0)), 1560 a: a 1561 }; 1562 } 1563 1564 1565 // Conversion Functions 1566 // -------------------- 1567 1568 // `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from: 1569 // <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript> 1570 1571 // `rgbToRgb` 1572 // Handle bounds / percentage checking to conform to CSS color spec 1573 // <http://www.w3.org/TR/css3-color/> 1574 // *Assumes:* r, g, b in [0, 255] or [0, 1] 1575 // *Returns:* { r, g, b } in [0, 255] 1576 function rgbToRgb(r, g, b){ 1577 return { 1578 r: bound01(r, 255) * 255, 1579 g: bound01(g, 255) * 255, 1580 b: bound01(b, 255) * 255 1581 }; 1582 } 1583 1584 // `rgbToHsl` 1585 // Converts an RGB color value to HSL. 1586 // *Assumes:* r, g, and b are contained in [0, 255] or [0, 1] 1587 // *Returns:* { h, s, l } in [0,1] 1588 function rgbToHsl(r, g, b) { 1589 1590 r = bound01(r, 255); 1591 g = bound01(g, 255); 1592 b = bound01(b, 255); 1593 1594 var max = mathMax(r, g, b), min = mathMin(r, g, b); 1595 var h, s, l = (max + min) / 2; 1596 1597 if(max == min) { 1598 h = s = 0; // achromatic 1599 } 1600 else { 1601 var d = max - min; 1602 s = l > 0.5 ? d / (2 - max - min) : d / (max + min); 1603 switch(max) { 1604 case r: h = (g - b) / d + (g < b ? 6 : 0); break; 1605 case g: h = (b - r) / d + 2; break; 1606 case b: h = (r - g) / d + 4; break; 1607 } 1608 1609 h /= 6; 1610 } 1611 1612 return { h: h, s: s, l: l }; 1613 } 1614 1615 // `hslToRgb` 1616 // Converts an HSL color value to RGB. 1617 // *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100] 1618 // *Returns:* { r, g, b } in the set [0, 255] 1619 function hslToRgb(h, s, l) { 1620 var r, g, b; 1621 1622 h = bound01(h, 360); 1623 s = bound01(s, 100); 1624 l = bound01(l, 100); 1625 1626 function hue2rgb(p, q, t) { 1627 if(t < 0) t += 1; 1628 if(t > 1) t -= 1; 1629 if(t < 1/6) return p + (q - p) * 6 * t; 1630 if(t < 1/2) return q; 1631 if(t < 2/3) return p + (q - p) * (2/3 - t) * 6; 1632 return p; 1633 } 1634 1635 if(s === 0) { 1636 r = g = b = l; // achromatic 1637 } 1638 else { 1639 var q = l < 0.5 ? l * (1 + s) : l + s - l * s; 1640 var p = 2 * l - q; 1641 r = hue2rgb(p, q, h + 1/3); 1642 g = hue2rgb(p, q, h); 1643 b = hue2rgb(p, q, h - 1/3); 1644 } 1645 1646 return { r: r * 255, g: g * 255, b: b * 255 }; 1647 } 1648 1649 // `rgbToHsv` 1650 // Converts an RGB color value to HSV 1651 // *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1] 1652 // *Returns:* { h, s, v } in [0,1] 1653 function rgbToHsv(r, g, b) { 1654 1655 r = bound01(r, 255); 1656 g = bound01(g, 255); 1657 b = bound01(b, 255); 1658 1659 var max = mathMax(r, g, b), min = mathMin(r, g, b); 1660 var h, s, v = max; 1661 1662 var d = max - min; 1663 s = max === 0 ? 0 : d / max; 1664 1665 if(max == min) { 1666 h = 0; // achromatic 1667 } 1668 else { 1669 switch(max) { 1670 case r: h = (g - b) / d + (g < b ? 6 : 0); break; 1671 case g: h = (b - r) / d + 2; break; 1672 case b: h = (r - g) / d + 4; break; 1673 } 1674 h /= 6; 1675 } 1676 return { h: h, s: s, v: v }; 1677 } 1678 1679 // `hsvToRgb` 1680 // Converts an HSV color value to RGB. 1681 // *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100] 1682 // *Returns:* { r, g, b } in the set [0, 255] 1683 function hsvToRgb(h, s, v) { 1684 1685 h = bound01(h, 360) * 6; 1686 s = bound01(s, 100); 1687 v = bound01(v, 100); 1688 1689 var i = math.floor(h), 1690 f = h - i, 1691 p = v * (1 - s), 1692 q = v * (1 - f * s), 1693 t = v * (1 - (1 - f) * s), 1694 mod = i % 6, 1695 r = [v, q, p, p, t, v][mod], 1696 g = [t, v, v, q, p, p][mod], 1697 b = [p, p, t, v, v, q][mod]; 1698 1699 return { r: r * 255, g: g * 255, b: b * 255 }; 1700 } 1701 1702 // `rgbToHex` 1703 // Converts an RGB color to hex 1704 // Assumes r, g, and b are contained in the set [0, 255] 1705 // Returns a 3 or 6 character hex 1706 function rgbToHex(r, g, b, allow3Char) { 1707 1708 var hex = [ 1709 pad2(mathRound(r).toString(16)), 1710 pad2(mathRound(g).toString(16)), 1711 pad2(mathRound(b).toString(16)) 1712 ]; 1713 1714 // Return a 3 character hex if possible 1715 if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) { 1716 return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0); 1717 } 1718 1719 return hex.join(""); 1720 } 1721 // `rgbaToHex` 1722 // Converts an RGBA color plus alpha transparency to hex 1723 // Assumes r, g, b and a are contained in the set [0, 255] 1724 // Returns an 8 character hex 1725 function rgbaToHex(r, g, b, a) { 1726 1727 var hex = [ 1728 pad2(convertDecimalToHex(a)), 1729 pad2(mathRound(r).toString(16)), 1730 pad2(mathRound(g).toString(16)), 1731 pad2(mathRound(b).toString(16)) 1732 ]; 1733 1734 return hex.join(""); 1735 } 1736 1737 // `equals` 1738 // Can be called with any tinycolor input 1739 tinycolor.equals = function (color1, color2) { 1740 if (!color1 || !color2) { return false; } 1741 return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString(); 1742 }; 1743 tinycolor.random = function() { 1744 return tinycolor.fromRatio({ 1745 r: mathRandom(), 1746 g: mathRandom(), 1747 b: mathRandom() 1748 }); 1749 }; 1750 1751 1752 // Modification Functions 1753 // ---------------------- 1754 // Thanks to less.js for some of the basics here 1755 // <https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js> 1756 1757 function desaturate(color, amount) { 1758 amount = (amount === 0) ? 0 : (amount || 10); 1759 var hsl = tinycolor(color).toHsl(); 1760 hsl.s -= amount / 100; 1761 hsl.s = clamp01(hsl.s); 1762 return tinycolor(hsl); 1763 } 1764 1765 function saturate(color, amount) { 1766 amount = (amount === 0) ? 0 : (amount || 10); 1767 var hsl = tinycolor(color).toHsl(); 1768 hsl.s += amount / 100; 1769 hsl.s = clamp01(hsl.s); 1770 return tinycolor(hsl); 1771 } 1772 1773 function greyscale(color) { 1774 return tinycolor(color).desaturate(100); 1775 } 1776 1777 function lighten (color, amount) { 1778 amount = (amount === 0) ? 0 : (amount || 10); 1779 var hsl = tinycolor(color).toHsl(); 1780 hsl.l += amount / 100; 1781 hsl.l = clamp01(hsl.l); 1782 return tinycolor(hsl); 1783 } 1784 1785 function brighten(color, amount) { 1786 amount = (amount === 0) ? 0 : (amount || 10); 1787 var rgb = tinycolor(color).toRgb(); 1788 rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100)))); 1789 rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100)))); 1790 rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100)))); 1791 return tinycolor(rgb); 1792 } 1793 1794 function darken (color, amount) { 1795 amount = (amount === 0) ? 0 : (amount || 10); 1796 var hsl = tinycolor(color).toHsl(); 1797 hsl.l -= amount / 100; 1798 hsl.l = clamp01(hsl.l); 1799 return tinycolor(hsl); 1800 } 1801 1802 // Spin takes a positive or negative amount within [-360, 360] indicating the change of hue. 1803 // Values outside of this range will be wrapped into this range. 1804 function spin(color, amount) { 1805 var hsl = tinycolor(color).toHsl(); 1806 var hue = (mathRound(hsl.h) + amount) % 360; 1807 hsl.h = hue < 0 ? 360 + hue : hue; 1808 return tinycolor(hsl); 1809 } 1810 1811 // Combination Functions 1812 // --------------------- 1813 // Thanks to jQuery xColor for some of the ideas behind these 1814 // <https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js> 1815 1816 function complement(color) { 1817 var hsl = tinycolor(color).toHsl(); 1818 hsl.h = (hsl.h + 180) % 360; 1819 return tinycolor(hsl); 1820 } 1821 1822 function triad(color) { 1823 var hsl = tinycolor(color).toHsl(); 1824 var h = hsl.h; 1825 return [ 1826 tinycolor(color), 1827 tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }), 1828 tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l }) 1829 ]; 1830 } 1831 1832 function tetrad(color) { 1833 var hsl = tinycolor(color).toHsl(); 1834 var h = hsl.h; 1835 return [ 1836 tinycolor(color), 1837 tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }), 1838 tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }), 1839 tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l }) 1840 ]; 1841 } 1842 1843 function splitcomplement(color) { 1844 var hsl = tinycolor(color).toHsl(); 1845 var h = hsl.h; 1846 return [ 1847 tinycolor(color), 1848 tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}), 1849 tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l}) 1850 ]; 1851 } 1852 1853 function analogous(color, results, slices) { 1854 results = results || 6; 1855 slices = slices || 30; 1856 1857 var hsl = tinycolor(color).toHsl(); 1858 var part = 360 / slices; 1859 var ret = [tinycolor(color)]; 1860 1861 for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; --results; ) { 1862 hsl.h = (hsl.h + part) % 360; 1863 ret.push(tinycolor(hsl)); 1864 } 1865 return ret; 1866 } 1867 1868 function monochromatic(color, results) { 1869 results = results || 6; 1870 var hsv = tinycolor(color).toHsv(); 1871 var h = hsv.h, s = hsv.s, v = hsv.v; 1872 var ret = []; 1873 var modification = 1 / results; 1874 1875 while (results--) { 1876 ret.push(tinycolor({ h: h, s: s, v: v})); 1877 v = (v + modification) % 1; 1878 } 1879 1880 return ret; 1881 } 1882 1883 // Utility Functions 1884 // --------------------- 1885 1886 tinycolor.mix = function(color1, color2, amount) { 1887 amount = (amount === 0) ? 0 : (amount || 50); 1888 1889 var rgb1 = tinycolor(color1).toRgb(); 1890 var rgb2 = tinycolor(color2).toRgb(); 1891 1892 var p = amount / 100; 1893 var w = p * 2 - 1; 1894 var a = rgb2.a - rgb1.a; 1895 1896 var w1; 1897 1898 if (w * a == -1) { 1899 w1 = w; 1900 } else { 1901 w1 = (w + a) / (1 + w * a); 1902 } 1903 1904 w1 = (w1 + 1) / 2; 1905 1906 var w2 = 1 - w1; 1907 1908 var rgba = { 1909 r: rgb2.r * w1 + rgb1.r * w2, 1910 g: rgb2.g * w1 + rgb1.g * w2, 1911 b: rgb2.b * w1 + rgb1.b * w2, 1912 a: rgb2.a * p + rgb1.a * (1 - p) 1913 }; 1914 1915 return tinycolor(rgba); 1916 }; 1917 1918 1919 // Readability Functions 1920 // --------------------- 1921 // <http://www.w3.org/TR/AERT#color-contrast> 1922 1923 // `readability` 1924 // Analyze the 2 colors and returns an object with the following properties: 1925 // `brightness`: difference in brightness between the two colors 1926 // `color`: difference in color/hue between the two colors 1927 tinycolor.readability = function(color1, color2) { 1928 var c1 = tinycolor(color1); 1929 var c2 = tinycolor(color2); 1930 var rgb1 = c1.toRgb(); 1931 var rgb2 = c2.toRgb(); 1932 var brightnessA = c1.getBrightness(); 1933 var brightnessB = c2.getBrightness(); 1934 var colorDiff = ( 1935 Math.max(rgb1.r, rgb2.r) - Math.min(rgb1.r, rgb2.r) + 1936 Math.max(rgb1.g, rgb2.g) - Math.min(rgb1.g, rgb2.g) + 1937 Math.max(rgb1.b, rgb2.b) - Math.min(rgb1.b, rgb2.b) 1938 ); 1939 1940 return { 1941 brightness: Math.abs(brightnessA - brightnessB), 1942 color: colorDiff 1943 }; 1944 }; 1945 1946 // `readable` 1947 // http://www.w3.org/TR/AERT#color-contrast 1948 // Ensure that foreground and background color combinations provide sufficient contrast. 1949 // *Example* 1950 // tinycolor.isReadable("#000", "#111") => false 1951 tinycolor.isReadable = function(color1, color2) { 1952 var readability = tinycolor.readability(color1, color2); 1953 return readability.brightness > 125 && readability.color > 500; 1954 }; 1955 1956 // `mostReadable` 1957 // Given a base color and a list of possible foreground or background 1958 // colors for that base, returns the most readable color. 1959 // *Example* 1960 // tinycolor.mostReadable("#123", ["#fff", "#000"]) => "#000" 1961 tinycolor.mostReadable = function(baseColor, colorList) { 1962 var bestColor = null; 1963 var bestScore = 0; 1964 var bestIsReadable = false; 1965 for (var i=0; i < colorList.length; i++) { 1966 1967 // We normalize both around the "acceptable" breaking point, 1968 // but rank brightness constrast higher than hue. 1969 1970 var readability = tinycolor.readability(baseColor, colorList[i]); 1971 var readable = readability.brightness > 125 && readability.color > 500; 1972 var score = 3 * (readability.brightness / 125) + (readability.color / 500); 1973 1974 if ((readable && ! bestIsReadable) || 1975 (readable && bestIsReadable && score > bestScore) || 1976 ((! readable) && (! bestIsReadable) && score > bestScore)) { 1977 bestIsReadable = readable; 1978 bestScore = score; 1979 bestColor = tinycolor(colorList[i]); 1980 } 1981 } 1982 return bestColor; 1983 }; 1984 1985 1986 // Big List of Colors 1987 // ------------------ 1988 // <http://www.w3.org/TR/css3-color/#svg-color> 1989 var names = tinycolor.names = { 1990 aliceblue: "f0f8ff", 1991 antiquewhite: "faebd7", 1992 aqua: "0ff", 1993 aquamarine: "7fffd4", 1994 azure: "f0ffff", 1995 beige: "f5f5dc", 1996 bisque: "ffe4c4", 1997 black: "000", 1998 blanchedalmond: "ffebcd", 1999 blue: "00f", 2000 blueviolet: "8a2be2", 2001 brown: "a52a2a", 2002 burlywood: "deb887", 2003 burntsienna: "ea7e5d", 2004 cadetblue: "5f9ea0", 2005 chartreuse: "7fff00", 2006 chocolate: "d2691e", 2007 coral: "ff7f50", 2008 cornflowerblue: "6495ed", 2009 cornsilk: "fff8dc", 2010 crimson: "dc143c", 2011 cyan: "0ff", 2012 darkblue: "00008b", 2013 darkcyan: "008b8b", 2014 darkgoldenrod: "b8860b", 2015 darkgray: "a9a9a9", 2016 darkgreen: "006400", 2017 darkgrey: "a9a9a9", 2018 darkkhaki: "bdb76b", 2019 darkmagenta: "8b008b", 2020 darkolivegreen: "556b2f", 2021 darkorange: "ff8c00", 2022 darkorchid: "9932cc", 2023 darkred: "8b0000", 2024 darksalmon: "e9967a", 2025 darkseagreen: "8fbc8f", 2026 darkslateblue: "483d8b", 2027 darkslategray: "2f4f4f", 2028 darkslategrey: "2f4f4f", 2029 darkturquoise: "00ced1", 2030 darkviolet: "9400d3", 2031 deeppink: "ff1493", 2032 deepskyblue: "00bfff", 2033 dimgray: "696969", 2034 dimgrey: "696969", 2035 dodgerblue: "1e90ff", 2036 firebrick: "b22222", 2037 floralwhite: "fffaf0", 2038 forestgreen: "228b22", 2039 fuchsia: "f0f", 2040 gainsboro: "dcdcdc", 2041 ghostwhite: "f8f8ff", 2042 gold: "ffd700", 2043 goldenrod: "daa520", 2044 gray: "808080", 2045 green: "008000", 2046 greenyellow: "adff2f", 2047 grey: "808080", 2048 honeydew: "f0fff0", 2049 hotpink: "ff69b4", 2050 indianred: "cd5c5c", 2051 indigo: "4b0082", 2052 ivory: "fffff0", 2053 khaki: "f0e68c", 2054 lavender: "e6e6fa", 2055 lavenderblush: "fff0f5", 2056 lawngreen: "7cfc00", 2057 lemonchiffon: "fffacd", 2058 lightblue: "add8e6", 2059 lightcoral: "f08080", 2060 lightcyan: "e0ffff", 2061 lightgoldenrodyellow: "fafad2", 2062 lightgray: "d3d3d3", 2063 lightgreen: "90ee90", 2064 lightgrey: "d3d3d3", 2065 lightpink: "ffb6c1", 2066 lightsalmon: "ffa07a", 2067 lightseagreen: "20b2aa", 2068 lightskyblue: "87cefa", 2069 lightslategray: "789", 2070 lightslategrey: "789", 2071 lightsteelblue: "b0c4de", 2072 lightyellow: "ffffe0", 2073 lime: "0f0", 2074 limegreen: "32cd32", 2075 linen: "faf0e6", 2076 magenta: "f0f", 2077 maroon: "800000", 2078 mediumaquamarine: "66cdaa", 2079 mediumblue: "0000cd", 2080 mediumorchid: "ba55d3", 2081 mediumpurple: "9370db", 2082 mediumseagreen: "3cb371", 2083 mediumslateblue: "7b68ee", 2084 mediumspringgreen: "00fa9a", 2085 mediumturquoise: "48d1cc", 2086 mediumvioletred: "c71585", 2087 midnightblue: "191970", 2088 mintcream: "f5fffa", 2089 mistyrose: "ffe4e1", 2090 moccasin: "ffe4b5", 2091 navajowhite: "ffdead", 2092 navy: "000080", 2093 oldlace: "fdf5e6", 2094 olive: "808000", 2095 olivedrab: "6b8e23", 2096 orange: "ffa500", 2097 orangered: "ff4500", 2098 orchid: "da70d6", 2099 palegoldenrod: "eee8aa", 2100 palegreen: "98fb98", 2101 paleturquoise: "afeeee", 2102 palevioletred: "db7093", 2103 papayawhip: "ffefd5", 2104 peachpuff: "ffdab9", 2105 peru: "cd853f", 2106 pink: "ffc0cb", 2107 plum: "dda0dd", 2108 powderblue: "b0e0e6", 2109 purple: "800080", 2110 rebeccapurple: "663399", 2111 red: "f00", 2112 rosybrown: "bc8f8f", 2113 royalblue: "4169e1", 2114 saddlebrown: "8b4513", 2115 salmon: "fa8072", 2116 sandybrown: "f4a460", 2117 seagreen: "2e8b57", 2118 seashell: "fff5ee", 2119 sienna: "a0522d", 2120 silver: "c0c0c0", 2121 skyblue: "87ceeb", 2122 slateblue: "6a5acd", 2123 slategray: "708090", 2124 slategrey: "708090", 2125 snow: "fffafa", 2126 springgreen: "00ff7f", 2127 steelblue: "4682b4", 2128 tan: "d2b48c", 2129 teal: "008080", 2130 thistle: "d8bfd8", 2131 tomato: "ff6347", 2132 turquoise: "40e0d0", 2133 violet: "ee82ee", 2134 wheat: "f5deb3", 2135 white: "fff", 2136 whitesmoke: "f5f5f5", 2137 yellow: "ff0", 2138 yellowgreen: "9acd32" 2139 }; 2140 2141 // Make it easy to access colors via `hexNames[hex]` 2142 var hexNames = tinycolor.hexNames = flip(names); 2143 2144 2145 // Utilities 2146 // --------- 2147 2148 // `{ 'name1': 'val1' }` becomes `{ 'val1': 'name1' }` 2149 function flip(o) { 2150 var flipped = { }; 2151 for (var i in o) { 2152 if (o.hasOwnProperty(i)) { 2153 flipped[o[i]] = i; 2154 } 2155 } 2156 return flipped; 2157 } 2158 2159 // Return a valid alpha value [0,1] with all invalid values being set to 1 2160 function boundAlpha(a) { 2161 a = parseFloat(a); 2162 2163 if (isNaN(a) || a < 0 || a > 1) { 2164 a = 1; 2165 } 2166 2167 return a; 2168 } 2169 2170 // Take input from [0, n] and return it as [0, 1] 2171 function bound01(n, max) { 2172 if (isOnePointZero(n)) { n = "100%"; } 2173 2174 var processPercent = isPercentage(n); 2175 n = mathMin(max, mathMax(0, parseFloat(n))); 2176 2177 // Automatically convert percentage into number 2178 if (processPercent) { 2179 n = parseInt(n * max, 10) / 100; 2180 } 2181 2182 // Handle floating point rounding errors 2183 if ((math.abs(n - max) < 0.000001)) { 2184 return 1; 2185 } 2186 2187 // Convert into [0, 1] range if it isn't already 2188 return (n % max) / parseFloat(max); 2189 } 2190 2191 // Force a number between 0 and 1 2192 function clamp01(val) { 2193 return mathMin(1, mathMax(0, val)); 2194 } 2195 2196 // Parse a base-16 hex value into a base-10 integer 2197 function parseIntFromHex(val) { 2198 return parseInt(val, 16); 2199 } 2200 2201 // Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1 2202 // <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0> 2203 function isOnePointZero(n) { 2204 return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1; 2205 } 2206 2207 // Check to see if string passed in is a percentage 2208 function isPercentage(n) { 2209 return typeof n === "string" && n.indexOf('%') != -1; 2210 } 2211 2212 // Force a hex value to have 2 characters 2213 function pad2(c) { 2214 return c.length == 1 ? '0' + c : '' + c; 2215 } 2216 2217 // Replace a decimal with it's percentage value 2218 function convertToPercentage(n) { 2219 if (n <= 1) { 2220 n = (n * 100) + "%"; 2221 } 2222 2223 return n; 2224 } 2225 2226 // Converts a decimal to a hex value 2227 function convertDecimalToHex(d) { 2228 return Math.round(parseFloat(d) * 255).toString(16); 2229 } 2230 // Converts a hex value to a decimal 2231 function convertHexToDecimal(h) { 2232 return (parseIntFromHex(h) / 255); 2233 } 2234 2235 var matchers = (function() { 2236 2237 // <http://www.w3.org/TR/css3-values/#integers> 2238 var CSS_INTEGER = "[-\\+]?\\d+%?"; 2239 2240 // <http://www.w3.org/TR/css3-values/#number-value> 2241 var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?"; 2242 2243 // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome. 2244 var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")"; 2245 2246 // Actual matching. 2247 // Parentheses and commas are optional, but not required. 2248 // Whitespace can take the place of commas or opening paren 2249 var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; 2250 var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?"; 2251 2252 return { 2253 rgb: new RegExp("rgb" + PERMISSIVE_MATCH3), 2254 rgba: new RegExp("rgba" + PERMISSIVE_MATCH4), 2255 hsl: new RegExp("hsl" + PERMISSIVE_MATCH3), 2256 hsla: new RegExp("hsla" + PERMISSIVE_MATCH4), 2257 hsv: new RegExp("hsv" + PERMISSIVE_MATCH3), 2258 hsva: new RegExp("hsva" + PERMISSIVE_MATCH4), 2259 hex3: /^([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/, 2260 hex6: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/, 2261 hex8: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/ 2262 }; 2263 })(); 2264 2265 // `stringInputToObject` 2266 // Permissive string parsing. Take in a number of formats, and output an object 2267 // based on detected format. Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}` 2268 function stringInputToObject(color) { 2269 2270 color = color.replace(trimLeft,'').replace(trimRight, '').toLowerCase(); 2271 var named = false; 2272 if (names[color]) { 2273 color = names[color]; 2274 named = true; 2275 } 2276 else if (color == 'transparent') { 2277 return { r: 0, g: 0, b: 0, a: 0, format: "name" }; 2278 } 2279 2280 // Try to match string input using regular expressions. 2281 // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360] 2282 // Just return an object and let the conversion functions handle that. 2283 // This way the result will be the same whether the tinycolor is initialized with string or object. 2284 var match; 2285 if ((match = matchers.rgb.exec(color))) { 2286 return { r: match[1], g: match[2], b: match[3] }; 2287 } 2288 if ((match = matchers.rgba.exec(color))) { 2289 return { r: match[1], g: match[2], b: match[3], a: match[4] }; 2290 } 2291 if ((match = matchers.hsl.exec(color))) { 2292 return { h: match[1], s: match[2], l: match[3] }; 2293 } 2294 if ((match = matchers.hsla.exec(color))) { 2295 return { h: match[1], s: match[2], l: match[3], a: match[4] }; 2296 } 2297 if ((match = matchers.hsv.exec(color))) { 2298 return { h: match[1], s: match[2], v: match[3] }; 2299 } 2300 if ((match = matchers.hsva.exec(color))) { 2301 return { h: match[1], s: match[2], v: match[3], a: match[4] }; 2302 } 2303 if ((match = matchers.hex8.exec(color))) { 2304 return { 2305 a: convertHexToDecimal(match[1]), 2306 r: parseIntFromHex(match[2]), 2307 g: parseIntFromHex(match[3]), 2308 b: parseIntFromHex(match[4]), 2309 format: named ? "name" : "hex8" 2310 }; 2311 } 2312 if ((match = matchers.hex6.exec(color))) { 2313 return { 2314 r: parseIntFromHex(match[1]), 2315 g: parseIntFromHex(match[2]), 2316 b: parseIntFromHex(match[3]), 2317 format: named ? "name" : "hex" 2318 }; 2319 } 2320 if ((match = matchers.hex3.exec(color))) { 2321 return { 2322 r: parseIntFromHex(match[1] + '' + match[1]), 2323 g: parseIntFromHex(match[2] + '' + match[2]), 2324 b: parseIntFromHex(match[3] + '' + match[3]), 2325 format: named ? "name" : "hex" 2326 }; 2327 } 2328 2329 return false; 2330 } 2331 2332 window.tinycolor = tinycolor; 2333 })(); 2334 2335 $(function () { 2336 if ($.fn.spectrum.load) { 2337 $.fn.spectrum.processNativeColorInputs(); 2338 } 2339 }); 2340 2341});
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.