28 lines
801 B
JavaScript
28 lines
801 B
JavaScript
/**
|
|
* SpeciesColorPicker web component
|
|
*
|
|
* Progressive enhancement for species/color picker forms:
|
|
* - Auto-submits the form when species or color changes (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 SpeciesColorPicker 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) {
|
|
this.querySelector("form").requestSubmit();
|
|
}
|
|
}
|
|
|
|
customElements.define("species-color-picker", SpeciesColorPicker);
|