mirror of https://github.com/hrfee/jfa-go.git
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.
This commit is contained in:
parent
b8cc75c6b4
commit
54fde33a20
GPG Key ID:
BBC65952848FB1A2
60
ts/admin.ts
60
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) => {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
