aboutsummaryrefslogtreecommitdiffstats
path: root/pydis_site/static/js
diff options
context:
space:
mode:
authorGravatar hedy <[email protected]>2024-01-05 09:16:47 +0800
committerGravatar hedy <[email protected]>2024-01-05 09:21:08 +0800
commit058b562304a96055a57f8daee80db07c596684ec (patch)
tree10e3aedc7395a487819f8dc93a393ce44ea222cf /pydis_site/static/js
parentShouldn't a white wave be white? (diff)
Dark: Refactor toggle handling JS
- Use localstorage. Advantages: - One key=value for the entire site, without needing to specify `path=/` - No need for string splitting to parse the `key=value; ...` data - Suggested more widely in tutorials Pretty good support: https://caniuse.com/?search=localstorage - Remove the need for JQuery, use IDs for switch and knob elements. - This also makes the code more robust if the page has other switch & knob classes!
Diffstat (limited to 'pydis_site/static/js')
-rw-r--r--pydis_site/static/js/base/navbar.js114
1 files changed, 42 insertions, 72 deletions
diff --git a/pydis_site/static/js/base/navbar.js b/pydis_site/static/js/base/navbar.js
index a4b8a0aa..9a1641aa 100644
--- a/pydis_site/static/js/base/navbar.js
+++ b/pydis_site/static/js/base/navbar.js
@@ -1,94 +1,64 @@
"use strict";
-const defaultCssElement = $("#bulma-css")[0];
-const darkCssElement = $("#bulma-css-dark")[0];
+const defaultTheme = "light";
+const lightCssElement = document.getElementById("bulma-css");
+const darkCssElement = document.getElementById("bulma-css-dark");
function getCurrentTheme() {
- if (document.cookie === "")
- return "default";
-
- return document.cookie
- .split('; ')
- .find(row => row.startsWith('theme='))
- .split('=')[1];
+ const theme = localStorage.getItem("theme");
+ if (theme === null || theme === "")
+ return defaultTheme;
+ return theme;
}
-function displayThemedElements() {
- const defaultElements = Array.from($(".show-default-mode"));
- const darkElements = Array.from($(".show-dark-mode"));
-
- switch (getCurrentTheme()) {
- case "":
- case "default":
- defaultElements.forEach(e => e.style.display = null);
- darkElements.forEach(e => e.style.display = 'none');
+function setStyleSheets(newTheme) {
+ switch (newTheme) {
+ case "light":
+ lightCssElement.disabled = false;
+ darkCssElement.disabled = true;
break;
case "dark":
- defaultElements.forEach(e => e.style.display = 'none');
- darkElements.forEach(e => e.style.display = null);
+ lightCssElement.disabled = true;
+ darkCssElement.disabled = false;
break;
}
}
-function setStyleSheets() {
- switch (getCurrentTheme()) {
- case "":
- case "default":
- defaultCssElement.disabled = false;
- darkCssElement.disabled = true;
+function toggleThemeSwitch(newTheme) {
+ const switchToggle = document.getElementById("theme-switch");
+ const knob = document.getElementById("theme-knob");
+ switch (newTheme) {
+ case "light":
+ knob.classList.remove("dark");
+ knob.classList.add("light");
+ setTimeout(function() {
+ switchToggle.classList.remove("dark");
+ switchToggle.classList.add("light");
+ }, 100);
break;
case "dark":
- defaultCssElement.disabled = true;
- darkCssElement.disabled = false;
+ knob.classList.remove("light");
+ knob.classList.add("dark");
+ setTimeout(function() {
+ switchToggle.classList.remove("light");
+ switchToggle.classList.add("dark");
+ }, 100);
break;
}
}
-function toggleThemeSwitch() {
- let switchToggle = $(".switch")[0];
- let knob = $(".knob")[0];
-
- if (knob.classList.contains("dark")) {
- knob.classList.remove("dark");
- knob.classList.add("light");
-
- // After 500ms, switch the icons
- setTimeout(function() {
- switchToggle.classList.remove("dark");
- switchToggle.classList.add("light");
- }, 100);
- } else {
- knob.classList.remove("light");
- knob.classList.add("dark");
-
- // After 500ms, switch the icons
- setTimeout(function() {
- switchToggle.classList.remove("light");
- switchToggle.classList.add("dark");
- }, 100);
- }
-}
-
// Executed when the page has finished loading.
document.addEventListener("DOMContentLoaded", () => {
-
- setStyleSheets();
- displayThemedElements();
-
- if (getCurrentTheme() === "default")
- toggleThemeSwitch();
-
- $('#theme-switch').on("click", () => {
-
- // Update cookie
- if (getCurrentTheme() === "dark") {
- document.cookie = "theme=default";
- } else {
- document.cookie = "theme=dark";
- }
-
- setStyleSheets();
- displayThemedElements();
- toggleThemeSwitch();
+ const theme = getCurrentTheme()
+ setStyleSheets(theme);
+ toggleThemeSwitch(theme);
+
+ const switchToggle = document.getElementById("theme-switch");
+ switchToggle.addEventListener("click", () => {
+ const newTheme = getCurrentTheme() === "light" ? "dark" : "light";
+ console.log(newTheme);
+ localStorage.setItem("theme", newTheme);
+ setStyleSheets(newTheme);
+ toggleThemeSwitch(newTheme);
});
});