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

[WV2] Scroll selected alt style into view

Browse source
This commit is contained in:
Emi Matchu 2026-02-05 18:17:34 -08:00
parent b7bbd1ace3
commit fc93239482
1 changed files with 22 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
app/assets/javascripts/pose-picker.js
View file

@ -8,6 +8,7 @@
*/ */
class PosePickerPopover extends HTMLElement { class PosePickerPopover extends HTMLElement {
#internals; #internals;
#styleListObserver;
constructor() { constructor() {
super(); super();
@ -18,6 +19,26 @@ class PosePickerPopover extends HTMLElement {
// Listen for changes to auto-submit the form, then tell CSS about it! // Listen for changes to auto-submit the form, then tell CSS about it!
this.addEventListener("change", this.#handleChange); this.addEventListener("change", this.#handleChange);
this.#internals.states.add("auto-loading"); this.#internals.states.add("auto-loading");
// When the style picker list becomes visible (e.g. tab switch or
// popover open), scroll the selected style into view.
const styleList = this.querySelector(".style-picker-list");
if (styleList) {
this.#styleListObserver = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
const checked = styleList.querySelector("input:checked");
checked
?.closest("label")
?.scrollIntoView({ block: "nearest" });
}
});
this.#styleListObserver.observe(styleList);
}
}
disconnectedCallback() {
this.#styleListObserver?.disconnect();
} }
#handleChange(e) { #handleChange(e) {
@ -26,6 +47,7 @@ class PosePickerPopover extends HTMLElement {
e.target.closest("form").requestSubmit(); e.target.closest("form").requestSubmit();
} }
} }
} }
customElements.define("pose-picker-popover", PosePickerPopover); customElements.define("pose-picker-popover", PosePickerPopover);