@cedx/base 0.10.1 → 0.12.0

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

@@ -0,0 +1,252 @@
+import {Duration} from "@cedx/base/Duration.js";
+import {Context, getIcon} from "@cedx/base/UI/Context.js";
+import {Toast as BootstrapToast} from "bootstrap";
+
+/**
+ * Manages the notification messages.
+ */
+export class Toast extends HTMLElement {
+
+	/**
+	 * The list of observed attributes.
+	 */
+	static readonly observedAttributes = ["caption", "context", "culture", "icon"];
+
+	/**
+	 * The time units.
+	 */
+	static readonly #timeUnits: Intl.RelativeTimeFormatUnit[] = ["second", "minute", "hour"];
+
+	/**
+	 * The formatter used to format the relative time.
+	 */
+	#formatter!: Intl.RelativeTimeFormat;
+
+	/**
+	 * The toast header.
+	 */
+	readonly #header = this.querySelector(".toast-header")!;
+
+	/**
+	 * The time at which this component was initially shown.
+	 */
+	#initialTime = Date.now();
+
+	/**
+	 * The timer identifier.
+	 */
+	#timer = 0;
+
+	/**
+	 * The underlying Bootstrap toast.
+	 */
+	#toast!: BootstrapToast;
+
+	/**
+	 * Registers the component.
+	 */
+	static {
+		customElements.define("toaster-item", this);
+	}
+
+	/**
+	 * Value indicating whether to apply a fade transition.
+	 */
+	get animation(): boolean {
+		return this.hasAttribute("animation");
+	}
+	set animation(value: boolean) {
+		if (value) this.setAttribute("animation", "");
+		else this.removeAttribute("animation");
+	}
+
+	/**
+	 * Value indicating whether to automatically hide the notification.
+	 */
+	get autoHide(): boolean {
+		return this.hasAttribute("autohide");
+	}
+	set autoHide(value: boolean) {
+		if (value) this.setAttribute("autohide", "");
+		else this.removeAttribute("autohide");
+	}
+
+	/**
+	 * The title displayed in the header.
+	 */
+	get caption(): string {
+		return (this.getAttribute("caption") ?? "").trim();
+	}
+	set caption(value: string) {
+		this.setAttribute("caption", value);
+	}
+
+	/**
+	 * A contextual modifier.
+	 */
+	get context(): Context {
+		const value = this.getAttribute("context") as Context;
+		return Object.values(Context).includes(value) ? value : Context.Info;
+	}
+	set context(value: Context) {
+		this.setAttribute("context", value);
+	}
+
+	/**
+	 * The culture used to format the relative time.
+	 */
+	get culture(): Intl.Locale {
+		const value = this.getAttribute("culture") ?? "";
+		return new Intl.Locale(value.trim() || navigator.language);
+	}
+	set culture(value: Intl.Locale) {
+		this.setAttribute("culture", value.toString());
+	}
+
+	/**
+	 * The delay, in milliseconds, to hide the notification.
+	 */
+	get delay(): number {
+		const value = Number(this.getAttribute("delay"));
+		return Math.max(1, Number.isNaN(value) ? 5_000 : value);
+	}
+	set delay(value: number) {
+		this.setAttribute("delay", value.toString());
+	}
+
+	/**
+	 * The time elapsed since this component was initially shown, in milliseconds.
+	 */
+	get elapsedTime(): number {
+		return Date.now() - this.#initialTime;
+	}
+
+	/**
+	 * The icon displayed next to the caption.
+	 */
+	get icon(): string {
+		const value = this.getAttribute("icon") ?? "";
+		return value.trim() || getIcon(Context.Info);
+	}
+	set icon(value: string) {
+		this.setAttribute("icon", value);
+	}
+
+	/**
+	 * Method invoked when an attribute has been changed.
+	 * @param attribute The attribute name.
+	 * @param oldValue The previous attribute value.
+	 * @param newValue The new attribute value.
+	 */
+	attributeChangedCallback(attribute: string, oldValue: string|null, newValue: string|null): void {
+		if (newValue != oldValue) switch (attribute) {
+			case "caption":
+				this.#updateCaption(newValue ?? "");
+				break;
+			case "context":
+				this.#updateContext(Object.values(Context).includes(newValue as Context) ? newValue as Context : Context.Info);
+				break;
+			case "culture":
+				this.#formatter = new Intl.RelativeTimeFormat((newValue ?? "").trim() || navigator.language, {style: "long"});
+				break;
+			case "icon":
+				this.#updateIcon(newValue ?? "")
+				break;
+			// No default
+		}
+	}
+
+	/**
+	 * Method invoked when this component is connected.
+	 */
+	connectedCallback(): void {
+		const toast = this.querySelector(".toast")!;
+		toast.addEventListener("hidden.bs.toast", () => clearInterval(this.#timer));
+		toast.addEventListener("show.bs.toast", () => this.#timer = window.setInterval(this.#updateElapsedTime, Duration.Second));
+
+		const {animation, autoHide: autohide, delay} = this;
+		this.#toast = new BootstrapToast(toast, {animation, autohide, delay});
+	}
+
+	/**
+	 * Method invoked when this component is disconnected.
+	 */
+	disconnectedCallback(): void {
+		clearInterval(this.#timer);
+		this.#toast.dispose();
+	}
+
+	/**
+	 * Hides this toast.
+	 */
+	hide(): void {
+		this.#toast.hide();
+	}
+
+	/**
+	 * Shows this toast.
+	 */
+	show(): void {
+		if (!this.#toast.isShown()) {
+			this.#initialTime = Date.now();
+			this.#updateElapsedTime();
+		}
+
+		this.#toast.show();
+	}
+
+	/**
+	 * Formats the specified elapsed time.
+	 * @param elapsed The elapsed time, in seconds.
+	 * @returns The formated time.
+	 */
+	#formatTime(elapsed: number): string {
+		let index = 0;
+		while (elapsed > 60 && index < Toast.#timeUnits.length) {
+			elapsed /= 60;
+			index++;
+		}
+
+		return this.#formatter.format(Math.ceil(-elapsed), Toast.#timeUnits[index]);
+	}
+
+	/**
+	 * Updates the title displayed in the header.
+	 * @param value The new value.
+	 */
+	#updateCaption(value: string): void {
+		this.#header.querySelector("b")!.textContent = value.trim();
+	}
+
+	/**
+	 * Updates the title displayed in the header.
+	 * @param value The new value.
+	 */
+	#updateContext(value: Context): void {
+		const contexts = Object.values(Context);
+
+		let {classList} = this.#header;
+		classList.remove(...contexts.map(context => `toast-header-${context}`));
+		classList.add(`toast-header-${value}`);
+
+		({classList} = this.#header.querySelector(".icon")!);
+		classList.remove(...contexts.map(context => `text-${context}`));
+		classList.add(`text-${value}`);
+	}
+
+	/**
+	 * Updates the label corresponding to the elapsed time.
+	 */
+	readonly #updateElapsedTime: () => void = () => {
+		const {elapsedTime} = this;
+		this.#header.querySelector("small")!.textContent = elapsedTime > 0 ? this.#formatTime(elapsedTime / Duration.Second) : "";
+	};
+
+	/**
+	 * Updates the icon displayed next to the caption.
+	 * @param value The new value.
+	 */
+	#updateIcon(value: string): void {
+		this.#header.querySelector(".icon")!.textContent = value.trim() || getIcon(Context.Info);
+	}
+}

