@phucbm/magnetic-button/dist/magnetic-button.min.js

A lightweight TypeScript library that creates smooth magnetic attraction effects for HTML elements

/*!
 * @phucbm/magnetic-button v0.0.3
 * A lightweight TypeScript library that creates smooth magnetic attraction effects for HTML elements
 * @license MIT
 */

"use strict";var MagneticButton=(()=>{var l=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var M=Object.prototype.hasOwnProperty;var v=(n,t,e)=>t in n?l(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var w=(n,t)=>{for(var e in t)l(n,e,{get:t[e],enumerable:!0})},x=(n,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of E(t))!M.call(n,a)&&a!==e&&l(n,a,{get:()=>t[a],enumerable:!(i=g(t,a))||i.enumerable});return n};var b=n=>x(l({},"__esModule",{value:!0}),n);var d=(n,t,e)=>v(n,typeof t!="symbol"?t+"":t,e);var B={};w(B,{default:()=>L});function y(n,t,e=.1){return n*(1-e)+t*e}var u=y;var r=class r{constructor(t,e={}){d(this,"settings",{activeClass:"magnetizing",attraction:.3,distance:200,fraction:.1,onEnter:()=>{},onExit:()=>{},onUpdate:()=>{}});d(this,"isEnter",!1);d(this,"lerpPos",{x:0,y:0});if(!t){document.querySelectorAll("[data-magnetic]").forEach(o=>{r.initializedElements.has(o)||new r(o,e)});return}if(r.initializedElements.has(t))return;r.initializedElements.add(t);let i=parseFloat(t.getAttribute("data-distance")||""),a=parseFloat(t.getAttribute("data-attraction")||""),c=parseFloat(t.getAttribute("data-fraction")||"");this.settings={...this.settings,attraction:isNaN(a)?e.attraction??this.settings.attraction:a,distance:isNaN(i)?e.distance??this.settings.distance:i,fraction:isNaN(c)?e.fraction??this.settings.fraction:c,...e},window.addEventListener("mousemove",o=>this.magnetize(t,o)),t.classList.add("is-magnetized")}magnetize(t,e){let i=this.calculateCoordinates(t,e.clientX,e.clientY);i.distance<this.settings.distance?(this.animateButton(t,i.deltaX,i.deltaY),this.isEnter||(this.isEnter=!0,t.classList.add(this.settings.activeClass),this.settings.onEnter(i)),this.settings.onUpdate(i)):(this.animateButton(t,0,0),this.isEnter&&(this.isEnter=!1,t.classList.remove(this.settings.activeClass),this.settings.onExit(i)))}animateButton(t,e,i){this.lerpPos.x=u(this.lerpPos.x,e,this.settings.fraction),this.lerpPos.y=u(this.lerpPos.y,i,this.settings.fraction),t.style.transform=`translate(${this.lerpPos.x}px, ${this.lerpPos.y}px)`}calculateCoordinates(t,e,i){let a=t.getBoundingClientRect(),c=a.left+t.offsetWidth/2,o=a.top+t.offsetHeight/2,p=(e-c)*this.settings.attraction,m=(i-o)*this.settings.attraction,h=Math.sqrt(Math.pow(e-c,2)+Math.pow(i-o,2));return{deltaX:p,deltaY:m,distance:h}}};d(r,"initializedElements",new WeakSet);var s=r;typeof window<"u"&&typeof document<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>new s):new s);new s;var f=s;f.init=(n,t)=>new s(n,t);var L=f;typeof window<"u"&&(window.MagneticButton=f);return b(B);})();
/*! Bundled license information:

@phucbm/lerp/dist/index.js:
  (*!
   * @phucbm/lerp v1.0.0
   * A lightweight TypeScript utility function for linear interpolation
   * @license MIT
   *)
*/
//# sourceMappingURL=magnetic-button.min.js.map