{"version":3,"file":"js/ripple.a29882b7e83166b9fe2e.min.js","mappings":"6KACqBA,EAAAA,WACjB,WAAYC,IAAW,eACnBC,KAAKC,IAAMF,GAAaG,SAASC,KACjCH,KAAKI,OAAS,KACdJ,KAAKK,WAAa,GAClBL,KAAKM,MAAQ,KACbN,KAAKO,aAAe,KACpBP,KAAKQ,SAAWR,KAAKC,IAAIQ,QAAQC,eAAgB,EACjDV,KAAKW,O,mCAGT,WAAO,WACHX,KAAKY,cACLZ,KAAKC,IAAIY,UAAY,kBAAM,K,yBAG/B,WACIb,KAAKI,QAAUJ,KAAKI,OAAOU,SAC3Bd,KAAKM,OAASN,KAAKM,MAAMS,OACzBf,KAAKgB,QAAU,KACfhB,KAAKM,MAAQ,O,wBAGjB,SAAWW,GAAG,WACVjB,KAAKkB,cACLlB,KAAKO,cAAgBY,aAAanB,KAAKO,cACvCP,KAAKI,OAASF,SAASkB,cAAc,QACrC,IAAMC,EAAWC,KAAKC,IAAIvB,KAAKC,IAAIuB,YAAaxB,KAAKC,IAAIwB,cACnDC,EAASL,EAAW,EACpBM,EAAU3B,KAAKC,IAAI2B,wBACzB5B,KAAKI,OAAOyB,MAAMC,MAAQ9B,KAAKI,OAAOyB,MAAME,OAAS,UAAAV,EAAW,GAAQA,EAAkBrB,KAAKK,WAA1C,MACrDL,KAAKI,OAAOyB,MAAMG,KAAQhC,KAAKQ,OAAsD,MAA5D,UAAkBS,EAAEgB,SAAWN,EAAQK,KAAON,GAA9C,MACzB1B,KAAKI,OAAOyB,MAAMK,IAAOlC,KAAKQ,OAAqD,MAA3D,UAAkBS,EAAEkB,SAAWR,EAAQO,IAAMR,GAA7C,MACxB1B,KAAKI,OAAOgC,UAAUC,IAAI,eAE1BC,EAAAA,GAAAA,IAAStC,KAAKI,OAAQ,CAAEmC,MAAO,IAC3BvC,KAAKQ,QAAQ8B,EAAAA,GAAAA,IAAStC,KAAKI,OAAQ,CAAEmC,MAAO,EAAGC,UAAW,GAAIC,UAAW,KAE7EzC,KAAKC,IAAIyC,YAAY1C,KAAKI,QAE1BJ,KAAKM,MAAQgC,EAAAA,GAAAA,GAAQtC,KAAKI,OAAQ,CAC9BmC,MAAO,EACPI,UAAW,EACXC,SAAU,KAId5C,KAAKO,aAAesC,YAAW,WAC3B,EAAK3B,gBACN,O,yBAGP,WAAc,WACVlB,KAAKC,IAAI6C,iBAAiB,SAAS,SAAC7B,GAAD,OAAO,EAAK8B,WAAW9B,U,EArD7CnB,GA0DjBI,SAAS8C,iBAAiB,iBAAiBC,SAAQ,SAACC,GAAD,OAAS,IAAIpD,EAAOoD","sources":["webpack:///./scripts/ripple.js"],"sourcesContent":["import { gsap } from \"gsap\";\r\nexport default class Ripple {\r\n constructor(container) {\r\n this.$el = container || document.body\r\n this.ripple = null\r\n this.rippleSize = 20\r\n this.tween = null\r\n this.cleanUpTimer = null\r\n this.center = !!this.$el.dataset.rippleCenter || false\r\n this.init()\r\n }\r\n\r\n init() {\r\n this.addListners()\r\n this.$el.getRipple = () => this\r\n }\r\n\r\n clearRipple() {\r\n this.ripple && this.ripple.remove()\r\n this.tween && this.tween.kill()\r\n this.rippple = null\r\n this.tween = null\r\n }\r\n\r\n drawRipple(e) {\r\n this.clearRipple()\r\n this.cleanUpTimer && clearTimeout(this.cleanUpTimer)\r\n this.ripple = document.createElement('span')\r\n const diameter = Math.max(this.$el.clientWidth, this.$el.clientHeight)\r\n const radius = diameter / 2\r\n const eleRect = this.$el.getBoundingClientRect()\r\n this.ripple.style.width = this.ripple.style.height = diameter > 20 ? `${diameter}px` : `${this.rippleSize}px`\r\n this.ripple.style.left = !this.center ? `${e.clientX - (eleRect.left + radius)}px` : '50%'\r\n this.ripple.style.top = !this.center ? `${e.clientY - (eleRect.top + radius)}px` : '50%'\r\n this.ripple.classList.add('ripple-wave')\r\n\r\n gsap.set(this.ripple, { scale: 0 })\r\n if (this.center) gsap.set(this.ripple, { scale: 0, xPercent: -50, yPercent: -50 })\r\n\r\n this.$el.appendChild(this.ripple)\r\n\r\n this.tween = gsap.to(this.ripple, {\r\n scale: 2,\r\n autoAlpha: 0,\r\n duration: 0.4,\r\n //onComplete: () => this.clearRipple()\r\n })\r\n\r\n this.cleanUpTimer = setTimeout(() => {\r\n this.clearRipple()\r\n }, 2000)\r\n }\r\n\r\n addListners() {\r\n this.$el.addEventListener('click', (e) => this.drawRipple(e))\r\n }\r\n}\r\n\r\n(function () {\r\n document.querySelectorAll('[data-ripple]').forEach((ele) => new Ripple(ele))\r\n})()"],"names":["Ripple","container","this","$el","document","body","ripple","rippleSize","tween","cleanUpTimer","center","dataset","rippleCenter","init","addListners","getRipple","remove","kill","rippple","e","clearRipple","clearTimeout","createElement","diameter","Math","max","clientWidth","clientHeight","radius","eleRect","getBoundingClientRect","style","width","height","left","clientX","top","clientY","classList","add","gsap","scale","xPercent","yPercent","appendChild","autoAlpha","duration","setTimeout","addEventListener","drawRipple","querySelectorAll","forEach","ele"],"sourceRoot":""}