1.
// Spectrum Colorpicker v1.8.1
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 + ';"></span></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;
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;
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.
});
2342.