admin: a little more refactoring

all theme functionality is now in theme.ts, and the tab stuff has been
changed a little but kept in admin as it won't be in use anywhere else
for the time being.
user-page
Harvey Tindall 1 year ago
parent b8cc75c6b4
commit 54fde33a20
No known key found for this signature in database
GPG Key ID: BBC65952848FB1A2

@ -1,4 +1,4 @@
import { nightwind } from "./modules/theme.js";
import { ThemeManager } from "./modules/theme.js";
import { lang, LangFile, loadLangSelector } from "./modules/lang.js";
import { Modal } from "./modules/modal.js";
import { Tabs } from "./modules/tabs.js";
@ -10,31 +10,7 @@ import { _get, _post, notificationBox, whichAnimationEvent } from "./modules/com
import { Updater } from "./modules/update.js";
import { Login } from "./modules/login.js";
let theme = new nightwind();
const themeButton = document.getElementById('button-theme') as HTMLSpanElement;
const switchThemeIcon = () => {
const icon = themeButton.childNodes[0] as HTMLElement;
if (document.documentElement.classList.contains("dark")) {
icon.classList.add("ri-sun-line");
icon.classList.remove("ri-moon-line");
themeButton.classList.add("~warning");
themeButton.classList.remove("~neutral");
themeButton.classList.remove("@high");
} else {
icon.classList.add("ri-moon-line");
icon.classList.remove("ri-sun-line");
themeButton.classList.add("@high");
themeButton.classList.add("~neutral");
themeButton.classList.remove("~warning");
}
};
themeButton.onclick = () => {
theme.toggle();
switchThemeIcon();
}
switchThemeIcon();
const theme = new ThemeManager(document.getElementById("button-theme"));
window.lang = new lang(window.langFile as LangFile);
loadLangSelector("admin");
@ -130,19 +106,35 @@ window.notifications = new notificationBox(document.getElementById('notification
}*/
// load tabs
const tabs: { url: string, reloader: () => void }[] = [
{
url: "invites",
reloader: window.invites.reload
},
{
url: "accounts",
reloader: accounts.reload
},
{
url: "settings",
reloader: settings.reload
}
];
const defaultTab = tabs[0];
window.tabs = new Tabs();
window.tabs.addTab("invites", null, window.invites.reload);
window.tabs.addTab("accounts", null, accounts.reload);
window.tabs.addTab("settings", null, settings.reload);
for (let tab of ["invites", "accounts", "settings"]) {
if (window.location.pathname == window.URLBase + "/" + tab) {
window.tabs.switch(tab, true);
for (let tab of tabs) {
window.tabs.addTab(tab.url, null, tab.reloader);
if (window.location.pathname == window.URLBase + "/" + tab.url) {
window.tabs.switch(tab.url, true);
}
}
// Default tab
if ((window.URLBase + "/").includes(window.location.pathname)) {
window.tabs.switch("invites", true);
window.tabs.switch(defaultTab.url, true);
}
document.addEventListener("tab-change", (event: CustomEvent) => {

@ -1,25 +1,8 @@
export function toggleTheme() {
document.documentElement.classList.toggle('dark');
document.documentElement.classList.toggle('light');
localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? "dark" : "light");
}
export class ThemeManager {
export function loadTheme() {
const theme = localStorage.getItem("theme");
if (theme == "dark") {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
} else if (theme == "light") {
document.documentElement.classList.add('light');
document.documentElement.classList.remove('dark');
} else if (window.matchMedia('(prefers-color-scheme: dark)').media !== 'not all') {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
}
}
export class nightwind {
beforeTransition = () => {
private _themeButton: HTMLElement = null;
private _beforeTransition = () => {
const doc = document.documentElement;
const onTransitionDone = () => {
doc.classList.remove('nightwind');
@ -30,19 +13,53 @@ export class nightwind {
doc.classList.add('nightwind');
}
};
constructor() {
private _updateThemeIcon = () => {
const icon = this._themeButton.childNodes[0] as HTMLElement;
if (document.documentElement.classList.contains("dark")) {
icon.classList.add("ri-sun-line");
icon.classList.remove("ri-moon-line");
this._themeButton.classList.add("~warning");
this._themeButton.classList.remove("~neutral");
this._themeButton.classList.remove("@high");
} else {
icon.classList.add("ri-moon-line");
icon.classList.remove("ri-sun-line");
this._themeButton.classList.add("@high");
this._themeButton.classList.add("~neutral");
this._themeButton.classList.remove("~warning");
}
};
bindButton = (button: HTMLElement) => {
this._themeButton = button;
this._themeButton.onclick = this.toggle;
this._updateThemeIcon();
}
toggle = () => {
this._toggle();
if (this._themeButton) {
this._updateThemeIcon();
}
}
constructor(button?: HTMLElement) {
const theme = localStorage.getItem("theme");
if (theme == "dark") {
this.enable(true);
this._enable(true);
} else if (theme == "light") {
this.enable(false);
this._enable(false);
} else if (window.matchMedia('(prefers-color-scheme: dark)').media !== 'not all') {
this.enable(true);
this._enable(true);
}
if (arguments.length == 1)
this.bindButton(button);
}
toggle = () => {
this.beforeTransition();
private _toggle = () => {
this._beforeTransition();
if (!document.documentElement.classList.contains('dark')) {
document.documentElement.classList.add('dark');
} else {
@ -51,17 +68,24 @@ export class nightwind {
localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? "dark" : "light");
};
enable = (dark: boolean) => {
private _enable = (dark: boolean) => {
const mode = dark ? "dark" : "light";
const opposite = dark ? "light" : "dark";
localStorage.setItem('theme', dark ? "dark" : "light");
this.beforeTransition();
this._beforeTransition();
if (document.documentElement.classList.contains(opposite)) {
document.documentElement.classList.remove(opposite);
}
document.documentElement.classList.add(mode);
};
enable = (dark: boolean) => {
this._enable(dark);
if (this._themeButton != null) {
this._updateThemeIcon();
}
};
}

Loading…
Cancel
Save