2 lines
10 KiB
JavaScript
2 lines
10 KiB
JavaScript
const je={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"}}},k=document,de=k.documentElement,Q="#000000",we="button",be="open",Pe="close",ze="color",D="click",Fe="pointerdown",Re="pointermove",We="pointerup",Ze="scroll",me="keydown",F="input",N="change",X="rgb",fe="hsl",qe={capture:!0},Ke=["hex",X,fe],M=t=>typeof t=="string",Ue=t=>t instanceof Element,ve=t=>Number.isFinite(M(t)&&t.trim()!==""?+t:t),{keys:dt,assign:Y,setPrototypeOf:wt,prototype:bt}=Object,{isArray:ee}=Array,ye=t=>t!=null&&typeof t=="object"&&!ee(t)&&!Ue(t),T=(t,e)=>dt(t).forEach(a=>e(a,t[a])),te=(t,e)=>(T(e,(a,r)=>{Y(t,{[a]:ye(r)?te(t[a]||{},r):r})}),t),Ge=()=>k.body,ae=(t,e=de)=>M(t)&&t.trim()?[...e.querySelectorAll(t)]:Ue(t)?[t]:[],Je=t=>ae(`${F},${we},[tabindex]`,t),O=(t,e,a,r={},o)=>{const s=k.createElement(t);return e&&(s.className=e.trim()),a&&(M(a)?s.innerHTML=a:s.append(...(ee(a)?a:[a]).filter(n=>!!n))),T(M(o)?{...r,"aria-label":o}:r,(n,l)=>s.setAttribute(n,l+"")),s},$=(t,e,a)=>O("div",e,t,{},a),se=(t,e)=>(t&&t!==e&&t.replaceWith(e),e),R=(t="",e="",a,r=t)=>O(we,"alwan__button "+e,a,{type:we,title:r},t),Qe=(t,e,a,r=1)=>O(F,"alwan__slider alwan__"+e,"",{type:"range",max:a,step:r},t),Xe=(t,e)=>t.style.setProperty("--color",e),_e=(t,e,a)=>t.classList.toggle("alwan--"+e,a),xe=(t,e,a)=>{t.style.transform=`translate(${e}px,${a}px)`},j=t=>{const{x:e,y:a,width:r,height:o}=t.getBoundingClientRect();return[e,a,r,o,r+e,o+a]},Ye=t=>$(t,"alwan__container"),$e=(t,e)=>t.style.display=e?"none":"",v=(t,e,a,r)=>t.addEventListener(e,a,r),oe=(t,e,a)=>t.removeEventListener(e,a),ne=(t,e=X)=>e?e+(e===X?`(${t.r}, ${t.g}, ${t.b}`:`(${t.h}, ${t.s}%, ${t.l}%`)+(t.a<1?`, ${t.a})`:")"):Q,{min:W,max:Se,abs:mt,round:B,PI:ft}=Math,Z=(t,e=100,a=0)=>t>e?e:t<a?a:t,et=t=>B((t%=360)<0?t+360:t),Le=t=>parseInt(t,16),vt=t=>{let e,a,{config:r,s:o}=t,s=!1;const n=()=>{const i={};s||(o.t(),s=!0),T(e,(h,w)=>i[h]=w.value),o.o(i[a]||ne(i,a),!0)},l=()=>{e={};const i=a==="hex"||r.singleInput?[a]:[...a+(r.opacity?"a":"")];return $(i.map(h=>O("label","",[e[h]=O(F,"alwan__input",[],{type:"text",value:o.i[h]}),O("span","",h)])),"alwan__inputs")};return{p({inputs:i,format:h,i18n:w}){let f,p,g,b,u=Ke;return i!==!0&&(i=i||{},u=u.filter(c=>i[c])),b=u.length,u=b?u:Ke,a=u[Se(u.indexOf(h),0)],o.u(a),b?(b>1&&(g=R(w.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>'),v(g,D,()=>{a=u[(u.indexOf(a)+1)%b],o.u(a),f=se(f,l())})),f=l(),p=$(f),v(p,F,n),v(p,N,()=>{o._(),s=!1}),v(p,"focusin",c=>c.target.select()),v(p,me,c=>c.key==="Enter"&&t.c.v(!1)),Ye([p,g])):null},m(i){s||T(e||{},(h,w)=>w.value=i[h]+"")}}},yt={ArrowLeft:-1,ArrowRight:1},_t={ArrowUp:-1,ArrowDown:1},xt=({s:t})=>{let e,a,r,o,s;const n={s:0,l:0},l=(p,g)=>{let b,u,[,,c,_]=s;r=p=Z(p,c),o=g=Z(g,_),xe(a,p,g),b=1-g/_,u=b*(1-p/(2*c)),n.s=u===1||u===0?0:(b-u)/W(u,1-u)*100,n.l=100*u,t.$(n)},i=({x:p,y:g,buttons:b})=>{b?l(p-s[0],g-s[1]):h()},h=()=>{t._(),oe(k,Re,i),oe(k,We,h)},w=p=>{e.setPointerCapture(p.pointerId),t.t(),s=j(e),l(p.x-s[0],p.y-s[1]),v(k,Re,i),v(k,We,h)},f=p=>{const g=p.key,b=yt[g]||0,u=_t[g]||0;(b||u)&&(p.preventDefault(),s=j(e),t.t(),l(r+b*s[2]/100,o+u*s[3]/100),t._())};return{p:({i18n:p,disabled:g})=>(a=$("","alwan__cursor"),e=$(a,"alwan__selector",p.picker||p.palette),g||(e.tabIndex=0,v(e,Fe,w),v(e,me,f)),e),A(p,g){p=(g/=100)+p/100*W(g,1-g),s=j(e),r=(p?2*(1-g/p):0)*s[2],o=(1-p)*s[3],xe(a,r,o)}}},$t=({s:t,e})=>{let a,r,o;return{p:({opacity:s,i18n:{sliders:n}})=>(a=Qe(n.hue,"hue",360),r=s?Qe(n.alpha,"alpha",1,.01):null,o=$([a,r]),v(o,N,()=>e.S(N)),v(o,F,({target:l})=>t.$({[l===a?"h":"a"]:l.value})),o),m(s,n){a.value=s+"",r&&(r.value=n+"")}}},re=t=>(t<16?"0":"")+t.toString(16),ke=(t,e,a)=>(t%=12,B(255*(a-e*W(a,1-a)*Se(-1,W(t-3,9-t,1))))),Ae=O("canvas").getContext("2d"),St={turn:360,rad:180/ft,grad:.9},Lt=/a?\(\s*([+-]?\d*\.?\d+)(\w*)?\s*[\s,]\s*([+-]?\d*\.?\d+)%?\s*,?\s*([+-]?\d*\.?\d+)%?(?:\s*[\/,]\s*([+-]?\d*\.?\d+)(%)?)?\s*\)?$/,tt=t=>M(t)?t:ne(t,(e=>ye(e)&&[fe,X].find(a=>[...a].every(r=>ve(e[r])))||"")(t)),at=t=>(Ae.fillStyle=Q,Ae.fillStyle=t,Ae.fillStyle),kt=(t,e)=>{let a,r,o=tt(t).trim();if(/^hsl/.test(o)){const[s,n,l,i,h,w="1",f]=Lt.exec(o)||[];s&&(r={h:et(+n*(St[l]||1)),s:Z(+i),l:Z(+h),a:Z(+w/(f?100:1),1)})}if(!r){if(/^[\da-f]+$/i.test(o)&&(o="#"+o),o=at(o),o[0]==="#")a={r:Le(o[1]+o[2]),g:Le(o[3]+o[4]),b:Le(o[5]+o[6]),a:1};else{const[s,n,l,i]=o.match(/[\d\.]+/g).map(Number);a={r:s,g:n,b:l,a:i}}r=(({r:s,g:n,b:l,a:i})=>{const h=Se(s/=255,n/=255,l/=255),w=W(s,n,l),f=h-w,p=(h+w)/2;return{h:et(60*(f===0?0:h===s?(n-l)/f%6:h===n?(l-s)/f+2:h===l?(s-n)/f+4:0)),s:f?f/(1-mt(2*p-1))*100:0,l:100*p,a:i}})(a)}return r.a=e?B(100*r.a)/100:1,a&&(a.a=r.a),[r,a]},At=t=>{let e=!1;const a=(r,o)=>{let s,n,l,i;var h;return ye(h=r)&&"color"in h?{color:n,label:i}=r:n=r,l=tt(n),l=at(l)===Q?Q:l,i=M(i)?i:l,s=R(o.replace("%label%",i),"alwan__swatch","",i),Xe(s,l),v(s,D,()=>t.s.o(l,!0,!0)),s};return{p({swatches:r,toggleSwatches:o,i18n:{buttons:s}}){let n,l,i;return ee(r)&&r.length?(n=$(r.map(h=>a(h,s.swatch)),"alwan__swatches"),o?(i=(h=!e)=>{e=h,_e(n,"collapse",e),t.c.k()},l=R(s.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>'),v(l,D,()=>i()),i(e),$([n,l])):n):n}}},Ct=t=>({p({preview:e,copy:a,i18n:r}){let o,s,n,l,i;return a&&(o=R(r.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>'),[n,l]=o.children,s=h=>{$e(n,h),$e(l,!h)},s(!1),i=navigator.clipboard,i&&(v(o,D,()=>i.writeText(t.s.C()).then(()=>s(!0))),v(o,"blur",()=>s()),v(o,"mouseleave",()=>o.blur()))),e?$(o,"alwan__preview"):o}}),st=(t,e)=>t.map(a=>ee(a)?Ye(st(a,e)):a.p(e)),ot={top:[1,5,4,0],bottom:[5,1,4,0],right:[4,0,1,5],left:[0,4,1,5]},nt={start:[0,1,2],center:[1,0,2],end:[2,1,0]},Ht=(t,e)=>{let a,r,o=$(),s=!1,n=null;const{config:l,s:i}=t,h=((c,_)=>{const L=R(),P=L.className+" alwan__ref ";let S;return c&&c.id&&(L.id=c.id),{H:q=>(S=se(S||c,q.preset||!c?L:c),S===L&&(S.className=(P+q.classname).trim(),S.parentNode||Ge().append(S)),v(S,D,_),S),O(){c?(oe(c,D,_),se(S,c)):S.remove()}}})(e,()=>t.toggle()),w=$(o,"alwan"),[f,p,g,b,u]=(c=>[xt,Ct,$t,vt,At].map(_=>_(c)))(t);return i.V(c=>{Xe(a,c.rgb),o.style.cssText=`--rgb:${c.r},${c.g},${c.b};--a:${c.a};--h:${c.h}`,b.m(c)},({a:c,h:_,s:L,l:P})=>{g.m(_,c),f.A(L,P)}),{L(c){const _=this,{id:L,color:P=i.i.hsl}=c,{theme:S,parent:q,toggle:le,popover:Ce,target:rt,disabled:He}=te(l,c);a=h.H(l);let K=ae(q)[0],Me=ae(rt)[0]||a;L&&(w.id=L),_e(w,"dark",S==="dark"),o=se(o,$(st([f,[p,g],b,u],l))),$e(a,!Ce&&!le),n&&(n.M(),n=null),Ce?(K=K||le&&Ge(),r=$(w,"alwan__popover-container"),n=((A,E,Oe,ie,{margin:I,position:Be,closeOnScroll:lt,toggle:ce,disabled:it},{v:U,B:ct})=>{let z;I=ve(I)?+I:0;let G=ct();const[ht,pt]=M(Be)?Be.split("-"):[],he=E.style,pe=A.getRootNode(),Ee=Je(E),ge=Ee[0],Ie=Ee.pop(),ue=()=>{const d=[de.clientWidth,de.clientHeight],y=j(A),x=j(E),J=j(Oe),V=[-1,-1];he.height="",!G||!z||y[4]<0||y[5]<0||y[0]>d[0]||y[1]>d[1]||((ot[ht]||ot.bottom).some(C=>{let m=C%2,H=y[C]+(C<=1?-x[m+2]-I:I);return!(H<0||H+x[m+2]+I>d[m])&&(V[m]=H,m=+!m,(nt[pt]||nt.center).some(Te=>(H=Te===0?y[m]:y[m+4]-(Te===2?x[m+2]:(x[m+2]+y[m+2])/2),!(H<0||H+x[m+2]>d[m]||(V[m]=H,0)))))}),xe(E,...V.map((C,m)=>(m&&C===-1&&x[3]>d[m]&&(he.height=d[m]-6+"px",x[3]=d[m]-3),B((C>=0?C:(d[m]-x[m+2])/2)-J[m])))))};ce&&v(E,me,d=>{let y,{key:x,target:J,shiftKey:V}=d;x==="Escape"?U(!1):x==="Tab"&&(J===ge&&V?y=Ie:J!==Ie||V||(y=ge),y&&(y.focus(),d.preventDefault()))});const gt=[E,ie,...ie.labels||[]],ut=d=>{const y=d.composedPath();G&&!gt.some(x=>y.includes(x))&&U(!1)},Ve=new IntersectionObserver(([d])=>{z=d.isIntersecting,U(!it&&z&&(!ce||G),!0)}),De=({target:d})=>{(pe instanceof ShadowRoot&&d.contains(pe.host)||d.contains(A))&&(ue(),lt&&U(!1))},Ne=d=>{d(window,"resize",ue),d(k,Ze,De,qe),d(pe,Ze,De,qe),d(k,Fe,ut)};return Ve.observe(A),Ne(v),{I:()=>z,k(d,y){G=d,z&&(ue(),ce&&y!==d&&(d?ge:ie).focus())},M(){he.cssText="",Ve.unobserve(A),Ne(oe),Oe.remove()}}})(Me,w,r,a,l,_)):(r=w,_.v(!le||!He&&s,!0)),K?K.append(r):Me.after(r),He&&[a,...Je(w)].forEach(A=>{A.disabled=!0}),i.o(P)},v(c=!s,_=!1){(c!==s&&(!n||n.I())&&!l.disabled&&l.toggle||_)&&(_e(w,be,c),n&&n.k(c,s),s=c,t.e.S(s?be:Pe))},B:()=>s,k(){n&&n.k(s,s)},M(){w.remove(),n&&n.M(),h.O()}}},Mt=t=>{const e={h:0,s:0,l:0,r:0,g:0,b:0,a:1,rgb:"",hsl:"",hex:""},a=t.config,r=t.e.S;let o,s,n,l;return{i:e,C:()=>e[n],V(i,h){o=i,s=h},u(i){n=a.format=i},$(i,h,w=!0,f){const p=e.hex;Y(e,i),Y(e,h||(({h:g,s:b,l:u,a:c})=>({r:ke(g/=30,b/=100,u/=100),g:ke(g+8,b,u),b:ke(g+4,b,u),a:c}))(e)),e.s=B(e.s),e.l=B(e.l),e.rgb=ne(e),e.hsl=ne(e,fe),e.hex=(({r:g,g:b,b:u,a:c})=>"#"+re(g)+re(b)+re(u)+(c<1?re(B(255*c)):""))(e),o(e),p!==e.hex&&(w&&r(ze,e),f&&r(N,e))},o(i,h=!1,w){this.$(...kt(i,a.opacity),h,w),s(e)},t(){l=e[n]},_(){l!==e[n]&&r(N,e)}}};class Ot{static version(){return"2.3.0"}static setDefaults(e){te(je,e)}constructor(e,a){this.config=te({},je),this.e=(r=>{const o={[be]:[],[Pe]:[],[N]:[],[ze]:[]};return{S(s,n=r.s.i){(o[s]||[]).forEach(l=>l(Y({type:s,source:r},n)))},j(s,n){n&&!(o[s]||[]).includes(n)&&o[s].push(n)},D(s,n){s?o[s]&&(o[s]=n?o[s].filter(l=>l!==n):[]):T(o,l=>{o[l]=[]})}}})(this),this.s=Mt(this),this.c=Ht(this,ae(e)[0]),this.c.L(a||{})}setOptions(e){e&&this.c.L(e)}setColor(e){return this.s.o(e),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(e,a){this.e.j(e,a)}off(e,a){this.e.D(e,a)}addSwatches(...e){this.c.L({swatches:this.config.swatches.concat(e)})}removeSwatches(...e){this.c.L({swatches:this.config.swatches.filter((a,r)=>!e.some(o=>ve(o)?+o===r:o===a))})}enable(){this.c.L({disabled:!1})}disable(){this.c.L({disabled:!0})}reset(){this.s.o(this.config.default)}reposition(){this.c.k()}trigger(e){this.e.S(e)}destroy(){this.c.M(),T(this,e=>{this[e]=null}),wt(this,bt)}}export{Ot as default};
|