Auto-submit the species color picker on change, for new item previews

app/assets/javascripts/items/show.js

@@ -3,17 +3,36 @@ document.addEventListener("change", (e) => {
     if (!e.target.matches("species-face-picker")) return;
 
     try {
-        const mainPicker = document.querySelector("#item-preview .species-color-picker");
+        const mainPickerForm = document.querySelector(
+            "#item-preview species-color-picker form");
         const mainSpeciesField =
-            mainPicker.querySelector("[name='preview[species_id]']");
+            mainPickerForm.querySelector("[name='preview[species_id]']");
         mainSpeciesField.value = e.target.value;
-        mainPicker.requestSubmit(); // `submit` doesn't get captured by Turbo!
+        mainPickerForm.requestSubmit(); // `submit` doesn't get captured by Turbo!
     } catch (error) {
-        e.preventDefault();
         console.error("Couldn't update species picker: ", error);
     }
 });
 
+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();
+    }
+}
+
 class SpeciesFacePicker extends HTMLElement {
     connectedCallback() {
         this.addEventListener("click", this.#handleClick);
@@ -52,5 +71,6 @@ class SpeciesFacePickerOptions extends HTMLElement {
     }
 }
 
+customElements.define("species-color-picker", SpeciesColorPicker);
 customElements.define("species-face-picker", SpeciesFacePicker);
 customElements.define("species-face-picker-options", SpeciesFacePickerOptions);

app/assets/stylesheets/items/_show.sass

@@ -151,16 +151,31 @@ body.items-show
     .error-indicator
       display: block
 
-  .species-color-picker
+  species-color-picker
     .error-icon
       cursor: help
       margin-right: .25em
 
-    &[data-is-valid="false"]
+    form[data-is-valid="false"]
       select
         border-color: $error-border-color
         color: $error-color
 
+    // If JS is enabled, but auto-loading isn't ready yet (script loading or
+    // failed?), hide the submit button for .75sec, to give it time to load.
+    @media (scripting: enabled)
+      input[type=submit]
+        position: absolute
+        margin-left: .5em
+        opacity: 0
+        animation: fade-in .25s forwards
+        animation-delay: .75s
+
+    // Once the auto-loading behavior is ready, remove the submit button.
+    &:state(auto-loading)
+      input[type=submit]
+        display: none
+
   species-face-picker
     display: block
     position: relative
@@ -280,7 +295,7 @@ body.items-show
         width: 350px
         height: 350px
 
-      .species-color-picker
+      species-color-picker
         grid-area: picker
 
       species-face-picker
@@ -290,3 +305,9 @@ body.items-show
 
       .item-zones-info
         grid-area: zones
+
+@keyframes fade-in
+  from
+    opacity: 0
+  to
+    opacity: 1

app/views/items/show.html.haml

@@ -19,8 +19,8 @@
   .error-indicator
     💥 We couldn't load all of this outfit. Try again?
 
-  = form_for item_path(@item), method: :get, class: "species-color-picker",
+  %species-color-picker
-    data: {"is-valid": @preview_error.nil?} do |f|
+    = 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