32 lines
918 B
JavaScript
32 lines
918 B
JavaScript
/**
|
|
* PosePickerPopover web component
|
|
*
|
|
* Scrolls the selected style into view when the style picker list becomes
|
|
* visible (e.g. tab switch or popover open).
|
|
*/
|
|
class PosePickerPopover extends HTMLElement {
|
|
#styleListObserver;
|
|
|
|
connectedCallback() {
|
|
// 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();
|
|
}
|
|
}
|
|
|
|
customElements.define("pose-picker-popover", PosePickerPopover);
|