From 340d024e5fc09d1ab89062ece7b8788786ba564b Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Mon, 10 Jan 2022 22:37:25 -0500 Subject: Testing theme changer --- scripts/cookie.js | 36 +++++++++++++++++++++++++ scripts/light-dark.js | 24 +++++++++++++++++ scripts/theme.js | 75 +++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 135 insertions(+) create mode 100644 scripts/cookie.js create mode 100644 scripts/light-dark.js create mode 100644 scripts/theme.js (limited to 'scripts') diff --git a/scripts/cookie.js b/scripts/cookie.js new file mode 100644 index 0000000..9c88963 --- /dev/null +++ b/scripts/cookie.js @@ -0,0 +1,36 @@ +'use strict'; + +class Cookies { + static getCookie(name){ + let cookies = document.cookie.split(";"); + for(let i in cookies) { + let cname = cookies[i].trim().split("=")[0]; + if(cname == name){ + return cookies[i].trim().slice(name.length + 1); + } + } + return ""; + } + + static setCookie(name, value, data = {SameSite: "Strict"}) { + let extra = ""; + + for(let key in data) + { + extra += "; " + key + "=" + data[key]; + } + + document.cookie = name + "=" + value + extra; + } + + static setYearCookie(name, value) { + var date = new Date(Date.now()); + date.setFullYear(date.getFullYear() + 1); + Cookies.setCookie(name, value, {SameSite: "Strict", expires: date.toUTCString()}); + } + + static removeCookie(name) { + var date = new Date(0); + Cookies.setCookie(name, "", {SameSite: "Strict", expires: date.toUTCString()}); + } +} diff --git a/scripts/light-dark.js b/scripts/light-dark.js new file mode 100644 index 0000000..0e23d98 --- /dev/null +++ b/scripts/light-dark.js @@ -0,0 +1,24 @@ +'use strict'; + +(function() { + lightDark = document.getElementById("light-dark"); + + function setButtonText() { + if(Theme.get() == BASE_THEMES[0][0]) + lightDark.innerText = BASE_THEMES[1][1] + " Mode"; + else + lightDark.innerText = BASE_THEMES[1][0] + " Mode"; + } + + function changeTheme(e) { + if(Theme.get() == BASE_THEMES[0][0]) + Theme.set(BASE_THEMES[0][1]); + else + Theme.set(BASE_THEMES[0][0]); + + setButtonText(); + } + + lightDark.addEventListener("click", changeTheme); + setButtonText(); +})(); diff --git a/scripts/theme.js b/scripts/theme.js new file mode 100644 index 0000000..8147260 --- /dev/null +++ b/scripts/theme.js @@ -0,0 +1,75 @@ +'use strict'; + +const BASE_THEMES = [[ + "/styles/themes/colors-base.css", + "/styles/themes/colors-dark.css" +], +[ + "Light", + "Dark" +]]; + +const APP_NAME = "cshift-net"; + +class Theme{ + static theme = document.getElementById("theme"); + static UserThemes = [[],[]]; + + static init() + { + let uth = Cookies.getCookie("userThemes-" + APP_NAME).split(','); + + for (let i = 1; i < uth.length; i += 2) + { + this.UserThemes[0].push(uth[i - 1]); + this.UserThemes[1].push(uth[i]); + } + + if(Cookies.getCookie("theme-" + APP_NAME) == ""){ + Cookies.setYearCookie("theme", BASE_THEMES[0][0]); + } + } + + static restore() + { + Theme.init(); + Theme.theme.setAttribute("href", Cookies.getCookie("theme-" + APP_NAME) + "?v=" + Date.now()); + } + + static set(sheet) + { + Cookies.setYearCookie("theme-" + APP_NAME, sheet); + Theme.theme.setAttribute("href", sheet + "?v=" + Date.now()); + } + + static get() { + return Cookies.getCookie("theme-" + APP_NAME); + } + + static setUserThemes() { + let out = ""; + for (let i = 0; i < this.UserThemes[0].length; i++) + { + if(i !== 0) + out = out + ","; + + out = out + this.UserThemes[0][i] + "," + this.UserThemes[1][i]; + } + + Cookies.setYearCookie("userThemes-" + APP_NAME, out); + } + + static removeUserTheme (index) { + this.UserThemes[0].splice(index, 1); + this.UserThemes[1].splice(index, 1); + this.setUserThemes(); + } + + static addUserTheme (name, value) { + this.UserThemes[0].push(name); + this.UserThemes[1].push(value); + this.setUserThemes(); + } +} + +Theme.restore(); \ No newline at end of file -- cgit v1.2.3