Added more JS tweaks (still optional)

This commit is contained in:
augustin64 2023-10-11 17:19:11 +02:00
parent 8ff2f29617
commit 972231e4b2

View File

@ -1,4 +1,4 @@
//* Add a listener to close pop-ups on Esc key pressed //* 1st fix: Add a listener to close pop-ups on Esc key pressed */
document.addEventListener('keyup', function(e) { document.addEventListener('keyup', function(e) {
if (e.key == "Escape") { if (e.key == "Escape") {
location.hash="!"; location.hash="!";
@ -6,14 +6,45 @@ document.addEventListener('keyup', function(e) {
}); });
//* Save sidebar toggling preference to localStorage
if (!("isSidebarToggled" in localStorage)) {
localStorage["isSidebarToggled"] = window.innerWidth > 750; // Disable by default on mobile devices
}
document.getElementById("slide-sidebar").checked = !(JSON.parse(localStorage["isSidebarToggled"])); // localStorage cannot contain booleans
// Triggered on sidebar open/ close //* 2nd fix: Save sidebar toggling preference to localStorage */
function updateSidebarToggle () { const sidebar_toggle = document.getElementById("slide-sidebar");
localStorage["isSidebarToggled"] = !(document.getElementById("slide-sidebar").checked);
async function hideSidebarNoAnim () {
const content_container = document.getElementById("content-container");
const sidebar_indicator = sidebar_toggle.labels[0];
/* The transition needs to be invisible as if it was loaded that way */
content_container.style.transitionDuration = "0s";
sidebar_indicator.style.transitionDuration = "0s";
sidebar_toggle.checked = true;
/* We need to set a sleep because we want to reset the transition duration only once it ended*/
await new Promise(r => setTimeout(r, 10));
content_container.style.transitionDuration = "";
sidebar_indicator.style.transitionDuration = "";
} }
document.getElementById("slide-sidebar").addEventListener("change", updateSidebarToggle, false);
//* Save sidebar toggling preference to localStorage
let isMobile = window.innerWidth <= 750;
if (!("isSidebarToggled" in localStorage)) {
localStorage["isSidebarToggled"] = !isMobile; // Disable by default on mobile devices
}
if (JSON.parse(localStorage["isSidebarToggled"]) && !isMobile) {
sidebar_toggle.checked = false; // hidden sidebar
} else if (!isMobile) {
hideSidebarNoAnim(); // hide on desktop (no animation)
} else {
sidebar_toggle.checked = true; // hide on mobile (animation)
}
//* Triggered localStorage save on open/ close
function updateSidebarToggle () {
localStorage["isSidebarToggled"] = !(sidebar_toggle.checked);
}
sidebar_toggle.addEventListener("change", updateSidebarToggle, false);