marijo/movmaker-webui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refine map lightbox UX and map click behavior across pages

Browse source
This commit is contained in:
hbrain 2026-05-31 15:19:39 +02:00
parent 7f45193a6f
commit 5408aba01a
4 changed files with 24 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

22
js/map_lightbox.js
View file

@ -1,5 +1,5 @@
(() => {
const SELECTOR = 'img.map-image';
const SELECTOR = 'a.map-image-link, img.map-image';
let lightbox = null;
let lightboxImg = null;
@ -22,7 +22,7 @@
const hint = document.createElement('div');
hint.className = 'map-lightbox__hint';
hint.textContent = 'Esc or click outside to close';
hint.textContent = 'Esc or click/tap outside to close';
lightbox.appendChild(closeBtn);
lightbox.appendChild(lightboxImg);
@ -30,21 +30,18 @@
document.body.appendChild(lightbox);
closeBtn.addEventListener('click', closeLightbox);
lightbox.addEventListener('click', (ev) => {
if (ev.target === lightbox) closeLightbox();
});
document.addEventListener('keydown', (ev) => {
if (ev.key === 'Escape' && lightbox.classList.contains('is-open')) {
closeLightbox();
}
if (ev.key === 'Escape' && lightbox.classList.contains('is-open')) closeLightbox();
});
return lightbox;
}
function openLightbox(src, alt) {
if (!src) return;
ensureLightbox();
lightboxImg.src = src;
lightboxImg.alt = alt || 'Map preview';
@ -59,17 +56,20 @@
lightbox.setAttribute('aria-hidden', 'true');
document.body.classList.remove('map-lightbox-open');
setTimeout(() => {
if (!lightbox.classList.contains('is-open')) {
lightboxImg.removeAttribute('src');
}
if (!lightbox.classList.contains('is-open')) lightboxImg.removeAttribute('src');
}, 260);
}
document.addEventListener('click', (ev) => {
const target = ev.target instanceof Element ? ev.target.closest(SELECTOR) : null;
if (!target) return;
const img = target.matches('img.map-image') ? target : target.querySelector('img.map-image');
const src = img ? (img.currentSrc || img.src) : target.getAttribute('href');
if (!src) return;
ev.preventDefault();
ev.stopPropagation();
openLightbox(target.currentSrc || target.src, target.alt || 'Map preview');
openLightbox(src, img ? img.alt : 'Map preview');
});
})();