32 lines
845 B
JavaScript
32 lines
845 B
JavaScript
|
/**
|
||
|
|
* PosePicker web component
|
||
|
|
*
|
||
|
|
* Progressive enhancement for pose picker forms:
|
||
|
|
* - Auto-submits the form when a pose is selected (if JS is enabled)
|
||
|
|
* - Shows a submit button as fallback (if JS is disabled or slow to load)
|
||
|
|
* - Uses Custom Element internals API to communicate state to CSS
|
||
|
|
*/
|
||
|
|
class PosePicker extends HTMLElement {
|
||
|
|
#internals;
|
||
|
|
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
this.#internals = this.attachInternals();
|
||
|
|
}
|
||
|
|
|
||
|
|
connectedCallback() {
|
||
|
|
// Listen for changes to auto-submit the form, then tell CSS about it!
|
||
|
|
this.addEventListener("change", this.#handleChange);
|
||
|
|
this.#internals.states.add("auto-loading");
|
||
|
|
}
|
||
|
|
|
||
|
|
#handleChange(e) {
|
||
|
|
// Only auto-submit if a radio button was changed
|
||
|
|
if (e.target.type === "radio") {
|
||
|
|
this.querySelector("form").requestSubmit();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
customElements.define("pose-picker", PosePicker);
|