@unabridged/midwest 0.23.4 → 0.24.3

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

@@ -36,6 +36,9 @@ import IntersectionObserver from '../../../components/midwest/intersection_obser
 import FocusTrap from '../../../components/midwest/focus_trap_component/focus_trap_component_controller'
 import Onboarding from '../../../components/midwest/onboarding_component/onboarding_component_controller'
 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 }
@@ -79,5 +82,8 @@ export function registerMidwestControllers (application: any) {
   application.register('midwest-focus-trap', FocusTrap)
   application.register('midwest-onboarding', Onboarding)
   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()
+}