Файл: themes/classic/js/bgrins-spectrum/build/spectrum.html
Строк: 22166
<?php
<!DOCTYPE html> <html> <head> <title>spectrum.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th class="docs"> <h1> spectrum.js </h1> </th> <th class="code"> </th> </tr> </thead> <tbody> <tr id="section-1"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1">¶</a> </div> <p>Spectrum Colorpicker v1.0.9
https://github.com/bgrins/spectrum
Author: Brian Grinstead
License: MIT</p> </td> <td class="code"> <div class="highlight"><pre><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nb">window</span><span class="p">,</span> <span class="nx">$</span><span class="p">,</span> <span class="kc">undefined</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">defaultOpts</span> <span class="o">=</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-2"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2">¶</a> </div> <p>Events</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">beforeShow</span><span class="o">:</span> <span class="nx">noop</span><span class="p">,</span>
<span class="nx">move</span><span class="o">:</span> <span class="nx">noop</span><span class="p">,</span>
<span class="nx">change</span><span class="o">:</span> <span class="nx">noop</span><span class="p">,</span>
<span class="nx">show</span><span class="o">:</span> <span class="nx">noop</span><span class="p">,</span>
<span class="nx">hide</span><span class="o">:</span> <span class="nx">noop</span><span class="p">,</span></pre></div> </td> </tr> <tr id="section-3"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3">¶</a> </div> <p>Options</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">color</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">flat</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">showInput</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">showButtons</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">clickoutFiresChange</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">showInitial</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">showPalette</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">showPaletteOnly</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">showSelectionPalette</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">localStorageKey</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">maxSelectionSize</span><span class="o">:</span> <span class="mi">7</span><span class="p">,</span>
<span class="nx">cancelText</span><span class="o">:</span> <span class="s2">"cancel"</span><span class="p">,</span>
<span class="nx">chooseText</span><span class="o">:</span> <span class="s2">"choose"</span><span class="p">,</span>
<span class="nx">preferredFormat</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">className</span><span class="o">:</span> <span class="s2">""</span><span class="p">,</span>
<span class="nx">showAlpha</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">theme</span><span class="o">:</span> <span class="s2">"sp-light"</span><span class="p">,</span>
<span class="nx">palette</span><span class="o">:</span> <span class="p">[</span><span class="s1">'fff'</span><span class="p">,</span> <span class="s1">'000'</span><span class="p">],</span>
<span class="nx">selectionPalette</span><span class="o">:</span> <span class="p">[],</span>
<span class="nx">disabled</span><span class="o">:</span> <span class="kc">false</span>
<span class="p">},</span>
<span class="nx">spectrums</span> <span class="o">=</span> <span class="p">[],</span>
<span class="nx">IE</span> <span class="o">=</span> <span class="o">!!</span><span class="sr">/msie/i</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span> <span class="nb">window</span><span class="p">.</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">userAgent</span> <span class="p">),</span>
<span class="nx">rgbaSupport</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">contains</span><span class="p">(</span> <span class="nx">str</span><span class="p">,</span> <span class="nx">substr</span> <span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="o">!!~</span><span class="p">(</span><span class="s1">''</span> <span class="o">+</span> <span class="nx">str</span><span class="p">).</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">substr</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">elem</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'div'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">style</span> <span class="o">=</span> <span class="nx">elem</span><span class="p">.</span><span class="nx">style</span><span class="p">;</span>
<span class="nx">style</span><span class="p">.</span><span class="nx">cssText</span> <span class="o">=</span> <span class="s1">'background-color:rgba(0,0,0,.5)'</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">contains</span><span class="p">(</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span><span class="p">,</span> <span class="s1">'rgba'</span><span class="p">)</span> <span class="o">||</span> <span class="nx">contains</span><span class="p">(</span><span class="nx">style</span><span class="p">.</span><span class="nx">backgroundColor</span><span class="p">,</span> <span class="s1">'hsla'</span><span class="p">);</span>
<span class="p">})(),</span>
<span class="nx">replaceInput</span> <span class="o">=</span> <span class="p">[</span>
<span class="s2">"<div class='sp-replacer'>"</span><span class="p">,</span>
<span class="s2">"<div class='sp-preview'><div class='sp-preview-inner'></div></div>"</span><span class="p">,</span>
<span class="s2">"<div class='sp-dd'>&#9660;</div>"</span><span class="p">,</span>
<span class="s2">"</div>"</span>
<span class="p">].</span><span class="nx">join</span><span class="p">(</span><span class="s1">''</span><span class="p">),</span>
<span class="nx">markup</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-4"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-4">¶</a> </div> <p>IE does not support gradients with multiple stops, so we need to simulate
that for the rainbow slider with 8 divs that each have a single gradient</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">gradientFix</span> <span class="o">=</span> <span class="s2">""</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">IE</span><span class="p">)</span> <span class="p">{</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><=</span> <span class="mi">6</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">gradientFix</span> <span class="o">+=</span> <span class="s2">"<div class='sp-"</span> <span class="o">+</span> <span class="nx">i</span> <span class="o">+</span> <span class="s2">"'></div>"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="p">[</span>
<span class="s2">"<div class='sp-container'>"</span><span class="p">,</span>
<span class="s2">"<div class='sp-palette-container'>"</span><span class="p">,</span>
<span class="s2">"<div class='sp-palette sp-thumb sp-cf'></div>"</span><span class="p">,</span>
<span class="s2">"</div>"</span><span class="p">,</span>
<span class="s2">"<div class='sp-picker-container'>"</span><span class="p">,</span>
<span class="s2">"<div class='sp-top sp-cf'>"</span><span class="p">,</span>
<span class="s2">"<div class='sp-fill'></div>"</span><span class="p">,</span>
<span class="s2">"<div class='sp-top-inner'>"</span><span class="p">,</span>
<span class="s2">"<div class='sp-color'>"</span><span class="p">,</span>
<span class="s2">"<div class='sp-sat'>"</span><span class="p">,</span>
<span class="s2">"<div class='sp-val'>"</span><span class="p">,</span>
<span class="s2">"<div class='sp-dragger'></div>"</span><span class="p">,</span>
<span class="s2">"</div>"</span><span class="p">,</span>
<span class="s2">"</div>"</span><span class="p">,</span>
<span class="s2">"</div>"</span><span class="p">,</span>
<span class="s2">"<div class='sp-hue'>"</span><span class="p">,</span>
<span class="s2">"<div class='sp-slider'></div>"</span><span class="p">,</span>
<span class="nx">gradientFix</span><span class="p">,</span>
<span class="s2">"</div>"</span><span class="p">,</span>
<span class="s2">"</div>"</span><span class="p">,</span>
<span class="s2">"<div class='sp-alpha'><div class='sp-alpha-inner'><div class='sp-alpha-handle'></div></div></div>"</span><span class="p">,</span>
<span class="s2">"</div>"</span><span class="p">,</span>
<span class="s2">"<div class='sp-input-container sp-cf'>"</span><span class="p">,</span>
<span class="s2">"<input class='sp-input' type='text' spellcheck='false' />"</span><span class="p">,</span>
<span class="s2">"</div>"</span><span class="p">,</span>
<span class="s2">"<div class='sp-initial sp-thumb sp-cf'></div>"</span><span class="p">,</span>
<span class="s2">"<div class='sp-button-container sp-cf'>"</span><span class="p">,</span>
<span class="s2">"<a class='sp-cancel' href='#'></a>"</span><span class="p">,</span>
<span class="s2">"<button class='sp-choose'></button>"</span><span class="p">,</span>
<span class="s2">"</div>"</span><span class="p">,</span>
<span class="s2">"</div>"</span><span class="p">,</span>
<span class="s2">"</div>"</span>
<span class="p">].</span><span class="nx">join</span><span class="p">(</span><span class="s2">""</span><span class="p">);</span>
<span class="p">})();</span>
<span class="kd">function</span> <span class="nx">paletteTemplate</span> <span class="p">(</span><span class="nx">p</span><span class="p">,</span> <span class="nx">color</span><span class="p">,</span> <span class="nx">className</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="p">[];</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">p</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">tiny</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">p</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
<span class="kd">var</span> <span class="nx">c</span> <span class="o">=</span> <span class="nx">tiny</span><span class="p">.</span><span class="nx">toHsl</span><span class="p">().</span><span class="nx">l</span> <span class="o"><</span> <span class="mf">0.5</span> <span class="o">?</span> <span class="s2">"sp-thumb-el sp-thumb-dark"</span> <span class="o">:</span> <span class="s2">"sp-thumb-el sp-thumb-light"</span><span class="p">;</span>
<span class="nx">c</span> <span class="o">+=</span> <span class="p">(</span><span class="nx">tinycolor</span><span class="p">.</span><span class="nx">equals</span><span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="nx">p</span><span class="p">[</span><span class="nx">i</span><span class="p">]))</span> <span class="o">?</span> <span class="s2">" sp-thumb-active"</span> <span class="o">:</span> <span class="s2">""</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">swatchStyle</span> <span class="o">=</span> <span class="nx">rgbaSupport</span> <span class="o">?</span> <span class="p">(</span><span class="s2">"background-color:"</span> <span class="o">+</span> <span class="nx">tiny</span><span class="p">.</span><span class="nx">toRgbString</span><span class="p">())</span> <span class="o">:</span> <span class="s2">"filter:"</span> <span class="o">+</span> <span class="nx">tiny</span><span class="p">.</span><span class="nx">toFilter</span><span class="p">();</span>
<span class="nx">html</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s1">'<span title="'</span> <span class="o">+</span> <span class="nx">tiny</span><span class="p">.</span><span class="nx">toRgbString</span><span class="p">()</span> <span class="o">+</span> <span class="s1">'" data-color="'</span> <span class="o">+</span> <span class="nx">tiny</span><span class="p">.</span><span class="nx">toRgbString</span><span class="p">()</span> <span class="o">+</span> <span class="s1">'" class="'</span> <span class="o">+</span> <span class="nx">c</span> <span class="o">+</span> <span class="s1">'"><span class="sp-thumb-inner" style="'</span> <span class="o">+</span> <span class="nx">swatchStyle</span> <span class="o">+</span> <span class="s1">';" /></span>'</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="s2">"<div class='sp-cf "</span> <span class="o">+</span> <span class="nx">className</span> <span class="o">+</span> <span class="s2">"'>"</span> <span class="o">+</span> <span class="nx">html</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s1">''</span><span class="p">)</span> <span class="o">+</span> <span class="s2">"</div>"</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">hideAll</span><span class="p">()</span> <span class="p">{</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">spectrums</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">spectrums</span><span class="p">[</span><span class="nx">i</span><span class="p">])</span> <span class="p">{</span>
<span class="nx">spectrums</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">hide</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">instanceOptions</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span> <span class="nx">callbackContext</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">opts</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">extend</span><span class="p">({},</span> <span class="nx">defaultOpts</span><span class="p">,</span> <span class="nx">o</span><span class="p">);</span>
<span class="nx">opts</span><span class="p">.</span><span class="nx">callbacks</span> <span class="o">=</span> <span class="p">{</span>
<span class="s1">'move'</span><span class="o">:</span> <span class="nx">bind</span><span class="p">(</span><span class="nx">opts</span><span class="p">.</span><span class="nx">move</span><span class="p">,</span> <span class="nx">callbackContext</span><span class="p">),</span>
<span class="s1">'change'</span><span class="o">:</span> <span class="nx">bind</span><span class="p">(</span><span class="nx">opts</span><span class="p">.</span><span class="nx">change</span><span class="p">,</span> <span class="nx">callbackContext</span><span class="p">),</span>
<span class="s1">'show'</span><span class="o">:</span> <span class="nx">bind</span><span class="p">(</span><span class="nx">opts</span><span class="p">.</span><span class="nx">show</span><span class="p">,</span> <span class="nx">callbackContext</span><span class="p">),</span>
<span class="s1">'hide'</span><span class="o">:</span> <span class="nx">bind</span><span class="p">(</span><span class="nx">opts</span><span class="p">.</span><span class="nx">hide</span><span class="p">,</span> <span class="nx">callbackContext</span><span class="p">),</span>
<span class="s1">'beforeShow'</span><span class="o">:</span> <span class="nx">bind</span><span class="p">(</span><span class="nx">opts</span><span class="p">.</span><span class="nx">beforeShow</span><span class="p">,</span> <span class="nx">callbackContext</span><span class="p">)</span>
<span class="p">};</span>
<span class="k">return</span> <span class="nx">opts</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">spectrum</span><span class="p">(</span><span class="nx">element</span><span class="p">,</span> <span class="nx">o</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">opts</span> <span class="o">=</span> <span class="nx">instanceOptions</span><span class="p">(</span><span class="nx">o</span><span class="p">,</span> <span class="nx">element</span><span class="p">),</span>
<span class="nx">flat</span> <span class="o">=</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">flat</span><span class="p">,</span>
<span class="nx">showSelectionPalette</span> <span class="o">=</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">showSelectionPalette</span><span class="p">,</span>
<span class="nx">localStorageKey</span> <span class="o">=</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">localStorageKey</span><span class="p">,</span>
<span class="nx">theme</span> <span class="o">=</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">theme</span><span class="p">,</span>
<span class="nx">callbacks</span> <span class="o">=</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">callbacks</span><span class="p">,</span>
<span class="nx">resize</span> <span class="o">=</span> <span class="nx">throttle</span><span class="p">(</span><span class="nx">reflow</span><span class="p">,</span> <span class="mi">10</span><span class="p">),</span>
<span class="nx">visible</span> <span class="o">=</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">dragWidth</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">dragHeight</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">dragHelperHeight</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">slideHeight</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">slideWidth</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">alphaWidth</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">alphaSlideHelperWidth</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">slideHelperHeight</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">currentHue</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">currentSaturation</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">currentValue</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">currentAlpha</span> <span class="o">=</span> <span class="mi">1</span><span class="p">,</span>
<span class="nx">palette</span> <span class="o">=</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">palette</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">),</span>
<span class="nx">paletteArray</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">isArray</span><span class="p">(</span><span class="nx">palette</span><span class="p">[</span><span class="mi">0</span><span class="p">])</span> <span class="o">?</span> <span class="nx">palette</span> <span class="o">:</span> <span class="p">[</span><span class="nx">palette</span><span class="p">],</span>
<span class="nx">selectionPalette</span> <span class="o">=</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">selectionPalette</span><span class="p">.</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">),</span>
<span class="nx">draggingClass</span> <span class="o">=</span> <span class="s2">"sp-dragging"</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="nx">element</span><span class="p">.</span><span class="nx">ownerDocument</span><span class="p">,</span>
<span class="nx">body</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">body</span><span class="p">,</span>
<span class="nx">boundElement</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">element</span><span class="p">),</span>
<span class="nx">disabled</span> <span class="o">=</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">container</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">markup</span><span class="p">,</span> <span class="nx">doc</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="nx">theme</span><span class="p">),</span>
<span class="nx">dragger</span> <span class="o">=</span> <span class="nx">container</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s2">".sp-color"</span><span class="p">),</span>
<span class="nx">dragHelper</span> <span class="o">=</span> <span class="nx">container</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s2">".sp-dragger"</span><span class="p">),</span>
<span class="nx">slider</span> <span class="o">=</span> <span class="nx">container</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s2">".sp-hue"</span><span class="p">),</span>
<span class="nx">slideHelper</span> <span class="o">=</span> <span class="nx">container</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s2">".sp-slider"</span><span class="p">),</span>
<span class="nx">alphaSliderInner</span> <span class="o">=</span> <span class="nx">container</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s2">".sp-alpha-inner"</span><span class="p">),</span>
<span class="nx">alphaSlider</span> <span class="o">=</span> <span class="nx">container</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s2">".sp-alpha"</span><span class="p">),</span>
<span class="nx">alphaSlideHelper</span> <span class="o">=</span> <span class="nx">container</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s2">".sp-alpha-handle"</span><span class="p">),</span>
<span class="nx">textInput</span> <span class="o">=</span> <span class="nx">container</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s2">".sp-input"</span><span class="p">),</span>
<span class="nx">paletteContainer</span> <span class="o">=</span> <span class="nx">container</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s2">".sp-palette"</span><span class="p">),</span>
<span class="nx">initialColorContainer</span> <span class="o">=</span> <span class="nx">container</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s2">".sp-initial"</span><span class="p">),</span>
<span class="nx">cancelButton</span> <span class="o">=</span> <span class="nx">container</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s2">".sp-cancel"</span><span class="p">),</span>
<span class="nx">chooseButton</span> <span class="o">=</span> <span class="nx">container</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s2">".sp-choose"</span><span class="p">),</span>
<span class="nx">isInput</span> <span class="o">=</span> <span class="nx">boundElement</span><span class="p">.</span><span class="nx">is</span><span class="p">(</span><span class="s2">"input"</span><span class="p">),</span>
<span class="nx">shouldReplace</span> <span class="o">=</span> <span class="nx">isInput</span> <span class="o">&&</span> <span class="o">!</span><span class="nx">flat</span><span class="p">,</span>
<span class="nx">replacer</span> <span class="o">=</span> <span class="p">(</span><span class="nx">shouldReplace</span><span class="p">)</span> <span class="o">?</span> <span class="nx">$</span><span class="p">(</span><span class="nx">replaceInput</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="nx">theme</span><span class="p">)</span> <span class="o">:</span> <span class="nx">$</span><span class="p">([]),</span>
<span class="nx">offsetElement</span> <span class="o">=</span> <span class="p">(</span><span class="nx">shouldReplace</span><span class="p">)</span> <span class="o">?</span> <span class="nx">replacer</span> <span class="o">:</span> <span class="nx">boundElement</span><span class="p">,</span>
<span class="nx">previewElement</span> <span class="o">=</span> <span class="nx">replacer</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s2">".sp-preview-inner"</span><span class="p">),</span>
<span class="nx">initialColor</span> <span class="o">=</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">color</span> <span class="o">||</span> <span class="p">(</span><span class="nx">isInput</span> <span class="o">&&</span> <span class="nx">boundElement</span><span class="p">.</span><span class="nx">val</span><span class="p">()),</span>
<span class="nx">colorOnShow</span> <span class="o">=</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">preferredFormat</span> <span class="o">=</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">preferredFormat</span><span class="p">,</span>
<span class="nx">currentPreferredFormat</span> <span class="o">=</span> <span class="nx">preferredFormat</span><span class="p">,</span>
<span class="nx">clickoutFiresChange</span> <span class="o">=</span> <span class="o">!</span><span class="nx">opts</span><span class="p">.</span><span class="nx">showButtons</span> <span class="o">||</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">clickoutFiresChange</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">applyOptions</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s2">"sp-flat"</span><span class="p">,</span> <span class="nx">flat</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s2">"sp-input-disabled"</span><span class="p">,</span> <span class="o">!</span><span class="nx">opts</span><span class="p">.</span><span class="nx">showInput</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s2">"sp-alpha-enabled"</span><span class="p">,</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">showAlpha</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s2">"sp-buttons-disabled"</span><span class="p">,</span> <span class="o">!</span><span class="nx">opts</span><span class="p">.</span><span class="nx">showButtons</span> <span class="o">||</span> <span class="nx">flat</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s2">"sp-palette-disabled"</span><span class="p">,</span> <span class="o">!</span><span class="nx">opts</span><span class="p">.</span><span class="nx">showPalette</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s2">"sp-palette-only"</span><span class="p">,</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">showPaletteOnly</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">toggleClass</span><span class="p">(</span><span class="s2">"sp-initial-disabled"</span><span class="p">,</span> <span class="o">!</span><span class="nx">opts</span><span class="p">.</span><span class="nx">showInitial</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="nx">opts</span><span class="p">.</span><span class="nx">className</span><span class="p">);</span>
<span class="nx">reflow</span><span class="p">();</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">initialize</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">IE</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">find</span><span class="p">(</span><span class="s2">"*:not(input)"</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s2">"unselectable"</span><span class="p">,</span> <span class="s2">"on"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">applyOptions</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">shouldReplace</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">boundElement</span><span class="p">.</span><span class="nx">hide</span><span class="p">().</span><span class="nx">after</span><span class="p">(</span><span class="nx">replacer</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">flat</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">boundElement</span><span class="p">.</span><span class="nx">after</span><span class="p">(</span><span class="nx">container</span><span class="p">).</span><span class="nx">hide</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="nx">body</span><span class="p">).</span><span class="nx">append</span><span class="p">(</span><span class="nx">container</span><span class="p">.</span><span class="nx">hide</span><span class="p">());</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">localStorageKey</span> <span class="o">&&</span> <span class="nb">window</span><span class="p">.</span><span class="nx">localStorage</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-5"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-5">¶</a> </div> <p>Migrate old palettes over to new format. May want to remove this eventually.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">try</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">oldPalette</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">localStorage</span><span class="p">[</span><span class="nx">localStorageKey</span><span class="p">].</span><span class="nx">split</span><span class="p">(</span><span class="s2">",#"</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">oldPalette</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="k">delete</span> <span class="nb">window</span><span class="p">.</span><span class="nx">localStorage</span><span class="p">[</span><span class="nx">localStorageKey</span><span class="p">];</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="nx">oldPalette</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">i</span><span class="p">,</span> <span class="nx">c</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">addColorToSelectionPalette</span><span class="p">(</span><span class="nx">c</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">catch</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="p">}</span>
<span class="k">try</span> <span class="p">{</span>
<span class="nx">selectionPalette</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">localStorage</span><span class="p">[</span><span class="nx">localStorageKey</span><span class="p">].</span><span class="nx">split</span><span class="p">(</span><span class="s2">";"</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">catch</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="p">}</span>
<span class="p">}</span>
<span class="nx">offsetElement</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"click.spectrum touchstart.spectrum"</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">disabled</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">toggle</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">stopPropagation</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">$</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">).</span><span class="nx">is</span><span class="p">(</span><span class="s2">"input"</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="k">if</span><span class="p">(</span><span class="nx">boundElement</span><span class="p">.</span><span class="nx">is</span><span class="p">(</span><span class="s2">":disabled"</span><span class="p">)</span> <span class="o">||</span> <span class="p">(</span><span class="nx">opts</span><span class="p">.</span><span class="nx">disabled</span> <span class="o">===</span> <span class="kc">true</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">disable</span><span class="p">();</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-6"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-6">¶</a> </div> <p>Prevent clicks from bubbling up to document. This would cause it to be hidden.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">container</span><span class="p">.</span><span class="nx">click</span><span class="p">(</span><span class="nx">stopPropagation</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-7"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-7">¶</a> </div> <p>Handle user typed input</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">textInput</span><span class="p">.</span><span class="nx">change</span><span class="p">(</span><span class="nx">setFromTextInput</span><span class="p">);</span>
<span class="nx">textInput</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"paste"</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">setTimeout</span><span class="p">(</span><span class="nx">setFromTextInput</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">textInput</span><span class="p">.</span><span class="nx">keydown</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">keyCode</span> <span class="o">==</span> <span class="mi">13</span><span class="p">)</span> <span class="p">{</span> <span class="nx">setFromTextInput</span><span class="p">();</span> <span class="p">}</span> <span class="p">});</span>
<span class="nx">cancelButton</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="nx">opts</span><span class="p">.</span><span class="nx">cancelText</span><span class="p">);</span>
<span class="nx">cancelButton</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"click.spectrum"</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">stopPropagation</span><span class="p">();</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="nx">hide</span><span class="p">(</span><span class="s2">"cancel"</span><span class="p">);</span>
<span class="p">});</span>
<span class="nx">chooseButton</span><span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="nx">opts</span><span class="p">.</span><span class="nx">chooseText</span><span class="p">);</span>
<span class="nx">chooseButton</span><span class="p">.</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"click.spectrum"</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">stopPropagation</span><span class="p">();</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">isValid</span><span class="p">())</span> <span class="p">{</span>
<span class="nx">updateOriginalInput</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
<span class="nx">hide</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nx">draggable</span><span class="p">(</span><span class="nx">alphaSlider</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">dragX</span><span class="p">,</span> <span class="nx">dragY</span><span class="p">,</span> <span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">currentAlpha</span> <span class="o">=</span> <span class="p">(</span><span class="nx">dragX</span> <span class="o">/</span> <span class="nx">alphaWidth</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">shiftKey</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">currentAlpha</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nx">currentAlpha</span> <span class="o">*</span> <span class="mi">10</span><span class="p">)</span> <span class="o">/</span> <span class="mi">10</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">move</span><span class="p">();</span>
<span class="p">});</span>
<span class="nx">draggable</span><span class="p">(</span><span class="nx">slider</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">dragX</span><span class="p">,</span> <span class="nx">dragY</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">currentHue</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">dragY</span> <span class="o">/</span> <span class="nx">slideHeight</span><span class="p">);</span>
<span class="nx">move</span><span class="p">();</span>
<span class="p">},</span> <span class="nx">dragStart</span><span class="p">,</span> <span class="nx">dragStop</span><span class="p">);</span>
<span class="nx">draggable</span><span class="p">(</span><span class="nx">dragger</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">dragX</span><span class="p">,</span> <span class="nx">dragY</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">currentSaturation</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">dragX</span> <span class="o">/</span> <span class="nx">dragWidth</span><span class="p">);</span>
<span class="nx">currentValue</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">((</span><span class="nx">dragHeight</span> <span class="o">-</span> <span class="nx">dragY</span><span class="p">)</span> <span class="o">/</span> <span class="nx">dragHeight</span><span class="p">);</span>
<span class="nx">move</span><span class="p">();</span>
<span class="p">},</span> <span class="nx">dragStart</span><span class="p">,</span> <span class="nx">dragStop</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!!</span><span class="nx">initialColor</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">set</span><span class="p">(</span><span class="nx">initialColor</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-8"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-8">¶</a> </div> <p>In case color was black - update the preview UI and set the format
since the set function will not run (default color is black).</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">updateUI</span><span class="p">();</span>
<span class="nx">currentPreferredFormat</span> <span class="o">=</span> <span class="nx">preferredFormat</span> <span class="o">||</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">initialColor</span><span class="p">).</span><span class="nx">format</span><span class="p">;</span>
<span class="nx">addColorToSelectionPalette</span><span class="p">(</span><span class="nx">initialColor</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">updateUI</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">flat</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">show</span><span class="p">();</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">palletElementClick</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">data</span> <span class="o">&&</span> <span class="nx">e</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">ignore</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">set</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s2">"color"</span><span class="p">));</span>
<span class="nx">move</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">set</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="s2">"color"</span><span class="p">));</span>
<span class="nx">updateOriginalInput</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
<span class="nx">move</span><span class="p">();</span>
<span class="nx">hide</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">paletteEvent</span> <span class="o">=</span> <span class="nx">IE</span> <span class="o">?</span> <span class="s2">"mousedown.spectrum"</span> <span class="o">:</span> <span class="s2">"click.spectrum touchstart.spectrum"</span><span class="p">;</span>
<span class="nx">paletteContainer</span><span class="p">.</span><span class="nx">delegate</span><span class="p">(</span><span class="s2">".sp-thumb-el"</span><span class="p">,</span> <span class="nx">paletteEvent</span><span class="p">,</span> <span class="nx">palletElementClick</span><span class="p">);</span>
<span class="nx">initialColorContainer</span><span class="p">.</span><span class="nx">delegate</span><span class="p">(</span><span class="s2">".sp-thumb-el:nth-child(1)"</span><span class="p">,</span> <span class="nx">paletteEvent</span><span class="p">,</span> <span class="p">{</span> <span class="nx">ignore</span><span class="o">:</span> <span class="kc">true</span> <span class="p">},</span> <span class="nx">palletElementClick</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">addColorToSelectionPalette</span><span class="p">(</span><span class="nx">color</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">showSelectionPalette</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">colorRgb</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">).</span><span class="nx">toRgbString</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">inArray</span><span class="p">(</span><span class="nx">colorRgb</span><span class="p">,</span> <span class="nx">selectionPalette</span><span class="p">)</span> <span class="o">===</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">selectionPalette</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">colorRgb</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">localStorageKey</span> <span class="o">&&</span> <span class="nb">window</span><span class="p">.</span><span class="nx">localStorage</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">localStorage</span><span class="p">[</span><span class="nx">localStorageKey</span><span class="p">]</span> <span class="o">=</span> <span class="nx">selectionPalette</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s2">";"</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">catch</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span> <span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">getUniqueSelectionPalette</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">unique</span> <span class="o">=</span> <span class="p">[];</span>
<span class="kd">var</span> <span class="nx">p</span> <span class="o">=</span> <span class="nx">selectionPalette</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">paletteLookup</span> <span class="o">=</span> <span class="p">{};</span>
<span class="kd">var</span> <span class="nx">rgb</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">opts</span><span class="p">.</span><span class="nx">showPalette</span><span class="p">)</span> <span class="p">{</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">paletteArray</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">j</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">j</span> <span class="o"><</span> <span class="nx">paletteArray</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">length</span><span class="p">;</span> <span class="nx">j</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">rgb</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">paletteArray</span><span class="p">[</span><span class="nx">i</span><span class="p">][</span><span class="nx">j</span><span class="p">]).</span><span class="nx">toRgbString</span><span class="p">();</span>
<span class="nx">paletteLookup</span><span class="p">[</span><span class="nx">rgb</span><span class="p">]</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">p</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">rgb</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">p</span><span class="p">[</span><span class="nx">i</span><span class="p">]).</span><span class="nx">toRgbString</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">paletteLookup</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="nx">rgb</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">unique</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">p</span><span class="p">[</span><span class="nx">i</span><span class="p">]);</span>
<span class="nx">paletteLookup</span><span class="p">[</span><span class="nx">rgb</span><span class="p">]</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">unique</span><span class="p">.</span><span class="nx">reverse</span><span class="p">().</span><span class="nx">slice</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">maxSelectionSize</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">drawPalette</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">currentColor</span> <span class="o">=</span> <span class="nx">get</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="nx">$</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="nx">paletteArray</span><span class="p">,</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">palette</span><span class="p">,</span> <span class="nx">i</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">paletteTemplate</span><span class="p">(</span><span class="nx">palette</span><span class="p">,</span> <span class="nx">currentColor</span><span class="p">,</span> <span class="s2">"sp-palette-row sp-palette-row-"</span> <span class="o">+</span> <span class="nx">i</span><span class="p">);</span>
<span class="p">});</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">selectionPalette</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">html</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">paletteTemplate</span><span class="p">(</span><span class="nx">getUniqueSelectionPalette</span><span class="p">(),</span> <span class="nx">currentColor</span><span class="p">,</span> <span class="s2">"sp-palette-row sp-palette-row-selection"</span><span class="p">));</span>
<span class="p">}</span>
<span class="nx">paletteContainer</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">html</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s2">""</span><span class="p">));</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">drawInitial</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">opts</span><span class="p">.</span><span class="nx">showInitial</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">initial</span> <span class="o">=</span> <span class="nx">colorOnShow</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">current</span> <span class="o">=</span> <span class="nx">get</span><span class="p">();</span>
<span class="nx">initialColorContainer</span><span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="nx">paletteTemplate</span><span class="p">([</span><span class="nx">initial</span><span class="p">,</span> <span class="nx">current</span><span class="p">],</span> <span class="nx">current</span><span class="p">,</span> <span class="s2">"sp-palette-row-initial"</span><span class="p">));</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">dragStart</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">dragHeight</span> <span class="o">===</span> <span class="mi">0</span> <span class="o">||</span> <span class="nx">dragWidth</span> <span class="o">===</span> <span class="mi">0</span> <span class="o">||</span> <span class="nx">slideHeight</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">reflow</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="nx">draggingClass</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">dragStop</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="nx">draggingClass</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">setFromTextInput</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">tiny</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">textInput</span><span class="p">.</span><span class="nx">val</span><span class="p">());</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">tiny</span><span class="p">.</span><span class="nx">ok</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">set</span><span class="p">(</span><span class="nx">tiny</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">textInput</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">"sp-validation-error"</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">toggle</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">visible</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">hide</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">show</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">show</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">visible</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">reflow</span><span class="p">();</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">callbacks</span><span class="p">.</span><span class="nx">beforeShow</span><span class="p">(</span><span class="nx">get</span><span class="p">())</span> <span class="o">===</span> <span class="kc">false</span><span class="p">)</span> <span class="k">return</span><span class="p">;</span>
<span class="nx">hideAll</span><span class="p">();</span>
<span class="nx">visible</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">$</span><span class="p">(</span><span class="nx">doc</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"click.spectrum"</span><span class="p">,</span> <span class="nx">hide</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="s2">"resize.spectrum"</span><span class="p">,</span> <span class="nx">resize</span><span class="p">);</span>
<span class="nx">replacer</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">"sp-active"</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">opts</span><span class="p">.</span><span class="nx">showPalette</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">drawPalette</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">reflow</span><span class="p">();</span>
<span class="nx">updateUI</span><span class="p">();</span>
<span class="nx">colorOnShow</span> <span class="o">=</span> <span class="nx">get</span><span class="p">();</span>
<span class="nx">drawInitial</span><span class="p">();</span>
<span class="nx">callbacks</span><span class="p">.</span><span class="nx">show</span><span class="p">(</span><span class="nx">colorOnShow</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">hide</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-9"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-9">¶</a> </div> <p>Return on right click</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">e</span> <span class="o">&&</span> <span class="nx">e</span><span class="p">.</span><span class="nx">type</span> <span class="o">==</span> <span class="s2">"click"</span> <span class="o">&&</span> <span class="nx">e</span><span class="p">.</span><span class="nx">button</span> <span class="o">==</span> <span class="mi">2</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span><span class="p">;</span> <span class="p">}</span></pre></div> </td> </tr> <tr id="section-10"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-10">¶</a> </div> <p>Return if hiding is unnecessary</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">visible</span> <span class="o">||</span> <span class="nx">flat</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span><span class="p">;</span> <span class="p">}</span>
<span class="nx">visible</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="nx">$</span><span class="p">(</span><span class="nx">doc</span><span class="p">).</span><span class="nx">unbind</span><span class="p">(</span><span class="s2">"click.spectrum"</span><span class="p">,</span> <span class="nx">hide</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">window</span><span class="p">).</span><span class="nx">unbind</span><span class="p">(</span><span class="s2">"resize.spectrum"</span><span class="p">,</span> <span class="nx">resize</span><span class="p">);</span>
<span class="nx">replacer</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">"sp-active"</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">hide</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">colorHasChanged</span> <span class="o">=</span> <span class="o">!</span><span class="nx">tinycolor</span><span class="p">.</span><span class="nx">equals</span><span class="p">(</span><span class="nx">get</span><span class="p">(),</span> <span class="nx">colorOnShow</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">colorHasChanged</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">clickoutFiresChange</span> <span class="o">&&</span> <span class="nx">e</span> <span class="o">!==</span> <span class="s2">"cancel"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">updateOriginalInput</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">revert</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">callbacks</span><span class="p">.</span><span class="nx">hide</span><span class="p">(</span><span class="nx">get</span><span class="p">());</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">revert</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">set</span><span class="p">(</span><span class="nx">colorOnShow</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">set</span><span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="nx">ignoreFormatChange</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">tinycolor</span><span class="p">.</span><span class="nx">equals</span><span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="nx">get</span><span class="p">()))</span> <span class="p">{</span>
<span class="k">return</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">newColor</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">newHsv</span> <span class="o">=</span> <span class="nx">newColor</span><span class="p">.</span><span class="nx">toHsv</span><span class="p">();</span>
<span class="nx">currentHue</span> <span class="o">=</span> <span class="nx">newHsv</span><span class="p">.</span><span class="nx">h</span><span class="p">;</span>
<span class="nx">currentSaturation</span> <span class="o">=</span> <span class="nx">newHsv</span><span class="p">.</span><span class="nx">s</span><span class="p">;</span>
<span class="nx">currentValue</span> <span class="o">=</span> <span class="nx">newHsv</span><span class="p">.</span><span class="nx">v</span><span class="p">;</span>
<span class="nx">currentAlpha</span> <span class="o">=</span> <span class="nx">newHsv</span><span class="p">.</span><span class="nx">a</span><span class="p">;</span>
<span class="nx">updateUI</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">ignoreFormatChange</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">currentPreferredFormat</span> <span class="o">=</span> <span class="nx">preferredFormat</span> <span class="o">||</span> <span class="nx">newColor</span><span class="p">.</span><span class="nx">format</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">get</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">tinycolor</span><span class="p">.</span><span class="nx">fromRatio</span><span class="p">({</span> <span class="nx">h</span><span class="o">:</span> <span class="nx">currentHue</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">currentSaturation</span><span class="p">,</span> <span class="nx">v</span><span class="o">:</span> <span class="nx">currentValue</span><span class="p">,</span> <span class="nx">a</span><span class="o">:</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nx">currentAlpha</span> <span class="o">*</span> <span class="mi">100</span><span class="p">)</span> <span class="o">/</span> <span class="mi">100</span> <span class="p">});</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">isValid</span><span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="o">!</span><span class="nx">textInput</span><span class="p">.</span><span class="nx">hasClass</span><span class="p">(</span><span class="s2">"sp-validation-error"</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">move</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">updateUI</span><span class="p">();</span>
<span class="nx">callbacks</span><span class="p">.</span><span class="nx">move</span><span class="p">(</span><span class="nx">get</span><span class="p">());</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">updateUI</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">textInput</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">"sp-validation-error"</span><span class="p">);</span>
<span class="nx">updateHelperLocations</span><span class="p">();</span></pre></div> </td> </tr> <tr id="section-11"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-11">¶</a> </div> <p>Update dragger background color (gradients take care of saturation and value).</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">flatColor</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">({</span> <span class="nx">h</span><span class="o">:</span> <span class="nx">currentHue</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="s2">"1.0"</span><span class="p">,</span> <span class="nx">v</span><span class="o">:</span> <span class="s2">"1.0"</span> <span class="p">});</span>
<span class="nx">dragger</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span><span class="s2">"background-color"</span><span class="p">,</span> <span class="nx">flatColor</span><span class="p">.</span><span class="nx">toHexString</span><span class="p">());</span></pre></div> </td> </tr> <tr id="section-12"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-12">¶</a> </div> <p>Get a format that alpha will be included in (hex and names ignore alpha)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">format</span> <span class="o">=</span> <span class="nx">currentPreferredFormat</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">currentAlpha</span> <span class="o"><</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">format</span> <span class="o">===</span> <span class="s2">"hex"</span> <span class="o">||</span> <span class="nx">format</span> <span class="o">===</span> <span class="s2">"name"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">format</span> <span class="o">=</span> <span class="s2">"rgb"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">realColor</span> <span class="o">=</span> <span class="nx">get</span><span class="p">(),</span>
<span class="nx">realHex</span> <span class="o">=</span> <span class="nx">realColor</span><span class="p">.</span><span class="nx">toHexString</span><span class="p">(),</span>
<span class="nx">realRgb</span> <span class="o">=</span> <span class="nx">realColor</span><span class="p">.</span><span class="nx">toRgbString</span><span class="p">();</span></pre></div> </td> </tr> <tr id="section-13"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-13">¶</a> </div> <p>Update the replaced elements background color (with actual selected color)</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">rgbaSupport</span> <span class="o">||</span> <span class="nx">realColor</span><span class="p">.</span><span class="nx">alpha</span> <span class="o">===</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">previewElement</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span><span class="s2">"background-color"</span><span class="p">,</span> <span class="nx">realRgb</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">previewElement</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span><span class="s2">"background-color"</span><span class="p">,</span> <span class="s2">"transparent"</span><span class="p">);</span>
<span class="nx">previewElement</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span><span class="s2">"filter"</span><span class="p">,</span> <span class="nx">realColor</span><span class="p">.</span><span class="nx">toFilter</span><span class="p">());</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">opts</span><span class="p">.</span><span class="nx">showAlpha</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">rgb</span> <span class="o">=</span> <span class="nx">realColor</span><span class="p">.</span><span class="nx">toRgb</span><span class="p">();</span>
<span class="nx">rgb</span><span class="p">.</span><span class="nx">a</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">realAlpha</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">rgb</span><span class="p">).</span><span class="nx">toRgbString</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">gradient</span> <span class="o">=</span> <span class="s2">"linear-gradient(left, "</span> <span class="o">+</span> <span class="nx">realAlpha</span> <span class="o">+</span> <span class="s2">", "</span> <span class="o">+</span> <span class="nx">realHex</span> <span class="o">+</span> <span class="s2">")"</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">IE</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">alphaSliderInner</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span><span class="s2">"filter"</span><span class="p">,</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">realAlpha</span><span class="p">).</span><span class="nx">toFilter</span><span class="p">({</span> <span class="nx">gradientType</span><span class="o">:</span> <span class="mi">1</span> <span class="p">},</span> <span class="nx">realHex</span><span class="p">));</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">alphaSliderInner</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span><span class="s2">"background"</span><span class="p">,</span> <span class="s2">"-webkit-"</span> <span class="o">+</span> <span class="nx">gradient</span><span class="p">);</span>
<span class="nx">alphaSliderInner</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span><span class="s2">"background"</span><span class="p">,</span> <span class="s2">"-moz-"</span> <span class="o">+</span> <span class="nx">gradient</span><span class="p">);</span>
<span class="nx">alphaSliderInner</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span><span class="s2">"background"</span><span class="p">,</span> <span class="s2">"-ms-"</span> <span class="o">+</span> <span class="nx">gradient</span><span class="p">);</span>
<span class="nx">alphaSliderInner</span><span class="p">.</span><span class="nx">css</span><span class="p">(</span><span class="s2">"background"</span><span class="p">,</span> <span class="nx">gradient</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-14"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-14">¶</a> </div> <p>Update the text entry input as it changes happen</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">opts</span><span class="p">.</span><span class="nx">showInput</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">currentAlpha</span> <span class="o"><</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">format</span> <span class="o">===</span> <span class="s2">"hex"</span> <span class="o">||</span> <span class="nx">format</span> <span class="o">===</span> <span class="s2">"name"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">format</span> <span class="o">=</span> <span class="s2">"rgb"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">textInput</span><span class="p">.</span><span class="nx">val</span><span class="p">(</span><span class="nx">realColor</span><span class="p">.</span><span class="nx">toString</span><span class="p">(</span><span class="nx">format</span><span class="p">));</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">opts</span><span class="p">.</span><span class="nx">showPalette</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">drawPalette</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">drawInitial</span><span class="p">();</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">updateHelperLocations</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">s</span> <span class="o">=</span> <span class="nx">currentSaturation</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">v</span> <span class="o">=</span> <span class="nx">currentValue</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-15"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-15">¶</a> </div> <p>Where to show the little circle in that displays your current selected color</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">dragX</span> <span class="o">=</span> <span class="nx">s</span> <span class="o">*</span> <span class="nx">dragWidth</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">dragY</span> <span class="o">=</span> <span class="nx">dragHeight</span> <span class="o">-</span> <span class="p">(</span><span class="nx">v</span> <span class="o">*</span> <span class="nx">dragHeight</span><span class="p">);</span>
<span class="nx">dragX</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span>
<span class="o">-</span><span class="nx">dragHelperHeight</span><span class="p">,</span>
<span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">dragWidth</span> <span class="o">-</span> <span class="nx">dragHelperHeight</span><span class="p">,</span> <span class="nx">dragX</span> <span class="o">-</span> <span class="nx">dragHelperHeight</span><span class="p">)</span>
<span class="p">);</span>
<span class="nx">dragY</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span>
<span class="o">-</span><span class="nx">dragHelperHeight</span><span class="p">,</span>
<span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">dragHeight</span> <span class="o">-</span> <span class="nx">dragHelperHeight</span><span class="p">,</span> <span class="nx">dragY</span> <span class="o">-</span> <span class="nx">dragHelperHeight</span><span class="p">)</span>
<span class="p">);</span>
<span class="nx">dragHelper</span><span class="p">.</span><span class="nx">css</span><span class="p">({</span>
<span class="s2">"top"</span><span class="o">:</span> <span class="nx">dragY</span><span class="p">,</span>
<span class="s2">"left"</span><span class="o">:</span> <span class="nx">dragX</span>
<span class="p">});</span>
<span class="kd">var</span> <span class="nx">alphaX</span> <span class="o">=</span> <span class="nx">currentAlpha</span> <span class="o">*</span> <span class="nx">alphaWidth</span><span class="p">;</span>
<span class="nx">alphaSlideHelper</span><span class="p">.</span><span class="nx">css</span><span class="p">({</span>
<span class="s2">"left"</span><span class="o">:</span> <span class="nx">alphaX</span> <span class="o">-</span> <span class="p">(</span><span class="nx">alphaSlideHelperWidth</span> <span class="o">/</span> <span class="mi">2</span><span class="p">)</span>
<span class="p">});</span></pre></div> </td> </tr> <tr id="section-16"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-16">¶</a> </div> <p>Where to show the bar that displays your current selected hue</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">slideY</span> <span class="o">=</span> <span class="p">(</span><span class="nx">currentHue</span><span class="p">)</span> <span class="o">*</span> <span class="nx">slideHeight</span><span class="p">;</span>
<span class="nx">slideHelper</span><span class="p">.</span><span class="nx">css</span><span class="p">({</span>
<span class="s2">"top"</span><span class="o">:</span> <span class="nx">slideY</span> <span class="o">-</span> <span class="nx">slideHelperHeight</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">updateOriginalInput</span><span class="p">(</span><span class="nx">fireCallback</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">color</span> <span class="o">=</span> <span class="nx">get</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">isInput</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">boundElement</span><span class="p">.</span><span class="nx">val</span><span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">toString</span><span class="p">(</span><span class="nx">currentPreferredFormat</span><span class="p">)).</span><span class="nx">change</span><span class="p">();</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">hasChanged</span> <span class="o">=</span> <span class="o">!</span><span class="nx">tinycolor</span><span class="p">.</span><span class="nx">equals</span><span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="nx">colorOnShow</span><span class="p">);</span>
<span class="nx">colorOnShow</span> <span class="o">=</span> <span class="nx">color</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-17"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-17">¶</a> </div> <p>Update the selection palette with the current color</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">addColorToSelectionPalette</span><span class="p">(</span><span class="nx">color</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">fireCallback</span> <span class="o">&&</span> <span class="nx">hasChanged</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">callbacks</span><span class="p">.</span><span class="nx">change</span><span class="p">(</span><span class="nx">color</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">reflow</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">dragWidth</span> <span class="o">=</span> <span class="nx">dragger</span><span class="p">.</span><span class="nx">width</span><span class="p">();</span>
<span class="nx">dragHeight</span> <span class="o">=</span> <span class="nx">dragger</span><span class="p">.</span><span class="nx">height</span><span class="p">();</span>
<span class="nx">dragHelperHeight</span> <span class="o">=</span> <span class="nx">dragHelper</span><span class="p">.</span><span class="nx">height</span><span class="p">();</span>
<span class="nx">slideWidth</span> <span class="o">=</span> <span class="nx">slider</span><span class="p">.</span><span class="nx">width</span><span class="p">();</span>
<span class="nx">slideHeight</span> <span class="o">=</span> <span class="nx">slider</span><span class="p">.</span><span class="nx">height</span><span class="p">();</span>
<span class="nx">slideHelperHeight</span> <span class="o">=</span> <span class="nx">slideHelper</span><span class="p">.</span><span class="nx">height</span><span class="p">();</span>
<span class="nx">alphaWidth</span> <span class="o">=</span> <span class="nx">alphaSlider</span><span class="p">.</span><span class="nx">width</span><span class="p">();</span>
<span class="nx">alphaSlideHelperWidth</span> <span class="o">=</span> <span class="nx">alphaSlideHelper</span><span class="p">.</span><span class="nx">width</span><span class="p">();</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">flat</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">offset</span><span class="p">(</span><span class="nx">getOffset</span><span class="p">(</span><span class="nx">container</span><span class="p">,</span> <span class="nx">offsetElement</span><span class="p">));</span>
<span class="p">}</span>
<span class="nx">updateHelperLocations</span><span class="p">();</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">destroy</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">boundElement</span><span class="p">.</span><span class="nx">show</span><span class="p">();</span>
<span class="nx">offsetElement</span><span class="p">.</span><span class="nx">unbind</span><span class="p">(</span><span class="s2">"click.spectrum touchstart.spectrum"</span><span class="p">);</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">remove</span><span class="p">();</span>
<span class="nx">replacer</span><span class="p">.</span><span class="nx">remove</span><span class="p">();</span>
<span class="nx">spectrums</span><span class="p">[</span><span class="nx">spect</span><span class="p">.</span><span class="nx">id</span><span class="p">]</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">option</span><span class="p">(</span><span class="nx">optionName</span><span class="p">,</span> <span class="nx">optionValue</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">optionName</span> <span class="o">===</span> <span class="kc">undefined</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">$</span><span class="p">.</span><span class="nx">extend</span><span class="p">({},</span> <span class="nx">opts</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">optionValue</span> <span class="o">===</span> <span class="kc">undefined</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">opts</span><span class="p">[</span><span class="nx">optionName</span><span class="p">];</span>
<span class="p">}</span>
<span class="nx">opts</span><span class="p">[</span><span class="nx">optionName</span><span class="p">]</span> <span class="o">=</span> <span class="nx">optionValue</span><span class="p">;</span>
<span class="nx">applyOptions</span><span class="p">();</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">enable</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">disabled</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="nx">boundElement</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">"disabled"</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
<span class="nx">offsetElement</span><span class="p">.</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">"sp-disabled"</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">disable</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">hide</span><span class="p">();</span>
<span class="nx">disabled</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">boundElement</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">"disabled"</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
<span class="nx">offsetElement</span><span class="p">.</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">"sp-disabled"</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">initialize</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">spect</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">show</span><span class="o">:</span> <span class="nx">show</span><span class="p">,</span>
<span class="nx">hide</span><span class="o">:</span> <span class="nx">hide</span><span class="p">,</span>
<span class="nx">toggle</span><span class="o">:</span> <span class="nx">toggle</span><span class="p">,</span>
<span class="nx">reflow</span><span class="o">:</span> <span class="nx">reflow</span><span class="p">,</span>
<span class="nx">option</span><span class="o">:</span> <span class="nx">option</span><span class="p">,</span>
<span class="nx">enable</span><span class="o">:</span> <span class="nx">enable</span><span class="p">,</span>
<span class="nx">disable</span><span class="o">:</span> <span class="nx">disable</span><span class="p">,</span>
<span class="nx">set</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">c</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">set</span><span class="p">(</span><span class="nx">c</span><span class="p">);</span>
<span class="nx">updateOriginalInput</span><span class="p">();</span>
<span class="p">},</span>
<span class="nx">get</span><span class="o">:</span> <span class="nx">get</span><span class="p">,</span>
<span class="nx">destroy</span><span class="o">:</span> <span class="nx">destroy</span><span class="p">,</span>
<span class="nx">container</span><span class="o">:</span> <span class="nx">container</span>
<span class="p">};</span>
<span class="nx">spect</span><span class="p">.</span><span class="nx">id</span> <span class="o">=</span> <span class="nx">spectrums</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">spect</span><span class="p">)</span> <span class="o">-</span> <span class="mi">1</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">spect</span><span class="p">;</span>
<span class="p">}</span>
<span class="cm">/**</span>
<span class="cm"> * checkOffset - get the offset below/above and left/right element depending on screen position</span>
<span class="cm"> * Thanks https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.datepicker.js</span>
<span class="cm"> */</span>
<span class="kd">function</span> <span class="nx">getOffset</span><span class="p">(</span><span class="nx">picker</span><span class="p">,</span> <span class="nx">input</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">extraY</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">dpWidth</span> <span class="o">=</span> <span class="nx">picker</span><span class="p">.</span><span class="nx">outerWidth</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">dpHeight</span> <span class="o">=</span> <span class="nx">picker</span><span class="p">.</span><span class="nx">outerHeight</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">inputHeight</span> <span class="o">=</span> <span class="nx">input</span><span class="p">.</span><span class="nx">outerHeight</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="nx">picker</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">ownerDocument</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">docElem</span> <span class="o">=</span> <span class="nx">doc</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">viewWidth</span> <span class="o">=</span> <span class="nx">docElem</span><span class="p">.</span><span class="nx">clientWidth</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="nx">doc</span><span class="p">).</span><span class="nx">scrollLeft</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">viewHeight</span> <span class="o">=</span> <span class="nx">docElem</span><span class="p">.</span><span class="nx">clientHeight</span> <span class="o">+</span> <span class="nx">$</span><span class="p">(</span><span class="nx">doc</span><span class="p">).</span><span class="nx">scrollTop</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">offset</span> <span class="o">=</span> <span class="nx">input</span><span class="p">.</span><span class="nx">offset</span><span class="p">();</span>
<span class="nx">offset</span><span class="p">.</span><span class="nx">top</span> <span class="o">+=</span> <span class="nx">inputHeight</span><span class="p">;</span>
<span class="nx">offset</span><span class="p">.</span><span class="nx">left</span> <span class="o">-=</span>
<span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">offset</span><span class="p">.</span><span class="nx">left</span><span class="p">,</span> <span class="p">(</span><span class="nx">offset</span><span class="p">.</span><span class="nx">left</span> <span class="o">+</span> <span class="nx">dpWidth</span> <span class="o">></span> <span class="nx">viewWidth</span> <span class="o">&&</span> <span class="nx">viewWidth</span> <span class="o">></span> <span class="nx">dpWidth</span><span class="p">)</span> <span class="o">?</span>
<span class="nb">Math</span><span class="p">.</span><span class="nx">abs</span><span class="p">(</span><span class="nx">offset</span><span class="p">.</span><span class="nx">left</span> <span class="o">+</span> <span class="nx">dpWidth</span> <span class="o">-</span> <span class="nx">viewWidth</span><span class="p">)</span> <span class="o">:</span> <span class="mi">0</span><span class="p">);</span>
<span class="nx">offset</span><span class="p">.</span><span class="nx">top</span> <span class="o">-=</span>
<span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">offset</span><span class="p">.</span><span class="nx">top</span><span class="p">,</span> <span class="p">((</span><span class="nx">offset</span><span class="p">.</span><span class="nx">top</span> <span class="o">+</span> <span class="nx">dpHeight</span> <span class="o">></span> <span class="nx">viewHeight</span> <span class="o">&&</span> <span class="nx">viewHeight</span> <span class="o">></span> <span class="nx">dpHeight</span><span class="p">)</span> <span class="o">?</span>
<span class="nb">Math</span><span class="p">.</span><span class="nx">abs</span><span class="p">(</span><span class="nx">dpHeight</span> <span class="o">+</span> <span class="nx">inputHeight</span> <span class="o">-</span> <span class="nx">extraY</span><span class="p">)</span> <span class="o">:</span> <span class="nx">extraY</span><span class="p">));</span>
<span class="k">return</span> <span class="nx">offset</span><span class="p">;</span>
<span class="p">}</span>
<span class="cm">/**</span>
<span class="cm"> * noop - do nothing</span>
<span class="cm"> */</span>
<span class="kd">function</span> <span class="nx">noop</span><span class="p">()</span> <span class="p">{</span>
<span class="p">}</span>
<span class="cm">/**</span>
<span class="cm"> * stopPropagation - makes the code only doing this a little easier to read in line</span>
<span class="cm"> */</span>
<span class="kd">function</span> <span class="nx">stopPropagation</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">stopPropagation</span><span class="p">();</span>
<span class="p">}</span>
<span class="cm">/**</span>
<span class="cm"> * Create a function bound to a given object</span>
<span class="cm"> * Thanks to underscore.js</span>
<span class="cm"> */</span>
<span class="kd">function</span> <span class="nx">bind</span><span class="p">(</span><span class="nx">func</span><span class="p">,</span> <span class="nx">obj</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">slice</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">slice</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">args</span> <span class="o">=</span> <span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">arguments</span><span class="p">,</span> <span class="mi">2</span><span class="p">);</span>
<span class="k">return</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">func</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">obj</span><span class="p">,</span> <span class="nx">args</span><span class="p">.</span><span class="nx">concat</span><span class="p">(</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">arguments</span><span class="p">)));</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="cm">/**</span>
<span class="cm"> * Lightweight drag helper. Handles containment within the element, so that</span>
<span class="cm"> * when dragging, the x is within [0,element.width] and y is within [0,element.height]</span>
<span class="cm"> */</span>
<span class="kd">function</span> <span class="nx">draggable</span><span class="p">(</span><span class="nx">element</span><span class="p">,</span> <span class="nx">onmove</span><span class="p">,</span> <span class="nx">onstart</span><span class="p">,</span> <span class="nx">onstop</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">onmove</span> <span class="o">=</span> <span class="nx">onmove</span> <span class="o">||</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="p">};</span>
<span class="nx">onstart</span> <span class="o">=</span> <span class="nx">onstart</span> <span class="o">||</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="p">};</span>
<span class="nx">onstop</span> <span class="o">=</span> <span class="nx">onstop</span> <span class="o">||</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span> <span class="p">};</span>
<span class="kd">var</span> <span class="nx">doc</span> <span class="o">=</span> <span class="nx">element</span><span class="p">.</span><span class="nx">ownerDocument</span> <span class="o">||</span> <span class="nb">document</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">dragging</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">offset</span> <span class="o">=</span> <span class="p">{};</span>
<span class="kd">var</span> <span class="nx">maxHeight</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">maxWidth</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">hasTouch</span> <span class="o">=</span> <span class="p">(</span><span class="s1">'ontouchstart'</span> <span class="k">in</span> <span class="nb">window</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">duringDragEvents</span> <span class="o">=</span> <span class="p">{};</span>
<span class="nx">duringDragEvents</span><span class="p">[</span><span class="s2">"selectstart"</span><span class="p">]</span> <span class="o">=</span> <span class="nx">prevent</span><span class="p">;</span>
<span class="nx">duringDragEvents</span><span class="p">[</span><span class="s2">"dragstart"</span><span class="p">]</span> <span class="o">=</span> <span class="nx">prevent</span><span class="p">;</span>
<span class="nx">duringDragEvents</span><span class="p">[(</span><span class="nx">hasTouch</span> <span class="o">?</span> <span class="s2">"touchmove"</span> <span class="o">:</span> <span class="s2">"mousemove"</span><span class="p">)]</span> <span class="o">=</span> <span class="nx">move</span><span class="p">;</span>
<span class="nx">duringDragEvents</span><span class="p">[(</span><span class="nx">hasTouch</span> <span class="o">?</span> <span class="s2">"touchend"</span> <span class="o">:</span> <span class="s2">"mouseup"</span><span class="p">)]</span> <span class="o">=</span> <span class="nx">stop</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">prevent</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">stopPropagation</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">stopPropagation</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">e</span><span class="p">.</span><span class="nx">returnValue</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">move</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">dragging</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-18"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-18">¶</a> </div> <p>Mouseup happened outside of window</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">IE</span> <span class="o">&&</span> <span class="nb">document</span><span class="p">.</span><span class="nx">documentMode</span> <span class="o"><</span> <span class="mi">9</span> <span class="o">&&</span> <span class="o">!</span><span class="nx">e</span><span class="p">.</span><span class="nx">button</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">stop</span><span class="p">();</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">touches</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">originalEvent</span><span class="p">.</span><span class="nx">touches</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">pageX</span> <span class="o">=</span> <span class="nx">touches</span> <span class="o">?</span> <span class="nx">touches</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">pageX</span> <span class="o">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">pageX</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">pageY</span> <span class="o">=</span> <span class="nx">touches</span> <span class="o">?</span> <span class="nx">touches</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">pageY</span> <span class="o">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">pageY</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">dragX</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">pageX</span> <span class="o">-</span> <span class="nx">offset</span><span class="p">.</span><span class="nx">left</span><span class="p">,</span> <span class="nx">maxWidth</span><span class="p">));</span>
<span class="kd">var</span> <span class="nx">dragY</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">pageY</span> <span class="o">-</span> <span class="nx">offset</span><span class="p">.</span><span class="nx">top</span><span class="p">,</span> <span class="nx">maxHeight</span><span class="p">));</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">hasTouch</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-19"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-19">¶</a> </div> <p>Stop scrolling in iOS</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">prevent</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">onmove</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">element</span><span class="p">,</span> <span class="p">[</span><span class="nx">dragX</span><span class="p">,</span> <span class="nx">dragY</span><span class="p">,</span> <span class="nx">e</span><span class="p">]);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">start</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">rightclick</span> <span class="o">=</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">which</span><span class="p">)</span> <span class="o">?</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">which</span> <span class="o">==</span> <span class="mi">3</span><span class="p">)</span> <span class="o">:</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">button</span> <span class="o">==</span> <span class="mi">2</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">touches</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">originalEvent</span><span class="p">.</span><span class="nx">touches</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">rightclick</span> <span class="o">&&</span> <span class="o">!</span><span class="nx">dragging</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">onstart</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">element</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">)</span> <span class="o">!==</span> <span class="kc">false</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">dragging</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">maxHeight</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">height</span><span class="p">();</span>
<span class="nx">maxWidth</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">width</span><span class="p">();</span>
<span class="nx">offset</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">offset</span><span class="p">();</span>
<span class="nx">$</span><span class="p">(</span><span class="nx">doc</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="nx">duringDragEvents</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="nx">doc</span><span class="p">.</span><span class="nx">body</span><span class="p">).</span><span class="nx">addClass</span><span class="p">(</span><span class="s2">"sp-dragging"</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">hasTouch</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">move</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">prevent</span><span class="p">(</span><span class="nx">e</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">stop</span><span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">dragging</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="nx">doc</span><span class="p">).</span><span class="nx">unbind</span><span class="p">(</span><span class="nx">duringDragEvents</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="nx">doc</span><span class="p">.</span><span class="nx">body</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">"sp-dragging"</span><span class="p">);</span>
<span class="nx">onstop</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">element</span><span class="p">,</span> <span class="nx">arguments</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">dragging</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">$</span><span class="p">(</span><span class="nx">element</span><span class="p">).</span><span class="nx">bind</span><span class="p">(</span><span class="nx">hasTouch</span> <span class="o">?</span> <span class="s2">"touchstart"</span> <span class="o">:</span> <span class="s2">"mousedown"</span><span class="p">,</span> <span class="nx">start</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">throttle</span><span class="p">(</span><span class="nx">func</span><span class="p">,</span> <span class="nx">wait</span><span class="p">,</span> <span class="nx">debounce</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">timeout</span><span class="p">;</span>
<span class="k">return</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">context</span> <span class="o">=</span> <span class="k">this</span><span class="p">,</span> <span class="nx">args</span> <span class="o">=</span> <span class="nx">arguments</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">throttler</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">timeout</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
<span class="nx">func</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">context</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
<span class="p">};</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">debounce</span><span class="p">)</span> <span class="nx">clearTimeout</span><span class="p">(</span><span class="nx">timeout</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">debounce</span> <span class="o">||</span> <span class="o">!</span><span class="nx">timeout</span><span class="p">)</span> <span class="nx">timeout</span> <span class="o">=</span> <span class="nx">setTimeout</span><span class="p">(</span><span class="nx">throttler</span><span class="p">,</span> <span class="nx">wait</span><span class="p">);</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="cm">/**</span>
<span class="cm"> * Define a jQuery plugin</span>
<span class="cm"> */</span>
<span class="kd">var</span> <span class="nx">dataID</span> <span class="o">=</span> <span class="s2">"spectrum.id"</span><span class="p">;</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">spectrum</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">opts</span><span class="p">,</span> <span class="nx">extra</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">opts</span> <span class="o">==</span> <span class="s2">"string"</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">returnValue</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">args</span> <span class="o">=</span> <span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">slice</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span> <span class="nx">arguments</span><span class="p">,</span> <span class="mi">1</span> <span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">spect</span> <span class="o">=</span> <span class="nx">spectrums</span><span class="p">[</span><span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="nx">dataID</span><span class="p">)];</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">spect</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">method</span> <span class="o">=</span> <span class="nx">spect</span><span class="p">[</span><span class="nx">opts</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">method</span><span class="p">)</span> <span class="p">{</span>
<span class="k">throw</span> <span class="k">new</span> <span class="nb">Error</span><span class="p">(</span> <span class="s2">"Spectrum: no such method: '"</span> <span class="o">+</span> <span class="nx">opts</span> <span class="o">+</span> <span class="s2">"'"</span> <span class="p">);</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">opts</span> <span class="o">==</span> <span class="s2">"get"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">returnValue</span> <span class="o">=</span> <span class="nx">spect</span><span class="p">.</span><span class="nx">get</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">opts</span> <span class="o">==</span> <span class="s2">"container"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">returnValue</span> <span class="o">=</span> <span class="nx">spect</span><span class="p">.</span><span class="nx">container</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">opts</span> <span class="o">==</span> <span class="s2">"option"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">returnValue</span> <span class="o">=</span> <span class="nx">spect</span><span class="p">.</span><span class="nx">option</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">spect</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">opts</span> <span class="o">==</span> <span class="s2">"destroy"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">spect</span><span class="p">.</span><span class="nx">destroy</span><span class="p">();</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">removeData</span><span class="p">(</span><span class="nx">dataID</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">method</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">spect</span><span class="p">,</span> <span class="nx">args</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="k">return</span> <span class="nx">returnValue</span><span class="p">;</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-20"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-20">¶</a> </div> <p>Initializing a new instance of spectrum</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">spectrum</span><span class="p">(</span><span class="s2">"destroy"</span><span class="p">).</span><span class="nx">each</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">spect</span> <span class="o">=</span> <span class="nx">spectrum</span><span class="p">(</span><span class="k">this</span><span class="p">,</span> <span class="nx">opts</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">data</span><span class="p">(</span><span class="nx">dataID</span><span class="p">,</span> <span class="nx">spect</span><span class="p">.</span><span class="nx">id</span><span class="p">);</span>
<span class="p">});</span>
<span class="p">};</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">spectrum</span><span class="p">.</span><span class="nx">load</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">spectrum</span><span class="p">.</span><span class="nx">loadOpts</span> <span class="o">=</span> <span class="p">{};</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">spectrum</span><span class="p">.</span><span class="nx">draggable</span> <span class="o">=</span> <span class="nx">draggable</span><span class="p">;</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">spectrum</span><span class="p">.</span><span class="nx">defaults</span> <span class="o">=</span> <span class="nx">defaultOpts</span><span class="p">;</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">spectrum</span> <span class="o">=</span> <span class="p">{</span> <span class="p">};</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">spectrum</span><span class="p">.</span><span class="nx">localization</span> <span class="o">=</span> <span class="p">{</span> <span class="p">};</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">spectrum</span><span class="p">.</span><span class="nx">palettes</span> <span class="o">=</span> <span class="p">{</span> <span class="p">};</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">spectrum</span><span class="p">.</span><span class="nx">processNativeColorInputs</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">colorInput</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s2">"<input type='color' value='!' />"</span><span class="p">)[</span><span class="mi">0</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">supportsColor</span> <span class="o">=</span> <span class="nx">colorInput</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="s2">"color"</span> <span class="o">&&</span> <span class="nx">colorInput</span><span class="p">.</span><span class="nx">value</span> <span class="o">!=</span> <span class="s2">"!"</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">supportsColor</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">"input[type=color]"</span><span class="p">).</span><span class="nx">spectrum</span><span class="p">({</span>
<span class="nx">preferredFormat</span><span class="o">:</span> <span class="s2">"hex6"</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-21"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-21">¶</a> </div> <p>TinyColor.js - <a href="https://github.com/bgrins/TinyColor">https://github.com/bgrins/TinyColor</a> - 2011 Brian Grinstead - v0.5</p> </td> <td class="code"> <div class="highlight"><pre> <span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nb">window</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">trimLeft</span> <span class="o">=</span> <span class="sr">/^[s,#]+/</span><span class="p">,</span>
<span class="nx">trimRight</span> <span class="o">=</span> <span class="sr">/s+$/</span><span class="p">,</span>
<span class="nx">tinyCounter</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
<span class="nx">math</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">,</span>
<span class="nx">mathRound</span> <span class="o">=</span> <span class="nx">math</span><span class="p">.</span><span class="nx">round</span><span class="p">,</span>
<span class="nx">mathMin</span> <span class="o">=</span> <span class="nx">math</span><span class="p">.</span><span class="nx">min</span><span class="p">,</span>
<span class="nx">mathMax</span> <span class="o">=</span> <span class="nx">math</span><span class="p">.</span><span class="nx">max</span><span class="p">,</span>
<span class="nx">mathRandom</span> <span class="o">=</span> <span class="nx">math</span><span class="p">.</span><span class="nx">random</span><span class="p">,</span>
<span class="nb">parseFloat</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nb">parseFloat</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="nx">opts</span><span class="p">)</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-22"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-22">¶</a> </div> <p>If input is already a tinycolor, return itself</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">color</span> <span class="o">==</span> <span class="s2">"object"</span> <span class="o">&&</span> <span class="nx">color</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="s2">"_tc_id"</span><span class="p">))</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">color</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">rgb</span> <span class="o">=</span> <span class="nx">inputToRGB</span><span class="p">(</span><span class="nx">color</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">r</span> <span class="o">=</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span> <span class="o">=</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">g</span><span class="p">,</span> <span class="nx">b</span> <span class="o">=</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">b</span><span class="p">,</span> <span class="nx">a</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">rgb</span><span class="p">.</span><span class="nx">a</span><span class="p">),</span> <span class="nx">format</span> <span class="o">=</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">format</span><span class="p">;</span>
<span class="k">return</span> <span class="p">{</span>
<span class="nx">ok</span><span class="o">:</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">ok</span><span class="p">,</span>
<span class="nx">format</span><span class="o">:</span> <span class="nx">format</span><span class="p">,</span>
<span class="nx">_tc_id</span><span class="o">:</span> <span class="nx">tinyCounter</span><span class="o">++</span><span class="p">,</span>
<span class="nx">alpha</span><span class="o">:</span> <span class="nx">a</span><span class="p">,</span>
<span class="nx">toHsv</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">hsv</span> <span class="o">=</span> <span class="nx">rgbToHsv</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">);</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">h</span><span class="o">:</span> <span class="nx">hsv</span><span class="p">.</span><span class="nx">h</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">hsv</span><span class="p">.</span><span class="nx">s</span><span class="p">,</span> <span class="nx">v</span><span class="o">:</span> <span class="nx">hsv</span><span class="p">.</span><span class="nx">v</span><span class="p">,</span> <span class="nx">a</span><span class="o">:</span> <span class="nx">a</span> <span class="p">};</span>
<span class="p">},</span>
<span class="nx">toHsvString</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">hsv</span> <span class="o">=</span> <span class="nx">rgbToHsv</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">h</span> <span class="o">=</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">hsv</span><span class="p">.</span><span class="nx">h</span> <span class="o">*</span> <span class="mi">360</span><span class="p">),</span> <span class="nx">s</span> <span class="o">=</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">hsv</span><span class="p">.</span><span class="nx">s</span> <span class="o">*</span> <span class="mi">100</span><span class="p">),</span> <span class="nx">v</span> <span class="o">=</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">hsv</span><span class="p">.</span><span class="nx">v</span> <span class="o">*</span> <span class="mi">100</span><span class="p">);</span>
<span class="k">return</span> <span class="p">(</span><span class="nx">a</span> <span class="o">==</span> <span class="mi">1</span><span class="p">)</span> <span class="o">?</span>
<span class="s2">"hsv("</span> <span class="o">+</span> <span class="nx">h</span> <span class="o">+</span> <span class="s2">", "</span> <span class="o">+</span> <span class="nx">s</span> <span class="o">+</span> <span class="s2">"%, "</span> <span class="o">+</span> <span class="nx">v</span> <span class="o">+</span> <span class="s2">"%)"</span> <span class="o">:</span>
<span class="s2">"hsva("</span> <span class="o">+</span> <span class="nx">h</span> <span class="o">+</span> <span class="s2">", "</span> <span class="o">+</span> <span class="nx">s</span> <span class="o">+</span> <span class="s2">"%, "</span> <span class="o">+</span> <span class="nx">v</span> <span class="o">+</span> <span class="s2">"%, "</span> <span class="o">+</span> <span class="nx">a</span> <span class="o">+</span> <span class="s2">")"</span><span class="p">;</span>
<span class="p">},</span>
<span class="nx">toHsl</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">rgbToHsl</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">);</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">h</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span><span class="p">,</span> <span class="nx">l</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span><span class="p">,</span> <span class="nx">a</span><span class="o">:</span> <span class="nx">a</span> <span class="p">};</span>
<span class="p">},</span>
<span class="nx">toHslString</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">rgbToHsl</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">h</span> <span class="o">=</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span> <span class="o">*</span> <span class="mi">360</span><span class="p">),</span> <span class="nx">s</span> <span class="o">=</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span> <span class="o">*</span> <span class="mi">100</span><span class="p">),</span> <span class="nx">l</span> <span class="o">=</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span> <span class="o">*</span> <span class="mi">100</span><span class="p">);</span>
<span class="k">return</span> <span class="p">(</span><span class="nx">a</span> <span class="o">==</span> <span class="mi">1</span><span class="p">)</span> <span class="o">?</span>
<span class="s2">"hsl("</span> <span class="o">+</span> <span class="nx">h</span> <span class="o">+</span> <span class="s2">", "</span> <span class="o">+</span> <span class="nx">s</span> <span class="o">+</span> <span class="s2">"%, "</span> <span class="o">+</span> <span class="nx">l</span> <span class="o">+</span> <span class="s2">"%)"</span> <span class="o">:</span>
<span class="s2">"hsla("</span> <span class="o">+</span> <span class="nx">h</span> <span class="o">+</span> <span class="s2">", "</span> <span class="o">+</span> <span class="nx">s</span> <span class="o">+</span> <span class="s2">"%, "</span> <span class="o">+</span> <span class="nx">l</span> <span class="o">+</span> <span class="s2">"%, "</span> <span class="o">+</span> <span class="nx">a</span> <span class="o">+</span> <span class="s2">")"</span><span class="p">;</span>
<span class="p">},</span>
<span class="nx">toHex</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">rgbToHex</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">);</span>
<span class="p">},</span>
<span class="nx">toHexString</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">force6Char</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="s1">'#'</span> <span class="o">+</span> <span class="nx">rgbToHex</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">,</span> <span class="nx">force6Char</span><span class="p">);</span>
<span class="p">},</span>
<span class="nx">toRgb</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">r</span><span class="o">:</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">r</span><span class="p">),</span> <span class="nx">g</span><span class="o">:</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">g</span><span class="p">),</span> <span class="nx">b</span><span class="o">:</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">b</span><span class="p">),</span> <span class="nx">a</span><span class="o">:</span> <span class="nx">a</span> <span class="p">};</span>
<span class="p">},</span>
<span class="nx">toRgbString</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span><span class="nx">a</span> <span class="o">==</span> <span class="mi">1</span><span class="p">)</span> <span class="o">?</span>
<span class="s2">"rgb("</span> <span class="o">+</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">r</span><span class="p">)</span> <span class="o">+</span> <span class="s2">", "</span> <span class="o">+</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">g</span><span class="p">)</span> <span class="o">+</span> <span class="s2">", "</span> <span class="o">+</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">b</span><span class="p">)</span> <span class="o">+</span> <span class="s2">")"</span> <span class="o">:</span>
<span class="s2">"rgba("</span> <span class="o">+</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">r</span><span class="p">)</span> <span class="o">+</span> <span class="s2">", "</span> <span class="o">+</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">g</span><span class="p">)</span> <span class="o">+</span> <span class="s2">", "</span> <span class="o">+</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">b</span><span class="p">)</span> <span class="o">+</span> <span class="s2">", "</span> <span class="o">+</span> <span class="nx">a</span> <span class="o">+</span> <span class="s2">")"</span><span class="p">;</span>
<span class="p">},</span>
<span class="nx">toName</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">hexNames</span><span class="p">[</span><span class="nx">rgbToHex</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">)]</span> <span class="o">||</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">},</span>
<span class="nx">toFilter</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">opts</span><span class="p">,</span> <span class="nx">secondColor</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">hex</span> <span class="o">=</span> <span class="nx">rgbToHex</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">secondHex</span> <span class="o">=</span> <span class="nx">hex</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">alphaHex</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">a</span><span class="p">)</span> <span class="o">*</span> <span class="mi">255</span><span class="p">).</span><span class="nx">toString</span><span class="p">(</span><span class="mi">16</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">secondAlphaHex</span> <span class="o">=</span> <span class="nx">alphaHex</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">gradientType</span> <span class="o">=</span> <span class="nx">opts</span> <span class="o">&&</span> <span class="nx">opts</span><span class="p">.</span><span class="nx">gradientType</span> <span class="o">?</span> <span class="s2">"GradientType = 1, "</span> <span class="o">:</span> <span class="s2">""</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">secondColor</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">s</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">secondColor</span><span class="p">);</span>
<span class="nx">secondHex</span> <span class="o">=</span> <span class="nx">s</span><span class="p">.</span><span class="nx">toHex</span><span class="p">();</span>
<span class="nx">secondAlphaHex</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">s</span><span class="p">.</span><span class="nx">alpha</span><span class="p">)</span> <span class="o">*</span> <span class="mi">255</span><span class="p">).</span><span class="nx">toString</span><span class="p">(</span><span class="mi">16</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="s2">"progid:DXImageTransform.Microsoft.gradient("</span><span class="o">+</span><span class="nx">gradientType</span><span class="o">+</span><span class="s2">"startColorstr=#"</span> <span class="o">+</span> <span class="nx">pad2</span><span class="p">(</span><span class="nx">alphaHex</span><span class="p">)</span> <span class="o">+</span> <span class="nx">hex</span> <span class="o">+</span> <span class="s2">",endColorstr=#"</span> <span class="o">+</span> <span class="nx">pad2</span><span class="p">(</span><span class="nx">secondAlphaHex</span><span class="p">)</span> <span class="o">+</span> <span class="nx">secondHex</span> <span class="o">+</span> <span class="s2">")"</span><span class="p">;</span>
<span class="p">},</span>
<span class="nx">toString</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">format</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">format</span> <span class="o">=</span> <span class="nx">format</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">format</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">formattedString</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">format</span> <span class="o">===</span> <span class="s2">"rgb"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">formattedString</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">toRgbString</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">format</span> <span class="o">===</span> <span class="s2">"hex"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">formattedString</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">toHexString</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">format</span> <span class="o">===</span> <span class="s2">"hex6"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">formattedString</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">toHexString</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">format</span> <span class="o">===</span> <span class="s2">"name"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">formattedString</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">toName</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">format</span> <span class="o">===</span> <span class="s2">"hsl"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">formattedString</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">toHslString</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">format</span> <span class="o">===</span> <span class="s2">"hsv"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">formattedString</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">toHsvString</span><span class="p">();</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">formattedString</span> <span class="o">||</span> <span class="k">this</span><span class="p">.</span><span class="nx">toHexString</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-23"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-23">¶</a> </div> <p>If input is an object, force 1 into "1.0" to handle ratios properly
String input requires "1.0" as input, so 1 will be treated as 1</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">tinycolor</span><span class="p">.</span><span class="nx">fromRatio</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">color</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">color</span> <span class="o">==</span> <span class="s2">"object"</span><span class="p">)</span> <span class="p">{</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="k">in</span> <span class="nx">color</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">color</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">===</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">color</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="s2">"1.0"</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">);</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-24"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-24">¶</a> </div> <p>Given a string or object, convert that input to RGB
Possible string inputs:</p>
<pre><code>"red"
"#f00" or "f00"
"#ff0000" or "ff0000"
"rgb 255 0 0" or "rgb (255, 0, 0)"
"rgb 1.0 0 0" or "rgb (1, 0, 0)"
"rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
"rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
"hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
"hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
"hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
</code></pre> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">inputToRGB</span><span class="p">(</span><span class="nx">color</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">rgb</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">r</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">g</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="mi">0</span> <span class="p">};</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">ok</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">format</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">color</span> <span class="o">==</span> <span class="s2">"string"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">color</span> <span class="o">=</span> <span class="nx">stringInputToObject</span><span class="p">(</span><span class="nx">color</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">color</span> <span class="o">==</span> <span class="s2">"object"</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="s2">"r"</span><span class="p">)</span> <span class="o">&&</span> <span class="nx">color</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="s2">"g"</span><span class="p">)</span> <span class="o">&&</span> <span class="nx">color</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="s2">"b"</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">rgb</span> <span class="o">=</span> <span class="nx">rgbToRgb</span><span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">r</span><span class="p">,</span> <span class="nx">color</span><span class="p">.</span><span class="nx">g</span><span class="p">,</span> <span class="nx">color</span><span class="p">.</span><span class="nx">b</span><span class="p">);</span>
<span class="nx">ok</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">format</span> <span class="o">=</span> <span class="s2">"rgb"</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="s2">"h"</span><span class="p">)</span> <span class="o">&&</span> <span class="nx">color</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="s2">"s"</span><span class="p">)</span> <span class="o">&&</span> <span class="nx">color</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="s2">"v"</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">rgb</span> <span class="o">=</span> <span class="nx">hsvToRgb</span><span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">h</span><span class="p">,</span> <span class="nx">color</span><span class="p">.</span><span class="nx">s</span><span class="p">,</span> <span class="nx">color</span><span class="p">.</span><span class="nx">v</span><span class="p">);</span>
<span class="nx">ok</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">format</span> <span class="o">=</span> <span class="s2">"hsv"</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="s2">"h"</span><span class="p">)</span> <span class="o">&&</span> <span class="nx">color</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="s2">"s"</span><span class="p">)</span> <span class="o">&&</span> <span class="nx">color</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="s2">"l"</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">rgb</span> <span class="o">=</span> <span class="nx">hslToRgb</span><span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">h</span><span class="p">,</span> <span class="nx">color</span><span class="p">.</span><span class="nx">s</span><span class="p">,</span> <span class="nx">color</span><span class="p">.</span><span class="nx">l</span><span class="p">);</span>
<span class="nx">ok</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">format</span> <span class="o">=</span> <span class="s2">"hsl"</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">color</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="s2">"a"</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">a</span> <span class="o">=</span> <span class="nx">color</span><span class="p">.</span><span class="nx">a</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">rgb</span><span class="p">.</span><span class="nx">r</span> <span class="o">=</span> <span class="nx">mathMin</span><span class="p">(</span><span class="mi">255</span><span class="p">,</span> <span class="nx">mathMax</span><span class="p">(</span><span class="nx">rgb</span><span class="p">.</span><span class="nx">r</span><span class="p">,</span> <span class="mi">0</span><span class="p">));</span>
<span class="nx">rgb</span><span class="p">.</span><span class="nx">g</span> <span class="o">=</span> <span class="nx">mathMin</span><span class="p">(</span><span class="mi">255</span><span class="p">,</span> <span class="nx">mathMax</span><span class="p">(</span><span class="nx">rgb</span><span class="p">.</span><span class="nx">g</span><span class="p">,</span> <span class="mi">0</span><span class="p">));</span>
<span class="nx">rgb</span><span class="p">.</span><span class="nx">b</span> <span class="o">=</span> <span class="nx">mathMin</span><span class="p">(</span><span class="mi">255</span><span class="p">,</span> <span class="nx">mathMax</span><span class="p">(</span><span class="nx">rgb</span><span class="p">.</span><span class="nx">b</span><span class="p">,</span> <span class="mi">0</span><span class="p">));</span></pre></div> </td> </tr> <tr id="section-25"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-25">¶</a> </div> <p>Don't let the range of [0,255] come back in [0,1].
Potentially lose a little bit of precision here, but will fix issues where
.5 gets interpreted as half of the total, instead of half of 1.
If it was supposed to be 128, this was already taken care of in the conversion function</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">rgb</span><span class="p">.</span><span class="nx">r</span> <span class="o"><</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">r</span> <span class="o">=</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">rgb</span><span class="p">.</span><span class="nx">r</span><span class="p">);</span> <span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">rgb</span><span class="p">.</span><span class="nx">g</span> <span class="o"><</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">g</span> <span class="o">=</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">rgb</span><span class="p">.</span><span class="nx">g</span><span class="p">);</span> <span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">rgb</span><span class="p">.</span><span class="nx">b</span> <span class="o"><</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">b</span> <span class="o">=</span> <span class="nx">mathRound</span><span class="p">(</span><span class="nx">rgb</span><span class="p">.</span><span class="nx">b</span><span class="p">);</span> <span class="p">}</span>
<span class="k">return</span> <span class="p">{</span>
<span class="nx">ok</span><span class="o">:</span> <span class="nx">ok</span><span class="p">,</span>
<span class="nx">format</span><span class="o">:</span> <span class="p">(</span><span class="nx">color</span> <span class="o">&&</span> <span class="nx">color</span><span class="p">.</span><span class="nx">format</span><span class="p">)</span> <span class="o">||</span> <span class="nx">format</span><span class="p">,</span>
<span class="nx">r</span><span class="o">:</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">r</span><span class="p">,</span>
<span class="nx">g</span><span class="o">:</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">g</span><span class="p">,</span>
<span class="nx">b</span><span class="o">:</span> <span class="nx">rgb</span><span class="p">.</span><span class="nx">b</span><span class="p">,</span>
<span class="nx">a</span><span class="o">:</span> <span class="nx">a</span>
<span class="p">};</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-26"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-26">¶</a> </div> <h2>Conversion Functions</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-27"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-27">¶</a> </div> <p><code>rgbToHsl</code>, <code>rgbToHsv</code>, <code>hslToRgb</code>, <code>hsvToRgb</code> modified from:
<a href="http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript">http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript</a></p> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-28"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-28">¶</a> </div> <p><code>rgbToRgb</code>
Handle bounds / percentage checking to conform to CSS color spec
<a href="http://www.w3.org/TR/css3-color/">http://www.w3.org/TR/css3-color/</a>
<em>Assumes:</em> r, g, b in [0, 255] or [0, 1]
<em>Returns:</em> { r, g, b } in [0, 255]</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">rgbToRgb</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span>
<span class="nx">r</span><span class="o">:</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="mi">255</span><span class="p">)</span> <span class="o">*</span> <span class="mi">255</span><span class="p">,</span>
<span class="nx">g</span><span class="o">:</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">g</span><span class="p">,</span> <span class="mi">255</span><span class="p">)</span> <span class="o">*</span> <span class="mi">255</span><span class="p">,</span>
<span class="nx">b</span><span class="o">:</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">b</span><span class="p">,</span> <span class="mi">255</span><span class="p">)</span> <span class="o">*</span> <span class="mi">255</span>
<span class="p">};</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-29"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-29">¶</a> </div> <p><code>rgbToHsl</code>
Converts an RGB color value to HSL.
<em>Assumes:</em> r, g, and b are contained in [0, 255] or [0, 1]
<em>Returns:</em> { h, s, l } in [0,1]</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">rgbToHsl</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">r</span> <span class="o">=</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="mi">255</span><span class="p">);</span>
<span class="nx">g</span> <span class="o">=</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">g</span><span class="p">,</span> <span class="mi">255</span><span class="p">);</span>
<span class="nx">b</span> <span class="o">=</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">b</span><span class="p">,</span> <span class="mi">255</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">max</span> <span class="o">=</span> <span class="nx">mathMax</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">),</span> <span class="nx">min</span> <span class="o">=</span> <span class="nx">mathMin</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">h</span><span class="p">,</span> <span class="nx">s</span><span class="p">,</span> <span class="nx">l</span> <span class="o">=</span> <span class="p">(</span><span class="nx">max</span> <span class="o">+</span> <span class="nx">min</span><span class="p">)</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">max</span> <span class="o">==</span> <span class="nx">min</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">h</span> <span class="o">=</span> <span class="nx">s</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="c1">// achromatic</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">d</span> <span class="o">=</span> <span class="nx">max</span> <span class="o">-</span> <span class="nx">min</span><span class="p">;</span>
<span class="nx">s</span> <span class="o">=</span> <span class="nx">l</span> <span class="o">></span> <span class="mf">0.5</span> <span class="o">?</span> <span class="nx">d</span> <span class="o">/</span> <span class="p">(</span><span class="mi">2</span> <span class="o">-</span> <span class="nx">max</span> <span class="o">-</span> <span class="nx">min</span><span class="p">)</span> <span class="o">:</span> <span class="nx">d</span> <span class="o">/</span> <span class="p">(</span><span class="nx">max</span> <span class="o">+</span> <span class="nx">min</span><span class="p">);</span>
<span class="k">switch</span> <span class="p">(</span><span class="nx">max</span><span class="p">)</span> <span class="p">{</span>
<span class="k">case</span> <span class="nx">r</span><span class="o">:</span> <span class="nx">h</span> <span class="o">=</span> <span class="p">(</span><span class="nx">g</span> <span class="o">-</span> <span class="nx">b</span><span class="p">)</span> <span class="o">/</span> <span class="nx">d</span> <span class="o">+</span> <span class="p">(</span><span class="nx">g</span> <span class="o"><</span> <span class="nx">b</span> <span class="o">?</span> <span class="mi">6</span> <span class="o">:</span> <span class="mi">0</span><span class="p">);</span> <span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="nx">g</span><span class="o">:</span> <span class="nx">h</span> <span class="o">=</span> <span class="p">(</span><span class="nx">b</span> <span class="o">-</span> <span class="nx">r</span><span class="p">)</span> <span class="o">/</span> <span class="nx">d</span> <span class="o">+</span> <span class="mi">2</span><span class="p">;</span> <span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="nx">b</span><span class="o">:</span> <span class="nx">h</span> <span class="o">=</span> <span class="p">(</span><span class="nx">r</span> <span class="o">-</span> <span class="nx">g</span><span class="p">)</span> <span class="o">/</span> <span class="nx">d</span> <span class="o">+</span> <span class="mi">4</span><span class="p">;</span> <span class="k">break</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">h</span> <span class="o">/=</span> <span class="mi">6</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">h</span><span class="o">:</span> <span class="nx">h</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">s</span><span class="p">,</span> <span class="nx">l</span><span class="o">:</span> <span class="nx">l</span> <span class="p">};</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-30"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-30">¶</a> </div> <p><code>hslToRgb</code>
Converts an HSL color value to RGB.
<em>Assumes:</em> h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
<em>Returns:</em> { r, g, b } in the set [0, 255]</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">hslToRgb</span><span class="p">(</span><span class="nx">h</span><span class="p">,</span> <span class="nx">s</span><span class="p">,</span> <span class="nx">l</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">;</span>
<span class="nx">h</span> <span class="o">=</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">h</span><span class="p">,</span> <span class="mi">360</span><span class="p">);</span>
<span class="nx">s</span> <span class="o">=</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">s</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>
<span class="nx">l</span> <span class="o">=</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">l</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>
<span class="kd">function</span> <span class="nx">hue2rgb</span><span class="p">(</span><span class="nx">p</span><span class="p">,</span> <span class="nx">q</span><span class="p">,</span> <span class="nx">t</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">t</span> <span class="o"><</span> <span class="mi">0</span><span class="p">)</span> <span class="nx">t</span> <span class="o">+=</span> <span class="mi">1</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">t</span> <span class="o">></span> <span class="mi">1</span><span class="p">)</span> <span class="nx">t</span> <span class="o">-=</span> <span class="mi">1</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">t</span> <span class="o"><</span> <span class="mi">1</span> <span class="o">/</span> <span class="mi">6</span><span class="p">)</span> <span class="k">return</span> <span class="nx">p</span> <span class="o">+</span> <span class="p">(</span><span class="nx">q</span> <span class="o">-</span> <span class="nx">p</span><span class="p">)</span> <span class="o">*</span> <span class="mi">6</span> <span class="o">*</span> <span class="nx">t</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">t</span> <span class="o"><</span> <span class="mi">1</span> <span class="o">/</span> <span class="mi">2</span><span class="p">)</span> <span class="k">return</span> <span class="nx">q</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">t</span> <span class="o"><</span> <span class="mi">2</span> <span class="o">/</span> <span class="mi">3</span><span class="p">)</span> <span class="k">return</span> <span class="nx">p</span> <span class="o">+</span> <span class="p">(</span><span class="nx">q</span> <span class="o">-</span> <span class="nx">p</span><span class="p">)</span> <span class="o">*</span> <span class="p">(</span><span class="mi">2</span> <span class="o">/</span> <span class="mi">3</span> <span class="o">-</span> <span class="nx">t</span><span class="p">)</span> <span class="o">*</span> <span class="mi">6</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">p</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">s</span> <span class="o">===</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">r</span> <span class="o">=</span> <span class="nx">g</span> <span class="o">=</span> <span class="nx">b</span> <span class="o">=</span> <span class="nx">l</span><span class="p">;</span> <span class="c1">// achromatic</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">q</span> <span class="o">=</span> <span class="nx">l</span> <span class="o"><</span> <span class="mf">0.5</span> <span class="o">?</span> <span class="nx">l</span> <span class="o">*</span> <span class="p">(</span><span class="mi">1</span> <span class="o">+</span> <span class="nx">s</span><span class="p">)</span> <span class="o">:</span> <span class="nx">l</span> <span class="o">+</span> <span class="nx">s</span> <span class="o">-</span> <span class="nx">l</span> <span class="o">*</span> <span class="nx">s</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">p</span> <span class="o">=</span> <span class="mi">2</span> <span class="o">*</span> <span class="nx">l</span> <span class="o">-</span> <span class="nx">q</span><span class="p">;</span>
<span class="nx">r</span> <span class="o">=</span> <span class="nx">hue2rgb</span><span class="p">(</span><span class="nx">p</span><span class="p">,</span> <span class="nx">q</span><span class="p">,</span> <span class="nx">h</span> <span class="o">+</span> <span class="mi">1</span> <span class="o">/</span> <span class="mi">3</span><span class="p">);</span>
<span class="nx">g</span> <span class="o">=</span> <span class="nx">hue2rgb</span><span class="p">(</span><span class="nx">p</span><span class="p">,</span> <span class="nx">q</span><span class="p">,</span> <span class="nx">h</span><span class="p">);</span>
<span class="nx">b</span> <span class="o">=</span> <span class="nx">hue2rgb</span><span class="p">(</span><span class="nx">p</span><span class="p">,</span> <span class="nx">q</span><span class="p">,</span> <span class="nx">h</span> <span class="o">-</span> <span class="mi">1</span> <span class="o">/</span> <span class="mi">3</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">r</span><span class="o">:</span> <span class="nx">r</span> <span class="o">*</span> <span class="mi">255</span><span class="p">,</span> <span class="nx">g</span><span class="o">:</span> <span class="nx">g</span> <span class="o">*</span> <span class="mi">255</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="nx">b</span> <span class="o">*</span> <span class="mi">255</span> <span class="p">};</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-31"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-31">¶</a> </div> <p><code>rgbToHsv</code>
Converts an RGB color value to HSV
<em>Assumes:</em> r, g, and b are contained in the set [0, 255] or [0, 1]
<em>Returns:</em> { h, s, v } in [0,1]</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">rgbToHsv</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">r</span> <span class="o">=</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="mi">255</span><span class="p">);</span>
<span class="nx">g</span> <span class="o">=</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">g</span><span class="p">,</span> <span class="mi">255</span><span class="p">);</span>
<span class="nx">b</span> <span class="o">=</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">b</span><span class="p">,</span> <span class="mi">255</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">max</span> <span class="o">=</span> <span class="nx">mathMax</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">),</span> <span class="nx">min</span> <span class="o">=</span> <span class="nx">mathMin</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">h</span><span class="p">,</span> <span class="nx">s</span><span class="p">,</span> <span class="nx">v</span> <span class="o">=</span> <span class="nx">max</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">d</span> <span class="o">=</span> <span class="nx">max</span> <span class="o">-</span> <span class="nx">min</span><span class="p">;</span>
<span class="nx">s</span> <span class="o">=</span> <span class="nx">max</span> <span class="o">===</span> <span class="mi">0</span> <span class="o">?</span> <span class="mi">0</span> <span class="o">:</span> <span class="nx">d</span> <span class="o">/</span> <span class="nx">max</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">max</span> <span class="o">==</span> <span class="nx">min</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">h</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="c1">// achromatic</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="k">switch</span> <span class="p">(</span><span class="nx">max</span><span class="p">)</span> <span class="p">{</span>
<span class="k">case</span> <span class="nx">r</span><span class="o">:</span> <span class="nx">h</span> <span class="o">=</span> <span class="p">(</span><span class="nx">g</span> <span class="o">-</span> <span class="nx">b</span><span class="p">)</span> <span class="o">/</span> <span class="nx">d</span> <span class="o">+</span> <span class="p">(</span><span class="nx">g</span> <span class="o"><</span> <span class="nx">b</span> <span class="o">?</span> <span class="mi">6</span> <span class="o">:</span> <span class="mi">0</span><span class="p">);</span> <span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="nx">g</span><span class="o">:</span> <span class="nx">h</span> <span class="o">=</span> <span class="p">(</span><span class="nx">b</span> <span class="o">-</span> <span class="nx">r</span><span class="p">)</span> <span class="o">/</span> <span class="nx">d</span> <span class="o">+</span> <span class="mi">2</span><span class="p">;</span> <span class="k">break</span><span class="p">;</span>
<span class="k">case</span> <span class="nx">b</span><span class="o">:</span> <span class="nx">h</span> <span class="o">=</span> <span class="p">(</span><span class="nx">r</span> <span class="o">-</span> <span class="nx">g</span><span class="p">)</span> <span class="o">/</span> <span class="nx">d</span> <span class="o">+</span> <span class="mi">4</span><span class="p">;</span> <span class="k">break</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">h</span> <span class="o">/=</span> <span class="mi">6</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">h</span><span class="o">:</span> <span class="nx">h</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">s</span><span class="p">,</span> <span class="nx">v</span><span class="o">:</span> <span class="nx">v</span> <span class="p">};</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-32"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-32">¶</a> </div> <p><code>hsvToRgb</code>
Converts an HSV color value to RGB.
<em>Assumes:</em> h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
<em>Returns:</em> { r, g, b } in the set [0, 255]</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">hsvToRgb</span><span class="p">(</span><span class="nx">h</span><span class="p">,</span> <span class="nx">s</span><span class="p">,</span> <span class="nx">v</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">h</span> <span class="o">=</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">h</span><span class="p">,</span> <span class="mi">360</span><span class="p">)</span> <span class="o">*</span> <span class="mi">6</span><span class="p">;</span>
<span class="nx">s</span> <span class="o">=</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">s</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>
<span class="nx">v</span> <span class="o">=</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">v</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="nx">math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nx">h</span><span class="p">),</span>
<span class="nx">f</span> <span class="o">=</span> <span class="nx">h</span> <span class="o">-</span> <span class="nx">i</span><span class="p">,</span>
<span class="nx">p</span> <span class="o">=</span> <span class="nx">v</span> <span class="o">*</span> <span class="p">(</span><span class="mi">1</span> <span class="o">-</span> <span class="nx">s</span><span class="p">),</span>
<span class="nx">q</span> <span class="o">=</span> <span class="nx">v</span> <span class="o">*</span> <span class="p">(</span><span class="mi">1</span> <span class="o">-</span> <span class="nx">f</span> <span class="o">*</span> <span class="nx">s</span><span class="p">),</span>
<span class="nx">t</span> <span class="o">=</span> <span class="nx">v</span> <span class="o">*</span> <span class="p">(</span><span class="mi">1</span> <span class="o">-</span> <span class="p">(</span><span class="mi">1</span> <span class="o">-</span> <span class="nx">f</span><span class="p">)</span> <span class="o">*</span> <span class="nx">s</span><span class="p">),</span>
<span class="nx">mod</span> <span class="o">=</span> <span class="nx">i</span> <span class="o">%</span> <span class="mi">6</span><span class="p">,</span>
<span class="nx">r</span> <span class="o">=</span> <span class="p">[</span><span class="nx">v</span><span class="p">,</span> <span class="nx">q</span><span class="p">,</span> <span class="nx">p</span><span class="p">,</span> <span class="nx">p</span><span class="p">,</span> <span class="nx">t</span><span class="p">,</span> <span class="nx">v</span><span class="p">][</span><span class="nx">mod</span><span class="p">],</span>
<span class="nx">g</span> <span class="o">=</span> <span class="p">[</span><span class="nx">t</span><span class="p">,</span> <span class="nx">v</span><span class="p">,</span> <span class="nx">v</span><span class="p">,</span> <span class="nx">q</span><span class="p">,</span> <span class="nx">p</span><span class="p">,</span> <span class="nx">p</span><span class="p">][</span><span class="nx">mod</span><span class="p">],</span>
<span class="nx">b</span> <span class="o">=</span> <span class="p">[</span><span class="nx">p</span><span class="p">,</span> <span class="nx">p</span><span class="p">,</span> <span class="nx">t</span><span class="p">,</span> <span class="nx">v</span><span class="p">,</span> <span class="nx">v</span><span class="p">,</span> <span class="nx">q</span><span class="p">][</span><span class="nx">mod</span><span class="p">];</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">r</span><span class="o">:</span> <span class="nx">r</span> <span class="o">*</span> <span class="mi">255</span><span class="p">,</span> <span class="nx">g</span><span class="o">:</span> <span class="nx">g</span> <span class="o">*</span> <span class="mi">255</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="nx">b</span> <span class="o">*</span> <span class="mi">255</span> <span class="p">};</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-33"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-33">¶</a> </div> <p><code>rgbToHex</code>
Converts an RGB color to hex
Assumes r, g, and b are contained in the set [0, 255]
Returns a 3 or 6 character hex</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">rgbToHex</span><span class="p">(</span><span class="nx">r</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">b</span><span class="p">,</span> <span class="nx">force6Char</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">hex</span> <span class="o">=</span> <span class="p">[</span>
<span class="nx">pad2</span><span class="p">(</span><span class="nx">mathRound</span><span class="p">(</span><span class="nx">r</span><span class="p">).</span><span class="nx">toString</span><span class="p">(</span><span class="mi">16</span><span class="p">)),</span>
<span class="nx">pad2</span><span class="p">(</span><span class="nx">mathRound</span><span class="p">(</span><span class="nx">g</span><span class="p">).</span><span class="nx">toString</span><span class="p">(</span><span class="mi">16</span><span class="p">)),</span>
<span class="nx">pad2</span><span class="p">(</span><span class="nx">mathRound</span><span class="p">(</span><span class="nx">b</span><span class="p">).</span><span class="nx">toString</span><span class="p">(</span><span class="mi">16</span><span class="p">))</span>
<span class="p">];</span></pre></div> </td> </tr> <tr id="section-34"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-34">¶</a> </div> <p>Return a 3 character hex if possible</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">force6Char</span> <span class="o">&&</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="o">==</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="o">&&</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="o">==</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="o">&&</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="o">==</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">1</span><span class="p">))</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="o">+</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="o">+</span> <span class="nx">hex</span><span class="p">[</span><span class="mi">2</span><span class="p">].</span><span class="nx">charAt</span><span class="p">(</span><span class="mi">0</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">hex</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s2">""</span><span class="p">);</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-35"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-35">¶</a> </div> <p><code>equals</code>
Can be called with any tinycolor input</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">tinycolor</span><span class="p">.</span><span class="nx">equals</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">color1</span><span class="p">,</span> <span class="nx">color2</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">color1</span> <span class="o">||</span> <span class="o">!</span><span class="nx">color2</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="kc">false</span><span class="p">;</span> <span class="p">}</span>
<span class="k">return</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color1</span><span class="p">).</span><span class="nx">toRgbString</span><span class="p">()</span> <span class="o">==</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color2</span><span class="p">).</span><span class="nx">toRgbString</span><span class="p">();</span>
<span class="p">};</span>
<span class="nx">tinycolor</span><span class="p">.</span><span class="nx">random</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">tinycolor</span><span class="p">.</span><span class="nx">fromRatio</span><span class="p">({</span>
<span class="nx">r</span><span class="o">:</span> <span class="nx">mathRandom</span><span class="p">(),</span>
<span class="nx">g</span><span class="o">:</span> <span class="nx">mathRandom</span><span class="p">(),</span>
<span class="nx">b</span><span class="o">:</span> <span class="nx">mathRandom</span><span class="p">()</span>
<span class="p">});</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-36"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-36">¶</a> </div> <h2>Modification Functions</h2>
<p>Thanks to less.js for some of the basics here
<a href="https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js">https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js</a></p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">tinycolor</span><span class="p">.</span><span class="nx">desaturate</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="nx">amount</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">).</span><span class="nx">toHsl</span><span class="p">();</span>
<span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span> <span class="o">-=</span> <span class="p">((</span><span class="nx">amount</span> <span class="o">||</span> <span class="mi">10</span><span class="p">)</span> <span class="o">/</span> <span class="mi">100</span><span class="p">);</span>
<span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span> <span class="o">=</span> <span class="nx">clamp01</span><span class="p">(</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">hsl</span><span class="p">);</span>
<span class="p">};</span>
<span class="nx">tinycolor</span><span class="p">.</span><span class="nx">saturate</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="nx">amount</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">).</span><span class="nx">toHsl</span><span class="p">();</span>
<span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span> <span class="o">+=</span> <span class="p">((</span><span class="nx">amount</span> <span class="o">||</span> <span class="mi">10</span><span class="p">)</span> <span class="o">/</span> <span class="mi">100</span><span class="p">);</span>
<span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span> <span class="o">=</span> <span class="nx">clamp01</span><span class="p">(</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">hsl</span><span class="p">);</span>
<span class="p">};</span>
<span class="nx">tinycolor</span><span class="p">.</span><span class="nx">greyscale</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">color</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">tinycolor</span><span class="p">.</span><span class="nx">desaturate</span><span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span>
<span class="p">};</span>
<span class="nx">tinycolor</span><span class="p">.</span><span class="nx">lighten</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="nx">amount</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">).</span><span class="nx">toHsl</span><span class="p">();</span>
<span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span> <span class="o">+=</span> <span class="p">((</span><span class="nx">amount</span> <span class="o">||</span> <span class="mi">10</span><span class="p">)</span> <span class="o">/</span> <span class="mi">100</span><span class="p">);</span>
<span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span> <span class="o">=</span> <span class="nx">clamp01</span><span class="p">(</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">hsl</span><span class="p">);</span>
<span class="p">};</span>
<span class="nx">tinycolor</span><span class="p">.</span><span class="nx">darken</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="nx">amount</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">).</span><span class="nx">toHsl</span><span class="p">();</span>
<span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span> <span class="o">-=</span> <span class="p">((</span><span class="nx">amount</span> <span class="o">||</span> <span class="mi">10</span><span class="p">)</span> <span class="o">/</span> <span class="mi">100</span><span class="p">);</span>
<span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span> <span class="o">=</span> <span class="nx">clamp01</span><span class="p">(</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span><span class="p">);</span>
<span class="k">return</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">hsl</span><span class="p">);</span>
<span class="p">};</span>
<span class="nx">tinycolor</span><span class="p">.</span><span class="nx">complement</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">color</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">).</span><span class="nx">toHsl</span><span class="p">();</span>
<span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span> <span class="o">=</span> <span class="p">(</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span> <span class="o">+</span> <span class="mf">0.5</span><span class="p">)</span> <span class="o">%</span> <span class="mi">1</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">hsl</span><span class="p">);</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-37"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-37">¶</a> </div> <h2>Combination Functions</h2>
<p>Thanks to jQuery xColor for some of the ideas behind these
<a href="https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js">https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js</a></p> </td> <td class="code"> <div class="highlight"><pre> <span class="nx">tinycolor</span><span class="p">.</span><span class="nx">triad</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">color</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">).</span><span class="nx">toHsl</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">h</span> <span class="o">=</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span> <span class="o">*</span> <span class="mi">360</span><span class="p">;</span>
<span class="k">return</span> <span class="p">[</span>
<span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">),</span>
<span class="nx">tinycolor</span><span class="p">({</span> <span class="nx">h</span><span class="o">:</span> <span class="p">(</span><span class="nx">h</span> <span class="o">+</span> <span class="mi">120</span><span class="p">)</span> <span class="o">%</span> <span class="mi">360</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span><span class="p">,</span> <span class="nx">l</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span> <span class="p">}),</span>
<span class="nx">tinycolor</span><span class="p">({</span> <span class="nx">h</span><span class="o">:</span> <span class="p">(</span><span class="nx">h</span> <span class="o">+</span> <span class="mi">240</span><span class="p">)</span> <span class="o">%</span> <span class="mi">360</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span><span class="p">,</span> <span class="nx">l</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span> <span class="p">})</span>
<span class="p">];</span>
<span class="p">};</span>
<span class="nx">tinycolor</span><span class="p">.</span><span class="nx">tetrad</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">color</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">).</span><span class="nx">toHsl</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">h</span> <span class="o">=</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span> <span class="o">*</span> <span class="mi">360</span><span class="p">;</span>
<span class="k">return</span> <span class="p">[</span>
<span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">),</span>
<span class="nx">tinycolor</span><span class="p">({</span> <span class="nx">h</span><span class="o">:</span> <span class="p">(</span><span class="nx">h</span> <span class="o">+</span> <span class="mi">90</span><span class="p">)</span> <span class="o">%</span> <span class="mi">360</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span><span class="p">,</span> <span class="nx">l</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span> <span class="p">}),</span>
<span class="nx">tinycolor</span><span class="p">({</span> <span class="nx">h</span><span class="o">:</span> <span class="p">(</span><span class="nx">h</span> <span class="o">+</span> <span class="mi">180</span><span class="p">)</span> <span class="o">%</span> <span class="mi">360</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span><span class="p">,</span> <span class="nx">l</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span> <span class="p">}),</span>
<span class="nx">tinycolor</span><span class="p">({</span> <span class="nx">h</span><span class="o">:</span> <span class="p">(</span><span class="nx">h</span> <span class="o">+</span> <span class="mi">270</span><span class="p">)</span> <span class="o">%</span> <span class="mi">360</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span><span class="p">,</span> <span class="nx">l</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span> <span class="p">})</span>
<span class="p">];</span>
<span class="p">};</span>
<span class="nx">tinycolor</span><span class="p">.</span><span class="nx">splitcomplement</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">color</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">).</span><span class="nx">toHsl</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">h</span> <span class="o">=</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span> <span class="o">*</span> <span class="mi">360</span><span class="p">;</span>
<span class="k">return</span> <span class="p">[</span>
<span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">),</span>
<span class="nx">tinycolor</span><span class="p">({</span> <span class="nx">h</span><span class="o">:</span> <span class="p">(</span><span class="nx">h</span> <span class="o">+</span> <span class="mi">72</span><span class="p">)</span> <span class="o">%</span> <span class="mi">360</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span><span class="p">,</span> <span class="nx">l</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span> <span class="p">}),</span>
<span class="nx">tinycolor</span><span class="p">({</span> <span class="nx">h</span><span class="o">:</span> <span class="p">(</span><span class="nx">h</span> <span class="o">+</span> <span class="mi">216</span><span class="p">)</span> <span class="o">%</span> <span class="mi">360</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">s</span><span class="p">,</span> <span class="nx">l</span><span class="o">:</span> <span class="nx">hsl</span><span class="p">.</span><span class="nx">l</span> <span class="p">})</span>
<span class="p">];</span>
<span class="p">};</span>
<span class="nx">tinycolor</span><span class="p">.</span><span class="nx">analogous</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="nx">results</span><span class="p">,</span> <span class="nx">slices</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">results</span> <span class="o">=</span> <span class="nx">results</span> <span class="o">||</span> <span class="mi">6</span><span class="p">;</span>
<span class="nx">slices</span> <span class="o">=</span> <span class="nx">slices</span> <span class="o">||</span> <span class="mi">30</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">hsl</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">).</span><span class="nx">toHsl</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">part</span> <span class="o">=</span> <span class="mi">360</span> <span class="o">/</span> <span class="nx">slices</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">ret</span> <span class="o">=</span> <span class="p">[</span><span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">)];</span>
<span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span> <span class="o">*=</span> <span class="mi">360</span><span class="p">;</span>
<span class="k">for</span> <span class="p">(</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span> <span class="o">=</span> <span class="p">((</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span> <span class="o">-</span> <span class="p">(</span><span class="nx">part</span> <span class="o">*</span> <span class="nx">results</span> <span class="o">>></span> <span class="mi">1</span><span class="p">))</span> <span class="o">+</span> <span class="mi">720</span><span class="p">)</span> <span class="o">%</span> <span class="mi">360</span><span class="p">;</span> <span class="o">--</span><span class="nx">results</span><span class="p">;</span> <span class="p">)</span> <span class="p">{</span>
<span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span> <span class="o">=</span> <span class="p">(</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">h</span> <span class="o">+</span> <span class="nx">part</span><span class="p">)</span> <span class="o">%</span> <span class="mi">360</span><span class="p">;</span>
<span class="nx">ret</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">tinycolor</span><span class="p">(</span><span class="nx">hsl</span><span class="p">));</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">ret</span><span class="p">;</span>
<span class="p">};</span>
<span class="nx">tinycolor</span><span class="p">.</span><span class="nx">monochromatic</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">color</span><span class="p">,</span> <span class="nx">results</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">results</span> <span class="o">=</span> <span class="nx">results</span> <span class="o">||</span> <span class="mi">6</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">hsv</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color</span><span class="p">).</span><span class="nx">toHsv</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">h</span> <span class="o">=</span> <span class="nx">hsv</span><span class="p">.</span><span class="nx">h</span><span class="p">,</span> <span class="nx">s</span> <span class="o">=</span> <span class="nx">hsv</span><span class="p">.</span><span class="nx">s</span><span class="p">,</span> <span class="nx">v</span> <span class="o">=</span> <span class="nx">hsv</span><span class="p">.</span><span class="nx">v</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">ret</span> <span class="o">=</span> <span class="p">[];</span>
<span class="kd">var</span> <span class="nx">modification</span> <span class="o">=</span> <span class="mi">1</span> <span class="o">/</span> <span class="nx">results</span><span class="p">;</span>
<span class="k">while</span> <span class="p">(</span><span class="nx">results</span><span class="o">--</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">ret</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">tinycolor</span><span class="p">({</span> <span class="nx">h</span><span class="o">:</span> <span class="nx">h</span><span class="p">,</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">s</span><span class="p">,</span> <span class="nx">v</span><span class="o">:</span> <span class="nx">v</span> <span class="p">}));</span>
<span class="nx">v</span> <span class="o">=</span> <span class="p">(</span><span class="nx">v</span> <span class="o">+</span> <span class="nx">modification</span><span class="p">)</span> <span class="o">%</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">ret</span><span class="p">;</span>
<span class="p">};</span>
<span class="nx">tinycolor</span><span class="p">.</span><span class="nx">readable</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">color1</span><span class="p">,</span> <span class="nx">color2</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color1</span><span class="p">).</span><span class="nx">toRgb</span><span class="p">(),</span> <span class="nx">b</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">(</span><span class="nx">color2</span><span class="p">).</span><span class="nx">toRgb</span><span class="p">();</span>
<span class="k">return</span> <span class="p">(</span>
<span class="p">(</span><span class="nx">b</span><span class="p">.</span><span class="nx">r</span> <span class="o">-</span> <span class="nx">a</span><span class="p">.</span><span class="nx">r</span><span class="p">)</span> <span class="o">*</span> <span class="p">(</span><span class="nx">b</span><span class="p">.</span><span class="nx">r</span> <span class="o">-</span> <span class="nx">a</span><span class="p">.</span><span class="nx">r</span><span class="p">)</span> <span class="o">+</span>
<span class="p">(</span><span class="nx">b</span><span class="p">.</span><span class="nx">g</span> <span class="o">-</span> <span class="nx">a</span><span class="p">.</span><span class="nx">g</span><span class="p">)</span> <span class="o">*</span> <span class="p">(</span><span class="nx">b</span><span class="p">.</span><span class="nx">g</span> <span class="o">-</span> <span class="nx">a</span><span class="p">.</span><span class="nx">g</span><span class="p">)</span> <span class="o">+</span>
<span class="p">(</span><span class="nx">b</span><span class="p">.</span><span class="nx">b</span> <span class="o">-</span> <span class="nx">a</span><span class="p">.</span><span class="nx">b</span><span class="p">)</span> <span class="o">*</span> <span class="p">(</span><span class="nx">b</span><span class="p">.</span><span class="nx">b</span> <span class="o">-</span> <span class="nx">a</span><span class="p">.</span><span class="nx">b</span><span class="p">)</span>
<span class="p">)</span> <span class="o">></span> <span class="mh">0x28A4</span><span class="p">;</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-38"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-38">¶</a> </div> <h2>Big List of Colors</h2>
<p><a href="http://www.w3.org/TR/css3-color/#svg-color">http://www.w3.org/TR/css3-color/#svg-color</a></p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">names</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">.</span><span class="nx">names</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">aliceblue</span><span class="o">:</span> <span class="s2">"f0f8ff"</span><span class="p">,</span>
<span class="nx">antiquewhite</span><span class="o">:</span> <span class="s2">"faebd7"</span><span class="p">,</span>
<span class="nx">aqua</span><span class="o">:</span> <span class="s2">"0ff"</span><span class="p">,</span>
<span class="nx">aquamarine</span><span class="o">:</span> <span class="s2">"7fffd4"</span><span class="p">,</span>
<span class="nx">azure</span><span class="o">:</span> <span class="s2">"f0ffff"</span><span class="p">,</span>
<span class="nx">beige</span><span class="o">:</span> <span class="s2">"f5f5dc"</span><span class="p">,</span>
<span class="nx">bisque</span><span class="o">:</span> <span class="s2">"ffe4c4"</span><span class="p">,</span>
<span class="nx">black</span><span class="o">:</span> <span class="s2">"000"</span><span class="p">,</span>
<span class="nx">blanchedalmond</span><span class="o">:</span> <span class="s2">"ffebcd"</span><span class="p">,</span>
<span class="nx">blue</span><span class="o">:</span> <span class="s2">"00f"</span><span class="p">,</span>
<span class="nx">blueviolet</span><span class="o">:</span> <span class="s2">"8a2be2"</span><span class="p">,</span>
<span class="nx">brown</span><span class="o">:</span> <span class="s2">"a52a2a"</span><span class="p">,</span>
<span class="nx">burlywood</span><span class="o">:</span> <span class="s2">"deb887"</span><span class="p">,</span>
<span class="nx">burntsienna</span><span class="o">:</span> <span class="s2">"ea7e5d"</span><span class="p">,</span>
<span class="nx">cadetblue</span><span class="o">:</span> <span class="s2">"5f9ea0"</span><span class="p">,</span>
<span class="nx">chartreuse</span><span class="o">:</span> <span class="s2">"7fff00"</span><span class="p">,</span>
<span class="nx">chocolate</span><span class="o">:</span> <span class="s2">"d2691e"</span><span class="p">,</span>
<span class="nx">coral</span><span class="o">:</span> <span class="s2">"ff7f50"</span><span class="p">,</span>
<span class="nx">cornflowerblue</span><span class="o">:</span> <span class="s2">"6495ed"</span><span class="p">,</span>
<span class="nx">cornsilk</span><span class="o">:</span> <span class="s2">"fff8dc"</span><span class="p">,</span>
<span class="nx">crimson</span><span class="o">:</span> <span class="s2">"dc143c"</span><span class="p">,</span>
<span class="nx">cyan</span><span class="o">:</span> <span class="s2">"0ff"</span><span class="p">,</span>
<span class="nx">darkblue</span><span class="o">:</span> <span class="s2">"00008b"</span><span class="p">,</span>
<span class="nx">darkcyan</span><span class="o">:</span> <span class="s2">"008b8b"</span><span class="p">,</span>
<span class="nx">darkgoldenrod</span><span class="o">:</span> <span class="s2">"b8860b"</span><span class="p">,</span>
<span class="nx">darkgray</span><span class="o">:</span> <span class="s2">"a9a9a9"</span><span class="p">,</span>
<span class="nx">darkgreen</span><span class="o">:</span> <span class="s2">"006400"</span><span class="p">,</span>
<span class="nx">darkgrey</span><span class="o">:</span> <span class="s2">"a9a9a9"</span><span class="p">,</span>
<span class="nx">darkkhaki</span><span class="o">:</span> <span class="s2">"bdb76b"</span><span class="p">,</span>
<span class="nx">darkmagenta</span><span class="o">:</span> <span class="s2">"8b008b"</span><span class="p">,</span>
<span class="nx">darkolivegreen</span><span class="o">:</span> <span class="s2">"556b2f"</span><span class="p">,</span>
<span class="nx">darkorange</span><span class="o">:</span> <span class="s2">"ff8c00"</span><span class="p">,</span>
<span class="nx">darkorchid</span><span class="o">:</span> <span class="s2">"9932cc"</span><span class="p">,</span>
<span class="nx">darkred</span><span class="o">:</span> <span class="s2">"8b0000"</span><span class="p">,</span>
<span class="nx">darksalmon</span><span class="o">:</span> <span class="s2">"e9967a"</span><span class="p">,</span>
<span class="nx">darkseagreen</span><span class="o">:</span> <span class="s2">"8fbc8f"</span><span class="p">,</span>
<span class="nx">darkslateblue</span><span class="o">:</span> <span class="s2">"483d8b"</span><span class="p">,</span>
<span class="nx">darkslategray</span><span class="o">:</span> <span class="s2">"2f4f4f"</span><span class="p">,</span>
<span class="nx">darkslategrey</span><span class="o">:</span> <span class="s2">"2f4f4f"</span><span class="p">,</span>
<span class="nx">darkturquoise</span><span class="o">:</span> <span class="s2">"00ced1"</span><span class="p">,</span>
<span class="nx">darkviolet</span><span class="o">:</span> <span class="s2">"9400d3"</span><span class="p">,</span>
<span class="nx">deeppink</span><span class="o">:</span> <span class="s2">"ff1493"</span><span class="p">,</span>
<span class="nx">deepskyblue</span><span class="o">:</span> <span class="s2">"00bfff"</span><span class="p">,</span>
<span class="nx">dimgray</span><span class="o">:</span> <span class="s2">"696969"</span><span class="p">,</span>
<span class="nx">dimgrey</span><span class="o">:</span> <span class="s2">"696969"</span><span class="p">,</span>
<span class="nx">dodgerblue</span><span class="o">:</span> <span class="s2">"1e90ff"</span><span class="p">,</span>
<span class="nx">firebrick</span><span class="o">:</span> <span class="s2">"b22222"</span><span class="p">,</span>
<span class="nx">floralwhite</span><span class="o">:</span> <span class="s2">"fffaf0"</span><span class="p">,</span>
<span class="nx">forestgreen</span><span class="o">:</span> <span class="s2">"228b22"</span><span class="p">,</span>
<span class="nx">fuchsia</span><span class="o">:</span> <span class="s2">"f0f"</span><span class="p">,</span>
<span class="nx">gainsboro</span><span class="o">:</span> <span class="s2">"dcdcdc"</span><span class="p">,</span>
<span class="nx">ghostwhite</span><span class="o">:</span> <span class="s2">"f8f8ff"</span><span class="p">,</span>
<span class="nx">gold</span><span class="o">:</span> <span class="s2">"ffd700"</span><span class="p">,</span>
<span class="nx">goldenrod</span><span class="o">:</span> <span class="s2">"daa520"</span><span class="p">,</span>
<span class="nx">gray</span><span class="o">:</span> <span class="s2">"808080"</span><span class="p">,</span>
<span class="nx">green</span><span class="o">:</span> <span class="s2">"008000"</span><span class="p">,</span>
<span class="nx">greenyellow</span><span class="o">:</span> <span class="s2">"adff2f"</span><span class="p">,</span>
<span class="nx">grey</span><span class="o">:</span> <span class="s2">"808080"</span><span class="p">,</span>
<span class="nx">honeydew</span><span class="o">:</span> <span class="s2">"f0fff0"</span><span class="p">,</span>
<span class="nx">hotpink</span><span class="o">:</span> <span class="s2">"ff69b4"</span><span class="p">,</span>
<span class="nx">indianred</span><span class="o">:</span> <span class="s2">"cd5c5c"</span><span class="p">,</span>
<span class="nx">indigo</span><span class="o">:</span> <span class="s2">"4b0082"</span><span class="p">,</span>
<span class="nx">ivory</span><span class="o">:</span> <span class="s2">"fffff0"</span><span class="p">,</span>
<span class="nx">khaki</span><span class="o">:</span> <span class="s2">"f0e68c"</span><span class="p">,</span>
<span class="nx">lavender</span><span class="o">:</span> <span class="s2">"e6e6fa"</span><span class="p">,</span>
<span class="nx">lavenderblush</span><span class="o">:</span> <span class="s2">"fff0f5"</span><span class="p">,</span>
<span class="nx">lawngreen</span><span class="o">:</span> <span class="s2">"7cfc00"</span><span class="p">,</span>
<span class="nx">lemonchiffon</span><span class="o">:</span> <span class="s2">"fffacd"</span><span class="p">,</span>
<span class="nx">lightblue</span><span class="o">:</span> <span class="s2">"add8e6"</span><span class="p">,</span>
<span class="nx">lightcoral</span><span class="o">:</span> <span class="s2">"f08080"</span><span class="p">,</span>
<span class="nx">lightcyan</span><span class="o">:</span> <span class="s2">"e0ffff"</span><span class="p">,</span>
<span class="nx">lightgoldenrodyellow</span><span class="o">:</span> <span class="s2">"fafad2"</span><span class="p">,</span>
<span class="nx">lightgray</span><span class="o">:</span> <span class="s2">"d3d3d3"</span><span class="p">,</span>
<span class="nx">lightgreen</span><span class="o">:</span> <span class="s2">"90ee90"</span><span class="p">,</span>
<span class="nx">lightgrey</span><span class="o">:</span> <span class="s2">"d3d3d3"</span><span class="p">,</span>
<span class="nx">lightpink</span><span class="o">:</span> <span class="s2">"ffb6c1"</span><span class="p">,</span>
<span class="nx">lightsalmon</span><span class="o">:</span> <span class="s2">"ffa07a"</span><span class="p">,</span>
<span class="nx">lightseagreen</span><span class="o">:</span> <span class="s2">"20b2aa"</span><span class="p">,</span>
<span class="nx">lightskyblue</span><span class="o">:</span> <span class="s2">"87cefa"</span><span class="p">,</span>
<span class="nx">lightslategray</span><span class="o">:</span> <span class="s2">"789"</span><span class="p">,</span>
<span class="nx">lightslategrey</span><span class="o">:</span> <span class="s2">"789"</span><span class="p">,</span>
<span class="nx">lightsteelblue</span><span class="o">:</span> <span class="s2">"b0c4de"</span><span class="p">,</span>
<span class="nx">lightyellow</span><span class="o">:</span> <span class="s2">"ffffe0"</span><span class="p">,</span>
<span class="nx">lime</span><span class="o">:</span> <span class="s2">"0f0"</span><span class="p">,</span>
<span class="nx">limegreen</span><span class="o">:</span> <span class="s2">"32cd32"</span><span class="p">,</span>
<span class="nx">linen</span><span class="o">:</span> <span class="s2">"faf0e6"</span><span class="p">,</span>
<span class="nx">magenta</span><span class="o">:</span> <span class="s2">"f0f"</span><span class="p">,</span>
<span class="nx">maroon</span><span class="o">:</span> <span class="s2">"800000"</span><span class="p">,</span>
<span class="nx">mediumaquamarine</span><span class="o">:</span> <span class="s2">"66cdaa"</span><span class="p">,</span>
<span class="nx">mediumblue</span><span class="o">:</span> <span class="s2">"0000cd"</span><span class="p">,</span>
<span class="nx">mediumorchid</span><span class="o">:</span> <span class="s2">"ba55d3"</span><span class="p">,</span>
<span class="nx">mediumpurple</span><span class="o">:</span> <span class="s2">"9370db"</span><span class="p">,</span>
<span class="nx">mediumseagreen</span><span class="o">:</span> <span class="s2">"3cb371"</span><span class="p">,</span>
<span class="nx">mediumslateblue</span><span class="o">:</span> <span class="s2">"7b68ee"</span><span class="p">,</span>
<span class="nx">mediumspringgreen</span><span class="o">:</span> <span class="s2">"00fa9a"</span><span class="p">,</span>
<span class="nx">mediumturquoise</span><span class="o">:</span> <span class="s2">"48d1cc"</span><span class="p">,</span>
<span class="nx">mediumvioletred</span><span class="o">:</span> <span class="s2">"c71585"</span><span class="p">,</span>
<span class="nx">midnightblue</span><span class="o">:</span> <span class="s2">"191970"</span><span class="p">,</span>
<span class="nx">mintcream</span><span class="o">:</span> <span class="s2">"f5fffa"</span><span class="p">,</span>
<span class="nx">mistyrose</span><span class="o">:</span> <span class="s2">"ffe4e1"</span><span class="p">,</span>
<span class="nx">moccasin</span><span class="o">:</span> <span class="s2">"ffe4b5"</span><span class="p">,</span>
<span class="nx">navajowhite</span><span class="o">:</span> <span class="s2">"ffdead"</span><span class="p">,</span>
<span class="nx">navy</span><span class="o">:</span> <span class="s2">"000080"</span><span class="p">,</span>
<span class="nx">oldlace</span><span class="o">:</span> <span class="s2">"fdf5e6"</span><span class="p">,</span>
<span class="nx">olive</span><span class="o">:</span> <span class="s2">"808000"</span><span class="p">,</span>
<span class="nx">olivedrab</span><span class="o">:</span> <span class="s2">"6b8e23"</span><span class="p">,</span>
<span class="nx">orange</span><span class="o">:</span> <span class="s2">"ffa500"</span><span class="p">,</span>
<span class="nx">orangered</span><span class="o">:</span> <span class="s2">"ff4500"</span><span class="p">,</span>
<span class="nx">orchid</span><span class="o">:</span> <span class="s2">"da70d6"</span><span class="p">,</span>
<span class="nx">palegoldenrod</span><span class="o">:</span> <span class="s2">"eee8aa"</span><span class="p">,</span>
<span class="nx">palegreen</span><span class="o">:</span> <span class="s2">"98fb98"</span><span class="p">,</span>
<span class="nx">paleturquoise</span><span class="o">:</span> <span class="s2">"afeeee"</span><span class="p">,</span>
<span class="nx">palevioletred</span><span class="o">:</span> <span class="s2">"db7093"</span><span class="p">,</span>
<span class="nx">papayawhip</span><span class="o">:</span> <span class="s2">"ffefd5"</span><span class="p">,</span>
<span class="nx">peachpuff</span><span class="o">:</span> <span class="s2">"ffdab9"</span><span class="p">,</span>
<span class="nx">peru</span><span class="o">:</span> <span class="s2">"cd853f"</span><span class="p">,</span>
<span class="nx">pink</span><span class="o">:</span> <span class="s2">"ffc0cb"</span><span class="p">,</span>
<span class="nx">plum</span><span class="o">:</span> <span class="s2">"dda0dd"</span><span class="p">,</span>
<span class="nx">powderblue</span><span class="o">:</span> <span class="s2">"b0e0e6"</span><span class="p">,</span>
<span class="nx">purple</span><span class="o">:</span> <span class="s2">"800080"</span><span class="p">,</span>
<span class="nx">red</span><span class="o">:</span> <span class="s2">"f00"</span><span class="p">,</span>
<span class="nx">rosybrown</span><span class="o">:</span> <span class="s2">"bc8f8f"</span><span class="p">,</span>
<span class="nx">royalblue</span><span class="o">:</span> <span class="s2">"4169e1"</span><span class="p">,</span>
<span class="nx">saddlebrown</span><span class="o">:</span> <span class="s2">"8b4513"</span><span class="p">,</span>
<span class="nx">salmon</span><span class="o">:</span> <span class="s2">"fa8072"</span><span class="p">,</span>
<span class="nx">sandybrown</span><span class="o">:</span> <span class="s2">"f4a460"</span><span class="p">,</span>
<span class="nx">seagreen</span><span class="o">:</span> <span class="s2">"2e8b57"</span><span class="p">,</span>
<span class="nx">seashell</span><span class="o">:</span> <span class="s2">"fff5ee"</span><span class="p">,</span>
<span class="nx">sienna</span><span class="o">:</span> <span class="s2">"a0522d"</span><span class="p">,</span>
<span class="nx">silver</span><span class="o">:</span> <span class="s2">"c0c0c0"</span><span class="p">,</span>
<span class="nx">skyblue</span><span class="o">:</span> <span class="s2">"87ceeb"</span><span class="p">,</span>
<span class="nx">slateblue</span><span class="o">:</span> <span class="s2">"6a5acd"</span><span class="p">,</span>
<span class="nx">slategray</span><span class="o">:</span> <span class="s2">"708090"</span><span class="p">,</span>
<span class="nx">slategrey</span><span class="o">:</span> <span class="s2">"708090"</span><span class="p">,</span>
<span class="nx">snow</span><span class="o">:</span> <span class="s2">"fffafa"</span><span class="p">,</span>
<span class="nx">springgreen</span><span class="o">:</span> <span class="s2">"00ff7f"</span><span class="p">,</span>
<span class="nx">steelblue</span><span class="o">:</span> <span class="s2">"4682b4"</span><span class="p">,</span>
<span class="nx">tan</span><span class="o">:</span> <span class="s2">"d2b48c"</span><span class="p">,</span>
<span class="nx">teal</span><span class="o">:</span> <span class="s2">"008080"</span><span class="p">,</span>
<span class="nx">thistle</span><span class="o">:</span> <span class="s2">"d8bfd8"</span><span class="p">,</span>
<span class="nx">tomato</span><span class="o">:</span> <span class="s2">"ff6347"</span><span class="p">,</span>
<span class="nx">turquoise</span><span class="o">:</span> <span class="s2">"40e0d0"</span><span class="p">,</span>
<span class="nx">violet</span><span class="o">:</span> <span class="s2">"ee82ee"</span><span class="p">,</span>
<span class="nx">wheat</span><span class="o">:</span> <span class="s2">"f5deb3"</span><span class="p">,</span>
<span class="nx">white</span><span class="o">:</span> <span class="s2">"fff"</span><span class="p">,</span>
<span class="nx">whitesmoke</span><span class="o">:</span> <span class="s2">"f5f5f5"</span><span class="p">,</span>
<span class="nx">yellow</span><span class="o">:</span> <span class="s2">"ff0"</span><span class="p">,</span>
<span class="nx">yellowgreen</span><span class="o">:</span> <span class="s2">"9acd32"</span>
<span class="p">};</span></pre></div> </td> </tr> <tr id="section-39"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-39">¶</a> </div> <p>Make it easy to access colors via <code>hexNames[hex]</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">hexNames</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">.</span><span class="nx">hexNames</span> <span class="o">=</span> <span class="nx">flip</span><span class="p">(</span><span class="nx">names</span><span class="p">);</span></pre></div> </td> </tr> <tr id="section-40"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-40">¶</a> </div> <h2>Utilities</h2> </td> <td class="code"> <div class="highlight"><pre></pre></div> </td> </tr> <tr id="section-41"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-41">¶</a> </div> <p><code>{ 'name1': 'val1' }</code> becomes <code>{ 'val1': 'name1' }</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">flip</span><span class="p">(</span><span class="nx">o</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">flipped</span> <span class="o">=</span> <span class="p">{};</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="k">in</span> <span class="nx">o</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">o</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="nx">i</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">flipped</span><span class="p">[</span><span class="nx">o</span><span class="p">[</span><span class="nx">i</span><span class="p">]]</span> <span class="o">=</span> <span class="nx">i</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">flipped</span><span class="p">;</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-42"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-42">¶</a> </div> <p>Take input from [0, n] and return it as [0, 1]</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">bound01</span><span class="p">(</span><span class="nx">n</span><span class="p">,</span> <span class="nx">max</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">isOnePointZero</span><span class="p">(</span><span class="nx">n</span><span class="p">))</span> <span class="p">{</span> <span class="nx">n</span> <span class="o">=</span> <span class="s2">"100%"</span><span class="p">;</span> <span class="p">}</span>
<span class="kd">var</span> <span class="nx">processPercent</span> <span class="o">=</span> <span class="nx">isPercentage</span><span class="p">(</span><span class="nx">n</span><span class="p">);</span>
<span class="nx">n</span> <span class="o">=</span> <span class="nx">mathMin</span><span class="p">(</span><span class="nx">max</span><span class="p">,</span> <span class="nx">mathMax</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">n</span><span class="p">)));</span></pre></div> </td> </tr> <tr id="section-43"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-43">¶</a> </div> <p>Automatically convert percentage into number</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">processPercent</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">n</span> <span class="o">=</span> <span class="nx">n</span> <span class="o">*</span> <span class="p">(</span><span class="nx">max</span> <span class="o">/</span> <span class="mi">100</span><span class="p">);</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-44"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-44">¶</a> </div> <p>Handle floating point rounding errors</p> </td> <td class="code"> <div class="highlight"><pre> <span class="k">if</span> <span class="p">(</span><span class="nx">math</span><span class="p">.</span><span class="nx">abs</span><span class="p">(</span><span class="nx">n</span> <span class="o">-</span> <span class="nx">max</span><span class="p">)</span> <span class="o"><</span> <span class="mf">0.000001</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">n</span> <span class="o">>=</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">(</span><span class="nx">n</span> <span class="o">%</span> <span class="nx">max</span><span class="p">)</span> <span class="o">/</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">max</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">n</span><span class="p">;</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-45"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-45">¶</a> </div> <p>Force a number between 0 and 1</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">clamp01</span><span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">mathMin</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="nx">mathMax</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="nx">val</span><span class="p">));</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-46"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-46">¶</a> </div> <p>Parse an integer into hex</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">parseHex</span><span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">val</span><span class="p">,</span> <span class="mi">16</span><span class="p">);</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-47"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-47">¶</a> </div> <p>Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
<a href="http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0">http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0</a></p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">isOnePointZero</span><span class="p">(</span><span class="nx">n</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">typeof</span> <span class="nx">n</span> <span class="o">==</span> <span class="s2">"string"</span> <span class="o">&&</span> <span class="nx">n</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'.'</span><span class="p">)</span> <span class="o">!=</span> <span class="o">-</span><span class="mi">1</span> <span class="o">&&</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">n</span><span class="p">)</span> <span class="o">===</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-48"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-48">¶</a> </div> <p>Check to see if string passed in is a percentage</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">isPercentage</span><span class="p">(</span><span class="nx">n</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="k">typeof</span> <span class="nx">n</span> <span class="o">===</span> <span class="s2">"string"</span> <span class="o">&&</span> <span class="nx">n</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="s1">'%'</span><span class="p">)</span> <span class="o">!=</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-49"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-49">¶</a> </div> <p>Force a hex value to have 2 characters</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">pad2</span><span class="p">(</span><span class="nx">c</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">c</span><span class="p">.</span><span class="nx">length</span> <span class="o">==</span> <span class="mi">1</span> <span class="o">?</span> <span class="s1">'0'</span> <span class="o">+</span> <span class="nx">c</span> <span class="o">:</span> <span class="s1">''</span> <span class="o">+</span> <span class="nx">c</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">matchers</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span></pre></div> </td> </tr> <tr id="section-50"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-50">¶</a> </div> <p><a href="http://www.w3.org/TR/css3-values/#integers">http://www.w3.org/TR/css3-values/#integers</a></p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">CSS_INTEGER</span> <span class="o">=</span> <span class="s2">"[-\+]?\d+%?"</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-51"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-51">¶</a> </div> <p><a href="http://www.w3.org/TR/css3-values/#number-value">http://www.w3.org/TR/css3-values/#number-value</a></p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">CSS_NUMBER</span> <span class="o">=</span> <span class="s2">"[-\+]?\d*\.\d+%?"</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-52"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-52">¶</a> </div> <p>Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">CSS_UNIT</span> <span class="o">=</span> <span class="s2">"(?:"</span> <span class="o">+</span> <span class="nx">CSS_NUMBER</span> <span class="o">+</span> <span class="s2">")|(?:"</span> <span class="o">+</span> <span class="nx">CSS_INTEGER</span> <span class="o">+</span> <span class="s2">")"</span><span class="p">;</span></pre></div> </td> </tr> <tr id="section-53"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-53">¶</a> </div> <p>Actual matching.
Parentheses and commas are optional, but not required.
Whitespace can take the place of commas or opening paren</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">PERMISSIVE_MATCH3</span> <span class="o">=</span> <span class="s2">"[\s|\(]+("</span> <span class="o">+</span> <span class="nx">CSS_UNIT</span> <span class="o">+</span> <span class="s2">")[,|\s]+("</span> <span class="o">+</span> <span class="nx">CSS_UNIT</span> <span class="o">+</span> <span class="s2">")[,|\s]+("</span> <span class="o">+</span> <span class="nx">CSS_UNIT</span> <span class="o">+</span> <span class="s2">")\s*\)?"</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">PERMISSIVE_MATCH4</span> <span class="o">=</span> <span class="s2">"[\s|\(]+("</span> <span class="o">+</span> <span class="nx">CSS_UNIT</span> <span class="o">+</span> <span class="s2">")[,|\s]+("</span> <span class="o">+</span> <span class="nx">CSS_UNIT</span> <span class="o">+</span> <span class="s2">")[,|\s]+("</span> <span class="o">+</span> <span class="nx">CSS_UNIT</span> <span class="o">+</span> <span class="s2">")[,|\s]+("</span> <span class="o">+</span> <span class="nx">CSS_UNIT</span> <span class="o">+</span> <span class="s2">")\s*\)?"</span><span class="p">;</span>
<span class="k">return</span> <span class="p">{</span>
<span class="nx">rgb</span><span class="o">:</span> <span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s2">"rgb"</span> <span class="o">+</span> <span class="nx">PERMISSIVE_MATCH3</span><span class="p">),</span>
<span class="nx">rgba</span><span class="o">:</span> <span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s2">"rgba"</span> <span class="o">+</span> <span class="nx">PERMISSIVE_MATCH4</span><span class="p">),</span>
<span class="nx">hsl</span><span class="o">:</span> <span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s2">"hsl"</span> <span class="o">+</span> <span class="nx">PERMISSIVE_MATCH3</span><span class="p">),</span>
<span class="nx">hsla</span><span class="o">:</span> <span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s2">"hsla"</span> <span class="o">+</span> <span class="nx">PERMISSIVE_MATCH4</span><span class="p">),</span>
<span class="nx">hsv</span><span class="o">:</span> <span class="k">new</span> <span class="nb">RegExp</span><span class="p">(</span><span class="s2">"hsv"</span> <span class="o">+</span> <span class="nx">PERMISSIVE_MATCH3</span><span class="p">),</span>
<span class="nx">hex3</span><span class="o">:</span> <span class="sr">/^([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/</span><span class="p">,</span>
<span class="nx">hex6</span><span class="o">:</span> <span class="sr">/^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/</span>
<span class="p">};</span>
<span class="p">})();</span></pre></div> </td> </tr> <tr id="section-54"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-54">¶</a> </div> <p><code>stringInputToObject</code>
Permissive string parsing. Take in a number of formats, and output an object
based on detected format. Returns <code>{ r, g, b }</code> or <code>{ h, s, l }</code> or <code>{ h, s, v}</code></p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">function</span> <span class="nx">stringInputToObject</span><span class="p">(</span><span class="nx">color</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">color</span> <span class="o">=</span> <span class="nx">color</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="nx">trimLeft</span><span class="p">,</span> <span class="s1">''</span><span class="p">).</span><span class="nx">replace</span><span class="p">(</span><span class="nx">trimRight</span><span class="p">,</span> <span class="s1">''</span><span class="p">).</span><span class="nx">toLowerCase</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">named</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">names</span><span class="p">[</span><span class="nx">color</span><span class="p">])</span> <span class="p">{</span>
<span class="nx">color</span> <span class="o">=</span> <span class="nx">names</span><span class="p">[</span><span class="nx">color</span><span class="p">];</span>
<span class="nx">named</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">color</span> <span class="o">==</span> <span class="s1">'transparent'</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">r</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">g</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">b</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">a</span><span class="o">:</span> <span class="mi">0</span> <span class="p">};</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-55"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-55">¶</a> </div> <p>Try to match string input using regular expressions.
Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
Just return an object and let the conversion functions handle that.
This way the result will be the same whether the tinycolor is initialized with string or object.</p> </td> <td class="code"> <div class="highlight"><pre> <span class="kd">var</span> <span class="nx">match</span><span class="p">;</span>
<span class="k">if</span> <span class="p">((</span><span class="nx">match</span> <span class="o">=</span> <span class="nx">matchers</span><span class="p">.</span><span class="nx">rgb</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">color</span><span class="p">)))</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">r</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="nx">g</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span> <span class="nx">b</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">3</span><span class="p">]</span> <span class="p">};</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">((</span><span class="nx">match</span> <span class="o">=</span> <span class="nx">matchers</span><span class="p">.</span><span class="nx">rgba</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">color</span><span class="p">)))</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">r</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="nx">g</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span> <span class="nx">b</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">3</span><span class="p">],</span> <span class="nx">a</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">4</span><span class="p">]</span> <span class="p">};</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">((</span><span class="nx">match</span> <span class="o">=</span> <span class="nx">matchers</span><span class="p">.</span><span class="nx">hsl</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">color</span><span class="p">)))</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">h</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span> <span class="nx">l</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">3</span><span class="p">]</span> <span class="p">};</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">((</span><span class="nx">match</span> <span class="o">=</span> <span class="nx">matchers</span><span class="p">.</span><span class="nx">hsla</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">color</span><span class="p">)))</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">h</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span> <span class="nx">l</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">3</span><span class="p">],</span> <span class="nx">a</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">4</span><span class="p">]</span> <span class="p">};</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">((</span><span class="nx">match</span> <span class="o">=</span> <span class="nx">matchers</span><span class="p">.</span><span class="nx">hsv</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">color</span><span class="p">)))</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span> <span class="nx">h</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">1</span><span class="p">],</span> <span class="nx">s</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">2</span><span class="p">],</span> <span class="nx">v</span><span class="o">:</span> <span class="nx">match</span><span class="p">[</span><span class="mi">3</span><span class="p">]</span> <span class="p">};</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">((</span><span class="nx">match</span> <span class="o">=</span> <span class="nx">matchers</span><span class="p">.</span><span class="nx">hex6</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">color</span><span class="p">)))</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span>
<span class="nx">r</span><span class="o">:</span> <span class="nx">parseHex</span><span class="p">(</span><span class="nx">match</span><span class="p">[</span><span class="mi">1</span><span class="p">]),</span>
<span class="nx">g</span><span class="o">:</span> <span class="nx">parseHex</span><span class="p">(</span><span class="nx">match</span><span class="p">[</span><span class="mi">2</span><span class="p">]),</span>
<span class="nx">b</span><span class="o">:</span> <span class="nx">parseHex</span><span class="p">(</span><span class="nx">match</span><span class="p">[</span><span class="mi">3</span><span class="p">]),</span>
<span class="nx">format</span><span class="o">:</span> <span class="nx">named</span> <span class="o">?</span> <span class="s2">"name"</span> <span class="o">:</span> <span class="s2">"hex"</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">((</span><span class="nx">match</span> <span class="o">=</span> <span class="nx">matchers</span><span class="p">.</span><span class="nx">hex3</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">color</span><span class="p">)))</span> <span class="p">{</span>
<span class="k">return</span> <span class="p">{</span>
<span class="nx">r</span><span class="o">:</span> <span class="nx">parseHex</span><span class="p">(</span><span class="nx">match</span><span class="p">[</span><span class="mi">1</span><span class="p">]</span> <span class="o">+</span> <span class="s1">''</span> <span class="o">+</span> <span class="nx">match</span><span class="p">[</span><span class="mi">1</span><span class="p">]),</span>
<span class="nx">g</span><span class="o">:</span> <span class="nx">parseHex</span><span class="p">(</span><span class="nx">match</span><span class="p">[</span><span class="mi">2</span><span class="p">]</span> <span class="o">+</span> <span class="s1">''</span> <span class="o">+</span> <span class="nx">match</span><span class="p">[</span><span class="mi">2</span><span class="p">]),</span>
<span class="nx">b</span><span class="o">:</span> <span class="nx">parseHex</span><span class="p">(</span><span class="nx">match</span><span class="p">[</span><span class="mi">3</span><span class="p">]</span> <span class="o">+</span> <span class="s1">''</span> <span class="o">+</span> <span class="nx">match</span><span class="p">[</span><span class="mi">3</span><span class="p">]),</span>
<span class="nx">format</span><span class="o">:</span> <span class="nx">named</span> <span class="o">?</span> <span class="s2">"name"</span> <span class="o">:</span> <span class="s2">"hex"</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span></pre></div> </td> </tr> <tr id="section-56"> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-56">¶</a> </div> <p>Everything is ready, expose to window</p> </td> <td class="code"> <div class="highlight"><pre> <span class="nb">window</span><span class="p">.</span><span class="nx">tinycolor</span> <span class="o">=</span> <span class="nx">tinycolor</span><span class="p">;</span>
<span class="p">})(</span><span class="k">this</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">spectrum</span><span class="p">.</span><span class="nx">load</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">.</span><span class="nx">fn</span><span class="p">.</span><span class="nx">spectrum</span><span class="p">.</span><span class="nx">processNativeColorInputs</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">})(</span><span class="nb">window</span><span class="p">,</span> <span class="nx">jQuery</span><span class="p">);</span>
</pre></div> </td> </tr> </tbody> </table> </div> </body> </html>
?>