OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

Oops, fix item page's "Customize More" not animating after color change

Browse source 
Ah whoops, I didn't notice that, when Turbo morphs the
`<measured-container>` into what the server HTML returns, it deletes
the `style` attribute we were using.

In this change, I refactor for `MeasuredContainer` to be the component
rather than `MeasuredContent`, so that it can also be responsible for
listening for changes to its own `style` prop, and remeasuring when
they happen.

We're also careful to avoid infinite loops, by only doing this when the
property is missing! (Otherwise, setting `--natural-width` triggers the
callback again, oops!)
This commit is contained in:
Emi Matchu 2024-09-29 14:55:30 -07:00
parent e4a640ccee
commit 1f1c6d92b1
1 changed files with 21 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
app/assets/javascripts/items/show.js
View file

@ -81,23 +81,35 @@ class SpeciesFacePickerOptions extends HTMLElement {
}
}
class MeasuredContent extends HTMLElement {
// TODO: If it ever gets wide support, remove this in favor of the CSS rule
// `interpolate-size: allow-keywords`, to animate directly from `auto`.
// https://drafts.csswg.org/css-values-5/#valdef-interpolate-size-allow-keywords
class MeasuredContainer extends HTMLElement {
static observedAttributes = ["style"];
connectedCallback() {
setTimeout(() => this.#measure(), 0);
}
#measure() {
// Find our `<measured-container>` parent, and set our natural width
// as `var(--natural-width)` in the context of its CSS styles.
const container = this.closest("measured-container");
if (container == null) {
throw new Error(`<measured-content> must be in a <measured-container>`);
attributeChangedCallback() {
// When `--natural-width` gets morphed away by Turbo, measure it again!
if (this.style.getPropertyValue("--natural-width") === "") {
this.#measure();
}
container.style.setProperty("--natural-width", this.offsetWidth + "px");
}
#measure() {
// Find our `<measured-content>` child, and set our natural width as
// `var(--natural-width)` in the context of our CSS styles.
const content = this.querySelector("measured-content");
if (content == null) {
throw new Error(`<measured-container> must contain a <measured-content>`);
}
this.style.setProperty("--natural-width", content.offsetWidth + "px");
}
}
customElements.define("species-color-picker", SpeciesColorPicker);
customElements.define("species-face-picker", SpeciesFacePicker);
customElements.define("species-face-picker-options", SpeciesFacePickerOptions);
customElements.define("measured-content", MeasuredContent);
customElements.define("measured-container", MeasuredContainer);