@cedx/ui 0.1.0

package/src/Client/Components/MenuActivator.ts

@@ -0,0 +1,58 @@
+/**
+ * A component that activates the items of a menu, based on the current document URL.
+ */
+export class MenuActivator extends HTMLElement {
+
+	/**
+	 * The abort controller used to remove the event listeners.
+	 */
+	#abortController: AbortController|null = null;
+
+	/**
+	 * Registers the component.
+	 */
+	static {
+		customElements.define("menu-activator", this);
+	}
+
+	/**
+	 * Method invoked when this component is connected.
+	 */
+	connectedCallback(): void {
+		this.#abortController = new AbortController;
+		this.#update();
+		addEventListener("popstate", () => this.#update(), {signal: this.#abortController.signal});
+		document.body.addEventListener("htmx:pushedIntoHistory", () => this.#update(), {signal: this.#abortController.signal});
+	}
+
+	/**
+	 * Method invoked when this component is disconnected.
+	 */
+	disconnectedCallback(): void {
+		this.#abortController?.abort();
+	}
+
+	/**
+	 * Updates this component.
+	 */
+	#update(): 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");
+		}
+	}
+}
+
+/**
+ * Declaration merging.
+ */
+declare global {
+
+	/**
+	 * The map of HTML tag names.
+	 */
+	interface HTMLElementTagNameMap {
+		"menu-activator": MenuActivator;
+	}
+}

package/src/Client/Components/OfflineIndicator.ts

@@ -0,0 +1,125 @@
+/**
+ * A component that shows up when the network is unavailable, and hides when connectivity is restored.
+ */
+export class OfflineIndicator extends HTMLElement {
+
+	/**
+	 * The list of observed attributes.
+	 */
+	static readonly observedAttributes = ["fade"];
+
+	/**
+	 * The abort controller used to remove the event listeners.
+	 */
+	#abortController: AbortController|null = null;
+
+	/**
+	 * Registers the component.
+	 */
+	static {
+		customElements.define("offline-indicator", this);
+	}
+
+	/**
+	 * Value indicating whether to apply a transition.
+	 */
+	get fade(): boolean {
+		return this.hasAttribute("fade");
+	}
+	set fade(value: boolean) {
+		this.toggleAttribute("fade", value);
+	}
+
+	/**
+	 * Value indicating whether this component is shown.
+	 */
+	get isShown(): boolean {
+		return this.classList.contains("show");
+	}
+
+	/**
+	 * Value indicating whether to initially show this component.
+	 */
+	get open(): boolean {
+		return this.hasAttribute("open");
+	}
+	set open(value: boolean) {
+		this.toggleAttribute("open", 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 "fade": this.#updateFade(newValue != null); break;
+			// No default
+		}
+	}
+
+	/**
+	 * Method invoked when this component is connected.
+	 */
+	connectedCallback(): void {
+		this.#abortController = new AbortController;
+		for (const event of ["online", "offline"]) addEventListener(event, () => this.#updateVisibility(), {signal: this.#abortController.signal});
+
+		if (this.open) this.show();
+		else this.#updateVisibility();
+	}
+
+	/**
+	 * Method invoked when this component is disconnected.
+	 */
+	disconnectedCallback(): void {
+		this.#abortController?.abort();
+	}
+
+	/**
+	 * Hides this offline indicator.
+	 */
+	hide(): void {
+		this.classList.remove("show");
+		this.classList.add("hide");
+	}
+
+	/**
+	 * Shows this offline indicator.
+	 */
+	show(): void {
+		this.classList.remove("hide");
+		this.classList.add("show");
+	}
+
+	/**
+	 * Updates the value indicating whether to apply a transition.
+	 * @param value The new value.
+	 */
+	#updateFade(value: boolean): void {
+		this.classList.toggle("fade", value);
+	}
+
+	/**
+	 * Updates the visibility of this component.
+	 */
+	#updateVisibility(): void {
+		if (navigator.onLine) this.hide();
+		else this.show();
+	}
+}
+
+/**
+ * Declaration merging.
+ */
+declare global {
+
+	/**
+	 * The map of HTML tag names.
+	 */
+	interface HTMLElementTagNameMap {
+		"offline-indicator": OfflineIndicator;
+	}
+}

package/src/Client/Components/TabActivator.ts

