@cicara/material-ripple/dist/index.esm.js

material ripple effect implemented using native js

class e{constructor(e){this.options=Object.assign({color:"rgba(0, 0, 0, 0.1)",centered:!1,unbounded:!1,exitDuration:1024,enterDuration:512,rippleWrapper:e.element},e),this.onElementPointerDown=this.onElementPointerDown.bind(this),this.init()}get element(){return this.options.element}get rippleWrapper(){return this.options.rippleWrapper}destroy(){this.element.classList.remove("material-ripple","material-ripple--unbounded"),this.element.removeEventListener("pointerdown",this.onElementPointerDown)}init(){this.injectStyles(),this.element.classList.add("material-ripple"),this.options.unbounded&&this.element.classList.add("material-ripple--unbounded"),this.element.addEventListener("pointerdown",this.onElementPointerDown)}onElementPointerDown(e){const t=this.createRipple(e);this.element.addEventListener("pointerup",(()=>{this.removeRipple(t)}),{once:!0}),this.element.addEventListener("pointerleave",(()=>{this.removeRipple(t)}),{once:!0})}createRipple(e){let t;const{clientX:n,clientY:i}=e,o=document.createElement("div"),s=o.style;s.width="100px",s.height="100px",s.margin="-50px 0px 0px -50px",s.zIndex=this.options.zIndex?`${this.options.zIndex}`:"inhert",s.opacity="1",s.position="absolute",s.transform="scale(0.2)",s.background=`${this.options.color}`,s.borderRadius="50%",s.pointerEvents="none",s.transition=`transform ${this.options.enterDuration}ms ease-out 0s, opacity ${this.options.exitDuration}ms ease-out ${this.options.enterDuration/2}ms`,this.rippleWrapper.appendChild(o);const{width:r,height:p,top:l,left:a,right:d,bottom:h}=this.element.getBoundingClientRect();return this.options.centered?(s.top=p/2+"px",s.left=r/2+"px",t=2*Math.sqrt((r/2)**2+(p/2)**2)/100):(s.top=i-l+"px",s.left=n-a+"px",t=2*Math.sqrt(Math.max(n-a,d-n)**2+Math.max(i-l,h-i)**2)/100),s.transform=`scale(${t}) translate(0px, 0px)`,o}removeRipple(e){e.isConnected&&(e.addEventListener("transitionend",(t=>{"opacity"===t.propertyName&&e.remove()})),e.style.opacity="0")}injectStyles(){null===e.style&&(e.style=document.createElement("style"),e.style.classList.add("material-ripple"),e.style.innerHTML=".material-ripple { position: relative; overflow: hidden; } .material-ripple--unbounded { overflow: visible; }",document.head.appendChild(e.style))}}e.style=null;export{e as Ripple};