docserver/resources/sitehome_model/assets/js/main.js
2023-08-14 23:33:21 +00:00

81 lines
3.1 KiB
JavaScript

if (typeof settings == 'undefined') { let settings = {}; }
if (typeof site == 'undefined') { let site = {}; }
if (typeof curr_defs == 'undefined') { let curr_defs = {}; }
const define_settings = () => {
settings = Object.freeze({
now: new Date(),
elements: {
themeToggle: {
DarkIcon: document.getElementById('theme-toggle-dark-icon'),
LightIcon: document.getElementById('theme-toggle-light-icon'),
Btn: document.getElementById('theme-toggle'),
},
loading: document.getElementById('loadding-section'),
},
l_store_key: 'defs',
toast_copy_timeout: 2000,
alert_timeout: 3000,
});
curr_defs = {};
site = {
on_color_theme: (color_theme) => {
const elem = document.getElementsByTagName('html')[0];
if (color_theme == 'dark') {
utils.css("hide", settings.elements.themeToggle.DarkIcon);
utils.css("show", settings.elements.themeToggle.LightIcon);
if (!elem.classList.contains('dark')) {
elem.classList.add('dark');
}
} else {
utils.css("show", settings.elements.themeToggle.DarkIcon);
utils.css("hide", settings.elements.themeToggle.LightIcon);
if (elem.classList.contains('dark')) {
elem.classList.remove('dark');
}
}
},
on_loading: (task) => {
if (settings.elements.loading) {
utils.css(task, settings.elements.loading);
}
}
};
}
window.addEventListener('load', () => {
define_settings();
const str_curenv = localStorage.getItem(settings.l_store_key);
if (str_curenv != '') {
try {
data= JSON.parse(str_curenv);
} catch (error) {
console.log(error);
}
if (data) { curr_defs = data};
} else { curr_defs = {}; }
let color_theme = 'light';
if (tpl_defs && tpl_defs.main && tpl_defs.main.color_theme != '') {
color_theme = tpl_defs.main.color_theme;
} else if (curr_defs && curr_defs.theme) {
color_theme = curr_defs.theme;
}
if (settings.elements.themeToggle.Btn) {
site.on_color_theme(color_theme);
settings.elements.themeToggle.Btn.addEventListener('click', (ev) => {
ev.preventDefault();
const elem = document.getElementsByTagName('html')[0];
const next_theme = elem.classList.contains('dark') ? 'light' : 'dark';
if (tpl_defs && tpl_defs.curr_env) {
tpl_defs.curr_env.color_theme = next_theme;
}
if (curr_defs) {
curr_defs.theme=next_theme;
localStorage.setItem(settings.l_store_key, JSON.stringify(curr_defs));
}
site.on_color_theme(next_theme);
if (tpl_defs.main.has_role) { utils.update_session(data); }
});
}
// this is key to hide theme changes before page display
document.body.classList.remove('hidden');
});