@@ -0,0 +1,93 @@
+import {Tab} from "bootstrap";
+import {StorageArea} from "../StorageArea.js";
+
+/**
+ * A component that activates a tab, based on its index saved in the web storage.
+ */
+export class TabActivator extends HTMLElement {
+
+	/**
+	 * Creates a new tab activator.
+	 */
+	constructor() {
+		super();
+
+		const {tabs} = this;
+		for (let index = 0; index < tabs.length; index++)
+			tabs.item(index).addEventListener("show.bs.tab", () => this.activeTabIndex = index);
+	}
+
+	/**
+	 * Registers the component.
+	 */
+	static {
+		customElements.define("tab-activator", this);
+	}
+
+	/**
+	 * The index of the active tab.
+	 */
+	get activeTabIndex(): number {
+		const index = Number(this.storage.getItem(this.storageKey) ?? "0");
+		return Math.max(0, Math.min(this.tabs.length - 1, Number.isNaN(index) ? 0 : index));
+	}
+	set activeTabIndex(value: number) {
+		this.storage.setItem(this.storageKey, value.toString());
+	}
+
+	/**
+	 * The storage object corresponding to the current {@link storageArea}.
+	 */
+	get storage(): globalThis.Storage {
+		return this.storageArea == StorageArea.Local ? localStorage : sessionStorage;
+	}
+
+	/**
+	 * The storage area to use.
+	 */
+	get storageArea(): StorageArea {
+		const value = this.getAttribute("storagearea") as StorageArea;
+		return Object.values(StorageArea).includes(value) ? value : StorageArea.Session;
+	}
+	set storageArea(value: StorageArea) {
+		this.setAttribute("storagearea", value);
+	}
+
+	/**
+	 * The key of the storage entry providing the active tab index.
+	 */
+	get storageKey(): string {
+		const value = this.getAttribute("storagekey") ?? "";
+		return value.trim() || "ActiveTabIndex";
+	}
+	set storageKey(value: string) {
+		this.setAttribute("storagekey", value);
+	}
+
+	/**
+	 * The tab list.
+	 */
+	get tabs(): NodeListOf<HTMLElement> {
+		return this.querySelectorAll('[data-bs-toggle="tab"]');
+	}
+
+	/**
+	 * Method invoked when this component is connected.
+	 */
+	connectedCallback(): void {
+		Tab.getOrCreateInstance(this.tabs.item(this.activeTabIndex)).show();
+	}
+}
+
+/**
+ * Declaration merging.
+ */
+declare global {
+
+	/**
+	 * The map of HTML tag names.
+	 */
+	interface HTMLElementTagNameMap {
+		"tab-activator": TabActivator;
+	}
+}

package/src/Client/Components/ThemeDropdown.ts

