6 lines
9.7 KiB
JavaScript
6 lines
9.7 KiB
JavaScript
/*!
|
|
* Copyright (c) 2021 Momo Bassit.
|
|
* Licensed under the MIT License (MIT)
|
|
* https://github.com/mdbassit/Coloris
|
|
*/
|
|
!function(p,d,s){var h,f,v,i,c,y,u,b,l,g,m,w,k,a=d.createElement("canvas").getContext("2d"),x={r:0,g:0,b:0,h:0,s:0,v:0,a:1},E={el:"[data-coloris]",parent:null,theme:"light",wrap:!0,margin:2,format:"hex",swatches:[],alpha:!0,clearButton:{show:!1,label:"Clear"},a11y:{open:"Open color picker",close:"Close color picker",marker:"Saturation: {s}. Brightness: {v}.",hueSlider:"Hue slider",alphaSlider:"Opacity slider",input:"Color value field",swatch:"Color swatch",instruction:"Saturation and brightness selector. Use up, down, left and right arrow keys to select."}};function n(e){if("object"==typeof e)for(var t in e)switch(t){case"el":L(e.el),!1!==e.wrap&&S(e.el);break;case"parent":E.parent=d.querySelector(e.parent),E.parent&&E.parent.appendChild(h);break;case"theme":h.className="clr-picker clr-"+e.theme.split("-").join(" clr-");break;case"margin":e.margin*=1,E.margin=(isNaN(e.margin)?E:e).margin;break;case"wrap":e.el&&e.wrap&&S(e.el);break;case"format":E.format=e.format;break;case"swatches":Array.isArray(e.swatches)&&function(){var a=[];e.swatches.forEach(function(e,t){a.push('<button id="clr-swatch-'+t+'" aria-labelledby="clr-swatch-label clr-swatch-'+t+'" style="color: '+e+';">'+e+"</button>")}),a.length&&(N("clr-swatches").innerHTML="<div>"+a.join("")+"</div>")}();break;case"alpha":E.alpha=!!e.alpha,h.setAttribute("data-alpha",E.alpha);break;case"clearButton":var a="none";e.clearButton.show&&(a="block"),e.clearButton.label&&(u.innerHTML=e.clearButton.label),u.style.display=a;break;case"a11y":var l,r=e.a11y,n=!1;if("object"==typeof r)for(var o in r)r[o]&&E.a11y[o]&&(E.a11y[o]=r[o],n=!0);n&&(l=N("clr-open-label"),a=N("clr-swatch-label"),l.innerHTML=E.a11y.open,a.innerHTML=E.a11y.swatch,c.setAttribute("aria-label",E.a11y.close),b.setAttribute("aria-label",E.a11y.hueSlider),g.setAttribute("aria-label",E.a11y.alphaSlider),y.setAttribute("aria-label",E.a11y.input),f.setAttribute("aria-label",E.a11y.instruction))}}function L(e){M(d,"click",e,function(e){var t=E.parent,a=e.target.getBoundingClientRect(),l=p.scrollY,r={left:!1,top:!1},n={x:0,y:0},o=a.x,i=l+a.y+a.height+E.margin;w=e.target,k=w.value,h.classList.add("clr-open");var c,s=h.offsetWidth,u=h.offsetHeight;t?(c=p.getComputedStyle(t),e=parseFloat(c.marginTop),c=parseFloat(c.borderTopWidth),(n=t.getBoundingClientRect()).y+=c+l,o-=n.x,i-=n.y,o+s>t.clientWidth&&(o+=a.width-s,r.left=!0),i+u>t.clientHeight-e&&(i-=a.height+u+2*E.margin,r.top=!0),i+=t.scrollTop):(o+s>d.documentElement.clientWidth&&(o+=a.width-s,r.left=!0),i+u-l>d.documentElement.clientHeight&&(i=l+a.y-u-E.margin,r.top=!0)),h.classList.toggle("clr-left",r.left),h.classList.toggle("clr-top",r.top),h.style.left=o+"px",h.style.top=i+"px",v={width:f.offsetWidth,height:f.offsetHeight,x:h.offsetLeft+f.offsetLeft+n.x,y:h.offsetTop+f.offsetTop+n.y},A(w.value),y.focus({preventScroll:!0})}),M(d,"input",e,function(e){var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function S(e){d.querySelectorAll(e).forEach(function(e){var t,a=e.parentNode;a.classList.contains("clr-field")||((t=d.createElement("div")).innerHTML='<button aria-labelledby="clr-open-label"></button>',a.insertBefore(t,e),t.setAttribute("class","clr-field"),t.style.color=e.value,t.appendChild(e))})}function o(e){w&&(e&&k!==w.value&&(w.value=k,w.dispatchEvent(new Event("input",{bubbles:!0}))),k!==w.value&&w.dispatchEvent(new Event("change",{bubbles:!0})),h.classList.remove("clr-open"),w.focus({preventScroll:!0}),w=null)}function A(e){var t=function(e){a.fillStyle="#000",a.fillStyle=e,e=(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(a.fillStyle))?{r:+e[3],g:+e[4],b:+e[5],a:+e[6]}:(e=a.fillStyle.replace("#","").match(/.{2}/g).map(function(e){return parseInt(e,16)}),{r:e[0],g:e[1],b:e[2],a:1});return e}(e),e=function(e){var t=e.r/255,a=e.g/255,l=e.b/255,r=s.max(t,a,l),n=s.min(t,a,l),o=r-n,i=r,c=0,n=0;o&&(r===t&&(c=(a-l)/o),r===a&&(c=2+(l-t)/o),r===l&&(c=4+(t-a)/o),r&&(n=o/r));return{h:(c=s.floor(60*c))<0?c+360:c,s:s.round(100*n),v:s.round(100*i),a:e.a}}(t);C(e.s,e.v),H(t,e),b.value=e.h,h.style.color="hsl("+e.h+", 100%, 50%)",l.style.left=e.h/360*100+"%",i.style.left=v.width*e.s/100+"px",i.style.top=v.height-v.height*e.v/100+"px",g.value=100*e.a,m.style.left=100*e.a+"%"}function r(e){w&&(w.value=void 0!==e?e:y.value,w.dispatchEvent(new Event("input",{bubbles:!0})))}function T(e,t){e={h:+b.value,s:e/v.width*100,v:100-t/v.height*100,a:g.value/100},t=function(e){var t=e.s/100,a=e.v/100,l=t*a,r=e.h/60,n=l*(1-s.abs(r%2-1)),o=a-l;l+=o,n+=o;t=s.floor(r)%6,a=[l,n,o,o,n,l][t],r=[n,l,l,n,o,o][t],t=[o,o,n,l,l,n][t];return{r:s.round(255*a),g:s.round(255*r),b:s.round(255*t),a:e.a}}(e);C(e.s,e.v),H(t,e),r()}function C(e,t){var a=E.a11y.marker;e=+e.toFixed(1),t=+t.toFixed(1),a=(a=a.replace("{s}",e)).replace("{v}",t),i.setAttribute("aria-label",a)}function t(e){var t={pageX:((a=e).changedTouches?a.changedTouches[0]:a).pageX,pageY:(a.changedTouches?a.changedTouches[0]:a).pageY},a=t.pageX-v.x,t=t.pageY-v.y;E.parent&&(t+=E.parent.scrollTop),a=a<0?0:a>v.width?v.width:a,t=t<0?0:t>v.height?v.height:t,i.style.left=a+"px",i.style.top=t+"px",T(a,t),e.preventDefault(),e.stopPropagation()}function H(e,t){for(var a in void 0===t&&(t={}),e)x[a]=e[a];for(var l in t)x[l]=t[l];var r,n=function(e){var t=e.r.toString(16),a=e.g.toString(16),l=e.b.toString(16),r="";e.r<16&&(t="0"+t);e.g<16&&(a="0"+a);e.b<16&&(l="0"+l);E.alpha&&e.a<1&&(e=255*e.a|0,r=e.toString(16),e<16&&(r="0"+r));return"#"+t+a+l+r}(x),o=n.substring(0,7);switch(i.style.color=o,m.parentNode.style.color=o,m.style.color=n,c.style.color=n,y.value=n,f.style.display="none",f.offsetHeight,f.style.display="",m.nextElementSibling.style.display="none",m.nextElementSibling.offsetHeight,m.nextElementSibling.style.display="",E.format){case"mixed":if(1===x.a)break;case"rgb":y.value=(r=x,E.alpha&&1!==r.a?"rgba("+r.r+", "+r.g+", "+r.b+", "+r.a+")":"rgb("+r.r+", "+r.g+", "+r.b+")");break;case"hsl":y.value=(r=function(e){var t,a=e.v/100,l=a*(1-e.s/100/2);0<l&&l<1&&(t=s.round((a-l)/s.min(l,1-l)*100));return{h:e.h,s:t||0,l:s.round(100*l),a:e.a}}(x),E.alpha&&1!==r.a?"hsla("+r.h+", "+r.s+"%, "+r.l+"%, "+r.a+")":"hsl("+r.h+", "+r.s+"%, "+r.l+"%)")}}function e(){var e=+b.value,t=+i.style.left.replace("px",""),a=+i.style.top.replace("px","");h.style.color="hsl("+e+", 100%, 50%)",l.style.left=e/360*100+"%",T(t,a)}function B(){var e=g.value/100;m.style.left=100*e+"%",H({a:e}),r()}function N(e){return d.getElementById(e)}function M(e,t,a,l){var r=Element.prototype.matches||Element.prototype.msMatchesSelector;"string"==typeof a?e.addEventListener(t,function(e){r.call(e.target,a)&&l.call(e.target,e)}):(l=a,e.addEventListener(t,l))}function D(e,t){t=void 0!==t?t:[],"loading"!==d.readyState?e.apply(void 0,t):d.addEventListener("DOMContentLoaded",function(){e.apply(void 0,t)})}void 0!==NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),p.Coloris=function(){var r={set:n,wrap:S,close:o};function e(e){D(function(){e&&("string"==typeof e?L:n)(e)})}for(var t in r)!function(l){e[l]=function(){for(var e=arguments.length,t=new Array(e),a=0;a<e;a++)t[a]=arguments[a];D(r[l],t)}}(t);return e}(),D(function(){(h=d.createElement("div")).setAttribute("id","clr-picker"),h.className="clr-picker",h.innerHTML='<input id="clr-color-value" class="clr-color" type="text" value="" aria-label="'+E.a11y.input+'"><div id="clr-color-area" class="clr-gradient" role="application" aria-label="'+E.a11y.instruction+'"><div id="clr-color-marker" class="clr-marker" tabindex="0"></div></div><div class="clr-hue"><input id="clr-hue-slider" type="range" min="0" max="360" step="1" aria-label="'+E.a11y.hueSlider+'"><div id="clr-hue-marker"></div></div><div class="clr-alpha"><input id="clr-alpha-slider" type="range" min="0" max="100" step="1" aria-label="'+E.a11y.alphaSlider+'"><div id="clr-alpha-marker"></div><span></span></div><div id="clr-swatches" class="clr-swatches"></div><button id="clr-clear" class="clr-clear">'+E.clearButton.label+'</button><button id="clr-color-preview" class="clr-preview" aria-label="'+E.a11y.close+'"></button><span id="clr-open-label" hidden>'+E.a11y.open+'</span><span id="clr-swatch-label" hidden>'+E.a11y.swatch+"</span>",d.body.appendChild(h),f=N("clr-color-area"),i=N("clr-color-marker"),u=N("clr-clear"),c=N("clr-color-preview"),y=N("clr-color-value"),b=N("clr-hue-slider"),l=N("clr-hue-marker"),g=N("clr-alpha-slider"),m=N("clr-alpha-marker"),L(E.el),S(E.el),M(h,"mousedown",function(e){h.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),M(f,"mousedown",function(e){M(d,"mousemove",t)}),M(f,"touchstart",function(e){d.addEventListener("touchmove",t,{passive:!1})}),M(i,"mousedown",function(e){M(d,"mousemove",t)}),M(i,"touchstart",function(e){d.addEventListener("touchmove",t,{passive:!1})}),M(y,"change",function(e){A(y.value),r()}),M(u,"click",function(e){r(""),o()}),M(c,"click",function(e){r(),o()}),M(h,"click",".clr-swatches button",function(e){A(e.target.style.color),r()}),M(d,"mouseup",function(e){d.removeEventListener("mousemove",t)}),M(d,"touchend",function(e){d.removeEventListener("touchmove",t)}),M(d,"mousedown",function(e){h.classList.remove("clr-keyboard-nav"),o()}),M(d,"keydown",function(e){"Escape"===e.key?o(!0):"Tab"===e.key&&h.classList.add("clr-keyboard-nav")}),M(d,"click",".clr-field button",function(e){e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),M(i,"keydown",function(e){var t={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};-1!==Object.keys(t).indexOf(e.key)&&(!function(e,t){e=+i.style.left.replace("px","")+e,t=+i.style.top.replace("px","")+t,i.style.left=e+"px",i.style.top=t+"px",T(e,t)}.apply(void 0,t[e.key]),e.preventDefault())}),M(f,"click",t),M(b,"input",e),M(g,"input",B)})}(window,document,Math); |