Tighten marker modal controls
This commit is contained in:
Your Name
parent
e3a67347fd
commit
5d5cf3e3ab
|
|
@ -249,32 +249,10 @@ function applyPostDetails(modalWrap, post) {
|
|||
const arrowHtml = heroHasGallery
|
||||
? `<button class="sw-modal-hero-arrow left" type="button" aria-label="Previous image"><i class="fa-solid fa-chevron-left" /></button><button class="sw-modal-hero-arrow right" type="button" aria-label="Next image"><i class="fa-solid fa-chevron-right" /></button>`
|
||||
: "";
|
||||
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) =>
|
||||
`<button type="button" class="sw-modal-gallery-thumb${idx === 0 ? " active" : ""}" data-index="${idx}"><img src="${escapeHtml(
|
||||
url
|
||||
)}" alt="" loading="lazy" /></button>`
|
||||
)
|
||||
.join("");
|
||||
} else if (galleryRow) {
|
||||
galleryRow.remove();
|
||||
galleryRow = null;
|
||||
}
|
||||
const indicatorHtml = heroHasGallery
|
||||
? `<div class="sw-modal-gallery-indicator" aria-live="polite"><span class="sw-modal-gallery-current">1</span><span class="sw-modal-gallery-separator">/</span><span class="sw-modal-gallery-total">${heroGallery.length}</span></div>`
|
||||
: "";
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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{
|
||||
|
|
|
|||
Loading…
Reference in New Issue