diff --git a/ts/admin.ts b/ts/admin.ts index e65dee3..6eb50f8 100644 --- a/ts/admin.ts +++ b/ts/admin.ts @@ -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 -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); +const tabs: { url: string, reloader: () => void }[] = [ + { + url: "invites", + reloader: window.invites.reload + }, + { + url: "accounts", + reloader: accounts.reload + }, + { + url: "settings", + reloader: settings.reload + } +]; -for (let tab of ["invites", "accounts", "settings"]) { - if (window.location.pathname == window.URLBase + "/" + tab) { - window.tabs.switch(tab, true); +const defaultTab = tabs[0]; + +window.tabs = new Tabs(); + +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) => { diff --git a/ts/modules/theme.ts b/ts/modules/theme.ts index f8f190d..0767451 100644 --- a/ts/modules/theme.ts +++ b/ts/modules/theme.ts @@ -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() { - const theme = localStorage.getItem("theme"); - if (theme == "dark") { - this.enable(true); - } else if (theme == "light") { - this.enable(false); - } else if (window.matchMedia('(prefers-color-scheme: dark)').media !== 'not all') { - this.enable(true); + + 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.beforeTransition(); + this._toggle(); + if (this._themeButton) { + this._updateThemeIcon(); + } + } + + constructor(button?: HTMLElement) { + const theme = localStorage.getItem("theme"); + if (theme == "dark") { + this._enable(true); + } else if (theme == "light") { + this._enable(false); + } else if (window.matchMedia('(prefers-color-scheme: dark)').media !== 'not all') { + this._enable(true); + } + + if (arguments.length == 1) + this.bindButton(button); + } + + 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(); + } + }; }