397 lines
9.2 KiB
Plaintext
397 lines
9.2 KiB
Plaintext
---
|
|
import { getCollection } from "astro:content";
|
|
|
|
const {
|
|
currentSlug,
|
|
collection = "archicrat-ia",
|
|
basePath = "/archicrat-ia",
|
|
label = "Table des matières"
|
|
} = Astro.props;
|
|
|
|
const slugOf = (entry) => String(entry.id).replace(/\.(md|mdx)$/i, "");
|
|
const hrefOf = (entry) => `${basePath}/${slugOf(entry)}/`;
|
|
|
|
const collator = new Intl.Collator("fr", { sensitivity: "base", numeric: true });
|
|
|
|
const entries = [...await getCollection(collection)].sort((a, b) => {
|
|
const ao = Number(a.data.order ?? 9999);
|
|
const bo = Number(b.data.order ?? 9999);
|
|
if (ao !== bo) return ao - bo;
|
|
|
|
const at = String(a.data.title ?? a.data.term ?? slugOf(a));
|
|
const bt = String(b.data.title ?? b.data.term ?? slugOf(b));
|
|
return collator.compare(at, bt);
|
|
});
|
|
|
|
const tocId = `toc-global-${collection}-${String(basePath).replace(/[^\w-]+/g, "-")}`;
|
|
---
|
|
|
|
<nav
|
|
class="toc-global"
|
|
data-mobile-default="closed"
|
|
aria-label={label}
|
|
data-toc-global
|
|
data-toc-key={`global:${collection}:${basePath}`}
|
|
>
|
|
<button
|
|
class="toc-global__head toc-global__toggle"
|
|
type="button"
|
|
aria-expanded="false"
|
|
aria-controls={tocId}
|
|
>
|
|
<span class="toc-global__title">{label}</span>
|
|
<span class="toc-global__chevron" aria-hidden="true">▾</span>
|
|
</button>
|
|
|
|
<div class="toc-global__body-clip" id={tocId} hidden>
|
|
<div class="toc-global__body">
|
|
<ol class="toc-global__list">
|
|
{entries.map((e) => {
|
|
const slug = slugOf(e);
|
|
const active = slug === currentSlug;
|
|
|
|
return (
|
|
<li class={`toc-item ${active ? "is-active" : ""}`}>
|
|
<a class="toc-link" href={hrefOf(e)} aria-current={active ? "page" : undefined}>
|
|
<span class="toc-link__row">
|
|
<span class={`toc-active-mark ${active ? "is-on" : ""}`} aria-hidden="true">
|
|
<span class="toc-active-mark__dot"></span>
|
|
</span>
|
|
|
|
<span class="toc-link__title">{e.data.title}</span>
|
|
|
|
{active && (
|
|
<span class="toc-badge" aria-label="Chapitre en cours">
|
|
En cours
|
|
</span>
|
|
)}
|
|
</span>
|
|
|
|
{active && <span class="toc-underline" aria-hidden="true"></span>}
|
|
</a>
|
|
</li>
|
|
);
|
|
})}
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<style>
|
|
.toc-global{
|
|
border: 1px solid rgba(127,127,127,0.22);
|
|
border-radius: 16px;
|
|
padding: 12px;
|
|
background: rgba(127,127,127,0.06);
|
|
}
|
|
|
|
.toc-global__toggle{
|
|
width: 100%;
|
|
appearance: none;
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
text-align: left;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.toc-global__head{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px dashed rgba(127,127,127,0.25);
|
|
}
|
|
|
|
.toc-global__title{
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
letter-spacing: .2px;
|
|
opacity: .88;
|
|
}
|
|
|
|
.toc-global__chevron{
|
|
font-size: 12px;
|
|
opacity: .7;
|
|
transition: transform 180ms ease;
|
|
}
|
|
|
|
.toc-global__body-clip{
|
|
display: grid;
|
|
grid-template-rows: 1fr;
|
|
transition:
|
|
grid-template-rows 220ms ease,
|
|
opacity 160ms ease,
|
|
margin-top 220ms ease;
|
|
}
|
|
|
|
.toc-global__body{
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.toc-global__list{
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
max-height: 44vh;
|
|
overflow: auto;
|
|
padding-right: 8px;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
.toc-global__list li::marker{ content: ""; }
|
|
|
|
.toc-item{ margin: 6px 0; }
|
|
|
|
.toc-link{
|
|
display: block;
|
|
text-decoration: none;
|
|
border-radius: 14px;
|
|
padding: 8px 10px;
|
|
transition: transform 120ms ease, background 120ms ease;
|
|
}
|
|
|
|
.toc-link:hover{
|
|
background: rgba(127,127,127,0.10);
|
|
text-decoration: none;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.toc-link__row{
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.toc-active-mark{
|
|
width: 14px;
|
|
height: 14px;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
border-radius: 999px;
|
|
border: 1px solid transparent;
|
|
opacity: .55;
|
|
}
|
|
|
|
.toc-active-mark__dot{
|
|
width: 5px;
|
|
height: 5px;
|
|
border-radius: 999px;
|
|
background: currentColor;
|
|
opacity: .65;
|
|
}
|
|
|
|
.toc-active-mark.is-on{
|
|
border-color: rgba(127,127,127,0.34);
|
|
opacity: 1;
|
|
}
|
|
|
|
.toc-active-mark.is-on .toc-active-mark__dot{
|
|
width: 6px;
|
|
height: 6px;
|
|
opacity: 1;
|
|
}
|
|
|
|
.toc-link__title{
|
|
font-size: 13px;
|
|
line-height: 1.25;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.toc-badge{
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
letter-spacing: .2px;
|
|
padding: 3px 8px;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(127,127,127,0.30);
|
|
background: rgba(127,127,127,0.10);
|
|
opacity: .92;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.toc-item.is-active .toc-link{
|
|
background: rgba(127,127,127,0.12);
|
|
}
|
|
|
|
.toc-item.is-active .toc-link__title{
|
|
font-weight: 800;
|
|
}
|
|
|
|
.toc-underline{
|
|
display: block;
|
|
margin-top: 8px;
|
|
height: 1px;
|
|
width: 100%;
|
|
background: rgba(127,127,127,0.35);
|
|
border-radius: 999px;
|
|
}
|
|
|
|
@media (max-width: 980px){
|
|
.toc-global{
|
|
padding: 10px 12px;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.toc-global__head{
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
border-bottom: 0;
|
|
min-height: 28px;
|
|
}
|
|
|
|
.toc-global__title{
|
|
font-size: 13px;
|
|
}
|
|
|
|
.toc-global__body-clip{
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.toc-global.is-collapsed .toc-global__body-clip{
|
|
grid-template-rows: 0fr;
|
|
opacity: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.toc-global__body{
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
transition: opacity 180ms ease;
|
|
}
|
|
|
|
.toc-global.is-collapsed .toc-global__body{
|
|
opacity: 0;
|
|
}
|
|
|
|
.toc-global.is-collapsed .toc-global__chevron{
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.toc-link{
|
|
padding: 7px 9px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.toc-link__title{
|
|
font-size: 12.5px;
|
|
line-height: 1.22;
|
|
}
|
|
|
|
.toc-badge{
|
|
font-size: 10px;
|
|
padding: 2px 7px;
|
|
}
|
|
|
|
.toc-global__list{
|
|
max-height: min(42vh, 360px);
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.toc-global__body-clip[hidden]{
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark){
|
|
.toc-global{ background: rgba(255,255,255,0.04); }
|
|
.toc-link:hover{ background: rgba(255,255,255,0.06); }
|
|
.toc-item.is-active .toc-link{ background: rgba(255,255,255,0.06); }
|
|
.toc-badge{ background: rgba(255,255,255,0.06); }
|
|
.toc-active-mark.is-on{ border-color: rgba(255,255,255,0.22); }
|
|
}
|
|
</style>
|
|
|
|
<script is:inline>
|
|
(() => {
|
|
function init() {
|
|
document.querySelectorAll("[data-toc-global]").forEach((nav) => {
|
|
if (nav.dataset.tocReady === "1") return;
|
|
nav.dataset.tocReady = "1";
|
|
|
|
const toggle = nav.querySelector(".toc-global__toggle");
|
|
const bodyClip = nav.querySelector(".toc-global__body-clip");
|
|
const active = nav.querySelector(".toc-item.is-active");
|
|
const mq = window.matchMedia("(max-width: 980px)");
|
|
const key = `archicratie:${nav.dataset.tocKey || "toc-global"}`;
|
|
|
|
if (!toggle || !bodyClip) return;
|
|
|
|
const read = () => {
|
|
try {
|
|
const v = localStorage.getItem(key);
|
|
if (v === "open") return true;
|
|
if (v === "closed") return false;
|
|
} catch {}
|
|
return null;
|
|
};
|
|
|
|
const write = (open) => {
|
|
try { localStorage.setItem(key, open ? "open" : "closed"); } catch {}
|
|
};
|
|
|
|
const setOpen = (open, { persist = true } = {}) => {
|
|
const isMobile = mq.matches;
|
|
const effectiveOpen = isMobile ? open : true;
|
|
|
|
nav.classList.toggle("is-collapsed", isMobile && !effectiveOpen);
|
|
toggle.setAttribute("aria-expanded", effectiveOpen ? "true" : "false");
|
|
|
|
if (bodyClip) {
|
|
bodyClip.hidden = isMobile && !effectiveOpen;
|
|
}
|
|
|
|
if (persist && isMobile) write(effectiveOpen);
|
|
};
|
|
|
|
const initState = () => {
|
|
if (!mq.matches) {
|
|
setOpen(true, { persist: false });
|
|
if (active) active.scrollIntoView({ block: "nearest" });
|
|
return;
|
|
}
|
|
|
|
const stored = read();
|
|
const open = stored == null ? false : stored;
|
|
setOpen(open, { persist: false });
|
|
|
|
if (open && active) active.scrollIntoView({ block: "nearest" });
|
|
};
|
|
|
|
toggle.addEventListener("click", () => {
|
|
const open = toggle.getAttribute("aria-expanded") !== "true";
|
|
setOpen(open);
|
|
if (open && active) active.scrollIntoView({ block: "nearest" });
|
|
|
|
if (open) {
|
|
window.dispatchEvent(new CustomEvent("archicratie:tocGlobalOpen"));
|
|
}
|
|
});
|
|
|
|
window.addEventListener("archicratie:tocLocalOpen", () => {
|
|
if (!mq.matches) return;
|
|
setOpen(false);
|
|
});
|
|
|
|
if (mq.addEventListener) {
|
|
mq.addEventListener("change", initState);
|
|
} else if (mq.addListener) {
|
|
mq.addListener(initState);
|
|
}
|
|
|
|
initState();
|
|
});
|
|
}
|
|
|
|
if (document.readyState === "loading") {
|
|
window.addEventListener("DOMContentLoaded", init, { once: true });
|
|
} else {
|
|
init();
|
|
}
|
|
})();
|
|
</script> |