marcel/better-xcloud
1
0
Fork 0
mirror of https://github.com/redphx/better-xcloud.git synced 2025-06-06 07:37:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor Dialog

Browse Source
This commit is contained in:
redphx 2024-05-03 17:06:10 +07:00
parent bcd61833b2
commit db1ce23b53
1 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/modules/dialog.ts
View File

@ -1,20 +1,20 @@
import { t } from "@utils/translation"; import { t } from "@utils/translation";
import { CE, createButton, ButtonStyle, Icon } from "@utils/html"; import { CE, createButton, ButtonStyle, Icon } from "@utils/html";
type DialogOptions = { type DialogOptions = Partial<{
title?: string; title: string;
className?: string; className: string;
content?: string | HTMLElement; content: string | HTMLElement;
hideCloseButton?: boolean; hideCloseButton: boolean;
onClose?: string; onClose: string;
helpUrl?: string; helpUrl: string;
} }>;
export class Dialog { export class Dialog {
$dialog?: HTMLElement; $dialog: HTMLElement;
$title?: HTMLElement; $title: HTMLElement;
$content?: HTMLElement; $content: HTMLElement;
$overlay?: Element | null; $overlay: HTMLElement;
onClose: any; onClose: any;
@ -29,14 +29,17 @@ export class Dialog {
} = options; } = options;
// Create dialog overlay // Create dialog overlay
this.$overlay = document.querySelector('.bx-dialog-overlay'); const $overlay = document.querySelector('.bx-dialog-overlay') as HTMLElement;
if (!this.$overlay) {
if (!$overlay) {
this.$overlay = CE('div', {'class': 'bx-dialog-overlay bx-gone'}); this.$overlay = CE('div', {'class': 'bx-dialog-overlay bx-gone'});
// Disable right click // Disable right click
this.$overlay!.addEventListener('contextmenu', e => e.preventDefault()); this.$overlay.addEventListener('contextmenu', e => e.preventDefault());
document.documentElement.appendChild(this.$overlay!); document.documentElement.appendChild(this.$overlay);
} else {
this.$overlay = $overlay;
} }
let $close; let $close;
@ -72,19 +75,19 @@ export class Dialog {
document.activeElement && (document.activeElement as HTMLElement).blur(); document.activeElement && (document.activeElement as HTMLElement).blur();
if (newOptions && newOptions.title) { if (newOptions && newOptions.title) {
this.$title!.querySelector('b')!.textContent = newOptions.title; this.$title.querySelector('b')!.textContent = newOptions.title;
this.$title!.classList.remove('bx-gone'); this.$title.classList.remove('bx-gone');
} }
this.$dialog!.classList.remove('bx-gone'); this.$dialog.classList.remove('bx-gone');
this.$overlay!.classList.remove('bx-gone'); this.$overlay.classList.remove('bx-gone');
document.body.classList.add('bx-no-scroll'); document.body.classList.add('bx-no-scroll');
} }
hide(e?: any) { hide(e?: any) {
this.$dialog!.classList.add('bx-gone'); this.$dialog.classList.add('bx-gone');
this.$overlay!.classList.add('bx-gone'); this.$overlay.classList.add('bx-gone');
document.body.classList.remove('bx-no-scroll'); document.body.classList.remove('bx-no-scroll');
@ -92,7 +95,7 @@ export class Dialog {
} }
toggle() { toggle() {
this.$dialog!.classList.toggle('bx-gone'); this.$dialog.classList.toggle('bx-gone');
this.$overlay!.classList.toggle('bx-gone'); this.$overlay.classList.toggle('bx-gone');
} }
} }