Creata card notifiche

salesbook.Shared/wwwroot/js/notifications.js

@@ -0,0 +1,85 @@
+const FIRST_THRESHOLD = 80;  // rivela pulsante
+const SECOND_THRESHOLD = 160; // elimina diretta
+const CLOSE_THRESHOLD = 40;  // swipe a destra per richiudere
+const MAX_SWIPE = 200;
+
+window.initNotifications = () => {
+    document.querySelectorAll('.row').forEach(initRow);
+};
+
+function initRow(row) {
+    const card = row.querySelector('.notification-card');
+    const btn = row.querySelector('.trash-btn');
+    let startX = 0, currentX = 0, dragging = false;
+    let open = false;
+
+    card.addEventListener('pointerdown', (e) => {
+        if (e.pointerType === 'mouse' && e.button !== 0) return;
+        dragging = true;
+        startX = e.clientX;
+        card.setPointerCapture(e.pointerId);
+        card.style.transition = 'none';
+    });
+
+    card.addEventListener('pointermove', (e) => {
+        if (!dragging) return;
+        const dx = e.clientX - startX;
+        let translate = dx;
+
+        if (!open) {
+            // swiping left to open/delete
+            translate = Math.max(-MAX_SWIPE, Math.min(0, dx));
+        } else {
+            // if already open, allow swipe right to close
+            translate = Math.min(0, -FIRST_THRESHOLD + dx);
+        }
+        currentX = translate;
+        card.style.transform = `translateX(${translate}px)`;
+    });
+
+    function endDrag() {
+        if (!dragging) return;
+        dragging = false;
+        card.style.transition = 'transform .2s ease';
+
+        if (!open) {
+            if (currentX < -SECOND_THRESHOLD) {
+                card.style.transform = `translateX(-${MAX_SWIPE}px)`;
+                setTimeout(() => removeRow(row), 200);
+            } else if (currentX < -FIRST_THRESHOLD) {
+                card.style.transform = `translateX(-${FIRST_THRESHOLD}px)`;
+                open = true;
+            } else {
+                card.style.transform = 'translateX(0)';
+                open = false;
+            }
+        } else {
+            // se è già aperto e vado a destra abbastanza → chiudo
+            if (currentX > -FIRST_THRESHOLD + CLOSE_THRESHOLD) {
+                card.style.transform = 'translateX(0)';
+                open = false;
+            } else {
+                card.style.transform = `translateX(-${FIRST_THRESHOLD}px)`;
+                open = true;
+            }
+        }
+    }
+
+    card.addEventListener('pointerup', endDrag);
+    card.addEventListener('pointercancel', endDrag);
+
+    btn.addEventListener('click', () => removeRow(row));
+}
+
+function removeRow(row) {
+    const h = row.getBoundingClientRect().height;
+    row.style.height = h + 'px';
+    row.classList.add('collapsing');
+    requestAnimationFrame(() => {
+        row.style.opacity = '0';
+        row.style.marginTop = '0';
+        row.style.marginBottom = '0';
+        row.style.height = '0';
+    });
+    setTimeout(() => row.remove(), 220);
+}