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

[WV2] Unify auto-submit behaviors into a shared web component

Browse source
This commit is contained in:
Emi Matchu 2026-02-06 11:26:51 -08:00
parent 9baa64d39a
commit 81b60eefad
11 changed files with 71 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
app/assets/javascripts/auto-submit-form.js Normal file
View file

@ -0,0 +1,27 @@
/**
* AutoSubmitForm web component
*
* Generic progressive enhancement for forms that should auto-submit on change:
* - Listens for `change` events on descendant form inputs
* - Calls `requestSubmit()` on the nearest `<form>`
* - Exposes `:state(auto-loading)` to hide fallback submit buttons via CSS
*/
class AutoSubmitForm extends HTMLElement {
#internals;
constructor() {
super();
this.#internals = this.attachInternals();
}
connectedCallback() {
this.addEventListener("change", this.#handleChange);
this.#internals.states.add("auto-loading");
}
#handleChange(e) {
e.target.closest("form")?.requestSubmit();
}
}
customElements.define("auto-submit-form", AutoSubmitForm);

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

@ -4,7 +4,7 @@ document.addEventListener("change", (e) => {
try {
const mainPickerForm = document.querySelector(
"#item-preview species-color-picker form",
"#item-preview .species-color-picker form",
);
const mainSpeciesField = mainPickerForm.querySelector(
"[name='preview[species_id]']",

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

@ -1,25 +1,13 @@
/**
* PosePicker web component
* PosePickerPopover 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
* Scrolls the selected style into view when the style picker list becomes
* visible (e.g. tab switch or popover open).
*/
class PosePickerPopover extends HTMLElement {
#internals;
#styleListObserver;
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");
// 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");
@ -36,18 +24,9 @@ class PosePickerPopover extends HTMLElement {
}
}
disconnectedCallback() {
this.#styleListObserver?.disconnect();
}
#handleChange(e) {
// Only auto-submit if a radio button was changed
if (e.target.type === "radio") {
e.target.closest("form").requestSubmit();
}
}
}
customElements.define("pose-picker-popover", PosePickerPopover);

28
app/assets/javascripts/species-color-picker.js
View file

@ -1,28 +0,0 @@
/**
* 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);

6
app/assets/stylesheets/items/show.sass
View file

@ -109,7 +109,7 @@ outfit-viewer
.error-indicator
display: block
species-color-picker
.species-color-picker
.error-icon
cursor: help
margin-right: .25em
@ -130,7 +130,7 @@ species-color-picker
animation-delay: .75s
// Once the auto-loading behavior is ready, remove the submit button.
&:state(auto-loading)
auto-submit-form:state(auto-loading)
input[type=submit]
display: none
@ -296,7 +296,7 @@ species-face-picker
width: 380px
height: 380px
species-color-picker
.species-color-picker
grid-area: picker
species-face-picker

5
app/assets/stylesheets/wardrobe/show.css
View file

@ -282,7 +282,7 @@ select,
}
}
:is(species-color-picker, pose-picker-popover):state(auto-loading) .progressive-submit {
auto-submit-form:state(auto-loading) .progressive-submit {
display: none;
}
@ -425,9 +425,10 @@ body.wardrobe-v2 {
}
/* Species/color picker */
species-color-picker {
.species-color-picker {
display: contents;
auto-submit-form,
form {
display: contents;
}

29
app/views/items/show.html.haml
View file

@ -33,20 +33,21 @@
Customize more
= edit_icon
%species-color-picker
= form_for item_path(@item), method: :get, data: {"is-valid": @preview_error.nil?} do |f|
- if @preview_error == :pet_type_does_not_exist
%span.error-icon{title: "We haven't seen this kind of pet before."} ⚠️
- elsif @preview_error == :no_item_data
%span.error-icon{title: "We haven't seen this item on this pet before."} ⚠️
.species-color-picker
%auto-submit-form
= form_for item_path(@item), method: :get, data: {"is-valid": @preview_error.nil?} do |f|
- if @preview_error == :pet_type_does_not_exist
%span.error-icon{title: "We haven't seen this kind of pet before."} ⚠️
- elsif @preview_error == :no_item_data
%span.error-icon{title: "We haven't seen this item on this pet before."} ⚠️
= select_tag "preview[color_id]",
options_from_collection_for_select(Color.alphabetical,
"id", "human_name", @selected_preview_pet_type.color_id)
= select_tag "preview[species_id]",
options_from_collection_for_select(Species.alphabetical,
"id", "human_name", @selected_preview_pet_type.species_id)
= submit_tag "Go", name: nil
= select_tag "preview[color_id]",
options_from_collection_for_select(Color.alphabetical,
"id", "human_name", @selected_preview_pet_type.color_id)
= select_tag "preview[species_id]",
options_from_collection_for_select(Species.alphabetical,
"id", "human_name", @selected_preview_pet_type.species_id)
= submit_tag "Go", name: nil
%species-face-picker
%noscript
@ -138,5 +139,5 @@
- content_for :javascripts do
= javascript_include_tag "idiomorph", async: true
= javascript_include_tag "outfit-viewer", async: true
= javascript_include_tag "species-color-picker", async: true
= javascript_include_tag "auto-submit-form", async: true
= javascript_include_tag "items/show", async: true

6
app/views/wardrobe/appearance/_pose_picker.html.haml
View file

@ -8,9 +8,11 @@
- active_tab = @alt_style ? "styles" : "expressions"
%tab-panel{active: active_tab}
.tab-content{"data-tab": "expressions", hidden: active_tab != "expressions" ? true : nil}
= render "appearance/pose_picker_form"
%auto-submit-form
= render "appearance/pose_picker_form"
.tab-content{"data-tab": "styles", hidden: active_tab != "styles" ? true : nil}
= render "appearance/style_picker_form"
%auto-submit-form
= render "appearance/style_picker_form"
.tab-list
%button.tab-button{"data-tab": "expressions", type: "button",
class: ("active" if active_tab == "expressions")}

25
app/views/wardrobe/appearance/_species_color_picker.html.haml
View file

@ -1,12 +1,13 @@
%species-color-picker
= form_with url: @wardrobe_path, method: :get do |f|
= outfit_state_params except: [:color, :species]
= select_tag :color,
options_from_collection_for_select(@colors, "id", "human_name",
@selected_color&.id),
"aria-label": "Pet color"
= select_tag :species,
options_from_collection_for_select(@species, "id", "human_name",
@selected_species&.id),
"aria-label": "Pet species"
= submit_tag "Go", name: nil, class: "progressive-submit"
.species-color-picker
%auto-submit-form
= form_with url: @wardrobe_path, method: :get do |f|
= outfit_state_params except: [:color, :species]
= select_tag :color,
options_from_collection_for_select(@colors, "id", "human_name",
@selected_color&.id),
"aria-label": "Pet color"
= select_tag :species,
options_from_collection_for_select(@species, "id", "human_name",
@selected_species&.id),
"aria-label": "Pet species"
= submit_tag "Go", name: nil, class: "progressive-submit"

2
app/views/wardrobe/show.html.haml
View file

@ -13,7 +13,7 @@
= javascript_include_tag "application", async: true
= javascript_include_tag "idiomorph", async: true
= javascript_include_tag "outfit-viewer", async: true
= javascript_include_tag "species-color-picker", async: true
= javascript_include_tag "auto-submit-form", async: true
= javascript_include_tag "pose-picker", async: true
= javascript_include_tag "tab-panel", async: true
= javascript_include_tag "outfit-rename-field", async: true

2
docs/wardrobe-v2-migration.md
View file

@ -35,7 +35,7 @@ Code lives in `app/controllers/wardrobe_controller.rb`, `app/views/wardrobe/`, `
**URL as single source of truth**: All outfit state lives in URL params (`species`, `color`, `pose`, `style`, `objects[]`, `q[...]`). Every interaction is a GET request that generates a new URL. No client-side state management. Browser back/forward work naturally.
**Server-side rendering + Web Components**: All HTML is generated server-side. Lightweight web components (`<species-color-picker>`, `<pose-picker-popover>`, `<tab-panel>`, `<outfit-viewer>`) add interactivity without framework overhead.
**Server-side rendering + Web Components**: All HTML is generated server-side. Lightweight web components (`<auto-submit-form>`, `<pose-picker-popover>`, `<tab-panel>`, `<outfit-viewer>`) add interactivity without framework overhead.
**Progressive enhancement**: Submit buttons appear when JS is slow/disabled. Web components enhance forms with auto-submit on change.