alwan/dist/js/iife/alwan.min.js

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

var Alwan=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",toggleSwatches:"Toggle Swatches"},sliders:{hue:"Change hue",alpha:"Change opacity"}}},e=document,r=e.documentElement,s="button",n="open",o="close",a="color",i="click",l="pointerdown",h="pointermove",c="pointerup",p="scroll",g="keydown",u="input",d="change",_="rgb",w="hsl",b={capture:!0},v=["hex",_,w],f=t=>"string"==typeof t,m=t=>t instanceof Element,y=t=>Number.isFinite(f(t)&&""!==t.trim()?+t:t),$=t=>[w,_].find((e=>[...e].every((e=>y(t[e]))))),{keys:x,assign:A,setPrototypeOf:k,prototype:C}=Object,{isArray:S}=Array,H=t=>null!=t&&"object"==typeof t&&!S(t)&&!m(t),O=(t,e)=>x(t).forEach((r=>e(r,t[r]))),V=(t,e)=>(O(e,((e,r)=>{A(t,{[e]:H(r)?V(t[e]||{},r):r})})),t),L=()=>e.body,M=(t,e=r)=>f(t)&&t.trim()?[...e.querySelectorAll(t)]:m(t)?[t]:[],z=t=>M(`${u},${s},[tabindex]`,t),B=(t,r,s,n={},o)=>{const a=e.createElement(t);return r&&(a.className=r.trim()),s&&(f(s)?a.innerHTML=s:a.append(...(S(s)?s:[s]).filter((t=>!!t)))),O(o?{...n,"aria-label":o}:n,((t,e)=>{(y(e)||e)&&a.setAttribute(t,e+"")})),a},E=(t,e,r)=>B("div",e,t,{},r),I=(t,e)=>(t&&t!==e&&t.replaceWith(e),e),F=(t="",e="",r,n=t)=>B(s,"alwan__button "+e,r,{type:s,title:n},t),T=(t,e,r,s=1)=>B(u,"alwan__slider alwan__"+e,"",{type:"range",max:r,step:s},t),j=(t,e)=>t.style.setProperty("--color",e),D=(t,e,r)=>t.classList.toggle("alwan--"+e,r),N=(t,e,r)=>{t.style.transform=`translate(${e}px,${r}px)`},P=(t,e)=>{let{x:r,y:s,width:n,height:o}=t.getBoundingClientRect();return e&&(r+=t.clientLeft-t.scrollLeft,s+=t.clientTop-t.scrollTop),[r,s,n,o,n+r,o+s]},R=t=>E(t,"alwan__container"),Z=(t,e)=>t.style.display=e?"none":"",K=[":popover-open",":modal"],U=(t,r)=>!(t=t&&t.parentNode)||t===e||(t=>m(t)&&K.some((e=>{try{return t.matches(e)}catch(t){return!1}})))(t)?[0,0]:(t===r&&(t=r.host),m(t)&&(({transform:t,perspective:e,filter:r,containerType:s,backdropFilter:n,willChange:o,contain:a})=>"none"!==t||"none"!==e||"normal"!==s||"none"!==n||"none"!==r||o&&/\b(transform|perspective|filter)\b/.test(o)||a&&/\b(paint|layout|strict|content)\b/.test(a))(getComputedStyle(t))?P(t,!0):U(t,r)),q=(t,e,r,s)=>t.addEventListener(e,r,s),G=(t,e,r)=>t.removeEventListener(e,r),J=(t,e=_)=>e+(e===_?`(${t.r}, ${t.g}, ${t.b}`:`(${t.h}, ${t.s}%, ${t.l}%`)+(t.a<1?`, ${t.a})`:")"),{min:Q,max:W,abs:X,round:Y,PI:tt}=Math,et=(t,e=100,r=0)=>t>e?e:t<r?r:t,rt=t=>Y((t%=360)<0?t+360:t),st=t=>parseInt(t,16),nt=t=>{let e,r,{config:s,s:n}=t,o=!1;const a=()=>{const t={};o||(n.t(),o=!0),O(e,((e,r)=>t[e]=r.value)),n.o(t[r]||J(t,r),!0)},l=()=>{e={};const t="hex"===r||s.singleInput?[r]:[...r+(s.opacity?"a":"")];return E(t.map((t=>B("label","",[e[t]=B(u,"alwan__input",[],{type:"text",value:n.i[t]}),B("span","",t)]))),"alwan__inputs")};return{p({inputs:e,format:s,i18n:h}){let c,p,_,w,b=v;return!0!==e&&(e=e||{},b=b.filter((t=>e[t]))),w=b.length,b=w?b:v,r=b[W(b.indexOf(s),0)],n.u(r),w?(w>1&&(_=F(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>'),q(_,i,(()=>{r=b[(b.indexOf(r)+1)%w],n.u(r),c=I(c,l())}))),c=l(),p=E(c),q(p,u,a),q(p,d,(()=>{n._(),o=!1})),q(p,"focusin",(t=>t.target.select())),q(p,g,(e=>"Enter"===e.key&&t.c.v(!1))),R([p,_])):null},m(t){o||O(e||{},((e,r)=>r.value=t[e]+""))}}},ot={ArrowLeft:-1,ArrowRight:1},at={ArrowUp:-1,ArrowDown:1},it=({s:t})=>{let r,s,n,o,a;const i={s:0,l:0},p=(e,r)=>{let l,h,[,,c,p]=a;n=e=et(e,c),o=r=et(r,p),N(s,e,r),l=1-r/p,h=l*(1-e/(2*c)),i.s=1===h||0===h?0:(l-h)/Q(h,1-h)*100,i.l=100*h,t.$(i)},u=({x:t,y:e,buttons:r})=>{r?p(t-a[0],e-a[1]):d()},d=()=>{t._(),G(e,h,u),G(e,c,d)},_=s=>{r.setPointerCapture(s.pointerId),t.t(),a=P(r),p(s.x-a[0],s.y-a[1]),q(e,h,u),q(e,c,d)},w=e=>{const s=e.key,i=ot[s]||0,l=at[s]||0;(i||l)&&(e.preventDefault(),a=P(r),t.t(),p(n+i*a[2]/100,o+l*a[3]/100),t._())};return{p:({i18n:t,disabled:e})=>(s=E("","alwan__cursor"),r=E(s,"alwan__selector",t.picker||t.palette),e||(r.tabIndex=0,q(r,l,_),q(r,g,w)),r),A(t,e){t=(e/=100)+t/100*Q(e,1-e),a=P(r),n=(t?2*(1-e/t):0)*a[2],o=(1-t)*a[3],N(s,n,o)}}},lt=({s:t,e:e})=>{let r,s,n;return{p:({opacity:o,i18n:{sliders:a}})=>(r=T(a.hue,"hue",360),s=o?T(a.alpha,"alpha",1,.01):null,n=E([r,s]),q(n,d,(()=>e.k(d))),q(n,u,(({target:e})=>t.$({[e===r?"h":"a"]:e.value}))),n),m(t,e){r.value=t+"",s&&(s.value=e+"")}}},ht=t=>{let e=!1;return{p({swatches:r,toggleSwatches:s,i18n:{buttons:n}}){let o,a,l;return S(r)&&r.length?(o=E(r.map((e=>{const r=f(e)?e:J(e,$(e)),s=F(n.swatch,"alwan__swatch","",r);return j(s,r),q(s,i,(()=>t.s.o(r,!0,!0))),s})),"alwan__swatches"),s?(l=(r=!e)=>{e=r,D(o,"collapse",e),t.c.C()},a=F(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>'),q(a,i,(()=>l())),l(e),E([o,a])):o):o}}},ct=t=>({p({preview:e,copy:r,i18n:s}){let n,o,a,l,h;return r&&(n=F(s.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,l]=n.children,o=t=>{Z(a,t),Z(l,!t)},o(!1),h=navigator.clipboard,h&&(q(n,i,(()=>h.writeText(t.s.S()).then((()=>o(!0))))),q(n,"blur",(()=>o())),q(n,"mouseleave",(()=>n.blur())))),e?E(n,"alwan__preview"):n}}),pt=(t,e)=>t.map((t=>S(t)?R(pt(t,e)):t.p(e))),gt={top:[1,5,4,0],bottom:[5,1,4,0],right:[4,0,1,5],left:[0,4,1,5]},ut={start:[0,1,2],center:[1,0,2],end:[2,1,0]},dt=(t,s)=>{let a,h=E(),c=!1,u=null;const{config:d,s:_}=t,w=((t,e)=>{const r=F(),s=r.className+" alwan__ref ";let n;return t&&t.id&&(r.id=t.id),{H:o=>(n=I(n||t,o.preset||!t?r:t),n===r&&(n.className=(s+o.classname).trim(),n.parentNode||L().append(n)),q(n,i,e),n),O(){t?(G(t,i,e),I(n,t)):n.remove()}}})(s,(()=>t.toggle())),v=E(h,"alwan"),[m,$,x,A,k]=(t=>[it,ct,lt,nt,ht].map((e=>e(t))))(t);return _.V((t=>{j(a,t.rgb),h.style.cssText=`--rgb:${t.r},${t.g},${t.b};--a:${t.a};--h:${t.h}`,A.m(t)}),(({a:t,h:e,s:r,l:s})=>{x.m(e,t),m.A(r,s)})),{L(t){const s=this,{id:n,color:o=_.i.hsl}=t,{theme:i,parent:C,toggle:S,popover:H,target:O,disabled:B}=V(d,t);a=w.H(d);let F=M(C)[0],T=M(O)[0]||a;n&&(v.id=n),D(v,"dark","dark"===i),D(v,"block",!H),h=I(h,E(pt([m,[$,x],A,k],d))),Z(a,!H&&!S),u&&(u.M(),u=null),H?(F=F||S&&L(),u=((t,s,n,{margin:o,position:a,closeOnScroll:i,toggle:h,disabled:c},{v:u,B:d})=>{let _;o=y(o)?+o:0;let w=d(),v=t.getRootNode();const[m,$]=f(a)?a.split("-"):[],x=s.style,A=v instanceof ShadowRoot?v:null,k=z(s),C=k[0],S=k.pop(),H=()=>{const e=[r.clientWidth,r.clientHeight],n=P(t),a=P(s),i=U(s,A),l=[-1,-1];x.height="",!w||!_||n[4]<0||n[5]<0||n[0]>e[0]||n[1]>e[1]||((gt[m]||gt.bottom).some((t=>{let r=t%2,s=n[t]+(t<=1?-a[r+2]-o:o);return!(s<0||s+a[r+2]+o>e[r])&&(l[r]=s,r=+!r,(ut[$]||ut.center).some((t=>(s=0===t?n[r]:n[r+4]-(2===t?a[r+2]:(a[r+2]+n[r+2])/2),!(s<0||s+a[r+2]>e[r]||(l[r]=s,0))))))})),N(s,...l.map(((t,r)=>(r&&-1===t&&a[3]>e[r]&&(x.height=e[r]-6+"px",a[3]=e[r]-3),Y((t>=0?t:(e[r]-a[r+2])/2)-i[r]))))))};h&&q(s,g,(t=>{let e,{key:r,target:s,shiftKey:n}=t;"Escape"===r?u(!1):"Tab"===r&&(s===C&&n?e=S:s!==S||n||(e=C),e&&(e.focus(),t.preventDefault()))}));const O=[s,n,...n.labels||[]],V=t=>{const e=t.composedPath();w&&!O.some((t=>e.includes(t)))&&u(!1)},L=new IntersectionObserver((([t])=>{_=t.isIntersecting,u(!c&&_&&(!h||w),!0)})),M=({target:e})=>{(A&&e.contains(A.host)||e.contains(t))&&(H(),i&&u(!1))},B=t=>{t(window,"resize",H),t(e,p,M,b),t(e,l,V),A&&t(A,p,M,b)};return L.observe(t),B(q),{I:()=>_,C(t,e){w=t,_&&(H(),h&&e!==t&&(t?C:n).focus())},M(){x.cssText="",L.unobserve(t),B(G)}}})(T,v,a,d,s)):s.v(!S||!B&&c,!0),F?F.append(v):T.after(v),B&&[a,...z(v)].forEach((t=>{t.disabled=!0})),_.o(o)},v(e=!c,r=!1){(e!==c&&(!u||u.I())&&!d.disabled&&d.toggle||r)&&(D(v,n,e),u&&u.C(e,c),c=e,t.e.k(c?n:o))},B:()=>c,C(){u&&u.C(c,c)},M(){v.remove(),u&&u.M(),w.O()}}},_t=t=>(t<16?"0":"")+t.toString(16),wt=(t,e,r)=>(t%=12,Y(255*(r-e*Q(r,1-r)*W(-1,Q(t-3,9-t,1))))),bt=B("canvas").getContext("2d"),vt={turn:360,rad:180/tt,grad:.9},ft=/a?\(\s*([+-]?\d*\.?\d+)(\w*)?\s*[\s,]\s*([+-]?\d*\.?\d+)%?\s*,?\s*([+-]?\d*\.?\d+)%?(?:\s*[\/,]\s*([+-]?\d*\.?\d+)(%)?)?\s*\)?$/,mt=(t,e)=>{let r,s,n,o="";if(f(t)?o=t.trim():H(t)&&(n=$(t),n&&(o=J(t,n))),/^hsl/.test(o)){const[t,e,r,n,a,i="1",l]=ft.exec(o)||[];t&&(s={h:rt(+e*(vt[r]||1)),s:et(+n),l:et(+a),a:et(+i/(l?100:1),1)})}if(!s){if(/^[\da-f]+$/i.test(o)&&(o="#"+o),bt.fillStyle="#000",bt.fillStyle=o,o=bt.fillStyle,"#"===o[0])r={r:st(o[1]+o[2]),g:st(o[3]+o[4]),b:st(o[5]+o[6]),a:1};else{const[t,e,s,n]=o.match(/[\d\.]+/g).map(Number);r={r:t,g:e,b:s,a:n}}s=(({r:t,g:e,b:r,a:s})=>{const n=W(t/=255,e/=255,r/=255),o=Q(t,e,r),a=n-o,i=(n+o)/2;return{h:rt(60*(0===a?0:n===t?(e-r)/a%6:n===e?(r-t)/a+2:n===r?(t-e)/a+4:0)),s:a?a/(1-X(2*i-1))*100:0,l:100*i,a:s}})(r)}return s.a=e?Y(100*s.a)/100:1,r&&(r.a=s.a),[s,r]},yt=t=>{const e={h:0,s:0,l:0,r:0,g:0,b:0,a:1,rgb:"",hsl:"",hex:""},r=t.config,s=t.e.k;let n,o,i,l;return{i:e,S:()=>e[i],V(t,e){n=t,o=e},u(t){i=r.format=t},$(t,r,o=!0,i){const l=e.hex;A(e,t),A(e,r||(({h:t,s:e,l:r,a:s})=>({r:wt(t/=30,e/=100,r/=100),g:wt(t+8,e,r),b:wt(t+4,e,r),a:s}))(e)),e.s=Y(e.s),e.l=Y(e.l),e.rgb=J(e),e.hsl=J(e,w),e.hex=(({r:t,g:e,b:r,a:s})=>"#"+_t(t)+_t(e)+_t(r)+(s<1?_t(Y(255*s)):""))(e),n(e),l!==e.hex&&(o&&s(a,e),i&&s(d,e))},o(t,s=!1,n){this.$(...mt(t,r.opacity),s,n),o(e)},t(){l=e[i]},_(){l!==e[i]&&s(d,e)}}};return class{static version(){return"2.2.0"}static setDefaults(e){V(t,e)}constructor(e,r){this.config=V({},t),this.e=(t=>{const e={[n]:[],[o]:[],[d]:[],[a]:[]};return{k(r,s=t.s.i){(e[r]||[]).forEach((e=>e(A({type:r,source:t},s))))},F(t,r){r&&!(e[t]||[]).includes(r)&&e[t].push(r)},T(t,r){t?e[t]&&(e[t]=r?e[t].filter((t=>t!==r)):[]):O(e,(t=>{e[t]=[]}))}}})(this),this.s=yt(this),this.c=dt(this,M(e)[0]),this.c.L(r||{})}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.F(t,e)}off(t,e){this.e.T(t,e)}addSwatches(...t){this.c.L({swatches:this.config.swatches.concat(t)})}removeSwatches(...t){this.c.L({swatches:this.config.swatches.filter(((e,r)=>!t.some((t=>y(t)?+t===r:t===e))))})}enable(){this.c.L({disabled:!1})}disable(){this.c.L({disabled:!0})}reset(){this.s.o(this.config.default)}reposition(){this.c.C()}trigger(t){this.e.k(t)}destroy(){this.c.M(),O(this,(t=>{this[t]=null})),k(this,C)}}}();
//# sourceMappingURL=alwan.min.js.map