generated from Integry/Template_NetMauiBlazorHybrid
85 lines
2.7 KiB
JavaScript
85 lines
2.7 KiB
JavaScript
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);
|
|
} |