105 lines
3.5 KiB
JavaScript
105 lines
3.5 KiB
JavaScript
document.querySelectorAll(".onclick-select").forEach(element => {
|
|
element.addEventListener("click", element.select);
|
|
});
|
|
|
|
|
|
// Navbar dropdowns
|
|
const navSections = document.querySelectorAll(".nav-details");
|
|
|
|
navSections.forEach(navSection => {
|
|
navSection.addEventListener("toggle", navSectionsToggle);
|
|
});
|
|
document.addEventListener("click", navSectionsClose);
|
|
|
|
function navSectionsToggle() {
|
|
// When opening next dropdown, hide previous
|
|
if (this.open) {
|
|
navSections.forEach(navSection => {
|
|
if (navSection != this && navSection.open) navSection.open = !open;
|
|
});
|
|
}
|
|
}
|
|
|
|
function navSectionsClose(event) {
|
|
// Hide all dropdowns when clicking in different place
|
|
if (
|
|
event.target.matches(".nav-summary") ||
|
|
event.target.parentNode.matches(".nav-summary")
|
|
)
|
|
return;
|
|
navSections.forEach(navSection => {
|
|
navSection.open = !open;
|
|
});
|
|
}
|
|
|
|
|
|
// Dark/Light color scheme switch button
|
|
document.querySelector("#nav-switch-theme").style.display = "inline";
|
|
document.querySelector("#nav-switch-theme").addEventListener("click", changeColorScheme);
|
|
document.querySelector("#nav-switch-theme").addEventListener("keydown", e => {
|
|
if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
|
|
e.preventDefault();
|
|
changeColorScheme();
|
|
}
|
|
});
|
|
document.querySelector("#nav-toggle-label").addEventListener("keydown", e => {
|
|
if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
|
|
e.preventDefault();
|
|
document.getElementById('nav-toggle').checked = !document.getElementById('nav-toggle').checked;
|
|
}
|
|
});
|
|
|
|
function changeColorScheme() {
|
|
// Use whatever users want
|
|
if (localStorage.getItem("colorScheme") === "dark") {
|
|
// Change to light theme
|
|
if (window.matchMedia("(prefers-color-scheme: dark)").matches === false) {
|
|
document.querySelector("#dark-css").setAttribute("media", "(prefers-color-scheme: dark)");
|
|
localStorage.removeItem("colorScheme");
|
|
} else {
|
|
// by setting invalid media it will just not apply CSS for anyone
|
|
document.querySelector("#dark-css").setAttribute("media", "invalid");
|
|
localStorage.setItem("colorScheme", "light");
|
|
}
|
|
}
|
|
// Change to dark theme
|
|
else if (localStorage.getItem("colorScheme") === "light") {
|
|
if (window.matchMedia("(prefers-color-scheme: dark)").matches === true) {
|
|
document.querySelector("#dark-css").setAttribute("media", "(prefers-color-scheme: dark)");
|
|
localStorage.removeItem("colorScheme");
|
|
} else {
|
|
// media was set to prefers-color-scheme: dark
|
|
document.querySelector("#dark-css").removeAttribute("media");
|
|
localStorage.setItem("colorScheme", "dark");
|
|
}
|
|
}
|
|
|
|
// Just use whatever browsers want
|
|
else if (window.matchMedia("(prefers-color-scheme: dark)").matches === true) {
|
|
// Change to light Theme
|
|
document.querySelector("#dark-css").setAttribute("media", "invalid");
|
|
localStorage.setItem("colorScheme", "light");
|
|
} else {
|
|
// Change to dark theme
|
|
document.querySelector("#dark-css").removeAttribute("media");
|
|
localStorage.setItem("colorScheme", "dark");
|
|
}
|
|
fixThemeImages();
|
|
}
|
|
|
|
|
|
// Fix images in dark theme
|
|
function fixThemeImages() {
|
|
document.querySelectorAll('[data-theme-src]').forEach(function(image) {
|
|
tempSrc = image.src;
|
|
image.src = image.getAttribute("data-theme-src");
|
|
image.setAttribute("data-theme-src", tempSrc);
|
|
});
|
|
}
|
|
if (
|
|
(localStorage.getItem("colorScheme") === "dark") ||
|
|
(window.matchMedia("(prefers-color-scheme: dark)").matches ^
|
|
localStorage.getItem("colorScheme") === "light")
|
|
) {
|
|
fixThemeImages();
|
|
} |