41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import { listen } from "../../shared/helpers";
|
|
|
|
/** PettyImage — image element with fallback display on load failure. */
|
|
export class PettyImage extends HTMLElement {
|
|
connectedCallback(): void {
|
|
this.dataset.state = "loading";
|
|
const img = this.querySelector("img");
|
|
if (!img) { this.#showFallback(); return; }
|
|
img.addEventListener("load", this.#onLoad);
|
|
img.addEventListener("error", this.#onError);
|
|
if (img.complete && img.naturalWidth > 0) this.#onLoad();
|
|
else if (img.complete) this.#onError();
|
|
}
|
|
|
|
disconnectedCallback(): void {
|
|
const img = this.querySelector("img");
|
|
img?.removeEventListener("load", this.#onLoad);
|
|
img?.removeEventListener("error", this.#onError);
|
|
}
|
|
|
|
#onLoad = (): void => {
|
|
this.dataset.state = "loaded";
|
|
const img = this.querySelector("img");
|
|
const fallback = this.querySelector("[data-part=fallback]") as HTMLElement | null;
|
|
if (img) img.style.display = "";
|
|
if (fallback) fallback.style.display = "none";
|
|
};
|
|
|
|
#onError = (): void => {
|
|
this.dataset.state = "error";
|
|
this.#showFallback();
|
|
};
|
|
|
|
#showFallback(): void {
|
|
const img = this.querySelector("img");
|
|
const fallback = this.querySelector("[data-part=fallback]") as HTMLElement | null;
|
|
if (img) img.style.display = "none";
|
|
if (fallback) fallback.style.display = "";
|
|
}
|
|
}
|