@v-office/website-headless 0.0.1

package/dist/enhance/index.mjs

@@ -0,0 +1,533 @@
+//#region src/enhance/carousel.ts
+/**
+* Per-card image carousel: drives the prev/next chevrons by calling
+* `scrollTo` on the natively-scrolling image track (overflow-x: auto
+* with scroll-snap on the track on touch devices, or scroll-snap
+* none + JS-driven scrollTo on hover-capable devices).
+*
+* Native scroll matters for two reasons:
+*   1. Lazy-loaded `<img loading="lazy">` only triggers load when
+*      the image enters the visible viewport via real scroll. With
+*      transform-based shifting, the browser doesn't recognize the
+*      image as "in view", so subsequent images stay un-loaded
+*      (white squares) when the user clicks next.
+*   2. The scroll-snap behavior native scroll provides on touch is
+*      what the iOS swipe momentum/snap relies on; transform-based
+*      shifting can't reproduce it.
+*
+* Dots are optional and only updated when present.
+*/
+function initImageCarousels(selector = ".card-images") {
+	document.querySelectorAll(selector).forEach((el) => {
+		const track = el.querySelector("[data-img-track]");
+		if (!track) return;
+		if (track.dataset.imgCarouselBound === "true") return;
+		track.dataset.imgCarouselBound = "true";
+		const dotsList = el.querySelector("[data-dots]");
+		const dots = dotsList ? Array.from(dotsList.querySelectorAll("li")) : [];
+		const prevBtn = el.querySelector("[data-img-prev]");
+		const nextBtn = el.querySelector("[data-img-next]");
+		const total = track.children.length;
+		if (total === 0) return;
+		const currentIndex = () => {
+			const w = track.clientWidth;
+			if (w === 0) return 0;
+			return Math.round(track.scrollLeft / w);
+		};
+		const updateButtons = (idx) => {
+			if (prevBtn) prevBtn.disabled = idx <= 0;
+			if (nextBtn) nextBtn.disabled = idx >= total - 1;
+		};
+		const updateDots = (idx) => {
+			if (!dotsList || !dots.length) return;
+			dots.forEach((d, i) => {
+				if (i === idx) {
+					d.className = "h-1.5 w-4 rounded-full transition-all duration-300 bg-[color:var(--color-white)]";
+					d.setAttribute("data-active", "true");
+				} else {
+					d.className = "h-1.5 w-1.5 rounded-full transition-all duration-300 bg-[color:var(--color-white)]/55";
+					d.removeAttribute("data-active");
+				}
+			});
+			dotsList.setAttribute("aria-label", `${total} Bilder, gerade angezeigt: ${idx + 1} von ${total}`);
+		};
+		const goTo = (idx) => {
+			const clamped = Math.max(0, Math.min(total - 1, idx));
+			track.scrollLeft = clamped * track.clientWidth;
+			updateButtons(clamped);
+			updateDots(clamped);
+		};
+		if (prevBtn) prevBtn.addEventListener("click", (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			goTo(currentIndex() - 1);
+		});
+		if (nextBtn) nextBtn.addEventListener("click", (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			goTo(currentIndex() + 1);
+		});
+		let engaged = false;
+		track.addEventListener("scroll", () => {
+			if (!engaged) {
+				engaged = true;
+				el.classList.add("is-engaged");
+			}
+			const idx = currentIndex();
+			updateButtons(idx);
+			updateDots(idx);
+		}, { passive: true });
+		updateButtons(0);
+		updateDots(0);
+	});
+}
+const DRAG_THRESHOLD_PX = 2;
+function initRentalCarousel(viewport) {
+	if (viewport.dataset.carouselBound === "true") return;
+	viewport.dataset.carouselBound = "true";
+	const findActiveTrack = () => viewport.querySelector(".rental-track:not([hidden])");
+	const tabsBlock = viewport.closest("[data-rental-tabs]");
+	const prevBtn = tabsBlock?.querySelector("[data-rental-prev]");
+	const nextBtn = tabsBlock?.querySelector("[data-rental-next]");
+	/**
+	* Sync prev/next button disabled state to the current native scroll
+	* position. The native scroll engine reports scrollLeft on every
+	* scroll frame; we just compare it to the bounds.
+	*/
+	const updateArrowButtons = () => {
+		if (!prevBtn && !nextBtn) return;
+		const max = viewport.scrollWidth - viewport.clientWidth;
+		if (prevBtn) prevBtn.disabled = viewport.scrollLeft <= 1;
+		if (nextBtn) nextBtn.disabled = viewport.scrollLeft >= max - 1;
+	};
+	/**
+	* Step the carousel forward or back by one card. Finds the card
+	* closest to the current scroll position, picks the neighbour in
+	* `direction`, and asks the browser to smoothly scroll there.
+	* scroll-snap CSS handles the snap; we just provide the target.
+	*
+	* Forward edge case: stepping to the last card would crop its
+	* right side (offsetLeft places card-left at port-start, card-
+	* right past port-end). When direction is forward AND we're
+	* landing on the last card, scroll to the maximum scrollLeft
+	* instead so the card is right-aligned (matches the
+	* `:last-child { scroll-snap-align: end }` CSS rule).
+	*/
+	const stepBy = (direction) => {
+		const track = findActiveTrack();
+		if (!track) return;
+		const cards = Array.from(track.children);
+		if (cards.length === 0) return;
+		const cs = getComputedStyle(viewport);
+		const padStart = parseFloat(cs.scrollPaddingInlineStart) || 0;
+		let currentIdx = 0;
+		let bestDist = Math.abs(cards[0].offsetLeft - padStart - viewport.scrollLeft);
+		for (let i = 1; i < cards.length; i++) {
+			const snapPoint = cards[i].offsetLeft - padStart;
+			const d = Math.abs(snapPoint - viewport.scrollLeft);
+			if (d < bestDist) {
+				bestDist = d;
+				currentIdx = i;
+			}
+		}
+		const newIdx = Math.max(0, Math.min(cards.length - 1, currentIdx + direction));
+		const max = viewport.scrollWidth - viewport.clientWidth;
+		const cardTarget = cards[newIdx].offsetLeft - padStart;
+		const target = direction > 0 && newIdx === cards.length - 1 && cardTarget < max ? max : cardTarget;
+		viewport.scrollTo({
+			left: target,
+			behavior: "smooth"
+		});
+	};
+	let isDown = false;
+	let dragging = false;
+	let startX = 0;
+	let startScrollLeft = 0;
+	let pointerId = null;
+	let suppressNextClick = false;
+	let suppressTimer = null;
+	const armClickSuppressor = () => {
+		suppressNextClick = true;
+		if (suppressTimer !== null) window.clearTimeout(suppressTimer);
+		suppressTimer = window.setTimeout(() => {
+			suppressNextClick = false;
+			suppressTimer = null;
+		}, 350);
+	};
+	const onPointerMove = (e) => {
+		if (!isDown || pointerId !== e.pointerId) return;
+		const dx = e.clientX - startX;
+		if (!dragging) {
+			if (Math.abs(dx) < DRAG_THRESHOLD_PX) return;
+			dragging = true;
+			viewport.classList.add("is-dragging");
+			const sel = window.getSelection?.();
+			if (sel) sel.removeAllRanges();
+		}
+		e.preventDefault();
+		viewport.scrollLeft = startScrollLeft - dx;
+	};
+	const onPointerEnd = (e) => {
+		if (!isDown || pointerId !== e.pointerId) return;
+		if (dragging) armClickSuppressor();
+		document.removeEventListener("pointermove", onPointerMove);
+		document.removeEventListener("pointerup", onPointerEnd);
+		document.removeEventListener("pointercancel", onPointerEnd);
+		isDown = false;
+		dragging = false;
+		pointerId = null;
+		viewport.classList.remove("is-dragging");
+	};
+	const onPointerDown = (e) => {
+		if (e.pointerType !== "mouse") return;
+		if (e.button !== 0) return;
+		isDown = true;
+		dragging = false;
+		startX = e.clientX;
+		startScrollLeft = viewport.scrollLeft;
+		pointerId = e.pointerId;
+		document.addEventListener("pointermove", onPointerMove, { passive: false });
+		document.addEventListener("pointerup", onPointerEnd);
+		document.addEventListener("pointercancel", onPointerEnd);
+	};
+	viewport.addEventListener("pointerdown", onPointerDown);
+	document.addEventListener("click", (e) => {
+		if (!suppressNextClick) return;
+		const t = e.target;
+		if (!t || !viewport.contains(t)) return;
+		e.preventDefault();
+		e.stopPropagation();
+		suppressNextClick = false;
+		if (suppressTimer !== null) {
+			window.clearTimeout(suppressTimer);
+			suppressTimer = null;
+		}
+	}, { capture: true });
+	viewport.addEventListener("scroll", updateArrowButtons, { passive: true });
+	if (prevBtn) prevBtn.addEventListener("click", () => stepBy(-1));
+	if (nextBtn) nextBtn.addEventListener("click", () => stepBy(1));
+	viewport.addEventListener("rental-track-changed", () => {
+		viewport.scrollLeft = 0;
+		updateArrowButtons();
+	});
+	requestAnimationFrame(updateArrowButtons);
+}
+//#endregion
+//#region src/enhance/overlay.ts
+/** Run `mutate` inside a view transition where the browser has one and the
+*  visitor has not asked for less motion; run it directly otherwise. */
+function withViewTransition(mutate) {
+	const doc = document;
+	if (typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches || typeof doc.startViewTransition !== "function") {
+		mutate();
+		return;
+	}
+	const transition = doc.startViewTransition(mutate);
+	transition.ready.catch(() => {});
+	transition.finished.catch(() => {});
+}
+let lastInputWasKeyboard = false;
+let tracked = false;
+const KEYBOARD_KEYS = /* @__PURE__ */ new Set([
+	"Tab",
+	"Enter",
+	" ",
+	"Escape",
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"ArrowDown",
+	"Home",
+	"End"
+]);
+/** Install the page's single pair of modality listeners. Safe to call often. */
+function trackInputModality() {
+	if (tracked) return;
+	tracked = true;
+	window.addEventListener("pointerdown", () => {
+		lastInputWasKeyboard = false;
+	}, { capture: true });
+	window.addEventListener("keydown", (e) => {
+		if (KEYBOARD_KEYS.has(e.key)) lastInputWasKeyboard = true;
+	}, { capture: true });
+}
+/** Focus `el` only when the last real input was a keyboard one. */
+function focusForKeyboard(el) {
+	if (lastInputWasKeyboard && el && typeof el.focus === "function") el.focus();
+}
+/** Bind one overlay. Returns silently when the markup is not on this page, so
+*  a component whose overlay self-hides costs nothing. */
+function initHistoryOverlay(options) {
+	const root = document.querySelector(options.root);
+	if (!root) return;
+	const overlay = root.querySelector(options.overlay);
+	const scroller = root.querySelector(options.scroller);
+	const openBtn = root.querySelector(options.open);
+	const closeBtn = root.querySelector(options.close);
+	if (!overlay || !scroller || !openBtn || !closeBtn) return;
+	trackInputModality();
+	let returnFocus = null;
+	const openModal = () => {
+		returnFocus = document.activeElement;
+		withViewTransition(() => {
+			overlay.removeAttribute("hidden");
+			document.body.style.overflow = "hidden";
+		});
+		history.pushState({ layer: options.historyKey }, "");
+		requestAnimationFrame(() => focusForKeyboard(closeBtn));
+	};
+	const closeModalInternal = () => {
+		withViewTransition(() => {
+			scroller.scrollTop = 0;
+			overlay.setAttribute("hidden", "");
+			document.body.style.overflow = "";
+		});
+		focusForKeyboard(returnFocus);
+	};
+	const closeModal = () => {
+		if (history.state && history.state.layer === options.historyKey) history.back();
+		else closeModalInternal();
+	};
+	openBtn.addEventListener("click", openModal);
+	closeBtn.addEventListener("click", closeModal);
+	overlay.addEventListener("click", (e) => {
+		if (e.target === overlay) closeModal();
+	});
+	document.addEventListener("keydown", (e) => {
+		if (!overlay.hasAttribute("hidden") && e.key === "Escape") {
+			e.preventDefault();
+			closeModal();
+		}
+	});
+	window.addEventListener("popstate", () => {
+		if (!overlay.hasAttribute("hidden")) closeModalInternal();
+	});
+}
+//#endregion
+//#region src/enhance/gallery.ts
+/**
+* The gallery's layered overlays, as an engine the component configures.
+*
+* WHAT IT OWNS: opening and closing a stack of layers, the browser-history
+* entry each one pushes, the scroll lock, layered ESC, focus on open and
+* restore on close, the lazily-loaded photo reveal, the scroll-snap viewer's
+* index and its prev/next stepping, and keeping a page-level carousel on the
+* photo the visitor was last looking at.
+*
+* WHAT IT DECIDES: nothing visual. It states **no selector of its own** — every
+* one is passed in, the rule `overlay.ts` already set, so the markup and the
+* string that finds it stay in the same file and a grep for
+* `data-gallery-lightbox` still lands on the component that owns it. It sets no
+* class, reads no colour and renders no markup.
+*
+* WHY THE LAYERS ARE A LIST. The controller this replaces hardcoded its three
+* layers and their nesting order in three separate places — the `popstate`
+* handler, the `keydown` handler and the body-scroll restore — and opened with
+* `if (!lightbox || !lightboxClose || !fullscreen || !fsTrack) return`. A page
+* that opens the viewer straight from the photos, with no intermediate grid,
+* therefore got **no gallery at all** and no error saying so. That is not a
+* hypothetical composition: it is the obvious one for a site whose photos are
+* already a full-width strip. Layers are now whatever the caller lists,
+* outermost first, and a layer whose markup is absent is simply not bound.
+*
+* WHY IT IS A MODULE AND NOT `is:inline`. It was inline from the gallery's first
+* commit with no reason recorded, and the cost was stated in two places: the
+* four-line copy of `withViewTransition` it had to carry, and the third copy of
+* the input-modality listeners `overlay.ts` names in its own header. An
+* `is:inline` script is processed by neither Vite nor Astro and can import
+* nothing, so both copies were forced rather than chosen.
+*
+* The one thing that changes by importing: the emitted script crosses Vite's
+* `assetsInlineLimit` (4096 bytes), so Astro links it as an external module
+* instead of writing it into the page. Any gate that located MARKUP by
+* searching the built HTML was, until it read markup only, able to match the
+* selector literals in the inlined source — see the note in the blueprints'
+* `fact-check.py`. That is fixed there rather than worked around here.
+*/
+function bindLazyReveal(root) {
+	root.querySelectorAll("img[loading=\"lazy\"]").forEach((img) => {
+		if (img.complete) img.dataset["loaded"] = "cache";
+	});
+	root.classList.add("is-img-fade");
+	root.addEventListener("load", (e) => {
+		const img = e.target;
+		if (img instanceof HTMLImageElement && img.loading === "lazy" && !img.dataset["loaded"]) img.dataset["loaded"] = "fade";
+	}, true);
+	root.addEventListener("error", (e) => {
+		const img = e.target;
+		if (img instanceof HTMLImageElement && img.loading === "lazy") img.dataset["loaded"] = "cache";
+	}, true);
+}
+/** Bind one gallery. Returns silently when its root is not on this page. */
+function initGallery(options) {
+	const root = document.querySelector(options.root);
+	if (!root) return;
+	trackInputModality();
+	bindLazyReveal(root);
+	const q = (sel) => sel ? root.querySelector(sel) : null;
+	const track = q(options.track);
+	const carousel = q(options.carousel);
+	const counter = q(options.counter);
+	const carouselCounter = q(options.carouselCounter);
+	const indexAttr = options.indexAttr ?? "data-image-index";
+	const layers = [];
+	for (const spec of options.layers) {
+		const panel = q(spec.panel);
+		if (!panel) continue;
+		layers.push({
+			name: spec.name,
+			panel,
+			scroller: q(spec.scroller),
+			backdrop: q(spec.backdrop),
+			closeBtn: q(spec.close),
+			openers: Array.from(root.querySelectorAll(spec.open)),
+			isViewer: spec.opensAt === "index",
+			warmOnIntent: spec.warmOnIntent === true,
+			returnFocus: null
+		});
+		if (spec.fitImage) {
+			const img = panel.querySelector(spec.fitImage);
+			if (img) {
+				const applyRatio = () => {
+					if (!img.naturalWidth || !img.naturalHeight) return;
+					img.style.setProperty("--fp-ar", `${img.naturalWidth}/${img.naturalHeight}`);
+				};
+				if (img.complete) applyRatio();
+				img.addEventListener("load", applyRatio, { once: true });
+			}
+		}
+	}
+	if (!layers.length) return;
+	const total = layers.find((l) => l.isViewer)?.openers.length || root.querySelectorAll(`[${indexAttr}]`).length;
+	const isOpen = (l) => !l.panel.hasAttribute("hidden");
+	/** Innermost open layer — the one a back gesture or ESC should close. */
+	const innermostOpen = () => {
+		for (let i = layers.length - 1; i >= 0; i -= 1) {
+			const l = layers[i];
+			if (l && isOpen(l)) return l;
+		}
+		return null;
+	};
+	const currentIdx = () => {
+		if (!track) return 0;
+		const w = track.clientWidth;
+		return w === 0 ? 0 : Math.round(track.scrollLeft / w);
+	};
+	const setCounter = (el, idx) => {
+		if (el) el.textContent = `${idx + 1} / ${total}`;
+	};
+	const openLayer = (layer, idx) => {
+		layer.returnFocus = document.activeElement;
+		withViewTransition(() => {
+			layer.panel.removeAttribute("hidden");
+			document.body.style.overflow = "hidden";
+		});
+		history.pushState({ layer: `${options.root}:${layer.name}` }, "");
+		const landOn = (attempt) => {
+			if (!(layer.isViewer && track && typeof idx === "number")) {
+				focusForKeyboard(layer.closeBtn);
+				return;
+			}
+			const w = track.clientWidth;
+			if (w === 0 && attempt < 5) {
+				requestAnimationFrame(() => landOn(attempt + 1));
+				return;
+			}
+			track.scrollTo({
+				left: idx * w,
+				behavior: "auto"
+			});
+			setCounter(counter, idx);
+			focusForKeyboard(layer.closeBtn);
+		};
+		requestAnimationFrame(() => landOn(0));
+	};
+	const closeLayerInternal = (layer) => {
+		const lastIdx = layer.isViewer ? currentIdx() : null;
+		withViewTransition(() => {
+			if (layer.scroller) layer.scroller.scrollTop = 0;
+			layer.panel.setAttribute("hidden", "");
+			if (!layers.some((l) => l !== layer && isOpen(l))) document.body.style.overflow = "";
+		});
+		if (lastIdx !== null && carousel && carousel.clientWidth > 0) {
+			carousel.scrollTo({
+				left: lastIdx * carousel.clientWidth,
+				behavior: "auto"
+			});
+			setCounter(carouselCounter, lastIdx);
+		}
+		focusForKeyboard(layer.returnFocus);
+	};
+	const closeLayer = (layer) => {
+		if (history.state && history.state.layer === `${options.root}:${layer.name}`) history.back();
+		else closeLayerInternal(layer);
+	};
+	const step = (delta) => {
+		if (!track) return;
+		const next = Math.min(total - 1, Math.max(0, currentIdx() + delta));
+		track.scrollTo({
+			left: next * track.clientWidth,
+			behavior: "smooth"
+		});
+	};
+	layers.forEach((layer) => {
+		let warmed = false;
+		const warm = () => {
+			if (warmed) return;
+			warmed = true;
+			const img = layer.panel.querySelector("img");
+			if (!img) return;
+			const pre = new Image();
+			if (img.srcset) pre.srcset = img.srcset;
+			if (img.sizes) pre.sizes = img.sizes;
+			pre.src = img.src;
+		};
+		layer.openers.forEach((t) => {
+			if (layer.warmOnIntent) {
+				t.addEventListener("pointerenter", warm, { once: true });
+				t.addEventListener("focus", warm, { once: true });
+			}
+			t.addEventListener("click", () => {
+				const idx = layer.isViewer ? Number(t.getAttribute(indexAttr)) || 0 : void 0;
+				openLayer(layer, idx);
+			});
+		});
+		if (layer.closeBtn) layer.closeBtn.addEventListener("click", () => closeLayer(layer));
+		if (layer.backdrop) layer.backdrop.addEventListener("click", (e) => {
+			if (e.target === layer.backdrop) closeLayer(layer);
+		});
+	});
+	const prevBtn = q(options.trackPrev);
+	const nextBtn = q(options.trackNext);
+	if (prevBtn) prevBtn.addEventListener("click", () => step(-1));
+	if (nextBtn) nextBtn.addEventListener("click", () => step(1));
+	if (track && counter) track.addEventListener("scroll", () => setCounter(counter, currentIdx()), { passive: true });
+	if (carousel && carouselCounter) {
+		const sync = () => {
+			const w = carousel.clientWidth;
+			if (w === 0) return;
+			setCounter(carouselCounter, Math.round(carousel.scrollLeft / w));
+		};
+		carousel.addEventListener("scroll", sync, { passive: true });
+		sync();
+	}
+	window.addEventListener("popstate", () => {
+		const layer = innermostOpen();
+		if (layer) closeLayerInternal(layer);
+	});
+	document.addEventListener("keydown", (e) => {
+		const layer = innermostOpen();
+		if (!layer) return;
+		if (e.key === "Escape") {
+			e.preventDefault();
+			closeLayer(layer);
+			return;
+		}
+		if (layer.isViewer && (e.key === "ArrowRight" || e.key === "ArrowLeft")) {
+			e.preventDefault();
+			step(e.key === "ArrowRight" ? 1 : -1);
+		}
+	});
+}
+//#endregion
+export { focusForKeyboard, initGallery, initHistoryOverlay, initImageCarousels, initRentalCarousel, trackInputModality, withViewTransition };