package/src/Client/UI/ElementExtensions.ts

@@ -0,0 +1,19 @@
+/**
+ * Creates a document fragment from the specified HTML string.
+ * @param childContent The HTML string providing the child content.
+ * @returns The document fragment corresponding to the specified HTML string.
+ */
+export function createDocumentFragment(childContent: string): DocumentFragment {
+	const template = document.createElement("template");
+	template.innerHTML = childContent;
+	return template.content;
+}
+
+/**
+ * Returns a promise that resolves when the specified element has finished all its animations.
+ * @param element The target element.
+ * @returns The element animations.
+ */
+export function waitForAnimations(element: Element): Promise<Array<PromiseSettledResult<Animation>>> {
+	return Promise.allSettled(element.getAnimations().map(animation => animation.finished));
+}

package/src/Client/UI/Position.ts

@@ -0,0 +1,55 @@
+/**
+ * Defines the placement of an element.
+ */
+export const Position = Object.freeze({
+
+	/**
+	 * Top left.
+	 */
+	TopLeft: "TopLeft",
+
+	/**
+	 * Top center.
+	 */
+	TopCenter: "TopCenter",
+
+	/**
+	 * Top right.
+	 */
+	TopRight: "TopRight",
+
+	/**
+	 * Middle left.
+	 */
+	MiddleLeft: "MiddleLeft",
+
+	/**
+	 * Middle center.
+	 */
+	MiddleCenter: "MiddleCenter",
+
+	/**
+	 * Middle right.
+	 */
+	MiddleRight: "MiddleRight",
+
+	/**
+	 * Bottom left.
+	 */
+	BottomLeft: "BottomLeft",
+
+	/**
+	 * Bottom center.
+	 */
+	BottomCenter: "BottomCenter",
+
+	/**
+	 * Bottom right.
+	 */
+	BottomRight: "BottomRight"
+});
+
+/**
+ * Defines the placement of an element.
+ */
+export type Position = typeof Position[keyof typeof Position];

package/src/Client/UI/Size.ts

@@ -0,0 +1,40 @@
+/**
+ * Defines the size of a component.
+ */
+export const Size = Object.freeze({
+
+	/**
+	 * An extra small size.
+	 */
+	ExtraSmall: "xs",
+
+	/**
+	 * A small size.
+	 */
+	Small: "sm",
+
+	/**
+	 * A medium size.
+	 */
+	Medium: "md",
+
+	/**
+	 * A large size.
+	 */
+	Large: "lg",
+
+	/**
+	 * An extra large size.
+	 */
+	ExtraLarge: "xl",
+
+	/**
+	 * An extra extra large size.
+	 */
+	ExtraExtraLarge: "xxl"
+});
+
+/**
+ * Defines the size of a component.
+ */
+export type Size = typeof Size[keyof typeof Size];

package/src/Client/UI/Variant.ts

@@ -0,0 +1,30 @@
+/**
+ * Defines tone variants.
+ */
+export const Variant = Object.freeze({
+
+	/**
+	 * A dark variant.
+	 */
+	Dark: "dark",
+
+	/**
+	 * A light variant.
+	 */
+	Light: "light",
+
+	/**
+	 * A primary variant.
+	 */
+	Primary: "primary",
+
+	/**
+	 * A secondary variant.
+	 */
+	Secondary: "secondary"
+});
+
+/**
+ * Defines tone variants.
+ */
+export type Variant = typeof Variant[keyof typeof Variant];

package/src/Client/UI/ViewportScroller.ts

@@ -44,7 +44,7 @@ export class ViewportScroller {
 			this.#scrollOffset += (navbar?.offsetHeight ?? 0);
 		}
 
-		const actionBar = document.body.querySelector<HTMLElement>("action-bar, .action-bar");
+		const actionBar = document.body.querySelector<HTMLElement>("action-bar");
 		return this.#scrollOffset + (actionBar?.offsetHeight ?? 0);
 	}