@chaocore/ripple/dist/cjs/rippleCore.cjs

The very easy, performance and flexible to use JavaScript/TypeScript library for creating a ripple effect.

"use strict";var t=require("./options.cjs");function e(t,e){t.setAttribute("data-ripple-count",e.toString())}function n(t){return parseInt(t.getAttribute("data-ripple-count")??"0",10)}exports.createRippleEffect=function(i,o,r={}){const a={...t.defaultOptions,...r};if(o.hasAttribute("disabled")&&a.considerDisabledAttr||a.turnOff)return;const s=window.getComputedStyle(o),l=o.getBoundingClientRect(),{x:c,y:d}=function({clientX:t,clientY:e},{left:n,top:i}){return{x:t-n,y:e-i}}(i,l),u=Math.max(c,l.width-c),p=Math.max(d,l.height-d),f=2.05*Math.sqrt(u*u+p*p),y=function({borderTopLeftRadius:t,borderTopRightRadius:e,borderBottomLeftRadius:n,borderBottomRightRadius:i}){const o=document.createElement("div");return o.style.top="0",o.style.left="0",o.style.width="100%",o.style.height="100%",o.style.display="block",o.style.position="absolute",o.style.borderRadius=`${t} ${e} ${i} ${n}`,o.style.overflow="hidden",o.style.pointerEvents="none",o}(s),m=function(t,e,n,i){const o=document.createElement("div");return o.style.position="absolute",o.style.width=`${n}px`,o.style.height=`${n}px`,o.style.top=`${e}px`,o.style.left=`${t}px`,o.style.background=i,o.style.borderRadius="50%",o.style.transform="translate(-50%,-50%) scale(0)",o}(c,d,f,a.color);!function(t){const i=n(t);e(t,i+1)}(o),"static"===s.position&&(o.style.position="relative",o.setAttribute("data-temporary-relative","")),y.appendChild(m),o.appendChild(y);const v=m.animate({opacity:[a.initialOpacity,a.finalOpacity],transform:["translate(-50%,-50%) scale(0)","translate(-50%,-50%) scale(1)"]},{duration:a.duration,easing:a.easing,fill:"forwards",delay:a.delay});let h=!1;function b(){if(h){m.animate({opacity:[a.finalOpacity,0]},{duration:a.dissolveDuration,fill:"forwards"}).onfinish=()=>{g()}}else h=!0}function g(){y.remove(),function(t){const i=n(t);e(t,i-1)}(o);const t=n(o);0===t&&o.hasAttribute("data-temporary-relative")&&(o.style.position="",o.removeAttribute("data-temporary-relative")),0===t&&function(t){t.removeAttribute("data-ripple-count")}(o)}function E(){document.removeEventListener("pointerup",E),document.removeEventListener("pointercancel",R),b()}function R(){document.removeEventListener("pointerup",E),document.removeEventListener("pointercancel",R),v.currentTime<a.delay?(v.cancel(),g()):b()}document.addEventListener("pointerup",E),document.addEventListener("pointercancel",R),v.onfinish=()=>{b()}};