@unabridged/midwest 0.24.0 → 0.24.3

package/dist/javascript/collection/app/components/midwest/table_component/load_more_controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"load_more_controller.js","sources":["../../../../../../../app/components/midwest/table_component/load_more_controller.ts"],"sourcesContent":["import { Controller } from '@hotwired/stimulus'\n\n// Enables infinite scroll on a `midwest-table` by observing a sentinel <tr>\n// element at the bottom of the tbody.  When the sentinel scrolls near the\n// viewport, this controller fetches the next-page URL, extracts the new <tr>\n// elements from the returned HTML, and appends them (plus the new sentinel,\n// if present) to the current tbody — replacing itself in the process.\n//\n// Values\n//   url      — URL for the next page (built by TablePresenter#next_page_url)\n//   tbodyId  — DOM id of the <tbody> to append rows into\nexport default class LoadMore extends Controller<HTMLTableRowElement> {\n  static values = {\n    url:     String,\n    tbodyId: String,\n  }\n\n  declare urlValue:     string\n  declare tbodyIdValue: string\n\n  private observer: IntersectionObserver | null = null\n  private loading = false\n\n  connect () {\n    // No URL means this is the last page — nothing to load.\n    if (!this.urlValue) return\n\n    this.observer = new IntersectionObserver(\n      (entries) => { if (entries[0].isIntersecting) this.load() },\n      // Start fetching 300px before the sentinel enters the viewport so rows\n      // appear before the user actually reaches the bottom.\n      { rootMargin: '0px 0px 300px 0px' }\n    )\n    this.observer.observe(this.element)\n  }\n\n  disconnect () {\n    this.observer?.disconnect()\n    this.observer = null\n  }\n\n  private async load () {\n    if (this.loading) return\n    this.loading = true\n    this.observer?.disconnect()\n\n    try {\n      const response = await fetch(this.urlValue, {\n        headers: {\n          Accept:            'text/html',\n          'X-Requested-With': 'XMLHttpRequest',\n        },\n        credentials: 'same-origin',\n      })\n\n      if (!response.ok) return\n\n      const html    = await response.text()\n      const doc     = new DOMParser().parseFromString(html, 'text/html')\n      const tbody   = document.getElementById(this.tbodyIdValue)\n      const newRows = Array.from(\n        doc.querySelectorAll<HTMLTableRowElement>('.midwest-table-body tr')\n      )\n\n      if (!tbody || newRows.length === 0) return\n\n      // Remove the current sentinel before appending new rows so its position\n      // doesn't shift the table layout during the DOM update.\n      this.element.remove()\n\n      // Import each row (including any new sentinel for the next page) into the\n      // current document and append it to the live tbody.\n      newRows.forEach(row => tbody.appendChild(document.importNode(row, true)))\n    } catch {\n      // Silently fail — the table remains fully functional, just without\n      // auto-loading more rows.\n      this.loading = false\n    }\n  }\n}\n"],"names":[],"mappings":";;AAWA,MAAqB,iBAAiB,UAAgC,CAAA;AAAA,EACpE,OAAO,MAAS,GAAA;AAAA,IACd,GAAS,EAAA,MAAA;AAAA,IACT,OAAS,EAAA,MAAA;AAAA,GACX,CAAA;AAAA,EAKQ,QAAwC,GAAA,IAAA,CAAA;AAAA,EACxC,OAAU,GAAA,KAAA,CAAA;AAAA,EAElB,OAAW,GAAA;AAET,IAAA,IAAI,CAAC,IAAK,CAAA,QAAA;AAAU,MAAA,OAAA;AAEpB,IAAA,IAAA,CAAK,WAAW,IAAI,oBAAA;AAAA,MAClB,CAAC,OAAY,KAAA;AAAE,QAAI,IAAA,OAAA,CAAQ,CAAC,CAAE,CAAA,cAAA;AAAgB,UAAA,IAAA,CAAK,IAAK,EAAA,CAAA;AAAA,OAAE;AAAA;AAAA;AAAA,MAG1D,EAAE,YAAY,mBAAoB,EAAA;AAAA,KACpC,CAAA;AACA,IAAK,IAAA,CAAA,QAAA,CAAS,OAAQ,CAAA,IAAA,CAAK,OAAO,CAAA,CAAA;AAAA,GACpC;AAAA,EAEA,UAAc,GAAA;AACZ,IAAA,IAAA,CAAK,UAAU,UAAW,EAAA,CAAA;AAC1B,IAAA,IAAA,CAAK,QAAW,GAAA,IAAA,CAAA;AAAA,GAClB;AAAA,EAEA,MAAc,IAAQ,GAAA;AACpB,IAAA,IAAI,IAAK,CAAA,OAAA;AAAS,MAAA,OAAA;AAClB,IAAA,IAAA,CAAK,OAAU,GAAA,IAAA,CAAA;AACf,IAAA,IAAA,CAAK,UAAU,UAAW,EAAA,CAAA;AAE1B,IAAI,IAAA;AACF,MAAA,MAAM,QAAW,GAAA,MAAM,KAAM,CAAA,IAAA,CAAK,QAAU,EAAA;AAAA,QAC1C,OAAS,EAAA;AAAA,UACP,MAAmB,EAAA,WAAA;AAAA,UACnB,kBAAoB,EAAA,gBAAA;AAAA,SACtB;AAAA,QACA,WAAa,EAAA,aAAA;AAAA,OACd,CAAA,CAAA;AAED,MAAA,IAAI,CAAC,QAAS,CAAA,EAAA;AAAI,QAAA,OAAA;AAElB,MAAM,MAAA,IAAA,GAAU,MAAM,QAAA,CAAS,IAAK,EAAA,CAAA;AACpC,MAAA,MAAM,MAAU,IAAI,SAAA,EAAY,CAAA,eAAA,CAAgB,MAAM,WAAW,CAAA,CAAA;AACjE,MAAA,MAAM,KAAU,GAAA,QAAA,CAAS,cAAe,CAAA,IAAA,CAAK,YAAY,CAAA,CAAA;AACzD,MAAA,MAAM,UAAU,KAAM,CAAA,IAAA;AAAA,QACpB,GAAA,CAAI,iBAAsC,wBAAwB,CAAA;AAAA,OACpE,CAAA;AAEA,MAAI,IAAA,CAAC,KAAS,IAAA,OAAA,CAAQ,MAAW,KAAA,CAAA;AAAG,QAAA,OAAA;AAIpC,MAAA,IAAA,CAAK,QAAQ,MAAO,EAAA,CAAA;AAIpB,MAAQ,OAAA,CAAA,OAAA,CAAQ,SAAO,KAAM,CAAA,WAAA,CAAY,SAAS,UAAW,CAAA,GAAA,EAAK,IAAI,CAAC,CAAC,CAAA,CAAA;AAAA,KACxE,CAAA,MAAA;AAGA,MAAA,IAAA,CAAK,OAAU,GAAA,KAAA,CAAA;AAAA,KACjB;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"load_more_controller.js","sources":["../../../../../../../app/components/midwest/table_component/load_more_controller.ts"],"sourcesContent":["import { Controller } from '@hotwired/stimulus'\nimport { observeViewport } from '../../../assets/javascript/midwest/viewport_observer'\n\n// Enables infinite scroll on a `midwest-table` by observing a sentinel <tr>\n// element at the bottom of the tbody.  When the sentinel scrolls near the\n// viewport, this controller fetches the next-page URL, extracts the new <tr>\n// elements from the returned HTML, and appends them (plus the new sentinel,\n// if present) to the current tbody — replacing itself in the process.\n//\n// Values\n//   url      — URL for the next page (built by TablePresenter#next_page_url)\n//   tbodyId  — DOM id of the <tbody> to append rows into\nexport default class LoadMore extends Controller<HTMLTableRowElement> {\n  static values = {\n    url:     String,\n    tbodyId: String,\n  }\n\n  declare urlValue:     string\n  declare tbodyIdValue: string\n\n  private teardown: (() => void) | null = null\n  private loading = false\n\n  connect () {\n    // No URL means this is the last page — nothing to load.\n    if (!this.urlValue) return\n\n    // The sentinel loads exactly once, then removes itself and is replaced by\n    // the next page's sentinel — so `once` matches the lifecycle. `rootMargin`\n    // starts the fetch 300px early so rows appear before the user hits bottom.\n    this.teardown = observeViewport(this.element, {\n      rootMargin: '0px 0px 300px 0px',\n      once: true,\n      onEnter: () => this.load(),\n    })\n  }\n\n  disconnect () {\n    this.teardown?.()\n    this.teardown = null\n  }\n\n  private async load () {\n    if (this.loading) return\n    this.loading = true\n    this.teardown?.()\n\n    try {\n      const response = await fetch(this.urlValue, {\n        headers: {\n          Accept:            'text/html',\n          'X-Requested-With': 'XMLHttpRequest',\n        },\n        credentials: 'same-origin',\n      })\n\n      if (!response.ok) return\n\n      const html    = await response.text()\n      const doc     = new DOMParser().parseFromString(html, 'text/html')\n      const tbody   = document.getElementById(this.tbodyIdValue)\n      const newRows = Array.from(\n        doc.querySelectorAll<HTMLTableRowElement>('.midwest-table-body tr')\n      )\n\n      if (!tbody || newRows.length === 0) return\n\n      // Remove the current sentinel before appending new rows so its position\n      // doesn't shift the table layout during the DOM update.\n      this.element.remove()\n\n      // Import each row (including any new sentinel for the next page) into the\n      // current document and append it to the live tbody.\n      newRows.forEach(row => tbody.appendChild(document.importNode(row, true)))\n    } catch {\n      // Silently fail — the table remains fully functional, just without\n      // auto-loading more rows.\n      this.loading = false\n    }\n  }\n}\n"],"names":[],"mappings":";;;AAYA,MAAqB,iBAAiB,UAAgC,CAAA;AAAA,EACpE,OAAO,MAAS,GAAA;AAAA,IACd,GAAS,EAAA,MAAA;AAAA,IACT,OAAS,EAAA,MAAA;AAAA,GACX,CAAA;AAAA,EAKQ,QAAgC,GAAA,IAAA,CAAA;AAAA,EAChC,OAAU,GAAA,KAAA,CAAA;AAAA,EAElB,OAAW,GAAA;AAET,IAAA,IAAI,CAAC,IAAK,CAAA,QAAA;AAAU,MAAA,OAAA;AAKpB,IAAK,IAAA,CAAA,QAAA,GAAW,eAAgB,CAAA,IAAA,CAAK,OAAS,EAAA;AAAA,MAC5C,UAAY,EAAA,mBAAA;AAAA,MACZ,IAAM,EAAA,IAAA;AAAA,MACN,OAAA,EAAS,MAAM,IAAA,CAAK,IAAK,EAAA;AAAA,KAC1B,CAAA,CAAA;AAAA,GACH;AAAA,EAEA,UAAc,GAAA;AACZ,IAAA,IAAA,CAAK,QAAW,IAAA,CAAA;AAChB,IAAA,IAAA,CAAK,QAAW,GAAA,IAAA,CAAA;AAAA,GAClB;AAAA,EAEA,MAAc,IAAQ,GAAA;AACpB,IAAA,IAAI,IAAK,CAAA,OAAA;AAAS,MAAA,OAAA;AAClB,IAAA,IAAA,CAAK,OAAU,GAAA,IAAA,CAAA;AACf,IAAA,IAAA,CAAK,QAAW,IAAA,CAAA;AAEhB,IAAI,IAAA;AACF,MAAA,MAAM,QAAW,GAAA,MAAM,KAAM,CAAA,IAAA,CAAK,QAAU,EAAA;AAAA,QAC1C,OAAS,EAAA;AAAA,UACP,MAAmB,EAAA,WAAA;AAAA,UACnB,kBAAoB,EAAA,gBAAA;AAAA,SACtB;AAAA,QACA,WAAa,EAAA,aAAA;AAAA,OACd,CAAA,CAAA;AAED,MAAA,IAAI,CAAC,QAAS,CAAA,EAAA;AAAI,QAAA,OAAA;AAElB,MAAM,MAAA,IAAA,GAAU,MAAM,QAAA,CAAS,IAAK,EAAA,CAAA;AACpC,MAAA,MAAM,MAAU,IAAI,SAAA,EAAY,CAAA,eAAA,CAAgB,MAAM,WAAW,CAAA,CAAA;AACjE,MAAA,MAAM,KAAU,GAAA,QAAA,CAAS,cAAe,CAAA,IAAA,CAAK,YAAY,CAAA,CAAA;AACzD,MAAA,MAAM,UAAU,KAAM,CAAA,IAAA;AAAA,QACpB,GAAA,CAAI,iBAAsC,wBAAwB,CAAA;AAAA,OACpE,CAAA;AAEA,MAAI,IAAA,CAAC,KAAS,IAAA,OAAA,CAAQ,MAAW,KAAA,CAAA;AAAG,QAAA,OAAA;AAIpC,MAAA,IAAA,CAAK,QAAQ,MAAO,EAAA,CAAA;AAIpB,MAAQ,OAAA,CAAA,OAAA,CAAQ,SAAO,KAAM,CAAA,WAAA,CAAY,SAAS,UAAW,CAAA,GAAA,EAAK,IAAI,CAAC,CAAC,CAAA,CAAA;AAAA,KACxE,CAAA,MAAA;AAGA,MAAA,IAAA,CAAK,OAAU,GAAA,KAAA,CAAA;AAAA,KACjB;AAAA,GACF;AACF;;;;"}

