@cedx/base 0.22.0 → 0.23.0

package/ReadMe.md

@@ -1,5 +1,5 @@
 # Cédric Belin's Base
-![.NET](https://badgen.net/badge/.net/%3E%3D9.0/green) ![Version](https://badgen.net/badge/project/v0.22.0/blue) ![Licence](https://badgen.net/badge/licence/MIT/blue)
+![.NET](https://badgen.net/badge/.net/%3E%3D9.0/green) ![Version](https://badgen.net/badge/project/v0.23.0/blue) ![Licence](https://badgen.net/badge/licence/MIT/blue)
 
 Base library by [Cédric Belin](https://cedric-belin.fr), full stack developer,
 implemented in [C#](https://learn.microsoft.com/en-us/dotnet/csharp) and [TypeScript](https://www.typescriptlang.org).

package/lib/UI/Components/BackButton.d.ts

@@ -1,7 +1,8 @@
 /**
- * A component that moves back one page in the session history when clicked.
+ * A component that moves back in the session history when clicked.
  */
 export declare class BackButton extends HTMLElement {
+    #private;
     /**
      * Creates a new back button.
      */

package/lib/UI/Components/BackButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BackButton.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/BackButton.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,UAAW,SAAQ,WAAW;IAE1C;;OAEG;;IAaH;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;CACD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}
+{"version":3,"file":"BackButton.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/BackButton.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,UAAW,SAAQ,WAAW;;IAE1C;;OAEG;;IAaH;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;CAUD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}

package/lib/UI/Components/BackButton.js

@@ -1,5 +1,5 @@
 /**
- * A component that moves back one page in the session history when clicked.
+ * A component that moves back in the session history when clicked.
  */
 export class BackButton extends HTMLElement {
     /**
@@ -7,7 +7,7 @@ export class BackButton extends HTMLElement {
      */
     constructor() {
         super();
-        this.addEventListener("click", () => history.go(-this.steps));
+        this.addEventListener("click", this.#goBack.bind(this));
     }
     /**
      * Registers the component.
@@ -25,4 +25,12 @@ export class BackButton extends HTMLElement {
     set steps(value) {
         this.setAttribute("steps", value.toString());
     }
+    /**
+     * Moves back in the session history.
+     * @param event The dispatched event.
+     */
+    #goBack(event) {
+        event.preventDefault();
+        history.go(-this.steps);
+    }
 }

package/lib/UI/Components/DialogBox.js

@@ -28,10 +28,10 @@ export class DialogBox extends HTMLElement {
      */
     constructor() {
         super();
-        this.firstElementChild.addEventListener("hidden.bs.modal", () => this.#resolve(this.#result));
-        this.querySelector(".btn-close").addEventListener("click", event => this.#close(event));
+        this.firstElementChild.addEventListener("hide.bs.modal", () => this.#resolve(this.#result));
+        this.querySelector(".btn-close").addEventListener("click", this.#close.bind(this));
         for (const button of this.querySelectorAll(".modal-footer button"))
-            button.addEventListener("click", event => this.#close(event));
+            button.addEventListener("click", this.#close.bind(this));
     }
     /**
      * Registers the component.
@@ -211,7 +211,7 @@ export class DialogBox extends HTMLElement {
         if (message) {
             const footer = message.footer ?? document.createDocumentFragment();
             for (const button of footer.querySelectorAll("button"))
-                button.addEventListener("click", event => this.#close(event));
+                button.addEventListener("click", this.#close.bind(this));
             this.body = message.body;
             this.caption = message.caption;
             this.footer = footer;

package/lib/UI/Components/FullScreenToggler.d.ts

@@ -0,0 +1,46 @@
+/**
+ * A component for toggling an element to full-screen.
+ */
+export declare class FullScreenToggler extends HTMLElement {
+    #private;
+    /**
+     * Creates a new full-screen toggler.
+     */
+    constructor();
+    /**
+     * The CSS selector used to target the element.
+     */
+    get target(): string;
+    set target(value: string);
+    /**
+     * Value indicating whether to prevent the device screen from dimming or locking when in full-screen mode.
+     */
+    get wakeLock(): boolean;
+    set wakeLock(value: boolean);
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback(): void;
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Toggles the full-screen mode of the associated element.
+     * @param event The dispatched event.
+     * @returns Resolves when the full-screen mode has been toggled.
+     */
+    toggleFullScreen(event?: Event): Promise<void>;
+}
+/**
+ * Declaration merging.
+ */
+declare global {
+    /**
+     * The map of HTML tag names.
+     */
+    interface HTMLElementTagNameMap {
+        "fullscreen-toggler": FullScreenToggler;
+    }
+}
+//# sourceMappingURL=FullScreenToggler.d.ts.map

package/lib/UI/Components/FullScreenToggler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullScreenToggler.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/FullScreenToggler.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,WAAW;;IAYjD;;OAEG;;IAaH;;OAEG;IACH,IAAI,MAAM,IAAI,MAAM,CAGnB;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,EAEvB;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAMzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAK5B;;;;OAIG;IACG,gBAAgB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;CAwCpD;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,iBAAiB,CAAC;KACxC;CACD"}

package/lib/UI/Components/FullScreenToggler.js

@@ -0,0 +1,109 @@
+/**
+ * A component for toggling an element to full-screen.
+ */
+export class FullScreenToggler extends HTMLElement {
+    /**
+     * The associated element.
+     */
+    #element = document.body;
+    /**
+     * The handle to the underlying platform wake lock.
+     */
+    #sentinel = null;
+    /**
+     * Creates a new full-screen toggler.
+     */
+    constructor() {
+        super();
+        this.addEventListener("click", this.toggleFullScreen.bind(this)); // eslint-disable-line @typescript-eslint/no-misused-promises
+    }
+    /**
+     * Registers the component.
+     */
+    static {
+        customElements.define("fullscreen-toggler", this);
+    }
+    /**
+     * The CSS selector used to target the element.
+     */
+    get target() {
+        const value = this.getAttribute("target") ?? "";
+        return value.trim() || "body";
+    }
+    set target(value) {
+        this.setAttribute("target", value);
+    }
+    /**
+     * Value indicating whether to prevent the device screen from dimming or locking when in full-screen mode.
+     */
+    get wakeLock() {
+        return this.hasAttribute("wakeLock");
+    }
+    set wakeLock(value) {
+        this.toggleAttribute("target", value);
+    }
+    /**
+     * Method invoked when this component is connected.
+     */
+    connectedCallback() {
+        document.addEventListener("visibilitychange", this.#onVisibilityChanged);
+        this.#element = document.querySelector(this.target) ?? document.body;
+        this.#element.addEventListener("fullscreenchange", this.#onFullScreenChanged);
+    }
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback() {
+        document.removeEventListener("visibilitychange", this.#onVisibilityChanged);
+        this.#element.removeEventListener("fullscreenchange", this.#onFullScreenChanged);
+    }
+    /**
+     * Toggles the full-screen mode of the associated element.
+     * @param event The dispatched event.
+     * @returns Resolves when the full-screen mode has been toggled.
+     */
+    async toggleFullScreen(event) {
+        event?.preventDefault();
+        if (document.fullscreenElement)
+            await document.exitFullscreen();
+        else
+            await this.#element.requestFullscreen();
+    }
+    /**
+     * Acquires a new wake lock.
+     * @returns Resolves when the wake lock has been acquired.
+     */
+    async #acquireWakeLock() {
+        if (this.#sentinel && !this.#sentinel.released)
+            return;
+        if (this.wakeLock)
+            this.#sentinel = await navigator.wakeLock.request();
+    }
+    /**
+     * Acquires or releases the wake lock when the document enters or exits the full-screen mode.
+     * @param event The dispatched event.
+     */
+    #onFullScreenChanged = () => {
+        if (document.fullscreenElement)
+            void this.#acquireWakeLock();
+        else
+            void this.#releaseWakeLock();
+    };
+    /**
+     * Eventually acquires a new wake lock when the document visibility has changed.
+     * @param event The dispatched event.
+     */
+    #onVisibilityChanged = () => {
+        if (document.fullscreenElement && !document.hidden)
+            void this.#acquireWakeLock();
+    };
+    /**
+     * Releases the acquired wake lock.
+     * @returns Resolves when the wake lock has been released.
+     */
+    async #releaseWakeLock() {
+        if (!this.#sentinel || this.#sentinel.released)
+            return;
+        await this.#sentinel.release();
+    }
+}

package/lib/UI/Components/ThemeDropdown.js

@@ -23,7 +23,7 @@ export class ThemeDropdown extends HTMLElement {
     constructor() {
         super();
         for (const button of this.querySelectorAll(".dropdown-menu button"))
-            button.addEventListener("click", event => this.#setAppTheme(event));
+            button.addEventListener("click", this.#setAppTheme.bind(this));
     }
     /**
      * Registers the component.

package/lib/UI/Components/Toast.js

@@ -169,7 +169,7 @@ export class Toast extends HTMLElement {
      */
     connectedCallback() {
         const toast = this.firstElementChild;
-        toast.addEventListener("hidden.bs.toast", () => clearInterval(this.#timer));
+        toast.addEventListener("hide.bs.toast", () => clearInterval(this.#timer));
         toast.addEventListener("show.bs.toast", () => this.#timer = window.setInterval(() => this.#updateElapsedTime(), 1_000));
         this.#toast = new BootstrapToast(toast);
         if (this.open)

package/package.json

@@ -7,7 +7,7 @@
 	"name": "@cedx/base",
 	"repository": "cedx/base",
 	"type": "module",
-	"version": "0.22.0",
+	"version": "0.23.0",
 	"devDependencies": {
 		"@playwright/browser-chromium": "^1.55.0",
 		"@types/bootstrap": "^5.2.10",

package/src/Client/UI/Components/BackButton.ts

@@ -1,5 +1,5 @@
 /**
- * A component that moves back one page in the session history when clicked.
+ * A component that moves back in the session history when clicked.
  */
 export class BackButton extends HTMLElement {
 
@@ -8,7 +8,7 @@ export class BackButton extends HTMLElement {
 	 */
 	constructor() {
 		super();
-		this.addEventListener("click", () => history.go(-this.steps));
+		this.addEventListener("click", this.#goBack.bind(this));
 	}
 
 	/**
@@ -28,6 +28,15 @@ export class BackButton extends HTMLElement {
 	set steps(value: number) {
 		this.setAttribute("steps", value.toString());
 	}
+
+	/**
+	 * Moves back in the session history.
+	 * @param event The dispatched event.
+	 */
+	#goBack(event: Event): void {
+		event.preventDefault();
+		history.go(-this.steps);
+	}
 }
 
 /**

package/src/Client/UI/Components/DialogBox.ts

@@ -81,9 +81,9 @@ export class DialogBox extends HTMLElement {
 	 */
 	constructor() {
 		super();
-		this.firstElementChild!.addEventListener("hidden.bs.modal", () => this.#resolve(this.#result));
-		this.querySelector(".btn-close")!.addEventListener("click", event => this.#close(event));
-		for (const button of this.querySelectorAll(".modal-footer button")) button.addEventListener("click", event => this.#close(event));
+		this.firstElementChild!.addEventListener("hide.bs.modal", () => this.#resolve(this.#result));
+		this.querySelector(".btn-close")!.addEventListener("click", this.#close.bind(this));
+		for (const button of this.querySelectorAll(".modal-footer button")) button.addEventListener("click", this.#close.bind(this));
 	}
 
 	/**
@@ -267,7 +267,7 @@ export class DialogBox extends HTMLElement {
 	show(message: IDialogMessage|null = null): Promise<string> {
 		if (message) {
 			const footer = message.footer ?? document.createDocumentFragment();
-			for (const button of footer.querySelectorAll("button")) button.addEventListener("click", event => this.#close(event));
+			for (const button of footer.querySelectorAll("button")) button.addEventListener("click", this.#close.bind(this));
 			this.body = message.body;
 			this.caption = message.caption;
 			this.footer = footer;

package/src/Client/UI/Components/FullScreenToggler.ts

@@ -0,0 +1,127 @@
+/**
+ * A component for toggling an element to full-screen.
+ */
+export class FullScreenToggler extends HTMLElement {
+
+	/**
+	 * The associated element.
+	 */
+	#element: Element = document.body;
+
+	/**
+	 * The handle to the underlying platform wake lock.
+	 */
+	#sentinel: WakeLockSentinel|null = null;
+
+	/**
+	 * Creates a new full-screen toggler.
+	 */
+	constructor() {
+		super();
+		this.addEventListener("click", this.toggleFullScreen.bind(this)); // eslint-disable-line @typescript-eslint/no-misused-promises
+	}
+
+	/**
+	 * Registers the component.
+	 */
+	static {
+		customElements.define("fullscreen-toggler", this);
+	}
+
+	/**
+	 * The CSS selector used to target the element.
+	 */
+	get target(): string {
+		const value = this.getAttribute("target") ?? "";
+		return value.trim() || "body";
+	}
+	set target(value: string) {
+		this.setAttribute("target", value);
+	}
+
+	/**
+	 * Value indicating whether to prevent the device screen from dimming or locking when in full-screen mode.
+	 */
+	get wakeLock(): boolean {
+		return this.hasAttribute("wakeLock");
+	}
+	set wakeLock(value: boolean) {
+		this.toggleAttribute("target", value);
+	}
+
+	/**
+	 * Method invoked when this component is connected.
+	 */
+	connectedCallback(): void {
+		document.addEventListener("visibilitychange", this.#onVisibilityChanged);
+		this.#element = document.querySelector(this.target) ?? document.body;
+		this.#element.addEventListener("fullscreenchange", this.#onFullScreenChanged);
+	}
+
+	/**
+	 * Method invoked when this component is disconnected.
+	 */
+	disconnectedCallback(): void {
+		document.removeEventListener("visibilitychange", this.#onVisibilityChanged);
+		this.#element.removeEventListener("fullscreenchange", this.#onFullScreenChanged);
+	}
+
+	/**
+	 * Toggles the full-screen mode of the associated element.
+	 * @param event The dispatched event.
+	 * @returns Resolves when the full-screen mode has been toggled.
+	 */
+	async toggleFullScreen(event?: Event): Promise<void> {
+		event?.preventDefault();
+		if (document.fullscreenElement) await document.exitFullscreen();
+		else await this.#element.requestFullscreen();
+	}
+
+	/**
+	 * Acquires a new wake lock.
+	 * @returns Resolves when the wake lock has been acquired.
+	 */
+	async #acquireWakeLock(): Promise<void> {
+		if (this.#sentinel && !this.#sentinel.released) return;
+		if (this.wakeLock) this.#sentinel = await navigator.wakeLock.request();
+	}
+
+	/**
+	 * Acquires or releases the wake lock when the document enters or exits the full-screen mode.
+	 * @param event The dispatched event.
+	 */
+	readonly #onFullScreenChanged: (event: Event) => void = () => {
+		if (document.fullscreenElement) void this.#acquireWakeLock();
+		else void this.#releaseWakeLock();
+	};
+
+	/**
+	 * Eventually acquires a new wake lock when the document visibility has changed.
+	 * @param event The dispatched event.
+	 */
+	readonly #onVisibilityChanged: (event: Event) => void = () => {
+		if (document.fullscreenElement && !document.hidden) void this.#acquireWakeLock();
+	};
+
+	/**
+	 * Releases the acquired wake lock.
+	 * @returns Resolves when the wake lock has been released.
+	 */
+	async #releaseWakeLock(): Promise<void> {
+		if (!this.#sentinel || this.#sentinel.released) return;
+		await this.#sentinel.release();
+	}
+}
+
+/**
+ * Declaration merging.
+ */
+declare global {
+
+	/**
+	 * The map of HTML tag names.
+	 */
+	interface HTMLElementTagNameMap {
+		"fullscreen-toggler": FullScreenToggler;
+	}
+}

package/src/Client/UI/Components/ThemeDropdown.ts

@@ -27,7 +27,7 @@ export class ThemeDropdown extends HTMLElement {
 	 */
 	constructor() {
 		super();
-		for (const button of this.querySelectorAll(".dropdown-menu button")) button.addEventListener("click", event => this.#setAppTheme(event));
+		for (const button of this.querySelectorAll(".dropdown-menu button")) button.addEventListener("click", this.#setAppTheme.bind(this));
 	}
 
 	/**

package/src/Client/UI/Components/Toast.ts

@@ -173,7 +173,7 @@ export class Toast extends HTMLElement {
 	 */
 	connectedCallback(): void {
 		const toast = this.firstElementChild!;
-		toast.addEventListener("hidden.bs.toast", () => clearInterval(this.#timer));
+		toast.addEventListener("hide.bs.toast", () => clearInterval(this.#timer));
 		toast.addEventListener("show.bs.toast", () => this.#timer = window.setInterval(() => this.#updateElapsedTime(), 1_000));
 
 		this.#toast = new BootstrapToast(toast);