mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 06:06:37 +03:00
1241 lines
51 KiB
JavaScript
1241 lines
51 KiB
JavaScript
import './dcx-settings.js';
|
||
import { dcxAsset } from './assets.js';
|
||
|
||
(() => {
|
||
"use strict";
|
||
|
||
const renameIconographyToComponents = () => {
|
||
const tile = document.querySelector('.dcx-tile[data-category="iconography"]');
|
||
if (tile) {
|
||
tile.dataset.category = "components";
|
||
tile.dataset.name = "Components";
|
||
tile.setAttribute("aria-label", "Open Components");
|
||
const title = tile.querySelector(".dcx-tile-title");
|
||
if (title) title.textContent = "Components";
|
||
}
|
||
|
||
const shellTemplate = document.querySelector("#dcx-shell-template");
|
||
const navItem = shellTemplate?.content.querySelector('li[data-category="iconography"]');
|
||
const navLink = navItem?.querySelector(".dcx-nav-link");
|
||
if (navItem && navLink) {
|
||
navItem.dataset.category = "components";
|
||
navLink.href = "#components";
|
||
navLink.dataset.dcxNav = "components";
|
||
navLink.textContent = "Components";
|
||
}
|
||
};
|
||
|
||
renameIconographyToComponents();
|
||
|
||
const CATEGORIES = [
|
||
"audience",
|
||
"product",
|
||
"brand",
|
||
"color",
|
||
"typography",
|
||
"components",
|
||
"material",
|
||
"hooks",
|
||
];
|
||
const REDUCED_MOTION = window.matchMedia("(prefers-reduced-motion: reduce)");
|
||
const MOBILE_NAV = window.matchMedia("(max-width: 920px)");
|
||
const CATEGORY_SET = new Set(CATEGORIES);
|
||
const categoryFromHash = (hash) => {
|
||
if (hash === "interface"
|
||
|| hash === "dcx-category-interface"
|
||
|| hash.startsWith("dcx-interface-")) return "hooks";
|
||
if (hash === "iconography"
|
||
|| hash === "dcx-category-iconography"
|
||
|| hash.startsWith("dcx-iconography-")) return "material";
|
||
return CATEGORIES.find((category) => hash === category
|
||
|| hash === `dcx-category-${category}`
|
||
|| hash.startsWith(`dcx-${category}-`)) || "";
|
||
};
|
||
const INITIAL_HASH = location.hash.slice(1);
|
||
let pendingInitialCategory = categoryFromHash(INITIAL_HASH);
|
||
let pendingInitialHash = pendingInitialCategory ? INITIAL_HASH : "";
|
||
|
||
let documentState = null;
|
||
let revealFrame = 0;
|
||
let pendingObserver = null;
|
||
|
||
const slugify = (value) => value
|
||
.toLowerCase()
|
||
.replace(/[^a-z0-9]+/g, "-")
|
||
.replace(/^-|-$/g, "");
|
||
|
||
const categoryName = (category) => document
|
||
.querySelector(`.dcx-tile[data-category="${category}"]`)
|
||
?.dataset.name || category;
|
||
|
||
const sourceCategory = (category) => category === "components" ? "interface" : category;
|
||
|
||
const templatesReady = () => CATEGORIES.every((category) => document
|
||
.querySelector(`#dcx-detail-${sourceCategory(category)}`)
|
||
?.content.querySelector(".dcx-article"))
|
||
&& Boolean(document.querySelector("#dcx-detail-iconography")
|
||
?.content.querySelector(".dcx-article"));
|
||
|
||
const getScrollTargetTop = (state, target) => {
|
||
if (!target) return 0;
|
||
const mainRect = state.main.getBoundingClientRect();
|
||
return Math.max(0, target.getBoundingClientRect().top - mainRect.top + state.main.scrollTop - 18);
|
||
};
|
||
|
||
const targetFromHash = (state, hash, category) => {
|
||
const article = state.main.querySelector(`:scope > .dcx-article[data-dcx-category="${category}"]`);
|
||
if (hash === "iconography"
|
||
|| hash === "dcx-category-iconography"
|
||
|| hash.startsWith("dcx-iconography-")) {
|
||
return state.main.querySelector("#dcx-material-iconography") || article;
|
||
}
|
||
if (!hash || hash === category) return article;
|
||
return state.main.querySelector(`#${CSS.escape(hash)}`) || article;
|
||
};
|
||
|
||
const copyText = async (value) => {
|
||
try {
|
||
if (navigator.clipboard?.writeText) {
|
||
await navigator.clipboard.writeText(value);
|
||
return true;
|
||
}
|
||
} catch {}
|
||
|
||
const previousFocus = document.activeElement;
|
||
const textarea = document.createElement("textarea");
|
||
textarea.value = value;
|
||
textarea.setAttribute("readonly", "");
|
||
textarea.style.position = "fixed";
|
||
textarea.style.opacity = "0";
|
||
document.body.appendChild(textarea);
|
||
textarea.select();
|
||
let copied = false;
|
||
try {
|
||
copied = document.execCommand("copy");
|
||
} catch {}
|
||
textarea.remove();
|
||
if (previousFocus instanceof HTMLElement && previousFocus.isConnected) {
|
||
previousFocus.focus({ preventScroll: true });
|
||
}
|
||
return copied;
|
||
};
|
||
|
||
const initializeColorFans = (root) => {
|
||
root.querySelectorAll(".dcx-fan:not([data-dcx-document-ready])").forEach((fan) => {
|
||
const panels = [...fan.querySelectorAll(".dcx-fan-panel")];
|
||
if (!panels.length) return;
|
||
fan.dataset.dcxDocumentReady = "true";
|
||
|
||
const engage = (activeIndex) => {
|
||
fan.classList.add("is-engaged");
|
||
panels.forEach((panel, index) => {
|
||
panel.classList.toggle("is-active", index === activeIndex);
|
||
panel.classList.toggle("is-neighbor", Math.abs(index - activeIndex) === 1);
|
||
});
|
||
};
|
||
const reset = () => {
|
||
fan.classList.remove("is-engaged");
|
||
panels.forEach((panel) => panel.classList.remove("is-active", "is-neighbor"));
|
||
};
|
||
|
||
fan.addEventListener("mousemove", (event) => {
|
||
const rect = fan.getBoundingClientRect();
|
||
const relativeX = Math.min(0.999, Math.max(0, (event.clientX - rect.left) / rect.width));
|
||
let activeIndex = 0;
|
||
panels.forEach((panel, index) => {
|
||
const left = Number.parseFloat(panel.style.getPropertyValue("--panel-left")) / 100;
|
||
if (relativeX >= left) activeIndex = index;
|
||
});
|
||
engage(activeIndex);
|
||
});
|
||
fan.addEventListener("mouseleave", reset);
|
||
|
||
panels.forEach((panel, index) => {
|
||
panel.addEventListener("focus", () => engage(index));
|
||
panel.addEventListener("blur", () => {
|
||
if (!fan.matches(":focus-within")) reset();
|
||
});
|
||
panel.addEventListener("click", () => {
|
||
const color = panel.dataset.copyColor;
|
||
if (!color) return;
|
||
copyText(color);
|
||
const name = panel.querySelector(".dcx-fan-name");
|
||
const original = panel.dataset.colorName || "Color";
|
||
panel.classList.add("is-copied");
|
||
if (name) name.textContent = "Copied!";
|
||
window.clearTimeout(panel._dcxCopyTimer);
|
||
panel._dcxCopyTimer = window.setTimeout(() => {
|
||
panel.classList.remove("is-copied");
|
||
if (name) name.textContent = original;
|
||
}, 900);
|
||
});
|
||
});
|
||
});
|
||
};
|
||
|
||
const createDocumentSection = (label, markup) => {
|
||
const section = document.createElement("section");
|
||
section.className = "dcx-block";
|
||
section.dataset.label = label;
|
||
|
||
const blockLabel = document.createElement("span");
|
||
blockLabel.className = "dcx-block-label";
|
||
blockLabel.textContent = label;
|
||
|
||
const content = document.createElement("template");
|
||
content.innerHTML = markup;
|
||
section.append(blockLabel, content.content);
|
||
return section;
|
||
};
|
||
|
||
const BRAND_PLACEHOLDER_ASSETS = [
|
||
{
|
||
src: "/assets/brand/placeholders/hanazono-primary-mark.png",
|
||
kind: "logo",
|
||
title: "Primary mark",
|
||
alt: "Abstract botanical primary mark in textured gold leaf and patina",
|
||
width: 768,
|
||
height: 768,
|
||
},
|
||
{
|
||
src: "/assets/brand/placeholders/hanazono-atelier-seal.png",
|
||
kind: "logo",
|
||
title: "Atelier seal",
|
||
alt: "Circular floral atelier seal in textured gold leaf and patina",
|
||
width: 768,
|
||
height: 768,
|
||
},
|
||
{
|
||
src: "/assets/brand/placeholders/hanazono-seasonal-moodboard.webp",
|
||
kind: "moodboard",
|
||
title: "Seasonal composition",
|
||
alt: "Editorial moodboard of flowers, handmade paper, gold leaf, and vermilion thread",
|
||
width: 960,
|
||
height: 720,
|
||
},
|
||
{
|
||
src: "/assets/brand/placeholders/hanazono-material-reference.webp",
|
||
kind: "reference",
|
||
title: "Material direction",
|
||
alt: "Material study of lacquer, washi paper, gold leaf, and verdigris patina",
|
||
width: 960,
|
||
height: 720,
|
||
},
|
||
];
|
||
|
||
const humanizeAssetName = (value, fallback) => {
|
||
const name = String(value || "")
|
||
.split(/[\\/]/)
|
||
.pop()
|
||
?.replace(/\.[a-z0-9]+$/i, "")
|
||
.replace(/[-_]+/g, " ")
|
||
.trim();
|
||
if (!name) return fallback;
|
||
return name.replace(/\b\w/g, (letter) => letter.toUpperCase());
|
||
};
|
||
|
||
const renderedBrandAssets = (article) => {
|
||
const assets = [];
|
||
const collect = (selector, kind, fallback) => {
|
||
article.querySelectorAll(selector).forEach((figure, index) => {
|
||
const image = figure.querySelector("img");
|
||
if (!image) return;
|
||
const note = figure.querySelector(".dcx-asset-caption p")?.textContent.trim();
|
||
const file = figure.querySelector(".dcx-asset-caption code")?.textContent.trim()
|
||
|| image.getAttribute("src")
|
||
|| "";
|
||
const title = note || humanizeAssetName(file, `${fallback} ${index + 1}`);
|
||
assets.push({
|
||
src: image.getAttribute("src") || image.src,
|
||
kind,
|
||
title,
|
||
alt: note || `${title} ${kind === "logo" ? "logo" : "brand image"}`,
|
||
width: kind === "logo" ? 1200 : 1600,
|
||
height: kind === "logo" ? 1200 : 1200,
|
||
});
|
||
});
|
||
};
|
||
|
||
collect(':scope > .dcx-block[data-label="Marks"] .dcx-mark', "logo", "Logo");
|
||
collect(':scope > .dcx-block[data-label="Boards and references"] .dcx-board', "image", "Brand image");
|
||
article.querySelectorAll(':scope > .dcx-block[data-label="Marks"], :scope > .dcx-block[data-label="Boards and references"], :scope > .dcx-block[data-label="Assets provided"]')
|
||
.forEach((block) => block.remove());
|
||
return assets;
|
||
};
|
||
|
||
const composeBrandAssetsArticle = (article) => {
|
||
const uploaded = renderedBrandAssets(article);
|
||
const assets = uploaded.length ? uploaded : BRAND_PLACEHOLDER_ASSETS;
|
||
const section = createDocumentSection("Brand assets", "");
|
||
section.dataset.dcxBrandAssets = uploaded.length ? "uploaded" : "placeholder";
|
||
|
||
const grid = document.createElement("ul");
|
||
grid.className = "dcx-brand-assets-grid";
|
||
grid.setAttribute("aria-label", "Available brand assets");
|
||
|
||
assets.forEach((asset) => {
|
||
const item = document.createElement("li");
|
||
item.className = "dcx-brand-asset";
|
||
item.dataset.assetKind = asset.kind;
|
||
|
||
const figure = document.createElement("figure");
|
||
const frame = document.createElement("div");
|
||
frame.className = "dcx-brand-asset-frame";
|
||
|
||
const image = document.createElement("img");
|
||
image.src = asset.src.startsWith('/assets/') ? dcxAsset(asset.src) : asset.src;
|
||
image.alt = asset.alt;
|
||
image.width = asset.width;
|
||
image.height = asset.height;
|
||
image.loading = "lazy";
|
||
image.decoding = "async";
|
||
frame.appendChild(image);
|
||
|
||
const caption = document.createElement("figcaption");
|
||
const title = document.createElement("strong");
|
||
title.textContent = asset.title;
|
||
const kind = document.createElement("span");
|
||
kind.textContent = asset.kind === "logo"
|
||
? "Logo"
|
||
: asset.kind === "moodboard"
|
||
? "Moodboard"
|
||
: asset.kind === "reference"
|
||
? "Reference"
|
||
: "Image";
|
||
caption.append(title, kind);
|
||
|
||
figure.append(frame, caption);
|
||
item.appendChild(figure);
|
||
grid.appendChild(item);
|
||
});
|
||
|
||
section.appendChild(grid);
|
||
article.appendChild(section);
|
||
const lede = article.querySelector(":scope > header > .dcx-lede");
|
||
if (lede) lede.textContent = "Identity, voice, references, taste boundaries, and available assets.";
|
||
};
|
||
|
||
const componentCardMedia = () => dcxAsset("/assets/components/hanazono-ikebana-card.jpg");
|
||
|
||
const composeComponentsArticle = (article) => {
|
||
article.querySelectorAll(":scope > .dcx-block[data-label]").forEach((block) => block.remove());
|
||
|
||
const buttons = createDocumentSection("Buttons", `
|
||
<div class="dcx-component-stack">
|
||
<figure class="dcx-component-example">
|
||
<figcaption><h4>Variants</h4></figcaption>
|
||
<div class="dcx-component-canvas dcx-component-canvas--center">
|
||
<div class="dcx-component-row">
|
||
<span class="dcx-demo-button dcx-demo-button--primary">Primary</span>
|
||
<span class="dcx-demo-button dcx-demo-button--secondary">Secondary</span>
|
||
<span class="dcx-demo-button dcx-demo-button--tertiary">Tertiary</span>
|
||
<span class="dcx-demo-button dcx-demo-button--outline">Outline</span>
|
||
<span class="dcx-demo-button dcx-demo-button--ghost">Ghost</span>
|
||
<span class="dcx-demo-button dcx-demo-button--danger">Danger</span>
|
||
<span class="dcx-demo-button dcx-demo-button--danger-soft">Danger soft</span>
|
||
</div>
|
||
</div>
|
||
</figure>
|
||
|
||
<figure class="dcx-component-example">
|
||
<figcaption><h4>Sizes</h4></figcaption>
|
||
<div class="dcx-component-canvas dcx-component-canvas--center">
|
||
<div class="dcx-component-row dcx-component-row--baseline">
|
||
<span class="dcx-demo-button dcx-demo-button--primary dcx-demo-button--small">Small</span>
|
||
<span class="dcx-demo-button dcx-demo-button--primary">Medium</span>
|
||
<span class="dcx-demo-button dcx-demo-button--primary dcx-demo-button--large">Large</span>
|
||
</div>
|
||
</div>
|
||
</figure>
|
||
|
||
<figure class="dcx-component-example">
|
||
<figcaption><h4>With icons</h4></figcaption>
|
||
<div class="dcx-component-canvas dcx-component-canvas--center">
|
||
<div class="dcx-component-row">
|
||
<span class="dcx-demo-button dcx-demo-button--primary">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6"></circle><path d="m16 16 4 4"></path></svg>
|
||
Search
|
||
</span>
|
||
<span class="dcx-demo-button dcx-demo-button--secondary">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"></path></svg>
|
||
Add member
|
||
</span>
|
||
<span class="dcx-demo-button dcx-demo-button--outline">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"></rect><path d="m4 7 8 6 8-6"></path></svg>
|
||
Email
|
||
</span>
|
||
<span class="dcx-demo-button dcx-demo-button--danger">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M9 7V4h6v3m3 0-1 13H7L6 7m4 4v5m4-5v5"></path></svg>
|
||
Delete
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</figure>
|
||
|
||
<figure class="dcx-component-example">
|
||
<figcaption><h4>Icon only</h4></figcaption>
|
||
<div class="dcx-component-canvas dcx-component-canvas--center">
|
||
<div class="dcx-component-row">
|
||
<span class="dcx-demo-icon-button dcx-demo-icon-button--secondary" aria-label="More options">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="5" cy="12" r="1"></circle><circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle></svg>
|
||
</span>
|
||
<span class="dcx-demo-icon-button dcx-demo-icon-button--outline" aria-label="Settings">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3"></circle><path d="M12 3v2m0 14v2M3 12h2m14 0h2M5.6 5.6 7 7m10 10 1.4 1.4M18.4 5.6 17 7M7 17l-1.4 1.4"></path></svg>
|
||
</span>
|
||
<span class="dcx-demo-icon-button dcx-demo-icon-button--danger" aria-label="Delete">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M9 7V4h6v3m3 0-1 13H7L6 7m4 4v5m4-5v5"></path></svg>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</figure>
|
||
|
||
<figure class="dcx-component-example">
|
||
<figcaption><h4>Loading</h4></figcaption>
|
||
<div class="dcx-component-canvas dcx-component-canvas--center">
|
||
<span class="dcx-demo-button dcx-demo-button--primary dcx-demo-button--loading">
|
||
<span class="dcx-demo-spinner" aria-hidden="true"></span>
|
||
Uploading…
|
||
</span>
|
||
</div>
|
||
</figure>
|
||
</div>
|
||
`);
|
||
|
||
const fields = createDocumentSection("Input fields", `
|
||
<div class="dcx-component-stack">
|
||
<figure class="dcx-component-example">
|
||
<figcaption><h4>States</h4></figcaption>
|
||
<div class="dcx-component-canvas dcx-component-canvas--fields">
|
||
<div class="dcx-component-demo-grid dcx-component-demo-grid--three">
|
||
<div class="dcx-demo-field">
|
||
<span class="dcx-demo-field-label">Email address</span>
|
||
<span class="dcx-demo-input is-placeholder">name@example.com</span>
|
||
<small>Default</small>
|
||
</div>
|
||
<div class="dcx-demo-field">
|
||
<span class="dcx-demo-field-label">Project type</span>
|
||
<span class="dcx-demo-input">Ceremony florals</span>
|
||
<small>Filled</small>
|
||
</div>
|
||
<div class="dcx-demo-field is-invalid">
|
||
<span class="dcx-demo-field-label">Start date</span>
|
||
<span class="dcx-demo-input">Soon</span>
|
||
<small>Enter a date in DD/MM/YYYY format.</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</figure>
|
||
|
||
<figure class="dcx-component-example">
|
||
<figcaption><h4>Sizes</h4></figcaption>
|
||
<div class="dcx-component-canvas dcx-component-canvas--fields">
|
||
<div class="dcx-component-demo-grid dcx-component-demo-grid--three dcx-component-demo-grid--baseline">
|
||
<div class="dcx-demo-field dcx-demo-field--small">
|
||
<span class="dcx-demo-field-label">Small</span>
|
||
<span class="dcx-demo-input">Hana</span>
|
||
</div>
|
||
<div class="dcx-demo-field">
|
||
<span class="dcx-demo-field-label">Medium</span>
|
||
<span class="dcx-demo-input">Hanazono Atelier</span>
|
||
</div>
|
||
<div class="dcx-demo-field dcx-demo-field--large">
|
||
<span class="dcx-demo-field-label">Large</span>
|
||
<span class="dcx-demo-input">Private celebration</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</figure>
|
||
|
||
<figure class="dcx-component-example">
|
||
<figcaption><h4>With leading content</h4></figcaption>
|
||
<div class="dcx-component-canvas dcx-component-canvas--fields">
|
||
<div class="dcx-component-demo-grid dcx-component-demo-grid--three">
|
||
<div class="dcx-demo-field">
|
||
<span class="dcx-demo-field-label">Search</span>
|
||
<span class="dcx-demo-input dcx-demo-input--affix">
|
||
<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="6"></circle><path d="m16 16 4 4"></path></svg>
|
||
Spring arrangements
|
||
</span>
|
||
</div>
|
||
<div class="dcx-demo-field">
|
||
<span class="dcx-demo-field-label">Budget</span>
|
||
<span class="dcx-demo-input dcx-demo-input--affix"><span>$</span>4,800</span>
|
||
</div>
|
||
<div class="dcx-demo-field">
|
||
<span class="dcx-demo-field-label">Website</span>
|
||
<span class="dcx-demo-input dcx-demo-input--affix dcx-demo-input--suffix">hanazono<span>.jp</span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</figure>
|
||
|
||
<figure class="dcx-component-example">
|
||
<figcaption><h4>Multiline</h4></figcaption>
|
||
<div class="dcx-component-canvas dcx-component-canvas--fields">
|
||
<div class="dcx-component-demo-grid dcx-component-demo-grid--single">
|
||
<div class="dcx-demo-field">
|
||
<span class="dcx-demo-field-label">Tell us about the setting</span>
|
||
<span class="dcx-demo-input dcx-demo-input--textarea">A quiet evening ceremony with seasonal branches, soft candlelight, and room for the architecture to breathe.</span>
|
||
<small>240 characters remaining</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</figure>
|
||
</div>
|
||
`);
|
||
|
||
const cards = createDocumentSection("Cards", `
|
||
<div class="dcx-component-stack">
|
||
<figure class="dcx-component-example">
|
||
<figcaption><h4>Content cards</h4></figcaption>
|
||
<div class="dcx-component-canvas dcx-component-canvas--cards">
|
||
<div class="dcx-component-demo-grid dcx-component-demo-grid--three">
|
||
<article class="dcx-showcase-card">
|
||
<div class="dcx-showcase-card-body">
|
||
<span class="dcx-component-kind">Editorial</span>
|
||
<h5>Seasonal notes</h5>
|
||
<p>Materials, timing, and the decisions behind the work.</p>
|
||
<span class="dcx-showcase-card-link">Read the story <span aria-hidden="true">→</span></span>
|
||
</div>
|
||
</article>
|
||
<article class="dcx-showcase-card">
|
||
<div class="dcx-showcase-card-body">
|
||
<span class="dcx-component-kind">Testimonial</span>
|
||
<blockquote>“The room felt entirely transformed, but still like us.”</blockquote>
|
||
<span class="dcx-showcase-card-meta">Mika & Ren</span>
|
||
</div>
|
||
</article>
|
||
<article class="dcx-showcase-card">
|
||
<div class="dcx-showcase-card-body">
|
||
<span class="dcx-component-kind">Details</span>
|
||
<h5>Autumn ceremony</h5>
|
||
<dl><div><dt>Season</dt><dd>Late autumn</dd></div><div><dt>Setting</dt><dd>Kyoto townhouse</dd></div></dl>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</figure>
|
||
|
||
<figure class="dcx-component-example">
|
||
<figcaption><h4>With media</h4></figcaption>
|
||
<div class="dcx-component-canvas dcx-component-canvas--cards">
|
||
<div class="dcx-component-demo-grid dcx-component-demo-grid--two">
|
||
<article class="dcx-showcase-card dcx-showcase-card--media">
|
||
<img src="${componentCardMedia()}" width="800" height="1200" alt="Purple flowers arranged in a black ceramic vase" loading="lazy" decoding="async">
|
||
<div class="dcx-showcase-card-body">
|
||
<span class="dcx-component-kind">Garden study</span>
|
||
<h5>Line, pause, and negative space</h5>
|
||
<p>A restrained floral study built around one deliberate gesture.</p>
|
||
</div>
|
||
</article>
|
||
<article class="dcx-showcase-card dcx-showcase-card--media dcx-showcase-card--media-close">
|
||
<img src="${componentCardMedia()}" width="800" height="1200" alt="Close crop of purple ikebana flowers" loading="lazy" decoding="async">
|
||
<div class="dcx-showcase-card-body">
|
||
<span class="dcx-component-kind">Material note</span>
|
||
<h5>Dark ceramic, soft bloom</h5>
|
||
<p>The same image can lead with subject or material detail.</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</figure>
|
||
|
||
<figure class="dcx-component-example">
|
||
<figcaption><h4>Horizontal</h4></figcaption>
|
||
<div class="dcx-component-canvas dcx-component-canvas--cards dcx-component-canvas--single-card">
|
||
<article class="dcx-showcase-card dcx-showcase-card--horizontal">
|
||
<img src="${componentCardMedia()}" width="800" height="1200" alt="Purple ikebana in a dark ceramic vase" loading="lazy" decoding="async">
|
||
<div class="dcx-showcase-card-body">
|
||
<span class="dcx-component-kind">Featured story</span>
|
||
<h5>A study in asymmetry</h5>
|
||
<p>How a single stem, a dark vessel, and generous space hold the composition together.</p>
|
||
<span class="dcx-showcase-card-link">Explore the study <span aria-hidden="true">→</span></span>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</figure>
|
||
|
||
<figure class="dcx-component-example">
|
||
<figcaption><h4>With actions</h4></figcaption>
|
||
<div class="dcx-component-canvas dcx-component-canvas--cards">
|
||
<div class="dcx-component-demo-grid dcx-component-demo-grid--two">
|
||
<article class="dcx-showcase-card dcx-showcase-card--action">
|
||
<div class="dcx-showcase-card-body">
|
||
<span class="dcx-component-kind">Consultation</span>
|
||
<h5>Plan the first conversation</h5>
|
||
<p>Share the date and setting so the studio can prepare.</p>
|
||
<span class="dcx-demo-button dcx-demo-button--primary">Book now</span>
|
||
</div>
|
||
</article>
|
||
<article class="dcx-showcase-card dcx-showcase-card--action">
|
||
<div class="dcx-showcase-card-body">
|
||
<span class="dcx-component-kind">Commission guide</span>
|
||
<h5>Understand the process</h5>
|
||
<p>Read the stages, timing, and what the studio needs from you.</p>
|
||
<span class="dcx-demo-button dcx-demo-button--outline">View the guide</span>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</figure>
|
||
</div>
|
||
<aside class="dcx-components-command" data-dcx-command-context aria-labelledby="dcx-components-command-title">
|
||
<div class="dcx-components-command-copy">
|
||
<h4 id="dcx-components-command-title">Add another component</h4>
|
||
<p>Built something new? Re-scan the project to add it to this component library.</p>
|
||
</div>
|
||
<div class="dcx-command-copy">
|
||
<span class="dcx-command-copy__prompt" aria-hidden="true">$</span>
|
||
<code>/impeccable document</code>
|
||
<button class="dcx-command-copy__button" type="button" data-dcx-copy-command="/impeccable document" aria-label="Copy add component command">
|
||
<svg class="dcx-command-copy__copy-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||
<rect x="9" y="9" width="13" height="13" rx="2"></rect>
|
||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||
</svg>
|
||
<svg class="dcx-command-copy__check-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M20 6 9 17l-5-5"></path>
|
||
</svg>
|
||
<span class="dcx-command-copy__label">Copy</span>
|
||
</button>
|
||
</div>
|
||
<span class="dcx-command-status" role="status" aria-live="polite"></span>
|
||
</aside>
|
||
`);
|
||
|
||
article.append(buttons, fields, cards);
|
||
};
|
||
|
||
const mountArticles = (state) => {
|
||
const fragment = document.createDocumentFragment();
|
||
const documentTitle = document.createElement("h1");
|
||
documentTitle.className = "dcx-document-title";
|
||
documentTitle.textContent = "Design context";
|
||
fragment.appendChild(documentTitle);
|
||
|
||
CATEGORIES.forEach((category) => {
|
||
const template = document.querySelector(`#dcx-detail-${sourceCategory(category)}`);
|
||
const clone = template.content.cloneNode(true);
|
||
const article = clone.querySelector(".dcx-article");
|
||
if (!article) return;
|
||
|
||
if (category === "components") {
|
||
composeComponentsArticle(article);
|
||
const title = article.querySelector(":scope > header > .dcx-title");
|
||
const lede = article.querySelector(":scope > header > .dcx-lede");
|
||
if (title) title.textContent = "Components";
|
||
if (lede) lede.textContent = "A compact visual inventory of reusable interface patterns.";
|
||
}
|
||
|
||
if (category === "brand") composeBrandAssetsArticle(article);
|
||
|
||
if (category === "material") {
|
||
const accessibility = createDocumentSection("Accessibility", `
|
||
<dl class="dcx-defs">
|
||
<div class="dcx-def">
|
||
<dt>Contrast on paper</dt>
|
||
<dd>The accent color is reserved for display-scale text. Small links, labels, and inline commands use high-contrast ink on the page ground.</dd>
|
||
</div>
|
||
<div class="dcx-def">
|
||
<dt>Reading comfort</dt>
|
||
<dd>Body copy is set in the committed body face at a 1.65–1.8 line height and a 65–75ch reading measure.</dd>
|
||
</div>
|
||
<div class="dcx-def">
|
||
<dt>Keyboard focus</dt>
|
||
<dd>Interactive elements show a visible focus outline with a clear offset.</dd>
|
||
</div>
|
||
<div class="dcx-def">
|
||
<dt>Texture & text</dt>
|
||
<dd>Text never sits directly on high-contrast texture. Move texture to an edge, or put a solid veil behind the copy.</dd>
|
||
</div>
|
||
</dl>
|
||
`);
|
||
const motion = article.querySelector(':scope > .dcx-block[data-label="Motion per surface"], :scope > .dcx-block[data-label="Motion"]');
|
||
const layout = article.querySelector(':scope > .dcx-block[data-label="Layout structure"]');
|
||
if (motion) motion.after(accessibility);
|
||
else if (layout) layout.before(accessibility);
|
||
else article.appendChild(accessibility);
|
||
|
||
const iconographyArticle = document.querySelector("#dcx-detail-iconography")
|
||
?.content.querySelector(".dcx-article");
|
||
const library = iconographyArticle
|
||
?.querySelector(':scope > .dcx-block[data-label="Library"]')
|
||
?.cloneNode(true);
|
||
if (library) {
|
||
library.dataset.label = "Iconography";
|
||
library.dataset.dcxMovedIconography = "true";
|
||
const label = library.querySelector(":scope > .dcx-block-label");
|
||
if (label) label.textContent = "Iconography";
|
||
article.appendChild(library);
|
||
}
|
||
const lede = article.querySelector(":scope > header > .dcx-lede");
|
||
if (lede) lede.textContent = "Motion, accessibility, layout structure, boundaries, corners, depth, and iconography.";
|
||
}
|
||
|
||
article.querySelector(":scope > header > .dcx-eyebrow")?.remove();
|
||
article.dataset.dcxCategory = category;
|
||
article.id = `dcx-category-${category}`;
|
||
article.classList.add("dcx-document-article");
|
||
article.setAttribute("aria-label", categoryName(category));
|
||
article.querySelectorAll(".dcx-block[data-label]").forEach((block) => {
|
||
block.id = `dcx-${category}-${slugify(block.dataset.label || "section")}`;
|
||
});
|
||
fragment.appendChild(article);
|
||
});
|
||
|
||
state.main.replaceChildren(fragment);
|
||
state.main.dataset.dcxContinuous = "true";
|
||
state.expander.dataset.dcxDocument = "true";
|
||
initializeColorFans(state.main);
|
||
state.expander.dispatchEvent(new CustomEvent("dcx:document-mounted", { bubbles: true }));
|
||
};
|
||
|
||
const audienceSubnav = (article) => {
|
||
const blocks = [...article.querySelectorAll(":scope > .dcx-block[data-label]")];
|
||
const byLabel = new Map(blocks.map((block) => [block.dataset.label, block]));
|
||
return [
|
||
{ label: "People", target: byLabel.get("Who they are") },
|
||
{ label: "Decision factors", target: byLabel.get("Needs") || byLabel.get("Trust triggers") },
|
||
{ label: "Inclusion", target: byLabel.get("Who must not be excluded") },
|
||
].filter((item) => item.target);
|
||
};
|
||
|
||
const genericSubnav = (article) => [...article.querySelectorAll(":scope > .dcx-block[data-label]")]
|
||
.map((block) => ({ label: block.dataset.label, target: block }));
|
||
|
||
const renderSubnav = (state, category, article) => {
|
||
const descriptors = category === "audience" ? audienceSubnav(article) : genericSubnav(article);
|
||
const activeItem = state.nav.querySelector(`.dcx-nav-list > li[data-category="${category}"]`);
|
||
const subnav = activeItem?.querySelector(":scope > .dcx-subnav");
|
||
if (!subnav) return;
|
||
|
||
const signature = descriptors.map(({ label, target }) => `${label}:${target.id}`).join("|");
|
||
const measure = () => {
|
||
const links = [...subnav.querySelectorAll(":scope > .dcx-sub-link")];
|
||
const heights = links.map((link) => link.getBoundingClientRect().height);
|
||
if (!heights.some((height) => height > 0)) return;
|
||
const summary = category === "audience";
|
||
const gap = summary ? 0 : 2;
|
||
const padding = summary ? 14 : 10;
|
||
const height = heights.reduce((total, value) => total + value, 0)
|
||
+ Math.max(0, links.length - 1) * gap
|
||
+ padding;
|
||
subnav.style.setProperty("--dcx-subnav-height", `${Math.ceil(height)}px`);
|
||
};
|
||
if (subnav.dataset.dcxDocumentSignature === signature) {
|
||
measure();
|
||
return;
|
||
}
|
||
|
||
const links = descriptors.map(({ label, target }) => {
|
||
const link = document.createElement("a");
|
||
link.className = "dcx-sub-link";
|
||
link.href = `#${target.id}`;
|
||
link.textContent = label;
|
||
link.dataset.dcxDocumentTarget = target.id;
|
||
if (category === "audience") link.dataset.dcxRailSummary = "";
|
||
return link;
|
||
});
|
||
subnav.replaceChildren(...links);
|
||
subnav.dataset.dcxDocumentSignature = signature;
|
||
subnav.classList.toggle("dcx-subnav--summary", category === "audience");
|
||
measure();
|
||
};
|
||
|
||
const prepareSubnavs = (state) => {
|
||
CATEGORIES.forEach((category) => {
|
||
const article = state.main.querySelector(`:scope > .dcx-article[data-dcx-category="${category}"]`);
|
||
if (article) renderSubnav(state, category, article);
|
||
});
|
||
};
|
||
|
||
const setActiveCategory = (state, category, { updateHash = false } = {}) => {
|
||
if (!CATEGORY_SET.has(category)) return;
|
||
const article = state.main.querySelector(`:scope > .dcx-article[data-dcx-category="${category}"]`);
|
||
if (!article) return;
|
||
|
||
const previousCategory = state.currentCategory;
|
||
if (previousCategory === category) {
|
||
renderSubnav(state, category, article);
|
||
state.expander.querySelector(".dcx-current").textContent = categoryName(category);
|
||
return;
|
||
}
|
||
|
||
if (previousCategory) {
|
||
state.expander.dispatchEvent(new CustomEvent("dcx:continuouscategorywillchange", {
|
||
bubbles: true,
|
||
detail: {
|
||
from: previousCategory,
|
||
to: category,
|
||
source: state.pinnedCategory === category ? "navigation" : "scroll",
|
||
},
|
||
}));
|
||
}
|
||
|
||
state.currentCategory = category;
|
||
state.expander.dataset.dcxCurrentCategory = category;
|
||
state.expander.querySelector(".dcx-current").textContent = categoryName(category);
|
||
|
||
state.nav.querySelectorAll(".dcx-nav-list > li[data-category]").forEach((item) => {
|
||
const active = item.dataset.category === category;
|
||
item.classList.toggle("is-active", active);
|
||
const link = item.querySelector(":scope > .dcx-nav-link");
|
||
const subnav = item.querySelector(":scope > .dcx-subnav");
|
||
if (active) {
|
||
link?.setAttribute("aria-current", "page");
|
||
link?.setAttribute("aria-expanded", "true");
|
||
subnav?.removeAttribute("aria-hidden");
|
||
if (subnav) subnav.inert = false;
|
||
} else {
|
||
link?.removeAttribute("aria-current");
|
||
link?.removeAttribute("aria-expanded");
|
||
subnav?.setAttribute("aria-hidden", "true");
|
||
if (subnav) subnav.inert = true;
|
||
}
|
||
});
|
||
|
||
renderSubnav(state, category, article);
|
||
if (MOBILE_NAV.matches) {
|
||
const activeItem = state.nav.querySelector(`.dcx-nav-list > li[data-category="${category}"]`);
|
||
requestAnimationFrame(() => {
|
||
activeItem?.scrollIntoView({
|
||
behavior: REDUCED_MOTION.matches ? "auto" : "smooth",
|
||
block: "nearest",
|
||
inline: "nearest",
|
||
});
|
||
});
|
||
}
|
||
state.expander.dispatchEvent(new CustomEvent("dcx:continuouscategorychange", {
|
||
bubbles: true,
|
||
detail: { category, article },
|
||
}));
|
||
|
||
if (updateHash) {
|
||
history.replaceState({ category }, "", `#${category}`);
|
||
}
|
||
};
|
||
|
||
const findVisibleCategory = (state) => {
|
||
const articles = [...state.main.querySelectorAll(":scope > .dcx-article[data-dcx-category]")];
|
||
if (!articles.length) return "audience";
|
||
if (state.pinnedCategory) return state.pinnedCategory;
|
||
|
||
const mainRect = state.main.getBoundingClientRect();
|
||
const marker = mainRect.top + state.main.clientHeight * 0.24;
|
||
let visible = articles[0];
|
||
articles.forEach((article) => {
|
||
if (article.getBoundingClientRect().top <= marker) visible = article;
|
||
});
|
||
if (state.main.scrollTop + state.main.clientHeight >= state.main.scrollHeight - 4) {
|
||
visible = articles.at(-1);
|
||
}
|
||
return visible.dataset.dcxCategory;
|
||
};
|
||
|
||
const handleMainScroll = (state) => {
|
||
if (state.scrollFrame) return;
|
||
state.scrollFrame = requestAnimationFrame(() => {
|
||
state.scrollFrame = 0;
|
||
const category = findVisibleCategory(state);
|
||
if (category !== state.currentCategory) setActiveCategory(state, category, { updateHash: true });
|
||
});
|
||
};
|
||
|
||
const releasePinnedCategory = (state) => {
|
||
state.pinnedCategory = "";
|
||
window.clearTimeout(state.pinTimer);
|
||
};
|
||
|
||
const scrollToTarget = (state, target, category, {
|
||
instant = false,
|
||
historyMode = "push",
|
||
hash = category,
|
||
} = {}) => {
|
||
if (!target || !CATEGORY_SET.has(category)) return;
|
||
state.pinnedCategory = category;
|
||
setActiveCategory(state, category);
|
||
const top = target === state.main.firstElementChild ? 0 : getScrollTargetTop(state, target);
|
||
state.main.scrollTo({
|
||
top,
|
||
behavior: instant || REDUCED_MOTION.matches ? "auto" : "smooth",
|
||
});
|
||
|
||
if (historyMode === "push") history.pushState({ category }, "", `#${hash}`);
|
||
if (historyMode === "replace") history.replaceState({ category }, "", `#${hash}`);
|
||
|
||
window.clearTimeout(state.pinTimer);
|
||
state.pinTimer = window.setTimeout(() => {
|
||
state.pinnedCategory = "";
|
||
handleMainScroll(state);
|
||
}, instant ? 80 : 760);
|
||
};
|
||
|
||
const scrollToCategory = (state, category, options = {}) => {
|
||
const article = state.main.querySelector(`:scope > .dcx-article[data-dcx-category="${category}"]`);
|
||
scrollToTarget(state, article, category, options);
|
||
};
|
||
|
||
const handleNavigation = (state, event) => {
|
||
const categoryLink = event.target.closest(".dcx-nav-link[data-dcx-nav]");
|
||
if (categoryLink && state.nav.contains(categoryLink)) {
|
||
event.preventDefault();
|
||
const category = categoryLink.dataset.dcxNav;
|
||
scrollToCategory(state, category);
|
||
return;
|
||
}
|
||
|
||
const subsection = event.target.closest(".dcx-sub-link[data-dcx-document-target]");
|
||
if (!subsection || !state.nav.contains(subsection)) return;
|
||
event.preventDefault();
|
||
const target = state.main.querySelector(`#${CSS.escape(subsection.dataset.dcxDocumentTarget)}`);
|
||
scrollToTarget(state, target, state.currentCategory, {
|
||
historyMode: "replace",
|
||
hash: subsection.dataset.dcxDocumentTarget,
|
||
});
|
||
};
|
||
|
||
const closeDocument = (state, { updateHistory = true } = {}) => {
|
||
if (!state || state.closing) return;
|
||
window.closeDcxSettings?.({ restoreFocus: false, instant: true });
|
||
state.closing = true;
|
||
state.expander.dataset.dcxClosing = "true";
|
||
releasePinnedCategory(state);
|
||
if (state.scrollFrame) cancelAnimationFrame(state.scrollFrame);
|
||
if (state.contentFrame) cancelAnimationFrame(state.contentFrame);
|
||
if (state.layoutFrame) cancelAnimationFrame(state.layoutFrame);
|
||
state.contentObserver?.disconnect();
|
||
state.layoutObserver?.disconnect();
|
||
state.main.removeEventListener("scroll", state.onScroll);
|
||
state.main.removeEventListener("wheel", state.onManualScroll);
|
||
state.main.removeEventListener("touchstart", state.onManualScroll);
|
||
state.main.removeEventListener("pointerdown", state.onManualScroll);
|
||
state.nav.removeEventListener("click", state.onNavClick);
|
||
|
||
const tile = document.querySelector(`.dcx-tile[data-category="${state.currentCategory}"]`) || state.opener;
|
||
const rect = tile?.getBoundingClientRect() || state.originRect;
|
||
state.expander.classList.remove("is-ready", "is-full");
|
||
state.expander.style.top = `${rect.top}px`;
|
||
state.expander.style.left = `${rect.left}px`;
|
||
state.expander.style.width = `${rect.width}px`;
|
||
state.expander.style.height = `${rect.height}px`;
|
||
|
||
if (updateHistory) {
|
||
history.pushState(null, "", `${location.pathname}${location.search}`);
|
||
}
|
||
|
||
const finish = () => {
|
||
state.expander.remove();
|
||
document.body.classList.remove("is-locked");
|
||
if (state.background) {
|
||
state.background.inert = false;
|
||
state.background.removeAttribute("aria-hidden");
|
||
}
|
||
state.opener?.focus({ preventScroll: true });
|
||
if (documentState === state) documentState = null;
|
||
};
|
||
if (REDUCED_MOTION.matches) finish();
|
||
else state.closeTimer = window.setTimeout(finish, 540);
|
||
};
|
||
|
||
const openDocument = (category, { historyMode = "push", opener = null, targetHash = category } = {}) => {
|
||
if (!CATEGORY_SET.has(category) || !templatesReady()) return false;
|
||
if (documentState) {
|
||
scrollToCategory(documentState, category, { historyMode });
|
||
return true;
|
||
}
|
||
|
||
const sourceTile = opener || document.querySelector(`.dcx-tile[data-category="${category}"]`);
|
||
const shellTemplate = document.querySelector("#dcx-shell-template");
|
||
if (!sourceTile || !shellTemplate) return false;
|
||
const rect = sourceTile.getBoundingClientRect();
|
||
const expander = document.createElement("section");
|
||
expander.className = "dcx-expander";
|
||
expander.dataset.dcxDocument = "true";
|
||
expander.setAttribute("role", "dialog");
|
||
expander.setAttribute("aria-modal", "true");
|
||
expander.setAttribute("aria-label", "Design context document");
|
||
expander.style.top = `${rect.top}px`;
|
||
expander.style.left = `${rect.left}px`;
|
||
expander.style.width = `${rect.width}px`;
|
||
expander.style.height = `${rect.height}px`;
|
||
expander.appendChild(shellTemplate.content.cloneNode(true));
|
||
const background = document.querySelector("[data-dcx-shell]");
|
||
if (background) {
|
||
background.inert = true;
|
||
background.setAttribute("aria-hidden", "true");
|
||
}
|
||
document.body.appendChild(expander);
|
||
document.body.classList.add("is-locked");
|
||
|
||
const state = {
|
||
expander,
|
||
main: expander.querySelector(".dcx-main"),
|
||
nav: expander.querySelector(".dcx-nav"),
|
||
opener: sourceTile,
|
||
originRect: rect,
|
||
background,
|
||
currentCategory: "",
|
||
pinnedCategory: category,
|
||
pinTimer: 0,
|
||
scrollFrame: 0,
|
||
contentFrame: 0,
|
||
layoutFrame: 0,
|
||
initialCategory: category,
|
||
initialHash: targetHash,
|
||
settleUntil: performance.now() + 3200,
|
||
userInteracted: false,
|
||
closing: false,
|
||
};
|
||
documentState = state;
|
||
mountArticles(state);
|
||
prepareSubnavs(state);
|
||
|
||
state.onScroll = () => handleMainScroll(state);
|
||
state.onManualScroll = () => {
|
||
state.userInteracted = true;
|
||
state.layoutObserver?.disconnect();
|
||
releasePinnedCategory(state);
|
||
};
|
||
state.onNavClick = (event) => {
|
||
state.userInteracted = true;
|
||
handleNavigation(state, event);
|
||
};
|
||
state.contentObserver = new MutationObserver(() => {
|
||
if (state.contentFrame) return;
|
||
state.contentFrame = requestAnimationFrame(() => {
|
||
state.contentFrame = 0;
|
||
initializeColorFans(state.main);
|
||
setActiveCategory(state, state.currentCategory);
|
||
if (!state.userInteracted && performance.now() < state.settleUntil) {
|
||
const target = targetFromHash(state, state.initialHash, state.initialCategory);
|
||
scrollToTarget(state, target, state.initialCategory, {
|
||
instant: true,
|
||
historyMode: "replace",
|
||
hash: state.initialHash,
|
||
});
|
||
}
|
||
});
|
||
});
|
||
state.contentObserver.observe(state.main, {
|
||
childList: true,
|
||
subtree: true,
|
||
attributes: true,
|
||
attributeFilter: ["id", "data-dcx-audience-enhanced", "data-dcx-detail-enhanced"],
|
||
});
|
||
state.layoutObserver = new ResizeObserver(() => {
|
||
if (state.layoutFrame || state.userInteracted || performance.now() >= state.settleUntil) return;
|
||
state.layoutFrame = requestAnimationFrame(() => {
|
||
state.layoutFrame = 0;
|
||
const target = targetFromHash(state, state.initialHash, state.initialCategory);
|
||
scrollToTarget(state, target, state.initialCategory, {
|
||
instant: true,
|
||
historyMode: "replace",
|
||
hash: state.initialHash,
|
||
});
|
||
});
|
||
});
|
||
state.main.querySelectorAll(":scope > .dcx-article[data-dcx-category]").forEach((article) => {
|
||
state.layoutObserver.observe(article);
|
||
});
|
||
state.main.addEventListener("scroll", state.onScroll, { passive: true });
|
||
state.main.addEventListener("wheel", state.onManualScroll, { passive: true });
|
||
state.main.addEventListener("touchstart", state.onManualScroll, { passive: true });
|
||
state.main.addEventListener("pointerdown", state.onManualScroll, { passive: true });
|
||
state.nav.addEventListener("click", state.onNavClick);
|
||
expander.querySelector(".dcx-close")?.addEventListener("click", () => closeDocument(state));
|
||
|
||
setActiveCategory(state, category);
|
||
if (historyMode === "push") history.pushState({ category }, "", `#${targetHash}`);
|
||
if (historyMode === "replace") history.replaceState({ category }, "", `#${targetHash}`);
|
||
|
||
requestAnimationFrame(() => {
|
||
expander.classList.add("is-full");
|
||
const target = targetFromHash(state, targetHash, category);
|
||
scrollToTarget(state, target, category, { instant: true, historyMode: "none", hash: targetHash });
|
||
window.setTimeout(() => {
|
||
expander.classList.add("is-ready");
|
||
expander.querySelector(".dcx-close")?.focus({ preventScroll: true });
|
||
}, REDUCED_MOTION.matches ? 0 : 260);
|
||
});
|
||
[180, 520, 1100, 1800, 3000].forEach((delay) => {
|
||
window.setTimeout(() => {
|
||
if (documentState === state && !state.userInteracted) {
|
||
const target = targetFromHash(state, state.initialHash, category);
|
||
scrollToTarget(state, target, category, {
|
||
instant: true,
|
||
historyMode: "replace",
|
||
hash: state.initialHash,
|
||
});
|
||
}
|
||
}, delay);
|
||
});
|
||
return true;
|
||
};
|
||
|
||
const handleTileClick = (event) => {
|
||
const tile = event.target.closest(".dcx-tile[data-category]");
|
||
if (!tile || !document.querySelector("[data-dcx-shell]")?.contains(tile)) return;
|
||
if (!CATEGORY_SET.has(tile.dataset.category)) return;
|
||
if (!templatesReady()) return;
|
||
event.preventDefault();
|
||
event.stopImmediatePropagation();
|
||
openDocument(tile.dataset.category, { opener: tile });
|
||
};
|
||
|
||
const handleKeydown = (event) => {
|
||
if (event.key === "Escape" && document.querySelector("#dcx-context-settings[open]")) return;
|
||
if (event.key === "Escape" && documentState) {
|
||
event.preventDefault();
|
||
event.stopImmediatePropagation();
|
||
closeDocument(documentState);
|
||
return;
|
||
}
|
||
if (documentState && ["ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End", " "].includes(event.key)) {
|
||
documentState.userInteracted = true;
|
||
releasePinnedCategory(documentState);
|
||
}
|
||
};
|
||
|
||
const handlePopstate = (event) => {
|
||
const hash = location.hash.slice(1);
|
||
const category = categoryFromHash(hash);
|
||
if (documentState?.closing && category) {
|
||
event.stopImmediatePropagation();
|
||
window.closeDcxSettings?.({ restoreFocus: false, instant: true });
|
||
const closingState = documentState;
|
||
window.clearTimeout(closingState.closeTimer);
|
||
closingState.expander.remove();
|
||
if (closingState.background) {
|
||
closingState.background.inert = false;
|
||
closingState.background.removeAttribute("aria-hidden");
|
||
}
|
||
document.body.classList.remove("is-locked");
|
||
documentState = null;
|
||
openDocument(category, { historyMode: "none", targetHash: hash });
|
||
return;
|
||
}
|
||
if (!documentState) {
|
||
if (!category) {
|
||
pendingInitialCategory = "";
|
||
pendingInitialHash = "";
|
||
return;
|
||
}
|
||
event.stopImmediatePropagation();
|
||
if (templatesReady()) {
|
||
openDocument(category, { historyMode: "none", targetHash: hash });
|
||
} else {
|
||
pendingInitialCategory = category;
|
||
pendingInitialHash = hash;
|
||
if (!pendingObserver) {
|
||
pendingObserver = new MutationObserver(schedulePendingDocument);
|
||
pendingObserver.observe(document.body, {
|
||
childList: true,
|
||
subtree: true,
|
||
attributes: true,
|
||
attributeFilter: ["class", "hidden"],
|
||
});
|
||
}
|
||
schedulePendingDocument();
|
||
}
|
||
return;
|
||
}
|
||
|
||
event.stopImmediatePropagation();
|
||
if (category) {
|
||
const target = targetFromHash(documentState, hash, category);
|
||
scrollToTarget(documentState, target, category, { historyMode: "none", hash });
|
||
} else {
|
||
closeDocument(documentState, { updateHistory: false });
|
||
}
|
||
};
|
||
|
||
const openPendingDocument = () => {
|
||
revealFrame = 0;
|
||
if (!pendingInitialCategory) {
|
||
if (document.body.classList.contains("dcx-open") && templatesReady()) {
|
||
pendingObserver?.disconnect();
|
||
pendingObserver = null;
|
||
}
|
||
return;
|
||
}
|
||
if (documentState) return;
|
||
const shell = document.querySelector("[data-dcx-shell]");
|
||
if (!document.body.classList.contains("dcx-open") || shell?.hidden || !templatesReady()) return;
|
||
const category = pendingInitialCategory;
|
||
const targetHash = pendingInitialHash || category;
|
||
if (openDocument(category, { historyMode: "replace", targetHash })) {
|
||
pendingInitialCategory = "";
|
||
pendingInitialHash = "";
|
||
pendingObserver?.disconnect();
|
||
pendingObserver = null;
|
||
}
|
||
};
|
||
|
||
const schedulePendingDocument = () => {
|
||
if (revealFrame) return;
|
||
revealFrame = requestAnimationFrame(openPendingDocument);
|
||
};
|
||
|
||
const handleCommandCopy = async (event) => {
|
||
const button = event.target.closest?.("[data-dcx-copy-command]");
|
||
if (!button) return;
|
||
|
||
const command = button.dataset.dcxCopyCommand;
|
||
const status = button.closest("[data-dcx-command-context]")
|
||
?.querySelector(".dcx-command-status");
|
||
const copied = await copyText(command);
|
||
|
||
window.clearTimeout(button._dcxCopyTimer);
|
||
button.classList.remove("copied");
|
||
void button.offsetWidth;
|
||
button.classList.toggle("copied", copied);
|
||
button.dataset.copied = String(copied);
|
||
if (status) status.textContent = copied ? "Command copied." : "The command could not be copied.";
|
||
button._dcxCopyTimer = window.setTimeout(() => {
|
||
button.classList.remove("copied");
|
||
button.removeAttribute("data-copied");
|
||
if (status) status.textContent = "";
|
||
}, 1200);
|
||
};
|
||
|
||
/* Integration hook: the data layer re-renders the detail templates when the
|
||
store moves (a request the agent finished, a value it settled). The mounted
|
||
document is built from clones, so it re-mounts here, holding the reader's
|
||
place. Enhancers re-run on their own observers; scroll is restored after
|
||
two frames so their layout has landed. */
|
||
const remountDocument = () => {
|
||
if (!documentState || documentState.closing) return;
|
||
const state = documentState;
|
||
const category = state.currentCategory || state.initialCategory;
|
||
const scrollTop = state.main.scrollTop;
|
||
state.userInteracted = true;
|
||
releasePinnedCategory(state);
|
||
mountArticles(state);
|
||
prepareSubnavs(state);
|
||
state.currentCategory = "";
|
||
setActiveCategory(state, category);
|
||
requestAnimationFrame(() => {
|
||
requestAnimationFrame(() => {
|
||
state.main.scrollTop = scrollTop;
|
||
});
|
||
});
|
||
};
|
||
|
||
window.dcxDocument = {
|
||
isOpen: () => Boolean(documentState),
|
||
currentCategory: () => documentState?.currentCategory || "",
|
||
remount: remountDocument,
|
||
};
|
||
|
||
if (pendingInitialCategory) {
|
||
history.replaceState(history.state, "", `${location.pathname}${location.search}`);
|
||
}
|
||
document.addEventListener("click", handleTileClick, true);
|
||
document.addEventListener("click", handleCommandCopy);
|
||
document.addEventListener("keydown", handleKeydown, true);
|
||
window.addEventListener("popstate", handlePopstate, true);
|
||
|
||
pendingObserver = new MutationObserver(schedulePendingDocument);
|
||
pendingObserver.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["class", "hidden"] });
|
||
schedulePendingDocument();
|
||
})();
|