You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

6 lines
8.9 KiB
JavaScript

1 year ago
/*!
* Copyright (c) 2021 Momo Bassit.
* Licensed under the MIT License (MIT)
* https://github.com/mdbassit/Coloris
*/
!function(u,d,s){var f,h,v,i,o,y,c,r,p,g,b,m,a=d.createElement("canvas").getContext("2d"),w={r:0,g:0,b:0,a:1},k={el:"[data-coloris]",parent:null,theme:"light",wrap:!0,margin:2,format:"hex",swatches:[],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":x(e.el),!1!==e.wrap&&E(e.el);break;case"parent":k.parent=d.querySelector(e.parent),k.parent&&k.parent.appendChild(f);break;case"theme":f.setAttribute("class","clr-picker clr-"+e.theme);break;case"margin":e.margin*=1,k.margin=(isNaN(e.margin)?k:e).margin;break;case"wrap":e.el&&e.wrap&&E(e.el);break;case"format":k.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"a11y":var a,r,l=e.a11y,n=!1;if("object"==typeof l)for(var i in l)l[i]&&k.a11y[i]&&(k.a11y[i]=l[i],n=!0);n&&(a=N("clr-open-label"),r=N("clr-swatch-label"),a.innerHTML=k.a11y.open,r.innerHTML=k.a11y.swatch,o.setAttribute("aria-label",k.a11y.close),c.setAttribute("aria-label",k.a11y.hueSlider),p.setAttribute("aria-label",k.a11y.alphaSlider),y.setAttribute("aria-label",k.a11y.input),h.setAttribute("aria-label",k.a11y.instruction))}}function x(e){D(d,"click",e,function(e){var t=k.parent,a=e.target.getBoundingClientRect(),r=u.scrollY,l={left:!1,top:!1},n={x:0,y:0},i=a.x,o=r+a.y+a.height+k.margin;b=e.target,m=b.value,f.classList.add("clr-open");var c,s=f.offsetWidth,p=f.offsetHeight;t?(c=u.getComputedStyle(t),e=parseFloat(c.marginTop),c=parseFloat(c.borderTopWidth),(n=t.getBoundingClientRect()).y+=c+r,i-=n.x,o-=n.y,i+s>t.clientWidth&&(i+=a.width-s,l.left=!0),o+p>t.clientHeight-e&&(o-=a.height+p+2*k.margin,l.top=!0),o+=t.scrollTop):(i+s>d.documentElement.clientWidth&&(i+=a.width-s,l.left=!0),o+p-r>d.documentElement.clientHeight&&(o=r+a.y-p-k.margin,l.top=!0)),f.style.left=i+"px",f.style.top=o+"px",v={width:h.offsetWidth,height:h.offsetHeight,x:f.offsetLeft+n.x,y:f.offsetTop+n.y},f.classList.toggle("clr-left",l.left),f.classList.toggle("clr-top",l.top),S(b.value),y.focus({preventScroll:!0})}),D(d,"input",e,function(e){var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)})}function E(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 L(e){b&&(e&&m!==b.value&&b.dispatchEvent(new Event("change",{bubbles:!0})),f.classList.remove("clr-open"),b.focus({preventScroll:!0}),b=null)}function S(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,r=e.b/255,l=s.max(t,a,r),n=s.min(t,a,r),i=l-n,o=l,c=0,n=0;i&&(l===t&&(c=(a-r)/i),l===a&&(c=2+(r-t)/i),l===r&&(c=4+(t-a)/i),l&&(n=i/l));return{h:(c=s.floor(60*c))<0?c+360:c,s:s.round(100*n),v:s.round(100*o),a:e.a}}(t);T(e.s,e.v),C(t),c.value=e.h,f.style.color="hsl("+e.h+", 100%, 50%)",r.style.left=e.h/360*100+"%",i.style.left=v.width*e.s/100+"px",i.style.top=100-v.height*e.v/100+"px",p.value=100*e.a,g.style.left=100*e.a+"%"}function l(){b&&(b.value=y.value,b.dispatchEvent(new Event("input",{bubbles:!0})))}function A(e,t){e={h:+c.value,s:e/v.width*100,v:100-t/v.height*100,a:p.value/100},t=function(e){var t=e.s/100,a=e.v/100,r=t*a,l=e