haldis/app/static/js/theme.js

83 lines
3.5 KiB
JavaScript
Raw Permalink Normal View History

{
2020-07-17 13:17:53 +02:00
const COOKIE_THEME = "theme";
const COOKIE_ATMOSPHERE = "theme_atmosphere";
const COOKIE_PERFORMANCE = "theme_performance";
2020-07-17 13:17:53 +02:00
const YEAR = 60 * 60 * 24 * 365;
2019-12-05 19:39:35 +01:00
2020-07-17 13:17:53 +02:00
const storeCookieAndReload = (name, value) => {
2021-07-24 17:48:08 +02:00
document.cookie = name + " = " + value + "; Path=/; Secure; SameSite=strict; Max-Age=" + (50 * YEAR);
2019-12-05 19:39:35 +01:00
location.reload();
}
2020-07-17 13:17:53 +02:00
const radio = (name, options, current) => {
let container = document.createElement("div");
for (let option in options) {
if (!options.hasOwnProperty(option)) continue;
let input = document.createElement("input");
input.type = "radio";
input.name = name;
input.value = option;
input.id = `${name}-${option}`;
if (option === current) input.setAttribute("checked", "checked");
input.addEventListener("change", e => storeCookieAndReload(name, e.currentTarget.value));
let label = document.createElement("label");
label.setAttribute("for", `${name}-${option}`);
label.innerText = options[option];
let span = document.createElement("span");
span.append(input, " ", label, " ");
container.appendChild(span);
}
return container;
};
2020-07-17 13:17:53 +02:00
const init = () => {
let cookies = {};
document.cookie.split('; ')
.map(cookieDefStr => cookieDefStr.split("=", 2))
.forEach(cookiePair => { cookies[cookiePair[0]] = cookiePair[1]; });
2020-07-17 13:17:53 +02:00
if (window.currentTheme === "plain") {
let a = document.createElement("a");
a.href = "javascript:void(0)";
if (cookies[COOKIE_ATMOSPHERE] == "darkmode") {
a.innerHTML = "Enter light mode"
a.addEventListener("click", () => storeCookieAndReload(COOKIE_ATMOSPHERE, "lightmode"));
} else {
a.innerHTML = "Enter dark mode"
a.addEventListener("click", () => storeCookieAndReload(COOKIE_ATMOSPHERE, "darkmode"));
}
document.getElementById("themeChange").innerHTML = "";
document.getElementById("themeChange").appendChild(a);
}
if (window.currentTheme === "christmas") {
document.querySelector(".background").innerHTML = '<div class="background_wrapper"><div class="christmas_background"></div><div class="snow layer1 a"></div><div class="snow layer1"></div> <div class="snow layer2 a"></div><div class="snow layer2"></div><div class="snow layer3 a"></div><div class="snow layer3"></div><div class="snowman_wrapper"><div class="snowman_head"></div><div class="snowman_body"></div></div><div class="train_wrapper"><div class="whole_train"><div class="mc_wagon"><div class="wheel_big wheel1"></div><div class="wheel_big wheel2"></div><div class="wheel_big wheel3"></div></div><div class="zeus_wagon"><div class="wheel_big wheel1"></div><div class="wheel_big wheel2"></div><div class="wheel_big wheel3"></div></div><div class="train"><div class="wheel_big wheel1"></div><div class="wheel_big wheel2"></div><div class="wheel_big wheel3"></div><div class="wheel_small wheel4"></div><div class="wheel_small wheel5"></div></div></div></div><input type="checkbox" class="train_button"><div class="merry_christmas"></div><div class="sled_wrapper"><div class="sled"></div></div></div>';
}
if (document.querySelector(".changePerformance") && window.currentThemeOptions.includes("performance")) {
document.querySelector(".changePerformance").appendChild(
radio(COOKIE_PERFORMANCE, {heavy: "Heavy", lightweight: "Lightweight"}, cookies[COOKIE_PERFORMANCE])
);
}
if (document.getElementById("themes_select")) {
let themes_select = document.getElementById("themes_select");
themes_select.value = cookies["theme"] || "";
themes_select.addEventListener("change", () => storeCookieAndReload(COOKIE_THEME, themes_select.value));
}
}
init();
}