diff options
Diffstat (limited to 'assets/js')
| -rw-r--r-- | assets/js/lang/bundle.js | 12 | ||||
| -rw-r--r-- | assets/js/lib/themes.js | 37 | ||||
| -rw-r--r-- | assets/js/settings.js | 17 | ||||
| -rw-r--r-- | assets/js/setup-storage.js | 4 |
4 files changed, 68 insertions, 2 deletions
diff --git a/assets/js/lang/bundle.js b/assets/js/lang/bundle.js index b025486..8d0d6b9 100644 --- a/assets/js/lang/bundle.js +++ b/assets/js/lang/bundle.js @@ -285,6 +285,11 @@ var langstrings = { language: "language", selectLanguage: "select desired language", languageSet: "language set, open another page for the changes to take effect", + theme: "theme", + themeLight: "Light theme", + themeDark: "Dark theme", + selectTheme: "Select a theme", + themeSet: "theme set, open another page for the changes to take effect", // gsec gsecErrNet: "GimSIS connection error", gsecErrLogin: "GimSIS login error (bad password?), try logging out", @@ -466,8 +471,13 @@ var langstrings = { privacyAcceptWithUse: "your continued use of our website will be regarded as acceptance of our practices around privacy and personal information. If you have any questions about how we handle user data and personal information, feel free to contact us.", privacyEffectiveAsOf: "this policy is effective as of", language: "jezik", - selectLanguage: "izberi željen jezik", + selectLanguage: "izberite željen jezik", languageSet: "jezik nastavljen, odprite neko drugo stran da se pokažejo spremembe", + theme: "izgled", + themeLight: "svetel izgled", + themeDark: "temen izgled", + themeSet: "izgled nastavljen, odprite neko drugo stran da se spremembe uveljavijo", + selectTheme: "izberite željen izgled", // gsec gsecErrNet: "napaka povezave na GimSIS", gsecErrLogin: "prijava v GimSIS ni uspela (napačno geslo?), poskusite se odjaviti", diff --git a/assets/js/lib/themes.js b/assets/js/lib/themes.js new file mode 100644 index 0000000..d8a7ca1 --- /dev/null +++ b/assets/js/lib/themes.js @@ -0,0 +1,37 @@ +const THEME_COLOR_SCHEMES = { + light: { + "color-primary": "rgba(0, 128, 83, 1)", + "color-secondary": "rgba(0, 77, 50, 1)", + "color-accent": "rgba(0, 156, 101, 1)", + "color-primary-light": "rgba(230, 250, 231, 1)", + "color-invalid": "rgba(192, 0, 0, 1)", + "background-color": "rgba(255, 255, 255, 1)", + "background-accent": "rgba(0, 156, 101, 0.2)" + }, + dark: { + "color-primary": "rgba(0, 128, 83, 1)", + "color-secondary": "rgba(0, 94, 61, 1)", + "color-accent": "rgba(20, 117, 83, 1)", + "color-primary-light": "rgba(230, 250, 231, 1)", + "color-invalid": "rgba(192, 0, 0, 1)", + "background-color": "rgba(31, 31, 31, 1)", + "background-accent": "rgba(0, 92, 44, 0.2)" + } +} + +function applyTheme(themeName) { + for (const [property, value] of Object.entries(THEME_COLOR_SCHEMES[themeName])) { + document.documentElement.style.setProperty(`--${property}`, value); + } +} + +document.addEventListener("DOMContentLoaded", () => { + localforage.getItem("theme").then((selectedTheme) => { + if (selectedTheme == null) { + let isOsDarkTheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + applyTheme(isOsDarkTheme ? "dark" : "light"); + } else { + applyTheme(selectedTheme); + } + }); +});
\ No newline at end of file diff --git a/assets/js/settings.js b/assets/js/settings.js index 0410aeb..411a38e 100644 --- a/assets/js/settings.js +++ b/assets/js/settings.js @@ -7,6 +7,13 @@ async function setLanguage(langCode) { }); } +async function setTheme(targetTheme) { + localforage.setItem("targetTheme", targetTheme).then((value) => { + console.log("Theme set: " + value); + UIAlert(D("themeSet"), "setTheme(): themeSet"); + }); +} + document.addEventListener("DOMContentLoaded", async () => { $("#select-language").on("change", () => { @@ -14,11 +21,21 @@ document.addEventListener("DOMContentLoaded", async () => { setLanguage(languageToSet); }); + $("#select-theme").on("change", () => { + let themeToSet = $(this).find(":selected").data("theme"); + setTheme(themeToSet); + }); + localforage.getItem("chosenLang").then((value) => { let selectedLanguage = value ?? "sl"; $(`#option-${selectedLanguage}`).attr("selected", true); }).catch(() => {}); + localforage.getItem("theme").then((value) => { + let selectedTheme = value ?? "sl"; + $(`#option-${selectedTheme}`).attr("selected", true); + }).catch(() => {}); + // Setup side menu const menus = document.querySelectorAll(".side-menu"); M.Sidenav.init(menus, { edge: "right", draggable: true }); diff --git a/assets/js/setup-storage.js b/assets/js/setup-storage.js index a37fc8f..ad45ec7 100644 --- a/assets/js/setup-storage.js +++ b/assets/js/setup-storage.js @@ -17,13 +17,15 @@ async function setupStorage(force = false) { localforage.setItem("absences", {}), localforage.setItem("messages", { "0": [], "1": [], "2": []}), // see messages.js:129, commit 8eb9ca9caca30fbbe023243657535ab4088be377 localforage.setItem("directory", {}), //\\ well I could remember my own code but I didn't. - localforage.setItem("meals", {}) + localforage.setItem("meals", {}), + localforage.setItem("chosenLang", "en") ]; if (logged_in && force == false) { // torej, če je že bila prijava narejena, ne posodobi backwards-compatible vrednosti (username, password,...) await Promise.all(promises_update); console.log("[setupStorage] user logged in: only updated"); } else { + let promises_first_install = [ localforage.setItem("logged_in", false), localforage.setItem("username", ""), |