From 5d5cf3e3abbed8c5c71425b9151444cb5023acfe Mon Sep 17 00:00:00 2001 From: Your Name Date: Fri, 2 Jan 2026 02:05:41 -0500 Subject: [PATCH] Tighten marker modal controls --- src/components/Map/markerManager.js | 61 +++++++----------------- src/styles/mapMarkers.css | 74 +++++++++++++++++++++-------- 2 files changed, 71 insertions(+), 64 deletions(-) diff --git a/src/components/Map/markerManager.js b/src/components/Map/markerManager.js index ea18533..050b385 100644 --- a/src/components/Map/markerManager.js +++ b/src/components/Map/markerManager.js @@ -249,32 +249,10 @@ function applyPostDetails(modalWrap, post) { const arrowHtml = heroHasGallery ? `` : ""; - target.innerHTML = `${heroImageHtml}${arrowHtml}`; - let galleryRow = modalWrap.querySelector(".sw-modal-gallery-row"); - if (heroHasGallery) { - if (!galleryRow) { - galleryRow = document.createElement("div"); - galleryRow.className = "sw-modal-gallery-row"; - const heroRow = target.closest(".sw-modal-hero-row"); - const parent = heroRow?.parentNode || target.parentNode || modalWrap; - if (parent) { - parent.insertBefore(galleryRow, heroRow ? heroRow.nextSibling : target.nextSibling || null); - } else { - modalWrap.appendChild(galleryRow); - } - } - galleryRow.innerHTML = heroGallery - .map( - (url, idx) => - `` - ) - .join(""); - } else if (galleryRow) { - galleryRow.remove(); - galleryRow = null; - } + const indicatorHtml = heroHasGallery + ? `
1/${heroGallery.length}
` + : ""; + target.innerHTML = `${heroImageHtml}${arrowHtml}${indicatorHtml}`; bindHeroLightbox(modalWrap); if (heroHasGallery) { initModalGallery(modalWrap, heroGallery); @@ -472,14 +450,15 @@ function bindHeroLightbox(modalWrap) { if (!modalWrap) return; const img = modalWrap.querySelector(".sw-modal-hero img, .sw-cluster-hero-media img"); if (!img || img.dataset.zoomBound === "1") return; - const fullSrc = (img.getAttribute("data-fullsrc") || img.getAttribute("src") || "").trim(); - if (!fullSrc) return; img.dataset.zoomBound = "1"; img.style.cursor = "zoom-in"; img.addEventListener("click", (e) => { e.preventDefault(); e.stopPropagation(); - openImageLightbox(fullSrc); + const src = (img.getAttribute("data-fullsrc") || img.getAttribute("src") || "").trim(); + if (src) { + openImageLightbox(src); + } }); } @@ -487,9 +466,14 @@ function initModalGallery(modalWrap, gallery) { if (!modalWrap || !Array.isArray(gallery) || gallery.length === 0) return; const heroImg = modalWrap.querySelector(".sw-modal-hero img, .sw-cluster-hero-media img"); if (!heroImg) return; - let activeIndex = 0; - const thumbButtons = modalWrap.querySelectorAll(".sw-modal-gallery-thumb"); const arrows = modalWrap.querySelectorAll(".sw-modal-hero-arrow"); + const indicator = modalWrap.querySelector(".sw-modal-gallery-indicator"); + const currentIndicator = indicator?.querySelector(".sw-modal-gallery-current"); + const totalIndicator = indicator?.querySelector(".sw-modal-gallery-total"); + if (totalIndicator) { + totalIndicator.textContent = String(gallery.length); + } + let activeIndex = 0; const setActive = (idx) => { if (!Number.isFinite(idx)) return; const normalized = (idx + gallery.length) % gallery.length; @@ -497,10 +481,9 @@ function initModalGallery(modalWrap, gallery) { heroImg.src = gallery[normalized]; heroImg.dataset.fullsrc = gallery[normalized]; heroImg.dataset.galleryIndex = String(normalized); - thumbButtons.forEach((btn) => { - const btnIndex = Number(btn.dataset.index); - btn.classList.toggle("active", btnIndex === normalized); - }); + if (currentIndicator) { + currentIndicator.textContent = String(normalized + 1); + } }; arrows.forEach((btn) => { btn.addEventListener("click", (event) => { @@ -510,14 +493,6 @@ function initModalGallery(modalWrap, gallery) { setActive(nextIndex); }); }); - thumbButtons.forEach((btn) => { - btn.addEventListener("click", (event) => { - event.stopPropagation(); - const idx = Number(btn.dataset.index); - if (Number.isNaN(idx)) return; - setActive(idx); - }); - }); setActive(0); let touchStartX = 0; const touchThreshold = 30; diff --git a/src/styles/mapMarkers.css b/src/styles/mapMarkers.css index de067f0..b193390 100644 --- a/src/styles/mapMarkers.css +++ b/src/styles/mapMarkers.css @@ -878,6 +878,11 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{ pointer-events:none; } +.sw-modal-hero, +.sw-cluster-hero-media{ + position:relative; + overflow:hidden; +} .sw-modal-hero img{ width:100%; height:100%; @@ -915,34 +920,61 @@ body[data-theme="blue"] .sw-centered-modal .post-card.sw-expanded-shell{ .sw-modal-hero-arrow.right{ right:10px; } -.sw-modal-gallery-row{ +.sw-modal-gallery-indicator{ + position:absolute; + bottom:0.75rem; + left:50%; + transform:translateX(-50%); + background:rgba(15,23,42,0.8); + color:#f0f9ff; + border-radius:999px; + padding:.25rem .75rem; + font-size:.75rem; + font-weight:700; + letter-spacing:.05em; display:flex; - gap:0.35rem; - overflow-x:auto; - padding-top:0.5rem; - margin-top:0.5rem; + align-items:center; + gap:.35rem; + z-index:12; + pointer-events:none; + box-shadow:0 10px 25px rgba(2,6,23,0.6); } -.sw-modal-gallery-thumb{ - border-radius:12px; - border:1px solid transparent; - width:48px; - height:48px; - flex:0 0 auto; - overflow:hidden; - padding:0; +.sw-modal-gallery-indicator{ + position:absolute; + top:0.75rem; + right:0.25rem; + bottom:auto; + left:auto; + transform:none; + padding-right:0.3rem; +} +.sw-modal-gallery-indicator span{ display:inline-flex; align-items:center; justify-content:center; - background:rgba(15,23,42,0.65); + line-height:1; } -.sw-modal-gallery-thumb.active{ - border-color:rgba(56,189,248,0.95); +.sw-modal-gallery-separator{ + opacity:.6; } -.sw-modal-gallery-thumb img{ - width:100%; - height:100%; - object-fit:cover; - display:block; + +.sw-modal-hero-arrow, +.sw-cluster-hero-media .sw-modal-hero-arrow{ + box-shadow:0 2px 12px rgba(0,0,0,0.45); +} + +@media (max-width: 768px) { + .sw-modal-hero-arrow{ + width:32px; + height:32px; + border-width:0; + background:rgba(15,23,42,0.7); + } + .sw-modal-gallery-indicator{ + font-size:.68rem; + bottom:.5rem; + padding:.2rem .6rem; + } } .sw-modal-hero-fallback{