alwan/dist/js/alwan.min.js

A simple, lightweight, customizable, touch friendly color picker, written in vanilla javascript with zero dependencies.

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).Alwan=e()}(this,(function(){"use strict";const t={id:"",classname:"",theme:"light",parent:"",toggle:!0,popover:!0,position:"bottom-start",margin:4,preset:!0,color:"#000",default:"#000",target:"",disabled:!1,format:"rgb",singleInput:!1,inputs:!0,opacity:!0,preview:!0,copy:!0,swatches:[],toggleSwatches:!1,closeOnScroll:!1,i18n:{picker:"Color picker",buttons:{copy:"Copy color to clipboard",changeFormat:"Change color format",swatch:"Color swatch: %label%",toggleSwatches:"Toggle Swatches"},sliders:{hue:"Change hue",alpha:"Change opacity"}}},e=document,s=e.documentElement,o="#000000",r="button",n="open",a="close",i="color",l="click",h="pointerdown",c="pointermove",p="pointerup",g="scroll",u="keydown",d="input",_="change",w="rgb",b="hsl",f={capture:!0},v=["hex",w,b],y=t=>"string"==typeof t,m=t=>t instanceof Element,$=t=>Number.isFinite(y(t)&&""!==t.trim()?+t:t),{keys:x,assign:A,setPrototypeOf:S,prototype:k}=Object,{isArray:C}=Array,H=t=>null!=t&&"object"==typeof t&&!C(t)&&!m(t),O=(t,e)=>x(t).forEach((s=>e(s,t[s]))),V=(t,e)=>(O(e,((e,s)=>{A(t,{[e]:H(s)?V(t[e]||{},s):s})})),t),L=()=>e.body,M=(t,e=s)=>y(t)&&t.trim()?[...e.querySelectorAll(t)]:m(t)?[t]:[],z=t=>M(`${d},${r},[tabindex]`,t),B=(t,s,o,r={},n)=>{const a=e.createElement(t);return s&&(a.className=s.trim()),o&&(y(o)?a.innerHTML=o:a.append(...(C(o)?o:[o]).filter((t=>!!t)))),O(y(n)?{...r,"aria-label":n}:r,((t,e)=>a.setAttribute(t,e+""))),a},E=(t,e,s)=>B("div",e,t,{},s),I=(t,e)=>(t&&t!==e&&t.replaceWith(e),e),T=(t="",e="",s,o=t)=>B(r,"alwan__button "+e,s,{type:r,title:o},t),j=(t,e,s,o=1)=>B(d,"alwan__slider alwan__"+e,"",{type:"range",max:s,step:o},t),D=(t,e)=>t.style.setProperty("--color",e),F=(t,e,s)=>t.classList.toggle("alwan--"+e,s),N=(t,e,s)=>{t.style.transform=`translate(${e}px,${s}px)`},P=t=>{const{x:e,y:s,width:o,height:r}=t.getBoundingClientRect();return[e,s,o,r,o+e,r+s]},R=t=>E(t,"alwan__container"),Z=(t,e)=>t.style.display=e?"none":"",K=(t,e,s,o)=>t.addEventListener(e,s,o),U=(t,e,s)=>t.removeEventListener(e,s),q=(t,e=w)=>e?e+(e===w?`(${t.r}, ${t.g}, ${t.b}`:`(${t.h}, ${t.s}%, ${t.l}%`)+(t.a<1?`, ${t.a})`:")"):o,{min:G,max:J,abs:Q,round:W,PI:X}=Math,Y=(t,e=100,s=0)=>t>e?e:t<s?s:t,tt=t=>W((t%=360)<0?t+360:t),et=t=>parseInt(t,16),st=t=>{let e,s,{config:o,s:r}=t,n=!1;const a=()=>{const t={};n||(r.t(),n=!0),O(e,((e,s)=>t[e]=s.value)),r.o(t[s]||q(t,s),!0)},i=()=>{e={};const t="hex"===s||o.singleInput?[s]:[...s+(o.opacity?"a":"")];return E(t.map((t=>B("label","",[e[t]=B(d,"alwan__input",[],{type:"text",value:r.i[t]}),B("span","",t)]))),"alwan__inputs")};return{p({inputs:e,format:o,i18n:h}){let c,p,g,w,b=v;return!0!==e&&(e=e||{},b=b.filter((t=>e[t]))),w=b.length,b=w?b:v,s=b[J(b.indexOf(o),0)],r.u(s),w?(w>1&&(g=T(h.buttons.changeFormat,"",'<svg width="15" height="15" viewBox="0 0 20 20" aria-role="none"><path d="M10 1L5 8h10l-5-7zm0 18l5-7H5l5 7z"></path></svg>'),K(g,l,(()=>{s=b[(b.indexOf(s)+1)%w],r.u(s),c=I(c,i())}))),c=i(),p=E(c),K(p,d,a),K(p,_,(()=>{r._(),n=!1})),K(p,"focusin",(t=>t.target.select())),K(p,u,(e=>"Enter"===e.key&&t.c.v(!1))),R([p,g])):null},m(t){n||O(e||{},((e,s)=>s.value=t[e]+""))}}},ot={ArrowLeft:-1,ArrowRight:1},rt={ArrowUp:-1,ArrowDown:1},nt=({s:t})=>{let s,o,r,n,a;const i={s:0,l:0},l=(e,s)=>{let l,h,[,,c,p]=a;r=e=Y(e,c),n=s=Y(s,p),N(o,e,s),l=1-s/p,h=l*(1-e/(2*c)),i.s=1===h||0===h?0:(l-h)/G(h,1-h)*100,i.l=100*h,t.$(i)},g=({x:t,y:e,buttons:s})=>{s?l(t-a[0],e-a[1]):d()},d=()=>{t._(),U(e,c,g),U(e,p,d)},_=o=>{s.setPointerCapture(o.pointerId),t.t(),a=P(s),l(o.x-a[0],o.y-a[1]),K(e,c,g),K(e,p,d)},w=e=>{const o=e.key,i=ot[o]||0,h=rt[o]||0;(i||h)&&(e.preventDefault(),a=P(s),t.t(),l(r+i*a[2]/100,n+h*a[3]/100),t._())};return{p:({i18n:t,disabled:e})=>(o=E("","alwan__cursor"),s=E(o,"alwan__selector",t.picker||t.palette),e||(s.tabIndex=0,K(s,h,_),K(s,u,w)),s),A(t,e){t=(e/=100)+t/100*G(e,1-e),a=P(s),r=(t?2*(1-e/t):0)*a[2],n=(1-t)*a[3],N(o,r,n)}}},at=({s:t,e:e})=>{let s,o,r;return{p:({opacity:n,i18n:{sliders:a}})=>(s=j(a.hue,"hue",360),o=n?j(a.alpha,"alpha",1,.01):null,r=E([s,o]),K(r,_,(()=>e.S(_))),K(r,d,(({target:e})=>t.$({[e===s?"h":"a"]:e.value}))),r),m(t,e){s.value=t+"",o&&(o.value=e+"")}}},it=t=>(t<16?"0":"")+t.toString(16),lt=(t,e,s)=>(t%=12,W(255*(s-e*G(s,1-s)*J(-1,G(t-3,9-t,1))))),ht=B("canvas").getContext("2d"),ct={turn:360,rad:180/X,grad:.9},pt=/a?\(\s*([+-]?\d*\.?\d+)(\w*)?\s*[\s,]\s*([+-]?\d*\.?\d+)%?\s*,?\s*([+-]?\d*\.?\d+)%?(?:\s*[\/,]\s*([+-]?\d*\.?\d+)(%)?)?\s*\)?$/,gt=t=>y(t)?t:q(t,(t=>H(t)&&[b,w].find((e=>[...e].every((e=>$(t[e])))))||"")(t)),ut=t=>(ht.fillStyle=o,ht.fillStyle=t,ht.fillStyle),dt=(t,e)=>{let s,o,r=gt(t).trim();if(/^hsl/.test(r)){const[t,e,s,n,a,i="1",l]=pt.exec(r)||[];t&&(o={h:tt(+e*(ct[s]||1)),s:Y(+n),l:Y(+a),a:Y(+i/(l?100:1),1)})}if(!o){if(/^[\da-f]+$/i.test(r)&&(r="#"+r),r=ut(r),"#"===r[0])s={r:et(r[1]+r[2]),g:et(r[3]+r[4]),b:et(r[5]+r[6]),a:1};else{const[t,e,o,n]=r.match(/[\d\.]+/g).map(Number);s={r:t,g:e,b:o,a:n}}o=(({r:t,g:e,b:s,a:o})=>{const r=J(t/=255,e/=255,s/=255),n=G(t,e,s),a=r-n,i=(r+n)/2;return{h:tt(60*(0===a?0:r===t?(e-s)/a%6:r===e?(s-t)/a+2:r===s?(t-e)/a+4:0)),s:a?a/(1-Q(2*i-1))*100:0,l:100*i,a:o}})(s)}return o.a=e?W(100*o.a)/100:1,s&&(s.a=o.a),[o,s]},_t=t=>{let e=!1;const s=(e,s)=>{let r,n,a,i;var h;return H(h=e)&&"color"in h?({color:n,label:i}=e):n=e,a=gt(n),a=ut(a)===o?o:a,i=y(i)?i:a,r=T(s.replace("%label%",i),"alwan__swatch","",i),D(r,a),K(r,l,(()=>t.s.o(a,!0,!0))),r};return{p({swatches:o,toggleSwatches:r,i18n:{buttons:n}}){let a,i,h;return C(o)&&o.length?(a=E(o.map((t=>s(t,n.swatch))),"alwan__swatches"),r?(h=(s=!e)=>{e=s,F(a,"collapse",e),t.c.k()},i=T(n.toggleSwatches,"alwan__toggle-button",'<svg width="20" height="20" viewBox="0 0 24 24" aria-role="none"><path d="M6.984 14.016l5.016-5.016 5.016 5.016h-10.031z"></path></svg>'),K(i,l,(()=>h())),h(e),E([a,i])):a):a}}},wt=t=>({p({preview:e,copy:s,i18n:o}){let r,n,a,i,h;return s&&(r=T(o.buttons.copy,"alwan__cp",'<svg width="18" height="18" viewBox="0 0 24 24" aria-role="none"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg width="18" height="18" viewBox="0 0 24 24" aria-role="none"><path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path></svg>'),[a,i]=r.children,n=t=>{Z(a,t),Z(i,!t)},n(!1),h=navigator.clipboard,h&&(K(r,l,(()=>h.writeText(t.s.C()).then((()=>n(!0))))),K(r,"blur",(()=>n())),K(r,"mouseleave",(()=>r.blur())))),e?E(r,"alwan__preview"):r}}),bt=(t,e)=>t.map((t=>C(t)?R(bt(t,e)):t.p(e))),ft={top:[1,5,4,0],bottom:[5,1,4,0],right:[4,0,1,5],left:[0,4,1,5]},vt={start:[0,1,2],center:[1,0,2],end:[2,1,0]},yt=(t,o)=>{let r,i,c=E(),p=!1,d=null;const{config:_,s:w}=t,b=((t,e)=>{const s=T(),o=s.className+" alwan__ref ";let r;return t&&t.id&&(s.id=t.id),{H:n=>(r=I(r||t,n.preset||!t?s:t),r===s&&(r.className=(o+n.classname).trim(),r.parentNode||L().append(r)),K(r,l,e),r),O(){t?(U(t,l,e),I(r,t)):r.remove()}}})(o,(()=>t.toggle())),v=E(c,"alwan"),[m,x,A,S,k]=(t=>[nt,wt,at,st,_t].map((e=>e(t))))(t);return w.V((t=>{D(r,t.rgb),c.style.cssText=`--rgb:${t.r},${t.g},${t.b};--a:${t.a};--h:${t.h}`,S.m(t)}),(({a:t,h:e,s:s,l:o})=>{A.m(e,t),m.A(s,o)})),{L(t){const o=this,{id:n,color:a=w.i.hsl}=t,{theme:l,parent:C,toggle:H,popover:O,target:B,disabled:T}=V(_,t);r=b.H(_);let j=M(C)[0],D=M(B)[0]||r;n&&(v.id=n),F(v,"dark","dark"===l),c=I(c,E(bt([m,[x,A],S,k],_))),Z(r,!O&&!H),d&&(d.M(),d=null),O?(j=j||H&&L(),i=E(v,"alwan__popover-container"),d=((t,o,r,n,{margin:a,position:i,closeOnScroll:l,toggle:c,disabled:p},{v:d,B:_})=>{let w;a=$(a)?+a:0;let b=_();const[v,m]=y(i)?i.split("-"):[],x=o.style,A=t.getRootNode(),S=z(o),k=S[0],C=S.pop(),H=()=>{const e=[s.clientWidth,s.clientHeight],n=P(t),i=P(o),l=P(r),h=[-1,-1];x.height="",!b||!w||n[4]<0||n[5]<0||n[0]>e[0]||n[1]>e[1]||((ft[v]||ft.bottom).some((t=>{let s=t%2,o=n[t]+(t<=1?-i[s+2]-a:a);return!(o<0||o+i[s+2]+a>e[s])&&(h[s]=o,s=+!s,(vt[m]||vt.center).some((t=>(o=0===t?n[s]:n[s+4]-(2===t?i[s+2]:(i[s+2]+n[s+2])/2),!(o<0||o+i[s+2]>e[s]||(h[s]=o,0))))))})),N(o,...h.map(((t,s)=>(s&&-1===t&&i[3]>e[s]&&(x.height=e[s]-6+"px",i[3]=e[s]-3),W((t>=0?t:(e[s]-i[s+2])/2)-l[s]))))))};c&&K(o,u,(t=>{let e,{key:s,target:o,shiftKey:r}=t;"Escape"===s?d(!1):"Tab"===s&&(o===k&&r?e=C:o!==C||r||(e=k),e&&(e.focus(),t.preventDefault()))}));const O=[o,n,...n.labels||[]],V=t=>{const e=t.composedPath();b&&!O.some((t=>e.includes(t)))&&d(!1)},L=new IntersectionObserver((([t])=>{w=t.isIntersecting,d(!p&&w&&(!c||b),!0)})),M=({target:e})=>{(A instanceof ShadowRoot&&e.contains(A.host)||e.contains(t))&&(H(),l&&d(!1))},B=t=>{t(window,"resize",H),t(e,g,M,f),t(A,g,M,f),t(e,h,V)};return L.observe(t),B(K),{I:()=>w,k(t,e){b=t,w&&(H(),c&&e!==t&&(t?k:n).focus())},M(){x.cssText="",L.unobserve(t),B(U),r.remove()}}})(D,v,i,r,_,o)):(i=v,o.v(!H||!T&&p,!0)),j?j.append(i):D.after(i),T&&[r,...z(v)].forEach((t=>{t.disabled=!0})),w.o(a)},v(e=!p,s=!1){(e!==p&&(!d||d.I())&&!_.disabled&&_.toggle||s)&&(F(v,n,e),d&&d.k(e,p),p=e,t.e.S(p?n:a))},B:()=>p,k(){d&&d.k(p,p)},M(){v.remove(),d&&d.M(),b.O()}}},mt=t=>{const e={h:0,s:0,l:0,r:0,g:0,b:0,a:1,rgb:"",hsl:"",hex:""},s=t.config,o=t.e.S;let r,n,a,l;return{i:e,C:()=>e[a],V(t,e){r=t,n=e},u(t){a=s.format=t},$(t,s,n=!0,a){const l=e.hex;A(e,t),A(e,s||(({h:t,s:e,l:s,a:o})=>({r:lt(t/=30,e/=100,s/=100),g:lt(t+8,e,s),b:lt(t+4,e,s),a:o}))(e)),e.s=W(e.s),e.l=W(e.l),e.rgb=q(e),e.hsl=q(e,b),e.hex=(({r:t,g:e,b:s,a:o})=>"#"+it(t)+it(e)+it(s)+(o<1?it(W(255*o)):""))(e),r(e),l!==e.hex&&(n&&o(i,e),a&&o(_,e))},o(t,o=!1,r){this.$(...dt(t,s.opacity),o,r),n(e)},t(){l=e[a]},_(){l!==e[a]&&o(_,e)}}};return class{static version(){return"2.3.1"}static setDefaults(e){V(t,e)}constructor(e,s){this.config=V({},t),this.e=(t=>{const e={[n]:[],[a]:[],[_]:[],[i]:[]};return{S(s,o=t.s.i){(e[s]||[]).forEach((e=>e(A({type:s,source:t},o))))},T(t,s){s&&!(e[t]||[]).includes(s)&&e[t].push(s)},j(t,s){t?e[t]&&(e[t]=s?e[t].filter((t=>t!==s)):[]):O(e,(t=>{e[t]=[]}))}}})(this),this.s=mt(this),this.c=yt(this,M(e)[0]),this.c.L(s||{})}setOptions(t){t&&this.c.L(t)}setColor(t){return this.s.o(t),this}getColor(){return{...this.s.i}}isOpen(){return this.c.B()}open(){this.c.v(!0)}close(){this.c.v(!1)}toggle(){this.c.v()}on(t,e){this.e.T(t,e)}off(t,e){this.e.j(t,e)}addSwatches(...t){this.c.L({swatches:this.config.swatches.concat(t)})}removeSwatches(...t){this.c.L({swatches:this.config.swatches.filter(((e,s)=>!t.some((t=>$(t)?+t===s:t===e))))})}enable(){this.c.L({disabled:!1})}disable(){this.c.L({disabled:!0})}reset(){this.s.o(this.config.default)}reposition(){this.c.k()}trigger(t){this.e.S(t)}destroy(){this.c.M(),O(this,(t=>{this[t]=null})),S(this,k)}}}));
//# sourceMappingURL=alwan.min.js.map