@@ -0,0 +1,235 @@
+import {Dropdown} from "bootstrap";
+import {Alignment} from "../Alignment.js";
+import {AppTheme, icon} from "../AppTheme.js";
+
+/**
+ * A dropdown menu for switching the application theme.
+ */
+export class ThemeDropdown extends HTMLElement {
+
+	/**
+	 * The list of observed attributes.
+	 */
+	static readonly observedAttributes = ["alignment", "apptheme", "label"];
+
+	/**
+	 * The abort controller used to remove the event listeners.
+	 */
+	#abortController: AbortController|null = null;
+
+	/**
+	 * The dropdown menu.
+	 */
+	#dropdown!: Dropdown;
+
+	/**
+	 * The media query used to check the application theme.
+	 */
+	readonly #mediaQuery = matchMedia("(prefers-color-scheme: dark)");
+
+	/**
+	 * Creates a new theme dropdown.
+	 */
+	constructor() {
+		super();
+		for (const button of this.querySelectorAll(".dropdown-menu button")) button.addEventListener("click", this.#setAppTheme);
+	}
+
+	/**
+	 * Registers the component.
+	 */
+	static {
+		customElements.define("theme-dropdown", this);
+	}
+
+	/**
+	 * The alignment of the dropdown menu.
+	 */
+	get alignment(): Alignment {
+		const value = this.getAttribute("alignment") as Alignment;
+		return Object.values(Alignment).includes(value) ? value : Alignment.End;
+	}
+	set alignment(value: Alignment) {
+		this.setAttribute("alignment", value);
+	}
+
+	/**
+	 * The current application theme.
+	 */
+	get appTheme(): AppTheme {
+		const value = this.getAttribute("apptheme") as AppTheme;
+		return Object.values(AppTheme).includes(value) ? value : AppTheme.System;
+	}
+	set appTheme(value: AppTheme) {
+		this.setAttribute("apptheme", value);
+	}
+
+	/**
+	 * Value indicating whether to store the application theme in a cookie.
+	 */
+	get cookie(): boolean {
+		return this.hasAttribute("cookie");
+	}
+	set cookie(value: boolean) {
+		this.toggleAttribute("cookie", value);
+	}
+
+	/**
+	 * The URI for which the associated cookie is valid.
+	 */
+	get cookieDomain(): string {
+		return (this.getAttribute("cookiedomain") ?? "").trim();
+	}
+	set cookieDomain(value: string) {
+		this.setAttribute("cookiedomain", value);
+	}
+
+	/**
+	 * The label of the dropdown menu.
+	 */
+	get label(): string {
+		const value = this.getAttribute("label") ?? "";
+		return value.trim() || "Thème";
+	}
+	set label(value: string) {
+		this.setAttribute("label", value);
+	}
+
+	/**
+	 * The key of the storage entry providing the saved application theme.
+	 */
+	get storageKey(): string {
+		const value = this.getAttribute("storagekey") ?? "";
+		return value.trim() || "AppTheme";
+	}
+	set storageKey(value: string) {
+		this.setAttribute("storagekey", 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 "alignment": this.#updateAlignment(Object.values(Alignment).includes(newValue as Alignment) ? newValue as Alignment : Alignment.End); break;
+			case "apptheme": this.#updateAppTheme(Object.values(AppTheme).includes(newValue as AppTheme) ? newValue as AppTheme : AppTheme.System); break;
+			case "label": this.#updateLabel(newValue ?? ""); break;
+			// No default
+		}
+	}
+
+	/**
+	 * Closes the dropdown menu.
+	 */
+	close(): void {
+		this.#dropdown.hide();
+	}
+
+	/**
+	 * Method invoked when this component is connected.
+	 * @returns Completes when this component has been connected.
+	 */
+	async connectedCallback(): Promise<void> {
+		this.#abortController = new AbortController;
+		this.#dropdown = new Dropdown(this.querySelector(".dropdown-toggle")!);
+		this.#mediaQuery.addEventListener("change", () => this.#applyToDocument(), {signal: this.#abortController.signal});
+
+		const cookie = this.cookie ? await cookieStore.get(this.storageKey) : null;
+		if (cookie) this.appTheme = cookie.value as AppTheme;
+		else {
+			const storage = localStorage.getItem(this.storageKey);
+			if (storage) this.appTheme = storage as AppTheme;
+		}
+	}
+
+	/**
+	 * Method invoked when this component is disconnected.
+	 */
+	disconnectedCallback(): void {
+		this.#abortController?.abort();
+		this.#dropdown.dispose();
+	}
+
+	/**
+	 * Opens the dropdown menu.
+	 */
+	open(): void {
+		this.#dropdown.show();
+	}
+
+	/**
+	 * Saves the current application theme into the local storage.
+	 */
+	save(): void {
+		const {appTheme, cookieDomain} = this;
+		localStorage.setItem(this.storageKey, appTheme);
+
+		if (this.cookie) void cookieStore.set({
+			domain: cookieDomain ? cookieDomain : null,
+			expires: Date.now() + (365 * 24 * 60 * 60 * 1_000),
+			name: this.storageKey,
+			value: appTheme
+		});
+	}
+
+	/**
+	 * Applies the application theme to the document.
+	 */
+ 	#applyToDocument(): void {
+		const {appTheme} = this;
+		const bsTheme = appTheme == AppTheme.System ? (this.#mediaQuery.matches ? AppTheme.Dark : AppTheme.Light) : appTheme;
+		document.documentElement.dataset.bsTheme = bsTheme.toLowerCase();
+	}
+
+	/**
+	 * Changes the current application theme.
+	 * @param event The dispatched event.
+	 */
+	readonly #setAppTheme: (event: Event) => void = event => {
+		event.preventDefault();
+		this.appTheme = (event.currentTarget as HTMLButtonElement).value as AppTheme;
+		this.save();
+	};
+
+	/**
+	 * Updates the alignment of the dropdown menu.
+	 * @param value The new value.
+	 */
+	#updateAlignment(value: Alignment): void {
+		this.querySelector(".dropdown-menu")!.classList.toggle("dropdown-menu-end", value == Alignment.End);
+	}
+
+	/**
+	 * Updates the application theme.
+	 * @param value The new value.
+	 */
+	#updateAppTheme(value: AppTheme): void {
+		this.querySelector(".dropdown-toggle > .icon")!.textContent = icon(value);
+		this.querySelector(`.dropdown-menu button[value="${value}"]`)!.appendChild(this.querySelector(".dropdown-item > .icon")!);
+		this.#applyToDocument();
+	}
+
+	/**
+	 * Updates the label of the dropdown menu.
+	 * @param value The new value.
+	 */
+	#updateLabel(value: string): void {
+		this.querySelector(".dropdown-toggle > span")!.textContent = value.trim() || "Thème";
+	}
+}
+
+/**
+ * Declaration merging.
+ */
+declare global {
+
+	/**
+	 * The map of HTML tag names.
+	 */
+	interface HTMLElementTagNameMap {
+		"theme-dropdown": ThemeDropdown;
+	}
+}