ripple-effects
Version:
customizable ripple effect with one line of code
2 lines (1 loc) • 3.63 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).ripple=t()}(this,(function(){"use strict";function e(e){return/^-+/.test(e)?e:/([^\-]+)([A-Z])/g.test(e)?e.replace(/[A-Z]/g,(e=>"-"+e.toLowerCase())):e.toLowerCase()}function t(e,t){const o=e instanceof Element?e:document.createElement(e);if(!t)return o;for(let e in t){const i=t[e];if(/^on([A-Z][a-z A-Z])+/.test(e)){const t=e.toLowerCase().substr(2);o.addEventListener(t,i)}else switch(e){case"style":n(o,i);break;case"appendTo":if(!i)break;i.appendChild(o);break;case"appendChild":o.appendChild(i);break;case"dataset":o.dataset[i[0]]=i[1]||"";break;default:o[e]=i}}return o}function n(t,n){if("string"==typeof n)return getComputedStyle(t).getPropertyValue(e(n));for(let o in n)t.style.setProperty(e(o),n[o])}function o(e){let t=[];for(let n=0;n<e.length;n++)t.push(e[n]);return t}var i=Object.freeze({__proto__:null,tag:t,styles:n,edit:function(e,n){return t(e,n),{on:(t,n,o)=>{t.split(" ").forEach((t=>{e.addEventListener(t,n,o)}))},off:(t,n)=>{t.split(" ").forEach((t=>{e.removeEventListener(t,n)}))}}},isSelfTag:function(e){return["hr","br","img","col","input","embed","area","base","keygen","source","track","wbr"].indexOf(e.tagName.toLowerCase())>-1},offset:function(e){let t,n={top:0,left:0};return t=(e&&e.ownerDocument).documentElement,void 0!==e.getBoundingClientRect&&(n=e.getBoundingClientRect()),{top:n.top+window.pageYOffset-t.clientTop,left:n.left+window.pageXOffset-t.clientLeft}},elementToArray:function(e,t=document){return e instanceof HTMLCollection||e instanceof NodeList?o(e):e instanceof Element?[e]:o(t.querySelectorAll(e))}});const r={background:"rgb(150,150,150)",opacity:.5,zIndex:99,duration:700,timing:"ease",outDuration:800},{tag:s,edit:a,offset:l,elementToArray:c,isSelfTag:f,styles:u}=i;function p(e="_",t={}){t={...r,...t};const{background:n,opacity:o,zIndex:i,duration:p,timing:d,height:h,width:g,triggerOnChild:m=!0,triggerExcept:y="_",outDuration:b}=t,w="ontouchstart"in window;function _(e){if(c(y,this).indexOf(e.target)>-1)return;if(e.target!==this&&!m)return;let t,r;"static"===u(this,"position").toLowerCase()&&(this.style.position="relative");const f=l(this).top,_=l(this).left;try{if(e.touches[1])return;r=e.touches[0].pageX-_,t=e.touches[0].pageY-f}catch{r=e.pageX-_,t=e.pageY-f}const{offsetWidth:v,offsetHeight:x}=this,C=s("div",{appendTo:this,className:"ripleParent__",style:{zIndex:i,height:x+"px",width:v+"px",borderRadius:u(this,"borderRadius"),clipPath:u(this,"clipPath"),transition:`opacity ${b}ms linear`}});s("div",{appendTo:C,className:"riple__",style:{top:t+"px",left:r+"px",opacity:o,width:g||v*Math.PI+"px",height:h||v*Math.PI+"px",background:n,animation:`ripple__ ${p}ms ${d} both`}});const T=w?"touchend touchcancel":"mouseleave mouseup";a(this).on(T,(function e(){C.style.opacity=0,setTimeout((()=>this.removeChild(C)),b),a(this).off(T,e)}))}const v=c(e),x=w?"touchstart":"mousedown";return v.forEach((e=>{if(f(e))return console.error("Ripple is not allowed on self closing tag you need to wrap it");a(e).on(x,_)})),{destroy:()=>{v.forEach((e=>a(e).off(x,_)))}}}return s("style",{innerHTML:".ripleParent__{pointer-events:none;overflow:hidden;background:transparent;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.riple__{border-radius:50%;position: absolute;will-change:transform; pointer-events:none;}@keyframes ripple__{0%{transform: translate(-50%,-50%) scale(0);}100%{transform: translate(-50%,-50%) scale(1);}}",appendTo:document.head}),p.utils=i,p}));