moritz/lazyflat
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

debug(lightbox): log overlay rect, computed style, arrow handler fires

Browse source 
Tile-click logs from the user's session reveal that the modal opens
(display becomes flex) but every "arrow click" actually lands on a
gallery thumbnail behind the modal — closest(.flat-gallery-tile)
finds a button with target=img. So either the overlay isn't covering
the viewport (positioning fails) or pointer events leak through.

Add log lines to settle it:
- open() now dumps computed display/position/zIndex/inset/pointer-events
  + getBoundingClientRect() and the viewport size, so we can see
  whether the overlay box actually spans the screen.
- Logs the prev/next button rects too — tells us where the arrows
  sit and whether they overlap the gallery.
- Each of prevBtn/nextBtn/closeBtn/overlay click handlers logs when
  it actually fires — confirms whether arrow handlers are reached at
  all when the user clicks them.
- step() logs entry, delta, idx and out-of-range exits.

All logs still tagged [lazyflat.lightbox] / DEBUG(lightbox): for grep
+ removal once fixed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
EiSiMo 2026-04-23 13:06:32 +02:00
parent dc5f850d3a
commit c379bc989f
1 changed files with 36 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

42
web/static/app.js
View file

@ -180,8 +180,23 @@ document.addEventListener("DOMContentLoaded", openDeepLinkedFlat);
overlay.setAttribute("aria-hidden", "false");
document.body.classList.add("lightbox-open");
render();
console.log("[lazyflat.lightbox] open() done — overlay computed display:",
getComputedStyle(overlay).display, "src:", imgEl.src);
// DEBUG(lightbox): dump everything we'd want to know if clicks pass through.
const cs = getComputedStyle(overlay);
const rect = overlay.getBoundingClientRect();
console.log("[lazyflat.lightbox] open() done", {
display: cs.display, position: cs.position, zIndex: cs.zIndex,
top: cs.top, left: cs.left, right: cs.right, bottom: cs.bottom,
pointerEvents: cs.pointerEvents,
rect: { x: rect.x, y: rect.y, w: rect.width, h: rect.height },
viewport: { w: window.innerWidth, h: window.innerHeight, scrollY: window.scrollY },
src: imgEl.src,
});
const prevRect = prevBtn.getBoundingClientRect();
const nextRect = nextBtn.getBoundingClientRect();
console.log("[lazyflat.lightbox] arrow rects", {
prev: { hidden: prevBtn.hidden, x: prevRect.x, y: prevRect.y, w: prevRect.width, h: prevRect.height },
next: { hidden: nextBtn.hidden, x: nextRect.x, y: nextRect.y, w: nextRect.width, h: nextRect.height },
});
}
function close() {
@ -193,16 +208,31 @@ document.addEventListener("DOMContentLoaded", openDeepLinkedFlat);
}
function step(delta) {
console.log("[lazyflat.lightbox] step()", { delta, from: idx, max: urls.length - 1 });
const next = idx + delta;
if (next < 0 || next >= urls.length) return;
if (next < 0 || next >= urls.length) {
console.log("[lazyflat.lightbox] step() out of range — ignored");
return;
}
idx = next;
render();
}
prevBtn.addEventListener("click", () => step(-1));
nextBtn.addEventListener("click", () => step(1));
closeBtn.addEventListener("click", close);
prevBtn.addEventListener("click", (ev) => {
console.log("[lazyflat.lightbox] prevBtn click handler fired", { target: ev.target });
step(-1);
});
nextBtn.addEventListener("click", (ev) => {
console.log("[lazyflat.lightbox] nextBtn click handler fired", { target: ev.target });
step(1);
});
closeBtn.addEventListener("click", (ev) => {
console.log("[lazyflat.lightbox] closeBtn click handler fired");
close();
});
overlay.addEventListener("click", (ev) => {
console.log("[lazyflat.lightbox] overlay click — target===overlay?", ev.target === overlay,
"target=", ev.target);
if (ev.target === overlay) close();
});
document.addEventListener("keydown", (ev) => {