From e9145251a9b739f909a695c0ce6dfdf7722376df Mon Sep 17 00:00:00 2001 From: Emi Matchu Date: Tue, 2 Jul 2024 22:34:51 -0700 Subject: [PATCH] Refactor outfit-layer component to use internal state API, not attrs Oh right okay, attributes like `status="loading"` are more of an API for the caller, whereas the internal state API is where you wanna put things that are meant to be used in CSS selectors and stuff. --- app/assets/javascripts/outfit-viewer.js | 10 +++++++++- app/assets/stylesheets/items/_show.sass | 2 +- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/outfit-viewer.js b/app/assets/javascripts/outfit-viewer.js index cd298ed6..3a7ba6de 100644 --- a/app/assets/javascripts/outfit-viewer.js +++ b/app/assets/javascripts/outfit-viewer.js @@ -1,4 +1,11 @@ class OutfitLayer extends HTMLElement { + #internals; + + constructor() { + super(); + this.#internals = this.attachInternals(); + } + connectedCallback() { setTimeout(() => this.#initializeImage(), 0); } @@ -16,7 +23,8 @@ class OutfitLayer extends HTMLElement { } #setStatus(newStatus) { - this.setAttribute("status", newStatus); + this.#internals.states.clear(); + this.#internals.states.add(newStatus); } } diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass index dbfcbf78..bfb71d4b 100644 --- a/app/assets/stylesheets/items/_show.sass +++ b/app/assets/stylesheets/items/_show.sass @@ -58,7 +58,7 @@ body.items-show width: 100% height: 100% - &:has(outfit-layer[status="loading"]) + &:has(outfit-layer:state(loading)) background: gray .species-color-picker