Matchu
0a9193aed7
The UI for it is just basic for my own testing rn: it sets the preview background to gray while loading, then back to white when done! This uses the new CSS `:has()` selector: we have JS manage the loading state on each layer, then the container just restyles itself based on whether any currently-loading layers are present.
32 lines
1.1 KiB
JavaScript
32 lines
1.1 KiB
JavaScript
// When we load in a new preview, set the status on the images. We use this in
|
|
// our CSS to show a loading state when needed.
|
|
function setImageStatuses() {
|
|
for (const layer of document.querySelectorAll(".outfit-layer")) {
|
|
const isLoaded = layer.querySelector("img").complete;
|
|
layer.setAttribute("data-status", isLoaded ? "loaded" : "loading");
|
|
}
|
|
}
|
|
document.addEventListener("turbo:frame-render", () => setImageStatuses());
|
|
document.addEventListener("turbo:load", () => setImageStatuses());
|
|
|
|
// When a preview image loads or fails, update its status. (Note that `load`
|
|
// does not fire for images that were loaded from cache, which is why we need
|
|
// both this and `setImageStatuses` when rendering new images!)
|
|
document.addEventListener(
|
|
"load",
|
|
({ target }) => {
|
|
if (target.matches(".outfit-layer img")) {
|
|
target.closest(".outfit-layer").setAttribute("data-status", "loaded");
|
|
}
|
|
},
|
|
{ capture: true },
|
|
);
|
|
document.addEventListener(
|
|
"error",
|
|
({ target }) => {
|
|
if (target.matches(".outfit-layer img")) {
|
|
target.closest(".outfit-layer").setAttribute("data-status", "error");
|
|
}
|
|
},
|
|
{ capture: true },
|
|
);
|