104 lines
4.5 KiB
JavaScript
104 lines
4.5 KiB
JavaScript
(() => {
|
|
"use strict";
|
|
const root = document.documentElement;
|
|
const frame = document.querySelector("[data-app-frame]");
|
|
const sidebar = document.querySelector("[data-sidebar]");
|
|
const navToggle = document.querySelector("[data-nav-toggle]");
|
|
let returnFocus = null;
|
|
|
|
try {
|
|
const storedTheme = localStorage.getItem("vacatureradar-theme");
|
|
if (storedTheme === "light" || storedTheme === "dark") root.dataset.theme = storedTheme;
|
|
} catch { /* Persistent storage is optional. */ }
|
|
|
|
const themeToggle = document.querySelector("[data-theme-toggle]");
|
|
const updateThemeLabel = () => {
|
|
themeToggle?.setAttribute("aria-label", root.dataset.theme === "light" ? "Donker thema activeren" : "Licht thema activeren");
|
|
};
|
|
updateThemeLabel();
|
|
themeToggle?.addEventListener("click", () => {
|
|
const next = root.dataset.theme === "light" ? "dark" : "light";
|
|
root.dataset.theme = next;
|
|
updateThemeLabel();
|
|
try { localStorage.setItem("vacatureradar-theme", next); } catch { /* Current page still updates. */ }
|
|
});
|
|
|
|
const globalSearch = document.getElementById("global-search");
|
|
globalSearch?.form?.addEventListener("submit", () => {
|
|
const query = globalSearch.value.trim();
|
|
if (!query) return;
|
|
try {
|
|
const previous = JSON.parse(localStorage.getItem("vacatureradar-recent-searches") || "[]");
|
|
const recent = [query, ...previous.filter((item) => item !== query)].slice(0, 5);
|
|
localStorage.setItem("vacatureradar-recent-searches", JSON.stringify(recent));
|
|
} catch { /* Zoeken werkt ook zonder lokale geschiedenis. */ }
|
|
});
|
|
|
|
const closeNavigation = () => {
|
|
frame?.classList.remove("nav-open");
|
|
navToggle?.setAttribute("aria-expanded", "false");
|
|
if (returnFocus instanceof HTMLElement) returnFocus.focus();
|
|
};
|
|
navToggle?.addEventListener("click", () => {
|
|
returnFocus = document.activeElement;
|
|
frame?.classList.add("nav-open");
|
|
navToggle.setAttribute("aria-expanded", "true");
|
|
sidebar?.querySelector("a, button")?.focus();
|
|
});
|
|
document.querySelectorAll("[data-nav-close], [data-nav-scrim]").forEach((control) => control.addEventListener("click", closeNavigation));
|
|
|
|
document.querySelectorAll("[data-disclosure]").forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
const target = document.getElementById(button.getAttribute("aria-controls"));
|
|
if (!target) return;
|
|
const expanded = button.getAttribute("aria-expanded") === "true";
|
|
button.setAttribute("aria-expanded", String(!expanded));
|
|
target.hidden = expanded;
|
|
});
|
|
});
|
|
|
|
document.querySelectorAll("[data-view-switch]").forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
const group = button.closest("[data-view-controls]");
|
|
const view = button.dataset.viewSwitch;
|
|
group?.querySelectorAll("[data-view-switch]").forEach((item) => item.setAttribute("aria-pressed", String(item === button)));
|
|
document.querySelectorAll("[data-view]").forEach((panel) => { panel.hidden = panel.dataset.view !== view; });
|
|
});
|
|
});
|
|
|
|
|
|
if (document.body.dataset.demoReadOnly === "true") {
|
|
document.querySelectorAll('form[method="post" i]:not([data-demo-allow])').forEach((form) => {
|
|
form.querySelectorAll('button:not([type]), button[type="submit"], input[type="submit"]').forEach((control) => {
|
|
control.disabled = true;
|
|
control.dataset.demoDisabled = "true";
|
|
control.setAttribute("aria-describedby", "demo-read-only-note");
|
|
control.title = "Niet beschikbaar in de alleen-lezen demo";
|
|
});
|
|
});
|
|
}
|
|
|
|
const motionAllowed = !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
if (motionAllowed) {
|
|
document.querySelectorAll("[data-radar-illustration]").forEach((illustration) => {
|
|
illustration.addEventListener("pointermove", (event) => {
|
|
const bounds = illustration.getBoundingClientRect();
|
|
illustration.style.setProperty("--radar-x", `${((event.clientX - bounds.left) / bounds.width - .5) * 10}px`);
|
|
illustration.style.setProperty("--radar-y", `${((event.clientY - bounds.top) / bounds.height - .5) * 10}px`);
|
|
});
|
|
illustration.addEventListener("pointerleave", () => {
|
|
illustration.style.removeProperty("--radar-x");
|
|
illustration.style.removeProperty("--radar-y");
|
|
});
|
|
});
|
|
}
|
|
|
|
document.addEventListener("keydown", (event) => {
|
|
if (event.key === "Escape") closeNavigation();
|
|
if (event.key === "/" && !/INPUT|TEXTAREA|SELECT/.test(document.activeElement?.tagName || "")) {
|
|
event.preventDefault();
|
|
document.getElementById("global-search")?.focus();
|
|
}
|
|
});
|
|
})();
|