Aggiunta selezione negozio

SteUp.Shared/wwwroot/js/main.js

@@ -45,3 +45,42 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     }
 });
+
+(function () {
+    // Ascoltiamo l'evento 'mousedown' su tutto il documento
+    document.addEventListener('mousedown', function (event) {
+
+        // Cerca se l'elemento cliccato (o un suo genitore) ha la classe .ripple-container
+        const target = event.target.closest('.ripple-container');
+
+        if (target) {
+            createRipple(event, target);
+        }
+    });
+
+    function createRipple(event, element) {
+        const circle = document.createElement("span");
+        const diameter = Math.max(element.clientWidth, element.clientHeight);
+        const radius = diameter / 2;
+
+        const rect = element.getBoundingClientRect();
+
+        circle.style.width = circle.style.height = `${diameter}px`;
+        circle.style.left = `${event.clientX - rect.left - radius}px`;
+        circle.style.top = `${event.clientY - rect.top - radius}px`;
+        circle.classList.add("ripple");
+
+        // Rimuovi l'elemento dal DOM alla fine dell'animazione per non intasare la memoria
+        const ripple = element.getElementsByClassName("ripple")[0];
+        if (ripple) {
+            ripple.remove();
+        }
+
+        element.appendChild(circle);
+
+        // Pulizia automatica dopo 600ms (durata animazione CSS)
+        setTimeout(() => {
+            circle.remove();
+        }, 600);
+    }
+})();