fix(modal): fix modal not closing in iOS PWA (#29)
- Add cursor:pointer to .modal-overlay so iOS Safari fires click events on the backdrop (iOS ignores clicks on non-interactive divs without it) - Add touchend fallback listener on overlay for belt-and-suspenders iOS support - Enlarge close button from target-sm (32px) to target-md (40px) to meet Apple touch-target guidelines; remove now-redundant ::before expansion - Swipe-to-close now only activates from the top handle zone (< 48px) or when the panel is scrolled to top, preventing accidental dismissal while scrolling form content downward
This commit is contained in:
@@ -115,14 +115,20 @@ function _wireSheetSwipe(panel) {
|
||||
let dragging = false;
|
||||
|
||||
panel.addEventListener('touchstart', (e) => {
|
||||
startY = e.touches[0].clientY;
|
||||
// Nur von der Handle-Zone (obere 48px) oder wenn Panel ganz oben → Swipe erlauben
|
||||
const touchY = e.touches[0].clientY;
|
||||
const rect = panel.getBoundingClientRect();
|
||||
const isHandleZone = touchY - rect.top < 48;
|
||||
const isScrolledToTop = panel.scrollTop <= 0;
|
||||
if (!isHandleZone && !isScrolledToTop) return;
|
||||
startY = touchY;
|
||||
dragging = true;
|
||||
}, { passive: true });
|
||||
|
||||
panel.addEventListener('touchmove', (e) => {
|
||||
if (!dragging) return;
|
||||
const dy = e.touches[0].clientY - startY;
|
||||
if (dy < 0) return; // Kein Swipe nach oben
|
||||
if (dy < 0) { dragging = false; return; } // Aufwärts-Scroll: Swipe abbrechen
|
||||
panel.style.transform = `translateY(${dy * 0.6}px)`;
|
||||
}, { passive: true });
|
||||
|
||||
@@ -224,6 +230,12 @@ export function openModal({ title, content, onSave, onDelete, size = 'md' } = {}
|
||||
if (e.target === activeOverlay) closeModal();
|
||||
});
|
||||
|
||||
// iOS PWA: click-Events auf non-interactive divs sind unzuverlässig →
|
||||
// touchend als Fallback (passive, damit Scroll nicht blockiert wird)
|
||||
activeOverlay.addEventListener('touchend', (e) => {
|
||||
if (e.target === activeOverlay) closeModal();
|
||||
}, { passive: true });
|
||||
|
||||
// Close-Button
|
||||
activeOverlay.querySelector('[data-action="close-modal"]')
|
||||
?.addEventListener('click', closeModal);
|
||||
|
||||
Reference in New Issue
Block a user