36 lines
1.2 KiB
Plaintext
36 lines
1.2 KiB
Plaintext
---
|
|
const { initialLevel = 1 } = Astro.props;
|
|
---
|
|
<div class="level-toggle" role="group" aria-label="Niveau de lecture">
|
|
<button type="button" class="lvl-btn" data-level="1" aria-pressed="true">Niveau 1</button>
|
|
<button type="button" class="lvl-btn" data-level="2" aria-pressed="false">Niveau 2</button>
|
|
<button type="button" class="lvl-btn" data-level="3" aria-pressed="false">Niveau 3</button>
|
|
</div>
|
|
|
|
<script is:inline>
|
|
(() => {
|
|
const KEY = "archicratie.readingLevel";
|
|
const buttons = Array.from(document.querySelectorAll(".lvl-btn"));
|
|
|
|
function apply(level) {
|
|
document.body.setAttribute("data-reading-level", String(level));
|
|
buttons.forEach((b) => b.setAttribute("aria-pressed", b.dataset.level === String(level) ? "true" : "false"));
|
|
}
|
|
|
|
// Valeur par défaut : si rien n'est stocké, on met 1 (citoyen).
|
|
// Si JS est absent/casse, le site reste lisible (tout s'affiche).
|
|
const stored = Number(localStorage.getItem(KEY));
|
|
const level = (stored === 1 || stored === 2 || stored === 3) ? stored : 1;
|
|
|
|
apply(level);
|
|
|
|
buttons.forEach((b) => {
|
|
b.addEventListener("click", () => {
|
|
const lvl = Number(b.dataset.level);
|
|
localStorage.setItem(KEY, String(lvl));
|
|
apply(lvl);
|
|
});
|
|
});
|
|
})();
|
|
</script>
|