package/dist/javascript/midwest.js

@@ -2557,7 +2557,6 @@ class Dropdown extends Controller {
     supported: { type: Boolean, default: true },
     align: { type: String, default: "right" }
   };
-  observer = new IntersectionObserver(this.computedCB.bind(this), { threshold: 1 });
   cleanup;
   connect() {
     this.supportedValue = CSS.supports("anchor-name: --myanchor");
@@ -2623,11 +2622,6 @@ class Dropdown extends Controller {
       (item) => item.closest('[data-controller~="midwest-dropdown"]') === this.element && getComputedStyle(item).display !== "none"
     );
   }
-  computedCB(entries) {
-    entries.forEach(async () => {
-      this.computation();
-    });
-  }
   closeIfOpen = () => {
     this.element.hidePopover();
   };
@@ -3012,7 +3006,7 @@ class Carousel extends Controller {
     }
     const atEnd = this._currentIndex >= this.slides.length - 1;
     if (this.loopValue && atEnd) {
-      this.slides[0]?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+      this.trackTarget.scrollTo({ left: 0, behavior: "smooth" });
     } else {
       this.trackTarget.scrollBy({ left: this.trackTarget.clientWidth, behavior: "smooth" });
     }
@@ -3026,8 +3020,7 @@ class Carousel extends Controller {
     }
     const atStart = this._currentIndex <= 0;
     if (this.loopValue && atStart) {
-      const last = this.slides[this.slides.length - 1];
-      last?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+      this.trackTarget.scrollTo({ left: (this.slides.length - 1) * this.trackTarget.clientWidth, behavior: "smooth" });
     } else {
       this.trackTarget.scrollBy({ left: -this.trackTarget.clientWidth, behavior: "smooth" });
     }
