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.

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 theme = new ThemeManager(document.getElementById("button-theme"));
-
-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();
-
 
 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();
+const tabs: { url: string, reloader: () => void }[] = [
-window.tabs.addTab("invites", null, window.invites.reload);
+    {
-window.tabs.addTab("accounts", null, accounts.reload);
+        url: "invites",
-window.tabs.addTab("settings", null, settings.reload);
+        reloader: window.invites.reload
+    },
+    {
+        url: "accounts",
+        reloader: accounts.reload
+    },
+    {
+        url: "settings",
+        reloader: settings.reload
+    }
+];
 
-for (let tab of ["invites", "accounts", "settings"]) {
+const defaultTab = tabs[0];
-    if (window.location.pathname == window.URLBase + "/" + tab) {
+
-        window.tabs.switch(tab, true);
+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) => {

ts/modules/theme.ts

@@ -1,25 +1,8 @@
-export function toggleTheme() {
+export class ThemeManager {
-    document.documentElement.classList.toggle('dark');
-    document.documentElement.classList.toggle('light');
-    localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? "dark" : "light");
-}
 
-export function loadTheme() {
+    private _themeButton: HTMLElement = null;
-    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 {
+    private _beforeTransition = () => {
-    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");
+    private _updateThemeIcon = () => {
-        if (theme == "dark") {
+        const icon = this._themeButton.childNodes[0] as HTMLElement;
-            this.enable(true);
+        if (document.documentElement.classList.contains("dark")) {
-        } else if (theme == "light") {
+            icon.classList.add("ri-sun-line");
-            this.enable(false);
+            icon.classList.remove("ri-moon-line");
-        } else if (window.matchMedia('(prefers-color-scheme: dark)').media !== 'not all') {
+            this._themeButton.classList.add("~warning");
-            this.enable(true);
+            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();
+        }
+    };
  }