Daniel Legt
a0027fbd18
Re-skin the API documentation layout for the retro theme to ensure readability and maintain the Windows 98 aesthetic. The default dark revamp tokens were unreadable on the black retro desktop background. Changes include: - Styling the API sidebar as a raised silver window with a classic title bar. - Styling endpoint cards as silver windows with navy title bars. - Excluding API navigation links, shortcut cards, and link pills from default retro link styles to prevent styling conflicts. - Updating API documentation content, including adding a section for resumable uploads.
95 lines
2.7 KiB
JavaScript
95 lines
2.7 KiB
JavaScript
(function () {
|
|
const root = document.querySelector("[data-api-docs]");
|
|
if (!root) {
|
|
return;
|
|
}
|
|
|
|
const panels = Array.from(root.querySelectorAll("[data-doc-panel]"));
|
|
const navLinks = Array.from(root.querySelectorAll("[data-doc-link]"));
|
|
const DEFAULT = "home";
|
|
|
|
function activate(name, focus) {
|
|
let matched = false;
|
|
panels.forEach((panel) => {
|
|
const on = panel.dataset.docPanel === name;
|
|
panel.classList.toggle("is-active", on);
|
|
if (on) {
|
|
matched = true;
|
|
}
|
|
});
|
|
if (!matched) {
|
|
return false;
|
|
}
|
|
root.querySelectorAll(".api-nav-link").forEach((link) => {
|
|
link.classList.toggle(
|
|
"is-active",
|
|
link.getAttribute("href") === "#" + name
|
|
);
|
|
});
|
|
if (focus) {
|
|
const panel = root.querySelector('[data-doc-panel="' + name + '"]');
|
|
if (panel) {
|
|
panel.focus({ preventScroll: true });
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
// Resolve the current hash to a panel. The hash can point at a panel id
|
|
// (e.g. #endpoints) or at any element inside a panel (e.g. #ep-upload),
|
|
// letting FAQ answers deep-link straight into the reference.
|
|
function resolveHash(focus) {
|
|
const id = (location.hash || "").slice(1);
|
|
if (!id) {
|
|
activate(DEFAULT, focus);
|
|
return;
|
|
}
|
|
const target = document.getElementById(id);
|
|
if (!target) {
|
|
activate(DEFAULT, focus);
|
|
return;
|
|
}
|
|
const panel = target.closest("[data-doc-panel]");
|
|
const name = panel ? panel.dataset.docPanel : DEFAULT;
|
|
activate(name, focus && target === panel);
|
|
if (panel && target !== panel) {
|
|
// Scroll the deep-linked element into view once its panel is visible.
|
|
window.requestAnimationFrame(() => {
|
|
target.scrollIntoView({ block: "start", behavior: "smooth" });
|
|
});
|
|
} else {
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
}
|
|
}
|
|
|
|
window.addEventListener("hashchange", () => resolveHash(true));
|
|
|
|
navLinks.forEach((link) => {
|
|
link.addEventListener("click", () => {
|
|
// hashchange handles activation; this keeps top-level nav clicks snappy.
|
|
if (link.getAttribute("href") === location.hash) {
|
|
resolveHash(true);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Add a copy button to every code block.
|
|
root.querySelectorAll(".code-block").forEach((block) => {
|
|
const pre = block.querySelector("pre");
|
|
if (!pre) {
|
|
return;
|
|
}
|
|
const button = document.createElement("button");
|
|
button.type = "button";
|
|
button.className = "copy-btn";
|
|
button.textContent = "Copy";
|
|
button.setAttribute("aria-label", "Copy code");
|
|
button.addEventListener("click", () => {
|
|
window.Warpbox.copyText(pre.innerText.trim(), button, "Copied");
|
|
});
|
|
block.appendChild(button);
|
|
});
|
|
|
|
resolveHash(false);
|
|
})();
|