nirvash/static/theme.js

165 lines
4.7 KiB
JavaScript
Raw Permalink Normal View History

const defaultTheme = [ "#000000cc", "#ffffffff", "#1f9b92ff", "#00000000", "#DC143Cff" ];
2024-03-18 06:45:11 +00:00
const loginBgReader = new FileReader();
const mainBgReader = new FileReader();
const saveData = {
theme: defaultTheme,
loginScreen: null,
mainScreen: null
}
function $(id) {
return document.getElementById(id);
}
function loadStorage() {
savedTheme = JSON.parse(localStorage.getItem("theme"));
saveData.theme = savedTheme || defaultTheme;
}
function hexToBytes(hex) {
let bytes = [];
for (let c = 0; c < hex.length; c += 2) {
bytes.push(parseInt(hex.substr(c, 2), 16));
}
return bytes;
}
function toByte(v) {
return ('0' +
Math.min(Math.max(parseInt(v), 0), 255).toString(16)
).slice(-2);
}
2024-03-18 06:45:11 +00:00
function resetTheme(theme, bg = false) {
try{
let bg_col = theme[0];
let fg_col = theme[1];
let main_col = theme[2];
let sub_col = theme[3];
let err_col = theme[4];
let fg_opacity = hexToBytes(fg_col.substr(7));
fg_col = fg_col.substr(0,7);
let bg_opacity = hexToBytes(bg_col.substr(7));
bg_col = bg_col.substr(0,7);
let main_opacity = hexToBytes(main_col.substr(7));
main_col = main_col.substr(0,7);
let sub_opacity = hexToBytes(sub_col.substr(7));
sub_col = sub_col.substr(0,7);
let err_opacity = hexToBytes(err_col.substr(7));
err_col = err_col.substr(0,7);
$("bg_col_input").value = bg_col;
$("bg_col_opacity").value = bg_opacity;
$("fg_col_input").value = fg_col;
$("fg_col_opacity").value = fg_opacity;
$("main_col_input").value = main_col;
$("main_col_opacity").value = main_opacity;
$("sub_col_input").value = sub_col;
$("sub_col_opacity").value = sub_opacity;
$("err_col_input").value = err_col;
$("err_col_opacity").value = err_opacity;
} catch {}
2024-03-18 06:45:11 +00:00
if (bg) {
localStorage.setItem("loginScreen", '/static/bg.png');
localStorage.setItem("mainScreen", '/static/bg2.png');
resetBG("login");
resetBG("main");
}
}
function setTheme() {
try {
let bg_col = $("bg_col_input").value
let bg_opacity = toByte($("bg_col_opacity").value);
let fg_col = $("fg_col_input").value;
let fg_opacity = (toByte($("fg_col_opacity").value));
let main_col = $("main_col_input").value;
let main_opacity = (toByte($("main_col_opacity").value));
let sub_col = $("sub_col_input").value;
let sub_opacity = (toByte($("sub_col_opacity").value));
let err_col = $("err_col_input").value;
let err_opacity = (toByte($("err_col_opacity").value));
saveData.theme[0] = bg_col + bg_opacity;
saveData.theme[1] = fg_col + fg_opacity;
saveData.theme[2] = main_col + main_opacity;
saveData.theme[3] = sub_col + sub_opacity;
saveData.theme[4] = err_col + err_opacity;
localStorage.setItem("theme", JSON.stringify(saveData.theme));
} catch {} finally {
document.body.style.setProperty("--bg_color", saveData.theme[0]);
document.body.style.setProperty("--fg_color", saveData.theme[1]);
document.body.style.setProperty("--main_color", saveData.theme[2]);
document.body.style.setProperty("--sub_color", saveData.theme[3]);
document.body.style.setProperty("--err_color", saveData.theme[4]);
}
2024-03-18 06:45:11 +00:00
setBG("login");
setBG("main");
}
function setBG(screen) {
2024-03-18 06:45:11 +00:00
let reader = null;
switch(screen) {
case "login":
reader = loginBgReader;
break;
case "main":
reader = mainBgReader;
break;
}
const imgPath = $(`${screen}_bg_upload`)?.files[0];
if (imgPath) {
reader.readAsDataURL(imgPath);
}
}
function resetBG(screen) {
// set dataURL from localstorage to theme state
2024-03-18 06:45:11 +00:00
saveData[screen + "Screen"] = localStorage.getItem(screen + "Screen");
// bind reader load -> body background set dataURL
2024-03-18 06:45:11 +00:00
let selector = null;
switch (screen) {
case "login":
selector = ".login-body";
break;
case "main":
selector = "body";
break;
}
const rules = document.styleSheets[0].cssRules;
let rule = null;
for (var i = 0; i < rules.length; i++) {
if (rules[i].selectorText == selector) {
rule = rules[i];
break;
}
}
const dataUrl = saveData[screen + "Screen"];
if (dataUrl) {
2024-03-18 19:09:11 +00:00
rule.style.setProperty("background", `url('${dataUrl}')`);
rule.style.setProperty("background-size", "cover");
rule.style.setProperty("background-attachment", "fixed");
2024-03-18 19:17:31 +00:00
rule.style.setProperty("background-position", "center");
}
2024-03-18 06:45:11 +00:00
}
function initializeReaders() {
loginBgReader.addEventListener("load", () => {
localStorage.setItem("loginScreen", loginBgReader.result);
resetBG("login");
}, false);
mainBgReader.addEventListener("load", () => {
localStorage.setItem("mainScreen", mainBgReader.result);
resetBG("main");
}, false);
}
2024-03-18 06:45:11 +00:00
initializeReaders();
resetBG("login");
2024-03-18 06:45:11 +00:00
resetBG("main");