UNPKG

xtendui

Version:

Xtend UI is a powerful frontend library of Tailwind CSS components enhanced by vanilla js. It helps you build interfaces with advanced interactions and animations.

3 lines 4.74 kB
/*! For license information please see 428.min.js.LICENSE.txt */ "use strict";(globalThis.webpackChunkxtendui=globalThis.webpackChunkxtendui||[]).push([[428],{428:(t,e,n)=>{n.r(e),n.d(e,{MousefollowInit:()=>i});var o=n(5498);class i{_init(){const t=this;t._initVars(),requestAnimationFrame((()=>{t._initLogic()}))}_initVars(){const t=this;t._optionsDefault=o.Xt.merge([t.constructor.optionsDefault,o.Xt.options[t.componentName]]),t._optionsInitial=t.options=o.Xt.merge([t._optionsDefault,t._optionsCustom])}_initLogic(){const t=this,e=t.options;t.ns=t.ns??o.Xt.uniqueId(),t.enable(),o.Xt._initMatches({self:t,optionsInitial:t._optionsInitial}),t.initial=!0,t.targets=t.container.querySelectorAll(e.targets);const n=o.Xt.dataStorage.put(t.container,`mousemove/${t.ns}`,t._mousemove.bind(t));t.container.addEventListener("mousemove",n);const i=o.Xt.dataStorage.put(t.container,`mouseenter/${t.ns}`,t._mouseenter.bind(t));t.container.addEventListener("mouseenter",i);const s=o.Xt.dataStorage.put(t.container,`mouseleave/${t.ns}`,t._mouseleave.bind(t));t.container.addEventListener("mouseleave",s),t.container.dispatchEvent(new CustomEvent(`setup.${t._componentNs}`)),o.Xt.frameDouble({el:t.container,ns:`${t.ns}Init`,func:()=>{t.container.setAttribute(`data-${t.componentName}-init`,""),t.container.dispatchEvent(new CustomEvent(`init.${t._componentNs}`)),t.initial=!1,e.debug&&console.debug(`${t.componentName} init`,t)}}),t.options.disabled&&t.disable()}_mousemove(t){const e=this,n=e.options;if(!e.disabled){void 0===e._width&&e._mouseenter(t);for(const o of e.targets)e.friction({el:o,obj:{x:t.clientX-e._width/2,y:t.clientY-e._height/2,friction:n.friction},transform:n.transform});e.container.dispatchEvent(new CustomEvent(`change.${e._componentNs}`,{detail:t}))}}_mouseenter(t){const e=this,n=e.options;if(!e.disabled&&(!n.mouseCheck||n.mouseCheck({self:e}))){for(const i of e.targets){const s=i.getBoundingClientRect();e._width=s.width,e._height=s.height,n.classSkip||o.Xt.on({el:i});const a=t.clientX-e._width/2,r=t.clientY-e._height/2;n.transform?i.style.transform=`translateX(${a}px) translateY(${r}px)`:(i.style.left=`${a}px`,i.style.top=`${r}px`)}e.container.dispatchEvent(new CustomEvent(`on.${e._componentNs}`,{detail:t}))}}_mouseleave(t){const e=this,n=e.options;if(!e.disabled&&(!n.mouseCheck||n.mouseCheck({self:e}))){for(const t of e.targets)n.classSkip||o.Xt.off({el:t});e.container.dispatchEvent(new CustomEvent(`off.${e._componentNs}`,{detail:t}))}}enable(){const t=this;t.disabled&&(t.disabled=!1,t.container.dispatchEvent(new CustomEvent(`status.${t._componentNs}`)))}disable(){let{skipEvent:t=!1}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const e=this,n=e.options;if(!e.disabled){e.disabled=!0;for(const t of e.targets)n.transform?t.style.transform="":(t.style.left="",t.style.top="");t||e.container.dispatchEvent(new CustomEvent(`status.${e._componentNs}`))}}friction(){let{el:t,obj:e,transform:n=!0}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const i=this;o.Xt.frame({el:t,ns:"xtFrictionFrame"}),o.Xt.frame({el:t,ns:"xtFrictionInitFrame",func:()=>{if(o.Xt.visible({el:t})){let s,a;if(n){const e=o.Xt.getTranslate({el:t});s=e[0],a=e[1]}else{const e=t.getBoundingClientRect();s=e.left,a=e.top}let r=e.x-s,c=e.y-a;const l=e.friction;if(l&&o.Xt.dataStorage.get(t,"xtFrictionX")&&1e3!==o.Xt.durationTimescale?(s+=l({delta:Math.abs(r)})*Math.sign(r),a+=l({delta:Math.abs(c)})*Math.sign(c),n?t.style.transform=`translateX(${s}px) translateY(${a}px)`:(t.style.left=`${s}px`,t.style.top=`${a}px`)):(s=e.x,a=e.y,n?t.style.transform=`translateX(${s}px) translateY(${a}px)`:(t.style.top=`${a}px`,t.style.left=`${s}px`)),o.Xt.dataStorage.set(t,"xtFrictionX",s),o.Xt.dataStorage.set(t,"xtFrictionY",a),l&&1e3!==o.Xt.durationTimescale){const l=e.frictionLimit?e.frictionLimit:1.5;r=e.x-s,c=e.y-a,o.Xt.frame({el:t,ns:"xtFrictionFrame",func:()=>{Math.abs(r)>=l||Math.abs(c)>=l?i.friction({el:t,obj:e,transform:n}):(o.Xt.dataStorage.remove(t,"xtFrictionX"),o.Xt.dataStorage.remove(t,"xtFrictionY"))}})}}}})}reinit(){this._initLogic()}destroy(){const t=this;t.disable({skipEvent:!0}),o.Xt._removeMatches({self:t,optionsInitial:t._optionsInitial});const e=o.Xt.dataStorage.get(t.container,`mousemove/${t.ns}`);t.container.removeEventListener("mousemove",e);const n=o.Xt.dataStorage.get(t.container,`mouseenter/${t.ns}`);t.container.removeEventListener("mouseenter",n);const i=o.Xt.dataStorage.get(t.container,`mouseleave/${t.ns}`);t.container.removeEventListener("mouseleave",i),t.container.removeAttribute(`data-${t.componentName}-init`),o.Xt._remove({name:t.componentName,el:t.container}),t.container.dispatchEvent(new CustomEvent(`destroy.${t._componentNs}`))}}}}]); //# sourceMappingURL=428.min.js.map