@getquick/content 0.3.1 → 0.4.0

package/dist/design-client.js

@@ -0,0 +1,519 @@
+import { t as videoHeroFrameGeometry } from "./video-hero-D8AcMR4q.js";
+//#region frontend/src/carousel-client.ts
+/** Mount each Carousel once. Sites invoke on page load and call cleanup before
+* client navigation replaces the page. DOM APIs are read only on invocation. */
+function mountDesignCarousels(root) {
+	const scope = root ?? (typeof document === "undefined" ? void 0 : document);
+	if (!scope) return () => {};
+	const carousels = [...scope.querySelectorAll("[data-gqd-carousel]")];
+	if ("matches" in scope && typeof scope.matches === "function" && scope.matches("[data-gqd-carousel]")) carousels.unshift(scope);
+	const cleanups = [];
+	for (const carousel of carousels) {
+		if (carousel.hasAttribute("data-gqd-mounted")) continue;
+		const slides = [...carousel.children].filter((child) => child instanceof HTMLElement && child.classList.contains("wp-block-getquick-design-slider"));
+		if (!slides.length) continue;
+		carousel.setAttribute("data-gqd-mounted", "");
+		const view = carousel.ownerDocument.defaultView;
+		if (!view) continue;
+		const motion = view.matchMedia("(prefers-reduced-motion: reduce)");
+		const buttons = [...carousel.querySelectorAll("button[data-gqd-go]")].filter((node) => node.closest("[data-gqd-carousel]") === carousel);
+		const previous = slides.map((slide) => ({
+			slide,
+			hidden: slide.hidden,
+			inert: slide.inert,
+			role: slide.getAttribute("role"),
+			label: slide.getAttribute("aria-label"),
+			description: slide.getAttribute("aria-roledescription")
+		}));
+		let index = 0;
+		let timer;
+		let hovered = false;
+		let focused = false;
+		let stopped = false;
+		const listeners = [];
+		const listen = (target, name, handler) => {
+			target.addEventListener(name, handler);
+			listeners.push(() => target.removeEventListener(name, handler));
+		};
+		const cancel = () => {
+			if (timer !== void 0) clearTimeout(timer);
+			timer = void 0;
+		};
+		const schedule = () => {
+			cancel();
+			if (stopped || carousel.dataset.gqdAutoplay !== "true" || slides.length < 2 || motion.matches || hovered || focused || carousel.ownerDocument.hidden) return;
+			const seconds = Number(carousel.dataset.gqdDuration);
+			if (!Number.isInteger(seconds) || seconds < 1 || seconds > 120) return;
+			timer = setTimeout(() => {
+				if (motion.matches || hovered || focused || carousel.ownerDocument.hidden) {
+					schedule();
+					return;
+				}
+				show(index + 1);
+			}, seconds * 1e3);
+		};
+		const show = (next) => {
+			index = (next + slides.length) % slides.length;
+			slides.forEach((slide, position) => {
+				slide.dataset.gqdSlide = "";
+				slide.hidden = position !== index;
+				slide.inert = position !== index;
+				slide.setAttribute("role", "group");
+				slide.setAttribute("aria-roledescription", "slide");
+				slide.setAttribute("aria-label", `${position + 1} of ${slides.length}`);
+			});
+			buttons.forEach((button) => {
+				if (Number(button.dataset.gqdGo) === index) button.setAttribute("aria-current", "true");
+				else button.removeAttribute("aria-current");
+			});
+			schedule();
+		};
+		listen(carousel, "click", (event) => {
+			const target = event.target instanceof Element ? event.target.closest("button") : null;
+			if (!target || target.closest("[data-gqd-carousel]") !== carousel) return;
+			if (target.hasAttribute("data-gqd-next")) show(index + 1);
+			else if (target.hasAttribute("data-gqd-previous")) show(index - 1);
+			else if (target.dataset.gqdGo !== void 0) show(Number(target.dataset.gqdGo));
+		});
+		listen(carousel, "keydown", (event) => {
+			if (!(event instanceof KeyboardEvent) || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+			const target = event.target instanceof Element ? event.target : null;
+			if (!target || target.closest("[data-gqd-carousel]") !== carousel || target.closest("input,textarea,select,[contenteditable=true]")) return;
+			const control = target.closest("button[data-gqd-next],button[data-gqd-previous],button[data-gqd-go]");
+			if (!control || control.closest(".wp-block-getquick-design-carousel-navigation")?.parentElement !== carousel) return;
+			if (![
+				"ArrowLeft",
+				"ArrowRight",
+				"Home",
+				"End"
+			].includes(event.key)) return;
+			event.preventDefault();
+			const rtl = view.getComputedStyle(carousel).direction === "rtl";
+			show(event.key === "Home" ? 0 : event.key === "End" ? slides.length - 1 : index + (event.key === "ArrowRight" !== rtl ? 1 : -1));
+		});
+		listen(carousel, "mouseenter", () => {
+			hovered = true;
+			cancel();
+		});
+		listen(carousel, "mouseleave", () => {
+			hovered = false;
+			schedule();
+		});
+		listen(carousel, "focusin", () => {
+			focused = true;
+			cancel();
+		});
+		listen(carousel, "focusout", (event) => {
+			focused = event instanceof FocusEvent && event.relatedTarget instanceof Node && carousel.contains(event.relatedTarget);
+			schedule();
+		});
+		listen(motion, "change", schedule);
+		listen(carousel.ownerDocument, "visibilitychange", schedule);
+		show(0);
+		cleanups.push(() => {
+			stopped = true;
+			cancel();
+			listeners.forEach((remove) => remove());
+			carousel.removeAttribute("data-gqd-mounted");
+			for (const { slide, hidden, inert, role, label, description } of previous) {
+				slide.hidden = hidden;
+				slide.inert = inert;
+				slide.removeAttribute("data-gqd-slide");
+				for (const [name, value] of [
+					["role", role],
+					["aria-label", label],
+					["aria-roledescription", description]
+				]) if (value === null) slide.removeAttribute(name);
+				else slide.setAttribute(name, value);
+			}
+		});
+	}
+	return () => cleanups.forEach((cleanup) => cleanup());
+}
+//#endregion
+/** Enhance only decorative media; nested content keeps its native interaction. */
+function mountVideoHero(hero) {
+	const media = hero.querySelector(":scope > .gqd-video-hero__media");
+	if (!media) return () => {};
+	let frame = null;
+	let video = null;
+	const sources = /* @__PURE__ */ new WeakMap();
+	const motion = globalThis.matchMedia("(prefers-reduced-motion: reduce)");
+	const update = () => {
+		const nextFrame = media.querySelector("iframe");
+		const nextVideo = media.querySelector("video");
+		if (frame !== nextFrame) frame?.removeAttribute("src");
+		if (video !== nextVideo) video?.pause();
+		frame = nextFrame;
+		video = nextVideo;
+		if (video) {
+			if (motion.matches) video.pause();
+			else video.play().catch(() => {});
+		}
+		if (!frame) return;
+		const source = frame.dataset.src || frame.getAttribute("src") || sources.get(frame);
+		if (source) sources.set(frame, source);
+		if (motion.matches) {
+			frame.removeAttribute("src");
+			frame.hidden = true;
+			return;
+		}
+		frame.hidden = false;
+		if (source && frame.getAttribute("src") !== source) frame.setAttribute("src", source);
+		const style = globalThis.getComputedStyle(frame);
+		const [x, y] = style.objectPosition.split(" ").map((v) => Number.parseFloat(v) / 100);
+		const geometry = videoHeroFrameGeometry({
+			width: media.clientWidth,
+			height: media.clientHeight
+		}, style.objectFit, {
+			x: Number.isFinite(x) ? x : .5,
+			y: Number.isFinite(y) ? y : .5
+		});
+		for (const [property, value] of Object.entries(geometry)) frame.style.setProperty(property, `${value}px`);
+	};
+	const resize = new globalThis.ResizeObserver(update);
+	resize.observe(media);
+	const attributes = new globalThis.MutationObserver(update);
+	attributes.observe(hero, {
+		attributes: true,
+		attributeFilter: ["style", "class"]
+	});
+	const children = new globalThis.MutationObserver(update);
+	children.observe(media, {
+		childList: true,
+		subtree: true
+	});
+	globalThis.addEventListener("resize", update);
+	motion.addEventListener("change", update);
+	update();
+	return () => {
+		resize.disconnect();
+		attributes.disconnect();
+		children.disconnect();
+		globalThis.removeEventListener("resize", update);
+		motion.removeEventListener("change", update);
+		video?.pause();
+		frame?.removeAttribute("src");
+	};
+}
+//#endregion
+//#region frontend/src/navigation-client.ts
+const mounted$1 = /* @__PURE__ */ new WeakSet();
+const inertLocks = /* @__PURE__ */ new WeakMap();
+function inertBackground(panel) {
+	const locked = [];
+	for (let branch = panel; branch.parentElement; branch = branch.parentElement) {
+		for (const sibling of branch.parentElement.children) {
+			if (sibling === branch || !("inert" in sibling)) continue;
+			const node = sibling;
+			const lock = inertLocks.get(node) ?? {
+				count: 0,
+				original: node.inert
+			};
+			lock.count += 1;
+			inertLocks.set(node, lock);
+			node.inert = true;
+			locked.push(node);
+		}
+		if (branch.parentElement === panel.ownerDocument.body) break;
+	}
+	return () => {
+		for (const node of locked) {
+			const lock = inertLocks.get(node);
+			if (!lock || --lock.count > 0) continue;
+			node.inert = lock.original;
+			inertLocks.delete(node);
+		}
+	};
+}
+/** Mount the adapter's navigation markup once; cleanup restores server state.
+* Native links retain ordinary Tab order (this is navigation, not an ARIA menu).
+* Install navigationStyleSheet alongside the canonical presentation stylesheet. */
+function mountDesignNavigation(root) {
+	const scope = root ?? (typeof document === "undefined" ? void 0 : document);
+	if (!scope) return () => {};
+	const cleanups = [];
+	const languageSelects = [...scope.querySelectorAll(".wp-block-polylang-language-switcher select.pll-switcher-select")];
+	if ("matches" in scope && typeof scope.matches === "function" && scope.matches(".wp-block-polylang-language-switcher select.pll-switcher-select")) languageSelects.unshift(scope);
+	for (const select of languageSelects) {
+		const view = select.ownerDocument.defaultView;
+		if (!view || mounted$1.has(select)) continue;
+		mounted$1.add(select);
+		const original = select.selectedIndex;
+		const change = (event) => {
+			event.stopImmediatePropagation();
+			const option = select.selectedOptions[0];
+			const value = option?.value.trim();
+			if (!option || option.disabled || !value || value.includes("\\")) return;
+			for (let index = 0; index < value.length; index++) if (value.charCodeAt(index) <= 32 || value.charCodeAt(index) === 127) return;
+			try {
+				const url = new URL(value, select.ownerDocument.baseURI);
+				if (!["http:", "https:"].includes(url.protocol) || url.username || url.password) return;
+				view.location.assign(url.href);
+			} catch {}
+		};
+		select.addEventListener("change", change, true);
+		cleanups.push(() => {
+			select.removeEventListener("change", change, true);
+			select.selectedIndex = original;
+			mounted$1.delete(select);
+		});
+	}
+	const languageMenus = [...scope.querySelectorAll("details[data-gqd-language-menu]")];
+	if ("matches" in scope && typeof scope.matches === "function" && scope.matches("details[data-gqd-language-menu]")) languageMenus.unshift(scope);
+	for (const menu of languageMenus) {
+		if (mounted$1.has(menu)) continue;
+		mounted$1.add(menu);
+		const original = menu.open;
+		const escape = (event) => {
+			if (event.key === "Escape" && menu.open) {
+				event.preventDefault();
+				menu.open = false;
+				menu.querySelector("summary")?.focus();
+			}
+		};
+		menu.addEventListener("keydown", escape);
+		cleanups.push(() => {
+			menu.removeEventListener("keydown", escape);
+			menu.open = original;
+			mounted$1.delete(menu);
+		});
+	}
+	const roots = [...scope.querySelectorAll("[data-gqd-navigation]")];
+	if ("matches" in scope && typeof scope.matches === "function" && scope.matches("[data-gqd-navigation]")) roots.unshift(scope);
+	for (const nav of roots) {
+		if (mounted$1.has(nav)) continue;
+		const view = nav.ownerDocument.defaultView;
+		const panel = nav.querySelector("[data-gqd-navigation-panel]");
+		const open = nav.querySelector("[data-gqd-navigation-open]");
+		const close = nav.querySelector("[data-gqd-navigation-close]");
+		if (!view || !panel || !open || !close) continue;
+		mounted$1.add(nav);
+		const buttons = [...nav.querySelectorAll("[data-gqd-submenu]")];
+		const lists = new Map(buttons.map((button) => [button, [...nav.querySelectorAll("[data-gqd-submenu-list]")].find((list) => list.id === button.getAttribute("aria-controls"))]));
+		const saved = /* @__PURE__ */ new Map();
+		const remember = (node, names) => saved.set(node, new Map(names.map((name) => [name, node.getAttribute(name)])));
+		remember(nav, ["data-gqd-navigation-enhanced", "data-gqd-overlay-active"]);
+		remember(panel, [
+			"hidden",
+			"role",
+			"aria-modal",
+			"aria-label",
+			"style"
+		]);
+		remember(open, ["aria-expanded"]);
+		buttons.forEach((button) => remember(button, ["aria-expanded"]));
+		for (const list of lists.values()) if (list) remember(list, ["hidden", "style"]);
+		const restore = (node, names) => {
+			for (const name of names) {
+				const value = saved.get(node)?.get(name);
+				if (value == null) node.removeAttribute(name);
+				else node.setAttribute(name, value);
+			}
+		};
+		const currentUrl = new URL(nav.ownerDocument.URL);
+		const path = (value) => value.replace(/\/+$/, "") || "/";
+		for (const anchor of nav.querySelectorAll("a[href]")) {
+			if (anchor.hasAttribute("aria-current")) continue;
+			try {
+				const target = new URL(anchor.getAttribute("href"), nav.ownerDocument.baseURI);
+				if (!target.hash && target.origin === currentUrl.origin && path(target.pathname) === path(currentUrl.pathname) && (!target.search || target.search === currentUrl.search)) {
+					remember(anchor, ["aria-current"]);
+					anchor.setAttribute("aria-current", "page");
+				}
+			} catch {}
+		}
+		const listeners = [];
+		const listen = (node, name, callback) => {
+			node.addEventListener(name, callback);
+			listeners.push(() => node.removeEventListener(name, callback));
+		};
+		let overlay = false;
+		let expanded = false;
+		let unlock;
+		const element = (target) => target && "nodeType" in target && target.nodeType === 1 ? target : null;
+		const setHidden = (node, hidden) => {
+			node.hidden = hidden;
+			restore(node, ["style"]);
+			if (hidden) node.style.setProperty("display", "none", "important");
+		};
+		const setSubmenu = (button, state) => {
+			const list = lists.get(button);
+			button.setAttribute("aria-expanded", String(state));
+			if (list) setHidden(list, !state);
+			if (!state && list) {
+				for (const nested of buttons) if (list.contains(nested)) {
+					nested.setAttribute("aria-expanded", "false");
+					const child = lists.get(nested);
+					if (child) setHidden(child, true);
+				}
+			}
+		};
+		const focusables = (node) => [...node.querySelectorAll("a[href],button:not([disabled]),summary,[tabindex=\"0\"]")].filter((candidate) => !candidate.closest("[hidden]") && view.getComputedStyle(candidate).visibility !== "hidden" && candidate.getClientRects().length > 0);
+		const setOverlay = (state, returnFocus = false) => {
+			expanded = state && overlay;
+			open.setAttribute("aria-expanded", String(expanded));
+			setHidden(panel, overlay && !expanded);
+			if (expanded) {
+				unlock ??= inertBackground(panel);
+				panel.setAttribute("role", "dialog");
+				panel.setAttribute("aria-modal", "true");
+				panel.setAttribute("aria-label", nav.getAttribute("aria-label") || "Navigation");
+				focusables(panel)[0]?.focus();
+			} else {
+				unlock?.();
+				unlock = void 0;
+				restore(panel, [
+					"role",
+					"aria-modal",
+					"aria-label"
+				]);
+				if (returnFocus) open.focus();
+			}
+		};
+		const threshold = view.getComputedStyle(nav).getPropertyValue("--gqd-navigation-breakpoint").trim() || "64rem";
+		const mobile = view.matchMedia(`(width < ${threshold})`);
+		const sync = () => {
+			const previous = overlay;
+			const focused = nav.ownerDocument.activeElement;
+			const panelFocused = focused !== null && panel.contains(focused);
+			overlay = nav.dataset.gqdOverlay === "always" || nav.dataset.gqdOverlay !== "never" && mobile.matches;
+			nav.toggleAttribute("data-gqd-overlay-active", overlay);
+			setOverlay(previous === overlay && expanded);
+			if (previous !== overlay) {
+				if (overlay && panelFocused) open.focus();
+				else if (!overlay && (focused === open || focused === close)) focusables(panel)[0]?.focus();
+			}
+		};
+		nav.setAttribute("data-gqd-navigation-enhanced", "");
+		for (const button of buttons) setSubmenu(button, nav.dataset.gqdSubmenuVisibility === "always");
+		sync();
+		listen(mobile, "change", sync);
+		listen(nav.ownerDocument, "focusin", (event) => {
+			const target = element(event.target);
+			if (expanded && target && !panel.contains(target)) focusables(panel)[0]?.focus();
+		});
+		listen(open, "click", () => setOverlay(true));
+		listen(close, "click", () => {
+			setOverlay(false, true);
+		});
+		for (const button of buttons) {
+			listen(button, "click", () => {
+				if (nav.dataset.gqdSubmenuVisibility !== "always") setSubmenu(button, button.getAttribute("aria-expanded") !== "true");
+			});
+			const row = button.closest("li") ?? button.parentElement;
+			const hover = () => {
+				if (nav.dataset.gqdSubmenuVisibility === "hover" && !overlay) setSubmenu(button, true);
+			};
+			listen(row, "pointerenter", hover);
+			listen(row, "pointerleave", () => {
+				if (nav.dataset.gqdSubmenuVisibility === "hover" && !row.contains(nav.ownerDocument.activeElement)) setSubmenu(button, false);
+			});
+			listen(row, "focusin", (event) => {
+				if (event.target !== button) hover();
+			});
+			listen(row, "focusout", (event) => {
+				const next = event.relatedTarget;
+				if (!next || !row.contains(next)) {
+					if (nav.dataset.gqdSubmenuVisibility !== "always") setSubmenu(button, false);
+				}
+			});
+		}
+		listen(nav, "keydown", (raw) => {
+			const event = raw;
+			const target = element(event.target);
+			if (!target || event.altKey || event.ctrlKey || event.metaKey) return;
+			const rtl = view.getComputedStyle(nav).direction === "rtl";
+			const button = target.closest("[data-gqd-submenu]");
+			if (button && ["ArrowDown", rtl ? "ArrowLeft" : "ArrowRight"].includes(event.key)) {
+				event.preventDefault();
+				setSubmenu(button, true);
+				const list = lists.get(button);
+				if (list) focusables(list)[0]?.focus();
+				return;
+			}
+			if (event.key === "Escape" || event.key === (rtl ? "ArrowRight" : "ArrowLeft")) {
+				const list = target.closest("[data-gqd-submenu-list]");
+				const row = target.closest("li");
+				const owner = (event.key === "Escape" && row ? buttons.find((candidate) => candidate.closest("li") === row && candidate.getAttribute("aria-expanded") === "true") : null) ?? (button?.getAttribute("aria-expanded") === "true" ? button : list ? buttons.find((candidate) => lists.get(candidate) === list) : null);
+				if (owner && owner.getAttribute("aria-expanded") === "true" && nav.dataset.gqdSubmenuVisibility !== "always") {
+					event.preventDefault();
+					event.stopPropagation();
+					setSubmenu(owner, false);
+					owner.focus();
+					return;
+				}
+				if (event.key === "Escape" && expanded) {
+					event.preventDefault();
+					setOverlay(false, true);
+				}
+			}
+			if (event.key === "Tab" && expanded) {
+				const candidates = focusables(panel);
+				const first = candidates[0], last = candidates.at(-1);
+				if (event.shiftKey && target === first) {
+					event.preventDefault();
+					last?.focus();
+				} else if (!event.shiftKey && target === last) {
+					event.preventDefault();
+					first?.focus();
+				}
+			}
+		});
+		listen(nav.ownerDocument, "pointerdown", (event) => {
+			const target = element(event.target);
+			if (target && !nav.contains(target) && nav.dataset.gqdSubmenuVisibility !== "always") buttons.forEach((button) => setSubmenu(button, false));
+		});
+		cleanups.push(() => {
+			listeners.forEach((remove) => remove());
+			unlock?.();
+			for (const [node, attributes] of saved) restore(node, [...attributes.keys()]);
+			mounted$1.delete(nav);
+		});
+	}
+	let disposed = false;
+	return () => {
+		if (disposed) return;
+		disposed = true;
+		cleanups.forEach((cleanup) => cleanup());
+	};
+}
+//#endregion
+//#region frontend/src/cover-video-client.ts
+const mounted = /* @__PURE__ */ new WeakSet();
+/** Mount decorative native Cover backgrounds in neutral, saved or delivered HTML.
+* No DOM access occurs until invocation. The Site owns mounting and cleanup. */
+function mountDesignCoverVideos(root) {
+	const scope = root ?? document;
+	const cleanups = Array.from(scope.querySelectorAll(".wp-block-cover > video.wp-block-cover__video-background")).map((video) => {
+		const view = video.ownerDocument.defaultView;
+		if (!view || mounted.has(video)) return () => {};
+		mounted.add(video);
+		const motion = view.matchMedia("(prefers-reduced-motion: reduce)");
+		let active = true;
+		video.autoplay = false;
+		video.removeAttribute("autoplay");
+		video.muted = true;
+		const update = () => {
+			if (!active || motion.matches) {
+				video.pause();
+				return;
+			}
+			video.play().then(() => {
+				if (active && motion.matches || !active && !mounted.has(video)) video.pause();
+			}, () => {});
+		};
+		motion.addEventListener("change", update);
+		update();
+		return () => {
+			if (!active) return;
+			active = false;
+			motion.removeEventListener("change", update);
+			mounted.delete(video);
+			video.pause();
+		};
+	});
+	return () => cleanups.forEach((cleanup) => cleanup());
+}
+//#endregion
+export { mountDesignCarousels, mountDesignCoverVideos, mountDesignNavigation, mountVideoHero };