@@ -3039,8 +3032,7 @@ class Carousel extends Controller {
       this.activateSlide(index);
       return;
     }
-    const slide = this.slides[index];
-    slide?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+    this.trackTarget.scrollTo({ left: index * this.trackTarget.clientWidth, behavior: "smooth" });
   }
   // Unlocks the next slide and advances to it. Intended for wizard mode: wire
   // a "Continue" button inside a slide to this action so users progress
@@ -3144,8 +3136,7 @@ class Carousel extends Controller {
     }
     const atEnd = this._currentIndex >= this.slides.length - 1;
     if (atEnd) {
-      const firstSlide = this.slides[0];
-      firstSlide?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+      this.trackTarget.scrollTo({ left: 0, behavior: "smooth" });
     } else {
       this.next();
     }
@@ -4871,10 +4862,7 @@ class Notification extends Controller {
   connect() {
     this.container = this.element.closest("[popover]");
     this.container?.showPopover?.();
-    requestAnimationFrame(() => {
-      this.element.classList.add("visible");
-    });
-    const frame = this.element.parentElement;
+    const frame = this.element.closest("turbo-frame");
     if (frame) {
       this.observer = new MutationObserver(() => this.syncCountdown());
       this.observer.observe(frame, { childList: true });
@@ -4893,14 +4881,8 @@ class Notification extends Controller {
     }
   }
   close() {
-    if (!this.element.classList.contains("animated")) {
-      this.element.remove();
-      return;
-    }
     this.element.classList.add("closing");
-    setTimeout(() => {
-      this.element.remove();
-    }, 350);
+    setTimeout(() => (this.element.parentElement ?? this.element).remove(), 350);
   }
   syncCountdown() {
     const timerEl = this.element.querySelector('[data-controller~="midwest-countdown-timer"]');
@@ -4912,7 +4894,8 @@ class Notification extends Controller {
     );
     if (!timer)
       return;
-    const isTop = this.element === this.element.parentElement?.firstElementChild;
+    const wrapper = this.element.parentElement ?? this.element;
+    const isTop = wrapper === wrapper.parentElement?.firstElementChild;
     if (isTop) {
       timer.resume();
     } else {
@@ -4986,36 +4969,51 @@ class Table extends Controller {
   }
 }
 
+function observeViewport(element, options = {}) {
+  const { threshold = 0, rootMargin = "0px", once = false, onEnter, onLeave } = options;
+  const observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          onEnter?.(entry);
+          if (once)
+            observer.disconnect();
+        } else {
+          onLeave?.(entry);
+        }
+      }
+    },
+    { threshold, rootMargin }
+  );
+  observer.observe(element);
+  return () => observer.disconnect();
+}
+
 class LoadMore extends Controller {
   static values = {
     url: String,
     tbodyId: String
   };
-  observer = null;
+  teardown = null;
   loading = false;
   connect() {
     if (!this.urlValue)
       return;
-    this.observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting)
-          this.load();
-      },
-      // Start fetching 300px before the sentinel enters the viewport so rows
-      // appear before the user actually reaches the bottom.
-      { rootMargin: "0px 0px 300px 0px" }
-    );
-    this.observer.observe(this.element);
+    this.teardown = observeViewport(this.element, {
+      rootMargin: "0px 0px 300px 0px",
+      once: true,
+      onEnter: () => this.load()
+    });
   }
   disconnect() {
-    this.observer?.disconnect();
-    this.observer = null;
+    this.teardown?.();
+    this.teardown = null;
   }
   async load() {
     if (this.loading)
       return;
     this.loading = true;
-    this.observer?.disconnect();
+    this.teardown?.();
     try {
       const response = await fetch(this.urlValue, {
         headers: {
@@ -6947,35 +6945,29 @@ class ViewportObserver extends Controller {
     once: { type: Boolean, default: false },
     visibleClass: { type: String, default: "" }
   };
-  observer = null;
+  teardown = null;
   connect() {
-    this.observer = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries)
-          this.handle(entry);
+    this.teardown = observeViewport(this.element, {
+      threshold: this.thresholdValue,
+      rootMargin: this.rootMarginValue,
+      once: this.onceValue,
+      onEnter: (entry) => {
+        this.element.setAttribute("data-intersecting", "true");
+        if (this.visibleClassValue)
+          this.element.classList.add(this.visibleClassValue);
+        this.dispatch("enter", { detail: { entry }, bubbles: true });
       },
-      { threshold: this.thresholdValue, rootMargin: this.rootMarginValue }
-    );
-    this.observer.observe(this.element);
+      onLeave: (entry) => {
+        this.element.setAttribute("data-intersecting", "false");
+        if (this.visibleClassValue)
+          this.element.classList.remove(this.visibleClassValue);
+        this.dispatch("leave", { detail: { entry }, bubbles: true });
+      }
+    });
   }
   disconnect() {
-    this.observer?.disconnect();
-    this.observer = null;
-  }
-  handle(entry) {
-    if (entry.isIntersecting) {
-      this.element.setAttribute("data-intersecting", "true");
-      if (this.visibleClassValue)
-        this.element.classList.add(this.visibleClassValue);
-      this.dispatch("enter", { detail: { entry }, bubbles: true });
-      if (this.onceValue)
-        this.disconnect();
-    } else {
-      this.element.setAttribute("data-intersecting", "false");
-      if (this.visibleClassValue)
-        this.element.classList.remove(this.visibleClassValue);
-      this.dispatch("leave", { detail: { entry }, bubbles: true });
-    }
+    this.teardown?.();
+    this.teardown = null;
   }
 }
 
@@ -7873,6 +7865,33 @@ class Playlist extends Controller {
   }
 }
 
+class Motion extends Controller {
+  static values = {
+    threshold: { type: Number, default: 0.15 },
+    once: { type: Boolean, default: true }
+  };
+  teardown = null;
+  connect() {
+    this.teardown = observeViewport(this.element, {
+      threshold: this.thresholdValue,
+      once: this.onceValue,
+      onEnter: () => this.reveal(),
+      onLeave: this.onceValue ? void 0 : () => this.reset()
+    });
+  }
+  disconnect() {
+    this.teardown?.();
+    this.teardown = null;
+  }
+  reveal() {
+    this.element.setAttribute("data-motion-visible", "");
+    this.dispatch("reveal", { bubbles: true });
+  }
+  reset() {
+    this.element.removeAttribute("data-motion-visible");
+  }
+}
+
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
   application.register("midwest-banner", Banner);
@@ -7914,6 +7933,7 @@ function registerMidwestControllers(application) {
   application.register("midwest-theme-switch", ThemeSwitch);
   application.register("midwest-panorama", Panorama);
   application.register("midwest-playlist", Playlist);
+  application.register("midwest-motion", Motion);
 }
 
 export { Banner, Card, Chart, CountdownTimer, registerMidwestControllers };