From 18a945aab9b3129b82076f633fab1d13ba28148e Mon Sep 17 00:00:00 2001 From: Elizabeth Hunt Date: Sun, 12 Jan 2025 23:09:34 -0800 Subject: initial commit by simponic-infra --- static/js/components/formatDate.js | 7 +++++++ static/js/components/infoBanners.js | 6 ++++++ static/js/components/themeSwitcher.js | 27 +++++++++++++++++++++++++++ 3 files changed, 40 insertions(+) create mode 100644 static/js/components/formatDate.js create mode 100644 static/js/components/infoBanners.js create mode 100644 static/js/components/themeSwitcher.js (limited to 'static/js/components') diff --git a/static/js/components/formatDate.js b/static/js/components/formatDate.js new file mode 100644 index 0000000..a12f04f --- /dev/null +++ b/static/js/components/formatDate.js @@ -0,0 +1,7 @@ +const timeElements = document.querySelectorAll(".time"); +timeElements.forEach((timeElement) => { + const dateStr = timeElement.textContent.split(" ").slice(0, 3).join(" "); + const date = new Date(dateStr); + + timeElement.textContent = date.toLocaleString(); +}); diff --git a/static/js/components/infoBanners.js b/static/js/components/infoBanners.js new file mode 100644 index 0000000..6a19864 --- /dev/null +++ b/static/js/components/infoBanners.js @@ -0,0 +1,6 @@ +const infoBanners = document.querySelectorAll(".info"); +Array.from(infoBanners).forEach((infoBanner) => { + infoBanner.addEventListener("click", () => { + infoBanner.remove(); + }); +}); diff --git a/static/js/components/themeSwitcher.js b/static/js/components/themeSwitcher.js new file mode 100644 index 0000000..e5497f0 --- /dev/null +++ b/static/js/components/themeSwitcher.js @@ -0,0 +1,27 @@ +const THEMES = { + DARK: "DARK", + LIGHT: "LIGHT", +}; + +const flipFlopTheme = (theme) => + THEMES[theme] === THEMES.DARK ? THEMES.LIGHT : THEMES.DARK; + +const themePickerText = { + DARK: "light mode.", + LIGHT: "dark mode.", +}; + +const themeSwitcher = document.getElementById("theme-switcher"); + +const setTheme = (theme) => { + themeSwitcher.textContent = `${themePickerText[theme]}`; + + document.documentElement.setAttribute("data-theme", theme); + localStorage.setItem("theme", theme); +}; + +themeSwitcher.addEventListener("click", () => + setTheme(flipFlopTheme(document.documentElement.getAttribute("data-theme"))), +); + +setTheme(localStorage.getItem("theme") || THEMES.LIGHT); -- cgit v1.2.3-70-g09d2