@unabridged/midwest 0.24.0 → 0.24.4

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

@@ -38,6 +38,11 @@ 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'
+import PageTransition from '../../../components/midwest/page_transition_component/page_transition_component_controller'
+import Map from '../../../components/midwest/map_component/map_component_controller'
+import Address from '../../../components/midwest/form/address_component/address_component_controller'
+import Popover from '../../../components/midwest/popover_component/popover_component_controller'
 /* IMPORTS */
 
 export { Card, Banner, CountdownTimer, Chart }
@@ -83,5 +88,10 @@ 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)
+  application.register('midwest-page-transition', PageTransition)
+  application.register('midwest-map', Map)
+  application.register('midwest-address', Address)
+  application.register('midwest-popover', Popover)
   /* EXPORTS */
 }

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

@@ -0,0 +1,61 @@
+// Shared map provider script loaders. Module-level promises ensure the CDN
+// script is only injected once even when MapComponent and AddressComponent both
+// mount on the same page simultaneously.
+
+let mapkitScriptPromise: Promise<void> | null = null
+let googleMapsScriptPromise: Promise<void> | null = null
+let leafletScriptPromise: Promise<void> | null = null
+
+export function loadMapKitScript (): Promise<void> {
+  if ((window as any).mapkit) return Promise.resolve()
+  if (mapkitScriptPromise) return mapkitScriptPromise
+
+  mapkitScriptPromise = new Promise<void>((resolve, reject) => {
+    const script = document.createElement('script')
+    script.src = 'https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js'
+    script.crossOrigin = 'anonymous'
+    script.addEventListener('load', () => resolve())
+    script.addEventListener('error', () => reject(new Error('Failed to load MapKit JS')))
+    document.head.appendChild(script)
+  })
+  return mapkitScriptPromise
+}
+
+// Leaflet: injects the CSS link then the JS. Both are deduplicated.
+export function loadLeafletScript (): Promise<void> {
+  if ((window as any).L) return Promise.resolve()
+  if (leafletScriptPromise) return leafletScriptPromise
+
+  leafletScriptPromise = new Promise<void>((resolve, reject) => {
+    if (!document.querySelector('link[data-midwest-leaflet]')) {
+      const link = document.createElement('link')
+      link.rel = 'stylesheet'
+      link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css'
+      link.dataset.midwestLeaflet = ''
+      document.head.appendChild(link)
+    }
+
+    const script = document.createElement('script')
+    script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'
+    script.addEventListener('load', () => resolve())
+    script.addEventListener('error', () => reject(new Error('Failed to load Leaflet')))
+    document.head.appendChild(script)
+  })
+  return leafletScriptPromise
+}
+
+// Always includes &libraries=places so that AddressComponent autocomplete works
+// whether or not a MapComponent also loads Google Maps on the same page.
+export function loadGoogleMapsScript (apiKey: string): Promise<void> {
+  if ((window as any).google?.maps) return Promise.resolve()
+  if (googleMapsScriptPromise) return googleMapsScriptPromise
+
+  googleMapsScriptPromise = new Promise<void>((resolve, reject) => {
+    ;(window as any).__midwestGoogleMapsReady = resolve
+    const script = document.createElement('script')
+    script.src = `https://maps.googleapis.com/maps/api/js?key=${encodeURIComponent(apiKey)}&callback=__midwestGoogleMapsReady&loading=async&libraries=places`
+    script.addEventListener('error', () => reject(new Error('Failed to load Google Maps')))
+    document.head.appendChild(script)
+  })
+  return googleMapsScriptPromise
+}

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()
+}