@unabridged/midwest 0.24.0 → 0.24.3

package/app/assets/javascript/midwest/index.ts

@@ -38,6 +38,7 @@ import Onboarding from '../../../components/midwest/onboarding_component/onboard
 import ThemeSwitch from '../../../components/midwest/form/switch_component/theme_switch_controller'
 import Panorama from '../../../components/midwest/panorama_component/panorama_component_controller'
 import Playlist from '../../../components/midwest/playlist_component/playlist_component_controller'
+import Motion from '../../../components/midwest/motion_component/motion_component_controller'
 /* IMPORTS */
 
 export { Card, Banner, CountdownTimer, Chart }
@@ -83,5 +84,6 @@ export function registerMidwestControllers (application: any) {
   application.register('midwest-theme-switch', ThemeSwitch)
   application.register('midwest-panorama', Panorama)
   application.register('midwest-playlist', Playlist)
+  application.register('midwest-motion', Motion)
   /* EXPORTS */
 }

package/app/assets/javascript/midwest/viewport_observer.ts

@@ -0,0 +1,49 @@
+// Shared viewport-detection helper for components that react to scrolling into
+// and out of view (IntersectionObserverComponent, MotionComponent, …).
+//
+// Wraps the IntersectionObserver API so controllers only describe *what* to do
+// on enter/leave, not the observer plumbing. Components own the reaction (toggle
+// a class, dispatch an event, reveal an animation); this module owns creating,
+// observing, and tearing down the observer so the behavior stays consistent.
+
+export interface ViewportObserverOptions {
+  // Fraction(s) of the element that must be visible to count as intersecting.
+  threshold?: number | number[]
+  // Margin around the viewport root (CSS shorthand string).
+  rootMargin?: string
+  // Stop observing after the first time the element enters the viewport.
+  once?: boolean
+  // Called each time the element enters the viewport.
+  onEnter?: (entry: IntersectionObserverEntry) => void
+  // Called each time the element leaves the viewport. Never called after the
+  // first enter when `once` is true (the observer has disconnected by then).
+  onLeave?: (entry: IntersectionObserverEntry) => void
+}
+
+// Observe `element` crossing the viewport threshold, invoking the callbacks as
+// it enters and leaves. Returns a teardown function that disconnects the
+// observer; callers should invoke it from their controller's `disconnect()`.
+export function observeViewport (
+  element: Element,
+  options: ViewportObserverOptions = {}
+): () => void {
+  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()
+}

package/app/assets/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 };