@cedx/base 0.23.0 → 0.25.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.23.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.25.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

@@ -2,7 +2,6 @@
  * A component that moves back in the session history when clicked.
  */
 export declare class BackButton extends HTMLElement {
-    #private;
     /**
      * Creates a new back button.
      */
@@ -12,6 +11,11 @@ export declare class BackButton extends HTMLElement {
      */
     get steps(): number;
     set steps(value: number);
+    /**
+     * Moves back in the session history.
+     * @param event The dispatched event.
+     */
+    goBack(event?: Event): void;
 }
 /**
  * Declaration merging.

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;CAUD;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;IAED;;;OAGG;IACH,MAAM,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI;CAI3B;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

@@ -7,7 +7,7 @@ export class BackButton extends HTMLElement {
      */
     constructor() {
         super();
-        this.addEventListener("click", this.#goBack.bind(this));
+        this.addEventListener("click", this.goBack.bind(this), { capture: true });
     }
     /**
      * Registers the component.
@@ -29,8 +29,8 @@ export class BackButton extends HTMLElement {
      * Moves back in the session history.
      * @param event The dispatched event.
      */
-    #goBack(event) {
-        event.preventDefault();
+    goBack(event) {
+        event?.stopPropagation();
         history.go(-this.steps);
     }
 }

package/lib/UI/Components/DialogBox.js

@@ -228,7 +228,7 @@ export class DialogBox extends HTMLElement {
      */
     #close(event) {
         event.preventDefault();
-        this.close(event.target.closest("button").value);
+        this.close(event.currentTarget.value);
     }
     /**
      * Updates the title displayed in the header.

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

@@ -8,7 +8,7 @@ export declare class FullScreenToggler extends HTMLElement {
      */
     constructor();
     /**
-     * The CSS selector used to target the element.
+     * The CSS selector specifying the target element.
      */
     get target(): string;
     set target(value: string);

package/lib/UI/Components/FullScreenToggler.js

@@ -3,7 +3,7 @@
  */
 export class FullScreenToggler extends HTMLElement {
     /**
-     * The associated element.
+     * The target element.
      */
     #element = document.body;
     /**
@@ -15,7 +15,7 @@ export class FullScreenToggler extends HTMLElement {
      */
     constructor() {
         super();
-        this.addEventListener("click", this.toggleFullScreen.bind(this)); // eslint-disable-line @typescript-eslint/no-misused-promises
+        this.addEventListener("click", this.toggleFullScreen.bind(this), { capture: true }); // eslint-disable-line @typescript-eslint/no-misused-promises
     }
     /**
      * Registers the component.
@@ -24,7 +24,7 @@ export class FullScreenToggler extends HTMLElement {
         customElements.define("fullscreen-toggler", this);
     }
     /**
-     * The CSS selector used to target the element.
+     * The CSS selector specifying the target element.
      */
     get target() {
         const value = this.getAttribute("target") ?? "";
@@ -63,7 +63,7 @@ export class FullScreenToggler extends HTMLElement {
      * @returns Resolves when the full-screen mode has been toggled.
      */
     async toggleFullScreen(event) {
-        event?.preventDefault();
+        event?.stopPropagation();
         if (document.fullscreenElement)
             await document.exitFullscreen();
         else

package/lib/UI/Components/KeyboardAccelerator.js

@@ -67,7 +67,7 @@ export class KeyboardAccelerator extends HTMLElement {
             return;
         if (!(modifiers & KeyboardModifiers.Meta) && event.metaKey)
             return;
-        event.preventDefault();
+        event.stopPropagation();
         this.firstElementChild?.click();
     };
 }

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

@@ -2,10 +2,15 @@
  * A component that activates the items of a menu, based on the current document URL.
  */
 export declare class MenuActivator extends HTMLElement {
+    #private;
     /**
      * Method invoked when this component is connected.
      */
     connectedCallback(): void;
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback(): void;
 }
 /**
  * Declaration merging.

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

@@ -1 +1 @@
-{"version":3,"file":"MenuActivator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/MenuActivator.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,aAAc,SAAQ,WAAW;IAS7C;;OAEG;IACH,iBAAiB,IAAI,IAAI;CAQzB;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD"}
+{"version":3,"file":"MenuActivator.d.ts","sourceRoot":"","sources":["../../../src/Client/UI/Components/MenuActivator.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,aAAc,SAAQ,WAAW;;IAS7C;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAMzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;CAgB5B;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEd;;OAEG;IACH,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD"}

package/lib/UI/Components/MenuActivator.js

@@ -12,12 +12,28 @@ export class MenuActivator extends HTMLElement {
      * Method invoked when this component is connected.
      */
     connectedCallback() {
-        for (const anchor of this.querySelectorAll("a"))
-            if (anchor.href != location.href)
-                anchor.classList.remove("active");
-            else {
-                anchor.classList.add("active");
-                anchor.closest(".dropdown")?.querySelector('[data-bs-toggle="dropdown"]')?.classList.add("active");
-            }
+        this.#update();
+        addEventListener("popstate", this.#update);
+        document.body.addEventListener("htmx:afterRequest", this.#update);
+    }
+    /**
+     * Method invoked when this component is disconnected.
+     */
+    disconnectedCallback() {
+        removeEventListener("popstate", this.#update);
+        document.body.removeEventListener("htmx:afterRequest", this.#update);
     }
+    /**
+     * Updates this component.
+     * @param event The dispatched event.
+     */
+    #update = () => {
+        for (const element of this.querySelectorAll(".active"))
+            element.classList.remove("active");
+        for (const element of this.querySelectorAll("a"))
+            if (element.href == location.href) {
+                element.classList.add("active");
+                element.closest(".dropdown")?.querySelector(".dropdown-toggle")?.classList.add("active");
+            }
+    };
 }

package/lib/UI/Components/ThemeDropdown.js

@@ -141,7 +141,7 @@ export class ThemeDropdown extends HTMLElement {
      */
     #setAppTheme(event) {
         event.preventDefault();
-        this.appTheme = event.target.closest("button").dataset.theme;
+        this.appTheme = event.currentTarget.dataset.theme;
         this.save();
     }
     /**

package/package.json

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

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

@@ -8,7 +8,7 @@ export class BackButton extends HTMLElement {
 	 */
 	constructor() {
 		super();
-		this.addEventListener("click", this.#goBack.bind(this));
+		this.addEventListener("click", this.goBack.bind(this), {capture: true});
 	}
 
 	/**
@@ -33,8 +33,8 @@ export class BackButton extends HTMLElement {
 	 * Moves back in the session history.
 	 * @param event The dispatched event.
 	 */
-	#goBack(event: Event): void {
-		event.preventDefault();
+	goBack(event?: Event): void {
+		event?.stopPropagation();
 		history.go(-this.steps);
 	}
 }

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

@@ -286,7 +286,7 @@ export class DialogBox extends HTMLElement {
 	 */
 	#close(event: Event): void {
 		event.preventDefault();
-		this.close((event.target as Element).closest("button")!.value);
+		this.close((event.currentTarget as HTMLButtonElement).value);
 	}
 
 	/**

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

@@ -4,7 +4,7 @@
 export class FullScreenToggler extends HTMLElement {
 
 	/**
-	 * The associated element.
+	 * The target element.
 	 */
 	#element: Element = document.body;
 
@@ -18,7 +18,7 @@ export class FullScreenToggler extends HTMLElement {
 	 */
 	constructor() {
 		super();
-		this.addEventListener("click", this.toggleFullScreen.bind(this)); // eslint-disable-line @typescript-eslint/no-misused-promises
+		this.addEventListener("click", this.toggleFullScreen.bind(this), {capture: true}); // eslint-disable-line @typescript-eslint/no-misused-promises
 	}
 
 	/**
@@ -29,7 +29,7 @@ export class FullScreenToggler extends HTMLElement {
 	}
 
 	/**
-	 * The CSS selector used to target the element.
+	 * The CSS selector specifying the target element.
 	 */
 	get target(): string {
 		const value = this.getAttribute("target") ?? "";
@@ -72,7 +72,7 @@ export class FullScreenToggler extends HTMLElement {
 	 * @returns Resolves when the full-screen mode has been toggled.
 	 */
 	async toggleFullScreen(event?: Event): Promise<void> {
-		event?.preventDefault();
+		event?.stopPropagation();
 		if (document.fullscreenElement) await document.exitFullscreen();
 		else await this.#element.requestFullscreen();
 	}

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

@@ -72,7 +72,7 @@ export class KeyboardAccelerator extends HTMLElement {
 		if (!(modifiers & KeyboardModifiers.Alt) && event.altKey) return;
 		if (!(modifiers & KeyboardModifiers.Meta) && event.metaKey) return;
 
-		event.preventDefault();
+		event.stopPropagation();
 		(this.firstElementChild as HTMLElement|null)?.click();
 	}
 }

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

@@ -14,13 +14,30 @@ export class MenuActivator extends HTMLElement {
 	 * Method invoked when this component is connected.
 	 */
 	connectedCallback(): void {
-		for (const anchor of this.querySelectorAll("a"))
-			if (anchor.href != location.href) anchor.classList.remove("active");
-			else {
-				anchor.classList.add("active");
-				anchor.closest(".dropdown")?.querySelector('[data-bs-toggle="dropdown"]')?.classList.add("active");
-			}
+		this.#update();
+		addEventListener("popstate", this.#update);
+		document.body.addEventListener("htmx:afterRequest", this.#update);
 	}
+
+	/**
+	 * Method invoked when this component is disconnected.
+	 */
+	disconnectedCallback(): void {
+		removeEventListener("popstate", this.#update);
+		document.body.removeEventListener("htmx:afterRequest", this.#update);
+	}
+
+	/**
+	 * Updates this component.
+	 * @param event The dispatched event.
+	 */
+	readonly #update: (event?: Event) => void = () => {
+		for (const element of this.querySelectorAll(".active")) element.classList.remove("active");
+		for (const element of this.querySelectorAll("a")) if (element.href == location.href) {
+			element.classList.add("active");
+			element.closest(".dropdown")?.querySelector(".dropdown-toggle")?.classList.add("active");
+		}
+	};
 }
 
 /**

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

@@ -151,7 +151,7 @@ export class ThemeDropdown extends HTMLElement {
 	 */
 	#setAppTheme(event: Event): void {
 		event.preventDefault();
-		this.appTheme = (event.target as Element).closest("button")!.dataset.theme! as AppTheme;
+		this.appTheme = (event.currentTarget as HTMLElement).dataset.theme! as AppTheme;
 		this.save();
 	}