Assclaw/jfa-go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

admin: a little more refactoring

Browse Source 
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:
Harvey Tindall
2023-06-16 13:43:34 +01:00
parent b8cc75c6b4
commit 54fde33a20
2 changed files with 82 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ts/modules/theme.ts
+56 -32
View File
@@ -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();
}
};
}