@unabridged/midwest 0.27.3 → 0.27.5

package/dist/javascript/collection/app/components/midwest/card_component/card_component_controller.js

@@ -19,18 +19,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`);
   }
@@ -40,6 +52,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");
+  }
 }
 
 export { Card as default };

package/dist/javascript/collection/app/components/midwest/card_component/card_component_controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"card_component_controller.js","sources":["../../../../../../../app/components/midwest/card_component/card_component_controller.ts"],"sourcesContent":["\nimport { Controller } from '@hotwired/stimulus'\n\nexport default class Card extends Controller<HTMLFormElement> {\n  static targets = ['back', 'front']\n  static values = {\n    originalHeight: { type: Number, default: 0 },\n    backHeight: { type: Number, default: 0 }\n  }\n\n  declare readonly hasBackTarget: boolean\n  declare readonly hasFrontTarget: boolean\n  declare readonly backTarget: HTMLInputElement\n  declare readonly backTargets: HTMLInputElement[]\n  declare readonly frontTarget: HTMLInputElement\n  declare readonly frontTargets: HTMLInputElement[]\n\n  declare originalHeightValue: number\n  declare backHeightValue: number\n  declare readonly hasOriginalHeightValue: boolean\n  declare readonly hasBackHeightValue: boolean\n\n  private resizeHandler: (() => void) | null = null\n\n  connect () {\n    this.applyReady()\n  }\n\n  disconnect () {\n    if (this.resizeHandler) {\n      window.removeEventListener('resize', this.resizeHandler)\n      this.resizeHandler = null\n    }\n  }\n\n  get flippable () {\n    return this.element.classList.contains('flippable')\n  }\n\n  async applyReady () {\n    if (this.flippable) {\n      this.originalHeightValue = this.frontTarget.offsetHeight\n      this.backHeightValue = this.backTarget.offsetHeight\n\n      this.element.classList.add('flip-ready')\n\n      this.resizeHandler = () => {\n        this.originalHeightValue = this.frontTarget.offsetHeight\n        this.backHeightValue = this.backTarget.offsetHeight\n      }\n      window.addEventListener('resize', this.resizeHandler)\n    }\n  }\n\n  originalHeightValueChanged () {\n    this.element.style.setProperty('--min-height', `${this.originalHeightValue}px`)\n  }\n\n  backHeightValueChanged () {\n    this.element.style.setProperty('--flipped-min-height', `${this.backHeightValue}px`)\n  }\n\n  flip () {\n    this.element.classList.toggle('flipped')\n  }\n}\n"],"names":[],"mappings":";;AAGA,MAAqB,aAAa,UAA4B,CAAA;AAAA,EAC5D,OAAO,OAAA,GAAU,CAAC,MAAA,EAAQ,OAAO,CAAA,CAAA;AAAA,EACjC,OAAO,MAAS,GAAA;AAAA,IACd,cAAgB,EAAA,EAAE,IAAM,EAAA,MAAA,EAAQ,SAAS,CAAE,EAAA;AAAA,IAC3C,UAAY,EAAA,EAAE,IAAM,EAAA,MAAA,EAAQ,SAAS,CAAE,EAAA;AAAA,GACzC,CAAA;AAAA,EAcQ,aAAqC,GAAA,IAAA,CAAA;AAAA,EAE7C,OAAW,GAAA;AACT,IAAA,IAAA,CAAK,UAAW,EAAA,CAAA;AAAA,GAClB;AAAA,EAEA,UAAc,GAAA;AACZ,IAAA,IAAI,KAAK,aAAe,EAAA;AACtB,MAAO,MAAA,CAAA,mBAAA,CAAoB,QAAU,EAAA,IAAA,CAAK,aAAa,CAAA,CAAA;AACvD,MAAA,IAAA,CAAK,aAAgB,GAAA,IAAA,CAAA;AAAA,KACvB;AAAA,GACF;AAAA,EAEA,IAAI,SAAa,GAAA;AACf,IAAA,OAAO,IAAK,CAAA,OAAA,CAAQ,SAAU,CAAA,QAAA,CAAS,WAAW,CAAA,CAAA;AAAA,GACpD;AAAA,EAEA,MAAM,UAAc,GAAA;AAClB,IAAA,IAAI,KAAK,SAAW,EAAA;AAClB,MAAK,IAAA,CAAA,mBAAA,GAAsB,KAAK,WAAY,CAAA,YAAA,CAAA;AAC5C,MAAK,IAAA,CAAA,eAAA,GAAkB,KAAK,UAAW,CAAA,YAAA,CAAA;AAEvC,MAAK,IAAA,CAAA,OAAA,CAAQ,SAAU,CAAA,GAAA,CAAI,YAAY,CAAA,CAAA;AAEvC,MAAA,IAAA,CAAK,gBAAgB,MAAM;AACzB,QAAK,IAAA,CAAA,mBAAA,GAAsB,KAAK,WAAY,CAAA,YAAA,CAAA;AAC5C,QAAK,IAAA,CAAA,eAAA,GAAkB,KAAK,UAAW,CAAA,YAAA,CAAA;AAAA,OACzC,CAAA;AACA,MAAO,MAAA,CAAA,gBAAA,CAAiB,QAAU,EAAA,IAAA,CAAK,aAAa,CAAA,CAAA;AAAA,KACtD;AAAA,GACF;AAAA,EAEA,0BAA8B,GAAA;AAC5B,IAAA,IAAA,CAAK,QAAQ,KAAM,CAAA,WAAA,CAAY,cAAgB,EAAA,CAAA,EAAG,KAAK,mBAAuB,CAAA,EAAA,CAAA,CAAA,CAAA;AAAA,GAChF;AAAA,EAEA,sBAA0B,GAAA;AACxB,IAAA,IAAA,CAAK,QAAQ,KAAM,CAAA,WAAA,CAAY,sBAAwB,EAAA,CAAA,EAAG,KAAK,eAAmB,CAAA,EAAA,CAAA,CAAA,CAAA;AAAA,GACpF;AAAA,EAEA,IAAQ,GAAA;AACN,IAAK,IAAA,CAAA,OAAA,CAAQ,SAAU,CAAA,MAAA,CAAO,SAAS,CAAA,CAAA;AAAA,GACzC;AACF;;;;"}
+{"version":3,"file":"card_component_controller.js","sources":["../../../../../../../app/components/midwest/card_component/card_component_controller.ts"],"sourcesContent":["\nimport { Controller } from '@hotwired/stimulus'\n\nexport default class Card extends Controller<HTMLFormElement> {\n  static targets = ['back', 'front']\n  static values = {\n    originalHeight: { type: Number, default: 0 },\n    backHeight: { type: Number, default: 0 }\n  }\n\n  declare readonly hasBackTarget: boolean\n  declare readonly hasFrontTarget: boolean\n  declare readonly backTarget: HTMLInputElement\n  declare readonly backTargets: HTMLInputElement[]\n  declare readonly frontTarget: HTMLInputElement\n  declare readonly frontTargets: HTMLInputElement[]\n\n  declare originalHeightValue: number\n  declare backHeightValue: number\n  declare readonly hasOriginalHeightValue: boolean\n  declare readonly hasBackHeightValue: boolean\n\n  private resizeHandler: (() => void) | null = null\n\n  connect () {\n    this.applyReady()\n  }\n\n  disconnect () {\n    if (this.resizeHandler) {\n      window.removeEventListener('resize', this.resizeHandler)\n      this.resizeHandler = null\n    }\n  }\n\n  get flippable () {\n    return this.element.classList.contains('flippable')\n  }\n\n  // Both faces are re-measured whenever either is replaced, which is what happens\n  // when a card rendered with `frame:` has its contents swapped by a response.\n  // Without this the min-heights keep whatever the faces measured on first\n  // connect, and a card whose back grew or shrank is left at the wrong size.\n  frontTargetConnected () {\n    this.measureFaces()\n  }\n\n  backTargetConnected () {\n    this.measureFaces()\n  }\n\n  async applyReady () {\n    if (this.flippable) {\n      this.measureFaces()\n\n      this.element.classList.add('flip-ready')\n\n      this.resizeHandler = () => this.measureFaces()\n      window.addEventListener('resize', this.resizeHandler)\n    }\n  }\n\n  private measureFaces () {\n    // A target callback can fire before its partner is in the DOM, both on first\n    // render and mid-swap, so neither height is read until both faces exist.\n    if (!this.flippable || !this.hasFrontTarget || !this.hasBackTarget) return\n\n    this.originalHeightValue = this.frontTarget.offsetHeight\n    this.backHeightValue = this.backTarget.offsetHeight\n  }\n\n  originalHeightValueChanged () {\n    this.element.style.setProperty('--min-height', `${this.originalHeightValue}px`)\n  }\n\n  backHeightValueChanged () {\n    this.element.style.setProperty('--flipped-min-height', `${this.backHeightValue}px`)\n  }\n\n  flip () {\n    this.element.classList.toggle('flipped')\n  }\n\n  // Returns the card to its front, animating rather than cutting because the\n  // element is never replaced. Pairs with `frame:`: a form on the back can save,\n  // let the response swap the faces, and turn the card back over.\n  //\n  //   data-action=\"turbo:frame-render->midwest-card#returnToFront\"\n  //\n  // Bind it to `turbo:frame-render`, not `turbo:submit-end`. The form lives\n  // inside the frame the response replaces, so by the time the submission ends\n  // it is detached — and Turbo redispatches events whose target is disconnected\n  // onto documentElement instead, where they never reach this card.\n  // `turbo:frame-render` targets the frame itself, which survives the swap.\n  //\n  // A failed response is ignored so a form that came back carrying errors stays\n  // where the errors are: `success` covers turbo:submit-end, `fetchResponse`\n  // covers turbo:frame-render. An event carrying neither — a click, a custom\n  // event — is an unconditional request to show the front.\n  returnToFront (event?: Event) {\n    const detail = (event as CustomEvent | undefined)?.detail\n\n    if (detail?.success === false) return\n\n    const status = detail?.fetchResponse?.statusCode\n    if (typeof status === 'number' && status >= 400) return\n\n    this.element.classList.remove('flipped')\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/javascript/midwest.d.ts

@@ -26,10 +26,14 @@ declare class Card extends Controller<HTMLFormElement> {
     connect(): void;
     disconnect(): void;
     get flippable(): boolean;
+    frontTargetConnected(): void;
+    backTargetConnected(): void;
     applyReady(): Promise<void>;
+    private measureFaces;
     originalHeightValueChanged(): void;
     backHeightValueChanged(): void;
     flip(): void;
+    returnToFront(event?: Event): void;
 }
 
 declare class Banner extends Controller<HTMLFormElement> {

package/dist/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 {