dice/impress
1
0
Fork 0
forked from OpenNeo/impress
Code Pull requests Activity

Refactor outfit-layer component to use internal state API, not attrs

Browse source 
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.
This commit is contained in:
Emi Matchu 2024-07-02 22:34:51 -07:00
parent 3c415e9cd3
commit e9145251a9
2 changed files with 10 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
app/assets/javascripts/outfit-viewer.js
View file

@ -1,4 +1,11 @@
class OutfitLayer extends HTMLElement { class OutfitLayer extends HTMLElement {
#internals;
constructor() {
super();
this.#internals = this.attachInternals();
}
connectedCallback() { connectedCallback() {
setTimeout(() => this.#initializeImage(), 0); setTimeout(() => this.#initializeImage(), 0);
} }
@ -16,7 +23,8 @@ class OutfitLayer extends HTMLElement {
} }
#setStatus(newStatus) { #setStatus(newStatus) {
this.setAttribute("status", newStatus); this.#internals.states.clear();
this.#internals.states.add(newStatus);
} }
} }

2
app/assets/stylesheets/items/_show.sass
View file

@ -58,7 +58,7 @@ body.items-show
width: 100% width: 100%
height: 100% height: 100%
&:has(outfit-layer[status="loading"]) &:has(outfit-layer:state(loading))
background: gray background: gray
.species-color-picker .species-color-picker