forked from OpenNeo/impress
Emi Matchu
3c415e9cd3
Instead of doing all this listening to Turbo events etc to know when outfit layers might have changed, making it a custom element and wiring in the behavior to its actual lifecycle makes it always Just Work!
23 lines
606 B
JavaScript
23 lines
606 B
JavaScript
class OutfitLayer extends HTMLElement {
|
|
connectedCallback() {
|
|
setTimeout(() => this.#initializeImage(), 0);
|
|
}
|
|
|
|
#initializeImage() {
|
|
this.image = this.querySelector("img");
|
|
if (!this.image) {
|
|
throw new Error(`<outfit-layer> must contain an <img> tag`);
|
|
}
|
|
|
|
this.image.addEventListener("load", () => this.#setStatus("loaded"));
|
|
this.image.addEventListener("error", () => this.#setStatus("error"));
|
|
|
|
this.#setStatus(this.image.complete ? "loaded" : "loading");
|
|
}
|
|
|
|
#setStatus(newStatus) {
|
|
this.setAttribute("status", newStatus);
|
|
}
|
|
}
|
|
|
|
customElements.define("outfit-layer", OutfitLayer);
|