@unabridged/midwest 0.27.3 → 0.27.5

package/app/assets/javascript/midwest.js

@@ -507,18 +507,30 @@ class Card extends Controller {
   get flippable() {
     return this.element.classList.contains("flippable");
   }
+  // Both faces are re-measured whenever either is replaced, which is what happens
+  // when a card rendered with `frame:` has its contents swapped by a response.
+  // Without this the min-heights keep whatever the faces measured on first
+  // connect, and a card whose back grew or shrank is left at the wrong size.
+  frontTargetConnected() {
+    this.measureFaces();
+  }
+  backTargetConnected() {
+    this.measureFaces();
+  }
   async applyReady() {
     if (this.flippable) {
-      this.originalHeightValue = this.frontTarget.offsetHeight;
-      this.backHeightValue = this.backTarget.offsetHeight;
+      this.measureFaces();
       this.element.classList.add("flip-ready");
-      this.resizeHandler = () => {
-        this.originalHeightValue = this.frontTarget.offsetHeight;
-        this.backHeightValue = this.backTarget.offsetHeight;
-      };
+      this.resizeHandler = () => this.measureFaces();
       window.addEventListener("resize", this.resizeHandler);
     }
   }
+  measureFaces() {
+    if (!this.flippable || !this.hasFrontTarget || !this.hasBackTarget)
+      return;
+    this.originalHeightValue = this.frontTarget.offsetHeight;
+    this.backHeightValue = this.backTarget.offsetHeight;
+  }
   originalHeightValueChanged() {
     this.element.style.setProperty("--min-height", `${this.originalHeightValue}px`);
   }
@@ -528,6 +540,31 @@ class Card extends Controller {
   flip() {
     this.element.classList.toggle("flipped");
   }
+  // Returns the card to its front, animating rather than cutting because the
+  // element is never replaced. Pairs with `frame:`: a form on the back can save,
+  // let the response swap the faces, and turn the card back over.
+  //
+  //   data-action="turbo:frame-render->midwest-card#returnToFront"
+  //
+  // Bind it to `turbo:frame-render`, not `turbo:submit-end`. The form lives
+  // inside the frame the response replaces, so by the time the submission ends
+  // it is detached — and Turbo redispatches events whose target is disconnected
+  // onto documentElement instead, where they never reach this card.
+  // `turbo:frame-render` targets the frame itself, which survives the swap.
+  //
+  // A failed response is ignored so a form that came back carrying errors stays
+  // where the errors are: `success` covers turbo:submit-end, `fetchResponse`
+  // covers turbo:frame-render. An event carrying neither — a click, a custom
+  // event — is an unconditional request to show the front.
+  returnToFront(event) {
+    const detail = event?.detail;
+    if (detail?.success === false)
+      return;
+    const status = detail?.fetchResponse?.statusCode;
+    if (typeof status === "number" && status >= 400)
+      return;
+    this.element.classList.remove("flipped");
+  }
 }
 
 class Banner extends Controller {