56 lines
1.7 KiB
JavaScript
56 lines
1.7 KiB
JavaScript
|
// toggle "Accessibility Options" menu
|
||
|
|
const showAccessibilityMenu = () => {
|
||
|
|
const fontSelection = document.getElementById("font-selection");
|
||
|
|
if (fontSelection.classList.contains("display-none")) {
|
||
|
|
fontSelection.classList.remove("display-none");
|
||
|
|
} else {
|
||
|
|
fontSelection.classList.add("display-none");
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// set font
|
||
|
|
const changeFont = event => {
|
||
|
|
console.log("You selected: ", event.target.value);
|
||
|
|
const font = event.target.value;
|
||
|
|
const contentNode = document.getElementsByClassName("fontchange")[0];
|
||
|
|
contentNode.classList.remove(
|
||
|
|
"font-SylexiadSans",
|
||
|
|
"font-AtkinsonHyperlegible",
|
||
|
|
"font-OpenDyslexicThree",
|
||
|
|
"font-Ubuntu",
|
||
|
|
"font-serif",
|
||
|
|
"font-sans"
|
||
|
|
);
|
||
|
|
contentNode.classList.add(`font-${font}`);
|
||
|
|
window.localStorage.setItem("font", font);
|
||
|
|
};
|
||
|
|
|
||
|
|
// get font from localStorage
|
||
|
|
window.onload = function() {
|
||
|
|
const previousFont = localStorage.getItem("font");
|
||
|
|
const contentNode = document.getElementsByClassName("fontchange")[0];
|
||
|
|
contentNode.classList.remove(
|
||
|
|
"font-SylexiadSans",
|
||
|
|
"font-AtkinsonHyperlegible",
|
||
|
|
"font-OpenDyslexicThree",
|
||
|
|
"font-Ubuntu",
|
||
|
|
"font-serif",
|
||
|
|
"font-sans"
|
||
|
|
);
|
||
|
|
contentNode.classList.add(`font-${previousFont}`);
|
||
|
|
console.log("Previously selected font: ", previousFont);
|
||
|
|
radiobtn = document.getElementById(`font-${previousFont}`);
|
||
|
|
radiobtn.checked = true;
|
||
|
|
};
|
||
|
|
|
||
|
|
document
|
||
|
|
.querySelector("#accessibility-options button")
|
||
|
|
.addEventListener("click", showAccessibilityMenu);
|
||
|
|
document
|
||
|
|
.getElementById("font-selection")
|
||
|
|
.addEventListener("change", changeFont);
|
||
|
|
|
||
|
|
// no-js handling
|
||
|
|
for (let el of document.querySelectorAll(".no-js")) el.style.display = "none";
|
||
|
|
for (let el of document.querySelectorAll(".js")) el.style.display = "block";
|