wheel-duo/dist/index.cjs.js

Animated dual-wheel component with customizable spin, sway, and callback support

"use strict";var R=t=>{throw TypeError(t)};var A=(t,s,i)=>s.has(t)||R("Cannot "+i);var e=(t,s,i)=>(A(t,s,"read from private field"),i?i.call(t):s.get(t)),a=(t,s,i)=>s.has(t)?R("Cannot add the same private member more than once"):s instanceof WeakSet?s.add(t):s.set(t,i),h=(t,s,i,r)=>(A(t,s,"write to private field"),r?r.call(t,i):s.set(t,i),i),n=(t,s,i)=>(A(t,s,"access private method"),i);var l,c,f,u,d,m,g,L,y,k,E,v,w,p,S,$,x,o,C,I,j,O,D,b,M,z,P,B;module.exports=(B=class{constructor(t){a(this,o);a(this,l);a(this,c);a(this,f);a(this,u);a(this,d,null);a(this,m,null);a(this,g,new WeakMap);a(this,L);a(this,y);a(this,k);a(this,E);a(this,v);a(this,w);a(this,p);a(this,S,!1);a(this,$,()=>{n(this,o,I).call(this)});a(this,x,()=>{n(this,o,j).call(this)});var i,r;this.options=t,h(this,L,t.rotations??6),h(this,y,t.duration??5e3),h(this,k,t.overshootDeg??15),h(this,E,t.returnDuration??750),h(this,v,((i=t.swayOptions)==null?void 0:i.amplitude)??6),h(this,w,((r=t.swayOptions)==null?void 0:r.period)??1500);const s=t.rootSelector.trim();h(this,p,s.startsWith(".")?s.slice(1):s)}init(){const t=document.querySelector(this.options.rootSelector),s=t==null?void 0:t.querySelector(this.options.firstWheelSelector),i=t==null?void 0:t.querySelector(this.options.secondWheelSelector),r=t==null?void 0:t.querySelector(this.options.triggerSelector);t&&s&&i&&r&&(h(this,l,t),h(this,c,s),h(this,f,i),h(this,u,r),n(this,o,C).call(this,e(this,c)),n(this,o,C).call(this,e(this,f)),n(this,o,D).call(this,e(this,c)),e(this,u).addEventListener("click",e(this,$)))}destroy(){n(this,o,b).call(this),n(this,o,P).call(this,e(this,c)),n(this,o,P).call(this,e(this,f)),e(this,u).removeEventListener("click",e(this,$)),e(this,u).removeEventListener("click",e(this,x)),h(this,g,new WeakMap)}reset(){this.destroy(),e(this,c).style.transform="",e(this,f).style.transform="";const t=e(this,p);e(this,l).classList.remove(`${t}--state-one-active`,`${t}--state-one-complete`,`${t}--state-two-active`,`${t}--state-two-complete`),h(this,S,!1),this.init()}},l=new WeakMap,c=new WeakMap,f=new WeakMap,u=new WeakMap,d=new WeakMap,m=new WeakMap,g=new WeakMap,L=new WeakMap,y=new WeakMap,k=new WeakMap,E=new WeakMap,v=new WeakMap,w=new WeakMap,p=new WeakMap,S=new WeakMap,$=new WeakMap,x=new WeakMap,o=new WeakSet,C=function(t){if(e(this,S))return;const s=t.animate([{filter:"blur(0)"},{filter:"blur(0.4px)",offset:.5},{filter:"blur(0)"}],{duration:64,fill:"forwards"});t.getBoundingClientRect(),s.onfinish=()=>{var i;(i=s.commitStyles)==null||i.call(s),s.cancel()},t.querySelectorAll("img").forEach(i=>{var r;(r=i.decode)==null||r.call(i).catch(()=>{})}),h(this,S,!0)},I=async function(){const[t]=this.options.targetAngles,s=e(this,p);e(this,l).classList.add(`${s}--state-one-active`),n(this,o,b).call(this),await n(this,o,O).call(this,e(this,c),t),e(this,l).classList.replace(`${s}--state-one-active`,`${s}--state-one-complete`),n(this,o,D).call(this,e(this,f)),e(this,u).removeEventListener("click",e(this,$)),e(this,u).addEventListener("click",e(this,x),{once:!0})},j=async function(){var i,r;const[,t]=this.options.targetAngles,s=e(this,p);e(this,l).classList.add(`${s}--state-two-active`),n(this,o,b).call(this),await n(this,o,O).call(this,e(this,f),t),e(this,l).classList.replace(`${s}--state-two-active`,`${s}--state-two-complete`),(r=(i=this.options).callback)==null||r.call(i)},O=async function(t,s){const i=n(this,o,z).call(this,t),r=(n(this,o,M).call(this,s)-n(this,o,M).call(this,i)+360)%360,W=i+360*e(this,L)+r,F=W+e(this,k),q=e(this,y)+e(this,E),G=e(this,y)/q,H=t.animate([{transform:`rotate(${i}deg)`,easing:"cubic-bezier(0.86,0,0.07,1)"},{offset:G,transform:`rotate(${F}deg)`,easing:"cubic-bezier(0.77,0,0.175,1)"},{transform:`rotate(${W}deg)`}],{duration:q,fill:"forwards"}),J=t.animate([{filter:"blur(0)"},{offset:.2,filter:"blur(1px)"},{offset:.4,filter:"blur(2px)"},{offset:.65,filter:"blur(1px)"},{offset:1,filter:"blur(0)"}],{duration:q,fill:"forwards",easing:"ease-in-out"});await Promise.all([H.finished,J.finished]),e(this,g).set(t,n(this,o,M).call(this,W))},D=function(t){n(this,o,b).call(this),h(this,m,t);const s=e(this,g).get(t)??n(this,o,z).call(this,t);h(this,d,t.animate([{transform:`rotate(${s-e(this,v)}deg)`},{transform:`rotate(${s+e(this,v)}deg)`}],{duration:e(this,w),direction:"alternate",iterations:1/0,easing:"ease-in-out",delay:-e(this,w)/2}))},b=function(){var i,r;if(!e(this,d)||!e(this,m))return;const t=e(this,m),s=getComputedStyle(t).transform;(r=(i=e(this,d)).commitStyles)==null||r.call(i),e(this,d).cancel(),t.style.transform=s!=="none"?s:"",h(this,d,null),h(this,m,null)},M=function(t){return(t%360+360)%360},z=function(t){const s=getComputedStyle(t).transform;if(!s||s==="none")return 0;const{a:i,b:r}=new DOMMatrixReadOnly(s);return 180*Math.atan2(r,i)/Math.PI},P=function(t){t.getAnimations().forEach(s=>s.cancel())},B);