{"version":3,"file":"index-ZpUf_owI.js","sources":["../../../app/frontend/src/global/addons/ripple-effect/index.ts"],"sourcesContent":["import './index.scss';\n\ninterface RippletConfig {\n classes: string[];\n}\n\nconst defaultConfig: RippletConfig = {\n classes: ['[data-ripplet]', '.y-btn', '.gw-button']\n};\n\n/**\n * Initializes the ripple effect by adding an event listener to the body\n * and setting up periodic ripple effects for elements with a specific data attribute.\n */\nfunction initRipplet(config: RippletConfig = defaultConfig): void {\n document.body.addEventListener('pointerdown', (e) => handlePointerDownEvent(e, config), { passive: true });\n initializePeriodicRipples(config);\n}\n\n/**\n * Handle the pointerdown event to add a ripple effect.\n * @param e - The pointer event triggered on pointer down.\n * @param config - The ripple effect configuration.\n */\nfunction handlePointerDownEvent(e: PointerEvent, config: RippletConfig): void {\n const targetElement = getTargetElement(e, config);\n if (targetElement && !targetElement.hasAttribute('data-no-ripple')) {\n applyRippleEffect(e, targetElement);\n }\n}\n\n/**\n * Returns the target element for the ripple effect.\n * @param e - The pointer event triggered on pointer down.\n * @param config - The ripple effect configuration.\n * @returns - The target element for the ripple effect or null.\n */\nfunction getTargetElement(e: PointerEvent, config: RippletConfig): HTMLElement | null {\n for (const selector of config.classes) {\n const el = (e.target as Element).closest(selector) as HTMLElement;\n if (el && !isElementDisabled(el)) return el;\n }\n return null;\n}\n\n/**\n * Checks if the element is disabled.\n * @param element - The element to check.\n * @returns - True if the element is disabled, false otherwise.\n */\nfunction isElementDisabled(element: HTMLElement): boolean {\n return element.hasAttribute('disabled') || element.classList.contains('disabled') || element.getAttribute('aria-disabled') === 'true';\n}\n\n/**\n * Apply the ripple effect to the target element.\n * @param e - The pointer event triggered on pointer down.\n * @param targetElement - The element to apply the ripple effect to.\n * @param isPeriodic - Whether the ripple is triggered periodically.\n */\nfunction applyRippleEffect(e: PointerEvent, targetElement: HTMLElement, isPeriodic: boolean = false): void {\n const rect = targetElement.getBoundingClientRect();\n const diameter = calculateDiameter(rect.width, rect.height);\n if (isPeriodic) {\n targetElement.classList.add('periodic-ripple');\n } else {\n targetElement.classList.remove('periodic-ripple');\n }\n applyCSSVariables(targetElement, e.clientX - rect.left, e.clientY - rect.top, diameter);\n}\n\n/**\n * Calculates the diameter for the ripple effect.\n * @param width - The width of the target element.\n * @param height - The height of the target element.\n * @returns - The diameter for the ripple effect.\n */\nfunction calculateDiameter(width: number, height: number): number {\n return Math.sqrt(width ** 2 + height ** 2) * 2;\n}\n\n/**\n * Applies CSS variables for the ripple effect to the target element.\n * @param element - The target element.\n * @param x - The x-coordinate of the event relative to the target element.\n * @param y - The y-coordinate of the event relative to the target element.\n * @param diameter - The diameter for the ripple effect.\n */\nfunction applyCSSVariables(element: HTMLElement, x: number, y: number, diameter: number): void {\n element.style.cssText = `--s: 0; --o: 1;`;\n element.offsetTop; // Triggering reflow for CSS transition\n element.style.cssText = `--t: 1; --o: 0; --d: ${diameter}; --x:${x}; --y:${y};`;\n}\n\n/**\n * Initializes periodic ripple effects for elements with the data-ripplet-interval attribute.\n * @param config - The ripple effect configuration.\n */\nfunction initializePeriodicRipples(config: RippletConfig): void {\n const elements = document.querySelectorAll('[data-ripplet-interval]');\n elements.forEach((element) => {\n const interval = parseInt(element.getAttribute('data-ripplet-interval') || '0', 10);\n if (interval > 0) {\n setInterval(() => {\n const rect = element.getBoundingClientRect();\n const event = new PointerEvent('pointerdown', {\n bubbles: true,\n clientX: rect.left + rect.width / 2,\n clientY: rect.top + rect.height / 2\n });\n element.dispatchEvent(event);\n applyRippleEffect(event, element, true);\n }, interval);\n }\n });\n}\n\nexport { initRipplet };\n"],"names":["defaultConfig","initRipplet","config","handlePointerDownEvent","initializePeriodicRipples","e","targetElement","getTargetElement","applyRippleEffect","selector","el","isElementDisabled","element","isPeriodic","rect","diameter","calculateDiameter","applyCSSVariables","width","height","x","y","interval","event"],"mappings":"AAMA,MAAMA,EAA+B,CACnC,QAAS,CAAC,iBAAkB,SAAU,YAAY,CACpD,EAMA,SAASC,EAAYC,EAAwBF,EAAqB,CAChE,SAAS,KAAK,iBAAiB,cAAgB,GAAMG,EAAuB,EAAGD,CAAM,EAAG,CAAE,QAAS,EAAA,CAAM,EACzGE,EAAgC,CAClC,CAOA,SAASD,EAAuBE,EAAiBH,EAA6B,CACtE,MAAAI,EAAgBC,EAAiBF,EAAGH,CAAM,EAC5CI,GAAiB,CAACA,EAAc,aAAa,gBAAgB,GAC/DE,EAAkBH,EAAGC,CAAa,CAEtC,CAQA,SAASC,EAAiBF,EAAiBH,EAA2C,CACzE,UAAAO,KAAYP,EAAO,QAAS,CACrC,MAAMQ,EAAML,EAAE,OAAmB,QAAQI,CAAQ,EACjD,GAAIC,GAAM,CAACC,EAAkBD,CAAE,EAAU,OAAAA,CAAA,CAEpC,OAAA,IACT,CAOA,SAASC,EAAkBC,EAA+B,CACxD,OAAOA,EAAQ,aAAa,UAAU,GAAKA,EAAQ,UAAU,SAAS,UAAU,GAAKA,EAAQ,aAAa,eAAe,IAAM,MACjI,CAQA,SAASJ,EAAkBH,EAAiBC,EAA4BO,EAAsB,GAAa,CACnG,MAAAC,EAAOR,EAAc,sBAAsB,EAC3CS,EAAWC,EAAkBF,EAAK,MAAOA,EAAK,MAAM,EACtDD,EACYP,EAAA,UAAU,IAAI,iBAAiB,EAE/BA,EAAA,UAAU,OAAO,iBAAiB,EAEhCW,EAAAX,EAAeD,EAAE,QAAUS,EAAK,KAAMT,EAAE,QAAUS,EAAK,IAAKC,CAAQ,CACxF,CAQA,SAASC,EAAkBE,EAAeC,EAAwB,CAChE,OAAO,KAAK,KAAKD,GAAS,EAAIC,GAAU,CAAC,EAAI,CAC/C,CASA,SAASF,EAAkBL,EAAsBQ,EAAWC,EAAWN,EAAwB,CAC7FH,EAAQ,MAAM,QAAU,kBAChBA,EAAA,UACRA,EAAQ,MAAM,QAAU,wBAAwBG,CAAQ,SAASK,CAAC,SAASC,CAAC,GAC9E,CAMA,SAASjB,EAA0BF,EAA6B,CAC7C,SAAS,iBAA8B,yBAAyB,EACxE,QAASU,GAAY,CAC5B,MAAMU,EAAW,SAASV,EAAQ,aAAa,uBAAuB,GAAK,IAAK,EAAE,EAC9EU,EAAW,GACb,YAAY,IAAM,CACV,MAAAR,EAAOF,EAAQ,sBAAsB,EACrCW,EAAQ,IAAI,aAAa,cAAe,CAC5C,QAAS,GACT,QAAST,EAAK,KAAOA,EAAK,MAAQ,EAClC,QAASA,EAAK,IAAMA,EAAK,OAAS,CAAA,CACnC,EACDF,EAAQ,cAAcW,CAAK,EACTf,EAAAe,EAAOX,EAAS,EAAI,GACrCU,CAAQ,CACb,CACD,CACH"}