@erichsia7/ripple/dist/index.min.js

Add ripple effect to anything

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("ripple",[],t):"object"==typeof exports?exports.ripple=t():e.ripple=t()}(self,(()=>(()=>{"use strict";var e={d:(t,n)=>{for(var o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};function n(){return"ontouchstart"in document.documentElement}e.d(t,{default:()=>a});var o={supportTouch:n,addTo:function(e,t,n,a){var c=document.querySelectorAll(e);if(0===c.length)throw new Error("Element was not found.");"function"==typeof a?a=[a]:Array.isArray(a)&&void 0!==a.length||(a=[]);for(var i=0;i<c.length;i++)o.__addToSingleElement(c[i],t,n,a[i]);return"Ripple effect was added to ".concat(c.length," element").concat(c.length>1?"s":"",".")},__addToSingleElement:function(e,t,o,a){var c=n()?"touchstart":"mousedown";e.addEventListener(c,(function(n){for(var c="0123456789abcdefghijklmnopqrstuvwxyz",i="",r=0;r<16;r++){var l=Math.floor(36*Math.random());i+=c.substring(l,l+1)}var p=document.documentElement.scrollLeft,m=document.documentElement.scrollTop,d=n.pageX,s=n.pageY,u=e.getBoundingClientRect(),f=u.x+p,h=u.y+m,g=e.clientWidth,v=e.clientHeight,y=d-f,w=s-h,b=Math.max(g,v),E=y-.5*b,M=w-.5*b,x=w-0,k=y-0,L=g-y,B=v-w,I=Math.sqrt(Math.pow(x,2)+Math.pow(k,2)),T=Math.sqrt(Math.pow(x,2)+Math.pow(L,2)),j=Math.sqrt(Math.pow(B,2)+Math.pow(k,2)),q=Math.sqrt(Math.pow(B,2)+Math.pow(L,2)),C=Math.max(2,Math.max(I,T,j,q)/(b/2)),S=getComputedStyle(e).getPropertyValue("position");"absolute"!==S&&"fixed"!==S&&(S="relative");var _=".ripple-element-".concat(i," {position: ").concat(S,";overflow: hidden;width: ").concat(g,"px;height: ").concat(v,"px;outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-mask-image: -webkit-radial-gradient(white, black);mask-image: -webkit-radial-gradient(white, black);}.ripple-element-ripple-").concat(i," {background:").concat(t,";width: ").concat(b,"px; height:").concat(b,"px;border-radius: 50%;position: absolute; top: ").concat(M,"px; left:").concat(E,"px;transform: scale(0); opacity: 0;animation-duration: ").concat(o,"ms;animation-name: ripple-animation-opacity-").concat(i,",ripple-animation-zoom-").concat(i,";animation-iteration-count: forward;animation-timing-function:linear;-webkit-user-select: none;user-select: none;}@keyframes ripple-animation-opacity-").concat(i," {0% {opacity: 0.15;}60% {opacity: 0.15;}100% {opacity: 0;} } @keyframes ripple-animation-zoom-").concat(i," {0% {transform: scale(0.1)} 65% {transform: scale(").concat(C,")} 100% {transform: scale(").concat(C,")}}");e.classList.add("ripple-element-".concat(i));var z=document.createElement("style");z.innerHTML=_,z.id="ripple-css-".concat(i),e.appendChild(z);var A,O,P=document.createElement("div");(P.id="ripple-element-ripple-".concat(i),P.classList.add("ripple-element-ripple-".concat(i)),e.appendChild(P),"function"==typeof a)?null===(A=document.getElementById("ripple-element-ripple-".concat(i)))||void 0===A||A.addEventListener("animationstart",(function(){setTimeout((function(){a();var t=document.getElementById("ripple-element-ripple-".concat(i)),n=document.getElementById("ripple-css-".concat(i));t&&(e.classList.remove("ripple-element-".concat(i)),t.remove()),n&&n.remove()}),1*o)}),{once:!0}):(null===(O=document.getElementById("ripple-element-ripple-".concat(i)))||void 0===O||O.addEventListener("animationend",(function(){var t=document.getElementById("ripple-element-ripple-".concat(i)),n=document.getElementById("ripple-css-".concat(i));t&&(e.classList.remove("ripple-element-".concat(i)),t.remove()),n&&n.remove()}),{once:!0}),setTimeout((function(){var t=document.getElementById("ripple-element-ripple-".concat(i)),n=document.getElementById("ripple-css-".concat(i));t&&(e.classList.remove("ripple-element-".concat(i)),t.remove()),n&&n.remove()}),o+50))}))}};const a=o;return t=t.default})()));