Show fullscreen text when reloading page

This commit is contained in:
redphx
2024-07-31 07:37:23 +07:00
parent a39d056eba
commit 0d3385790c
3 changed files with 73 additions and 17 deletions

View File

@@ -24,6 +24,7 @@ import { PrefKey, StorageKey } from "@/enums/pref-keys";
import { getPref, getPrefDefinition, setPref } from "@/utils/settings-storages/global-settings-storage";
import { SettingElement } from "@/utils/setting-element";
import type { SettingDefinition } from "@/types/setting-definition";
import { FullscreenText } from "../fullscreen-text";
type SettingTabContentItem = Partial<{
@@ -69,7 +70,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
private $settings!: HTMLElement;
private $btnReload!: HTMLElement;
private $btnGlobalReload!: HTMLElement;
private $btnGlobalReload!: HTMLButtonElement;
private $noteGlobalReload!: HTMLElement;
private renderFullSettings: boolean;
@@ -123,11 +124,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
classes: ['bx-settings-reload-button', 'bx-gone'],
style: ButtonStyle.FOCUSABLE | ButtonStyle.FULL_WIDTH,
onClick: e => {
const $target = (e.target as HTMLButtonElement).closest('button')!;
$target.disabled = true;
$target.firstElementChild!.textContent = t('settings-reloading');
window.location.reload();
this.reloadPage();
},
});
@@ -611,7 +608,13 @@ export class SettingsNavigationDialog extends NavigationDialog {
}
}
onUnmounted(): void {
private reloadPage() {
this.$btnGlobalReload.disabled = true;
this.$btnGlobalReload.firstElementChild!.textContent = t('settings-reloading');
this.hide();
FullscreenText.getInstance().show(t('settings-reloading'));
window.location.reload();
}
private renderTab(settingTab: SettingTab) {
@@ -855,8 +858,7 @@ export class SettingsNavigationDialog extends NavigationDialog {
icon: BxIcon.REFRESH,
style: ButtonStyle.FOCUSABLE | ButtonStyle.DROP_SHADOW,
onClick: e => {
window.location.reload();
this.dialogManager.hide();
this.reloadPage();
},
}),

View File

@@ -0,0 +1,33 @@
import { CE } from "@/utils/html";
export class FullscreenText {
private static instance: FullscreenText;
public static getInstance(): FullscreenText {
if (!FullscreenText.instance) {
FullscreenText.instance = new FullscreenText();
}
return FullscreenText.instance;
}
$text: HTMLElement;
constructor() {
this.$text = CE('div', {
class: 'bx-fullscreen-text bx-gone',
});
document.documentElement.appendChild(this.$text);
}
show(msg: string) {
document.body.classList.add('bx-no-scroll');
this.$text.classList.remove('bx-gone');
this.$text.textContent = msg;
}
hide() {
document.body.classList.remove('bx-no-scroll');
this.$text.classList.add('bx-gone');
}
}