@cedx/base 0.1.0 → 0.3.0

package/src/Client/UI/LoadingIndicator.ts

@@ -1,12 +1,9 @@
 import type {ILoadingIndicator} from "#Abstractions/ILoadingIndicator.js";
-import {html, LitElement, type TemplateResult} from "lit";
-import {customElement} from "lit/decorators.js";
 
 /**
  * A component that shows up when an HTTP request starts, and hides when all concurrent HTTP requests are completed.
  */
-@customElement("loading-indicator")
-export class LoadingIndicator extends LitElement implements ILoadingIndicator {
+export class LoadingIndicator extends HTMLElement implements ILoadingIndicator {
 
 	/**
 	 * The number of concurrent HTTP requests.
@@ -14,11 +11,10 @@ export class LoadingIndicator extends LitElement implements ILoadingIndicator {
 	#requestCount = 0;
 
 	/**
-	 * Creates a new loading indicator.
+	 * Registers the component.
 	 */
-	constructor() {
-		super();
-		this.hidden = true;
+	static {
+		customElements.define("loading-indicator", this);
 	}
 
 	/**
@@ -42,14 +38,6 @@ export class LoadingIndicator extends LitElement implements ILoadingIndicator {
 			document.body.classList.remove("loading");
 		}
 	}
-
-	/**
-	 * Renders this component.
-	 * @returns The view template.
-	 */
-	protected override render(): TemplateResult {
-		return html`<slot></slot>`;
-	}
 }
 
 /**

package/src/Client/UI/MenuActivator.ts

@@ -0,0 +1,42 @@
+/**
+ * A component that activates the items of a menu based on the current document URL.
+ */
+export class MenuActivator extends HTMLElement {
+
+	/**
+	 * The root element.
+	 */
+	readonly #root = this.firstElementChild!;
+
+	/**
+	 * Registers the component.
+	 */
+	static {
+		customElements.define("menu-activator", this);
+	}
+
+	/**
+	 * Method invoked when this component is connected.
+	 */
+	connectedCallback(): void {
+		for (const anchor of this.#root.getElementsByTagName("a"))
+			if (anchor.href != location.href) anchor.classList.remove("active");
+			else {
+				anchor.classList.add("active");
+				anchor.closest(".nav-item.dropdown")?.querySelector(".nav-link")?.classList.add("active");
+			}
+	}
+}
+
+/**
+ * Declaration merging.
+ */
+declare global {
+
+	/**
+	 * The map of HTML tag names.
+	 */
+	interface HTMLElementTagNameMap {
+		"menu-activator": MenuActivator;
+	}
+}

package/src/Client/UI/OfflineIndicator.ts

@@ -1,11 +1,7 @@
-import {html, LitElement, type TemplateResult} from "lit";
-import {customElement} from "lit/decorators.js";
-
 /**
  * A component that shows up when the network is unavailable, and hides when connectivity is restored.
  */
-@customElement("offline-indicator")
-export class OfflineIndicator extends LitElement {
+export class OfflineIndicator extends HTMLElement {
 
 	/**
 	 * Creates a new offline indicator.
@@ -15,20 +11,25 @@ export class OfflineIndicator extends LitElement {
 		this.hidden = navigator.onLine;
 	}
 
+	/**
+	 * Registers the component.
+	 */
+	static {
+		customElements.define("offline-indicator", this);
+	}
+
 	/**
 	 * Method invoked when this component is connected.
 	 */
-	override connectedCallback(): void {
-		super.connectedCallback();
+	connectedCallback(): void {
 		for (const event of ["online", "offline"]) addEventListener(event, this);
 	}
 
 	/**
 	 * Method invoked when this component is disconnected.
 	 */
-	override disconnectedCallback(): void {
+	disconnectedCallback(): void {
 		for (const event of ["online", "offline"]) removeEventListener(event, this);
-		super.disconnectedCallback();
 	}
 
 	/**
@@ -37,14 +38,6 @@ export class OfflineIndicator extends LitElement {
 	handleEvent(): void {
 		this.hidden = navigator.onLine;
 	}
-
-	/**
-	 * Renders this component.
-	 * @returns The view template.
-	 */
-	protected override render(): TemplateResult {
-		return html`<slot></slot>`;
-	}
 }
 
 /**

package/src/Client/UI/ThemeDropdown.ts

@@ -1,74 +1,60 @@
-import {AppTheme, themeIcon, themeLabel} from "#Html/AppTheme.js";
-import {MenuAlignment} from "#Html/MenuAlignment.js";
-import {html, LitElement, type TemplateResult} from "lit";
-import {customElement, property, state} from "lit/decorators.js";
-import {classMap} from "lit/directives/class-map.js";
-import {when} from "lit/directives/when.js";
+import {AppTheme, getIcon} from "#Html/AppTheme.js";
 
 /**
- * A dropdown menu for switching the color mode.
+ * A dropdown menu for switching the application theme.
  */
-@customElement("theme-dropdown")
-export class ThemeDropdown extends LitElement {
+export class ThemeDropdown extends HTMLElement {
 
 	/**
-	 * The alignment of the dropdown menu.
+	 * The media query used to check the application theme.
 	 */
-	@property() alignment: MenuAlignment = MenuAlignment.End;
+	readonly #mediaQuery = matchMedia("(prefers-color-scheme: dark)");
 
 	/**
-	 * The label of the dropdown menu.
+	 * The root element.
 	 */
-	@property() label = "";
+	readonly #root = this.firstElementChild!;
 
 	/**
-	 * The key of the storage entry providing the saved theme.
+	 * The key of the storage entry providing the saved theme mode.
 	 */
-	@property() storageKey = "AppTheme";
+	readonly #storageKey = this.getAttribute("storageKey") ?? "AppTheme";
 
 	/**
 	 * The current application theme.
 	 */
-	@state() private appTheme: AppTheme;
-
-	/**
-	 * The media query used to check the system theme.
-	 */
-	readonly #mediaQuery = matchMedia("(prefers-color-scheme: dark)");
+	#theme: AppTheme;
 
 	/**
 	 * Creates a new theme dropdown.
 	 */
 	constructor() {
 		super();
-		const theme = localStorage.getItem(this.storageKey) as AppTheme;
-		this.appTheme = Object.values(AppTheme).includes(theme) ? theme : AppTheme.System;
+		const theme = localStorage.getItem(this.#storageKey) as AppTheme;
+		this.#theme = Object.values(AppTheme).includes(theme) ? theme : AppTheme.System;
+		for (const button of this.#root.querySelectorAll("button")) button.addEventListener("click", this.#setTheme.bind(this));
 	}
 
 	/**
-	 * The current theme mode.
+	 * Registers the component.
 	 */
-	get theme(): AppTheme { return this.appTheme; }
-	set theme(value: AppTheme) {
-		localStorage.setItem(this.storageKey, this.appTheme = value);
-		this.#applyTheme();
+	static {
+		customElements.define("theme-dropdown", this);
 	}
 
 	/**
 	 * Method invoked when this component is connected.
 	 */
-	override connectedCallback(): void {
-		super.connectedCallback();
-		this.#applyTheme();
+	connectedCallback(): void {
 		this.#mediaQuery.addEventListener("change", this);
+		this.#applyTheme();
 	}
 
 	/**
 	 * Method invoked when this component is disconnected.
 	 */
-	override disconnectedCallback(): void {
+	disconnectedCallback(): void {
 		this.#mediaQuery.removeEventListener("change", this);
-		super.disconnectedCallback();
 	}
 
 	/**
@@ -79,44 +65,27 @@ export class ThemeDropdown extends LitElement {
 	}
 
 	/**
-	 * Returns the node into which this component should render.
-	 * @returns The node into which this component should render.
+	 * Applies the theme to the document.
 	 */
-	protected override createRenderRoot(): DocumentFragment|HTMLElement {
-		return this;
-	}
+	#applyTheme(): void {
+		const theme = this.#theme == AppTheme.System ? (this.#mediaQuery.matches ? AppTheme.Dark : AppTheme.Light) : this.#theme;
+		document.documentElement.dataset.bsTheme = theme.toLowerCase();
+		this.#root.querySelector(".dropdown-toggle > .icon")!.textContent = getIcon(this.#theme);
 
-	/**
-	 * Renders this component.
-	 * @returns The view template.
-	 */
-	protected override render(): TemplateResult {
-		return html`
-			<li class="nav-item dropdown">
-				<a class="dropdown-toggle nav-link" data-bs-toggle="dropdown" href="#">
-					<i class="icon icon-fill">${themeIcon(this.appTheme)}</i>
-					${when(this.label, () => html`<span class="ms-1">${this.label}</span>`)}
-				</a>
-				<ul class="dropdown-menu ${classMap({"dropdown-menu-end": this.alignment == MenuAlignment.End})}">
-					${Object.values(AppTheme).map(value => html`
-						<li>
-							<button class="dropdown-item d-flex align-items-center justify-content-between" @click=${() => this.theme = value}>
-								<span><i class="icon icon-fill me-1">${themeIcon(value)}</i> ${themeLabel(value)}</span>
-								${when(value == this.appTheme, () => html`<i class="icon ms-2">check</i>`)}
-							</button>
-						</li>
-					`)}
-				</ul>
-			</li>
-		`;
+		const checkIcon = this.#root.querySelector(".dropdown-item > .icon")!;
+		checkIcon.remove();
+		const activeButton = this.#root.querySelector(`button[data-theme="${this.#theme}"]`)!
+		activeButton.appendChild(checkIcon);
 	}
 
 	/**
-	 * Applies the theme to the document.
+	 * Changes the current theme.
+	 * @param event The dispatched event.
 	 */
-	#applyTheme(): void {
-		const theme = this.appTheme == AppTheme.System ? (this.#mediaQuery.matches ? AppTheme.Dark : AppTheme.Light) : this.appTheme;
-		document.documentElement.dataset.bsTheme = theme.toLowerCase();
+	#setTheme(event: Event): void {
+		const button = (event.target as HTMLElement).closest("button")!;
+		localStorage.setItem(this.#storageKey, this.#theme = button.dataset.theme as AppTheme);
+		this.#applyTheme();
 	}
 }