@brandocms/jupiter 3.55.0 → 4.0.0-beta.2

package/src/modules/Application/index.js

@@ -1,5 +1,4 @@
-import { gsap } from 'gsap'
-import { ScrollToPlugin } from 'gsap/ScrollToPlugin'
+import { animate, stagger } from 'motion'
 import _defaultsDeep from 'lodash.defaultsdeep'
 import rafCallback from '../../utils/rafCallback'
 import prefersReducedMotion from '../../utils/prefersReducedMotion'
@@ -9,37 +8,57 @@ import Breakpoints from '../Breakpoints'
 import FeatureTests from '../FeatureTests'
 import Fontloader from '../Fontloader'
 import Dom from '../Dom'
+import { set, clearProps } from '../../utils/motion-helpers'
+
+window.onpageshow = event => {
+  // Fix for hash anchor navigation issues
+  // When navigating to a page with #anchor, ensure overlay is removed and content is visible
+  const hasHash = window.location.hash
+  const needsFix = event.persisted || hasHash
+
+  if (needsFix) {
+    // Use setTimeout to ensure this runs after any initialization
+    const fixVisibility = () => {
+      const f = document.querySelector('#fader')
+      if (f) {
+        // Force remove the fader (autoAlpha: 0 = opacity: 0 + visibility: hidden)
+        set(f, { opacity: 0, display: 'none' })
+        f.style.visibility = 'hidden'
+      }
 
-gsap.registerPlugin(ScrollToPlugin)
-gsap.defaults({
-  ease: 'sine.out',
-})
+      const dataFaders = document.querySelectorAll('[data-fader]')
+      if (dataFaders.length) {
+        // autoAlpha: 0 = opacity: 0 + visibility: hidden
+        set(dataFaders, { opacity: 0 })
+        dataFaders.forEach(el => (el.style.visibility = 'hidden'))
+      }
 
-window.onpageshow = (event) => {
-  if (event.persisted) {
-    const f = document.querySelector('#fader')
-    if (f) {
-      gsap.to(f, { duration: 0.35, autoAlpha: 0 })
-    }
+      // Clear all opacity/transform issues
+      clearProps(document.body, ['opacity'])
+      document.body.classList.remove('unloaded')
 
-    const dataFaders = document.querySelectorAll('[data-fader]')
-    if (dataFaders.length) {
-      gsap.to(dataFaders, { duration: 0.35, autoAlpha: 0 })
-    }
+      // Ensure navigation is visible
+      const $nav = Dom.find('header[data-nav]')
+      if ($nav) clearProps($nav, ['opacity', 'transform'])
 
-    gsap.set(document.body, { clearProps: 'opacity' })
+      // Ensure main is visible
+      const $main = Dom.find('main')
+      if ($main) clearProps($main, ['opacity', 'transform'])
 
-    // check that navigation is visible
-    const $nav = Dom.find('header[data-nav]')
-    gsap.set($nav, { clearProps: 'opacity' })
-
-    // check that main is visible
-    const $main = Dom.find('main')
-    gsap.set($main, { clearProps: 'opacity' })
+      // Ensure footer is visible
+      const $footer = Dom.find('footer')
+      if ($footer) clearProps($footer, ['opacity', 'transform'])
+    }
 
-    // check that footer is visible
-    const $footer = Dom.find('footer')
-    gsap.set($footer, { clearProps: 'opacity' })
+    // Execute immediately for bfcache
+    if (event.persisted) {
+      fixVisibility()
+    } else if (hasHash) {
+      // For hash navigation, delay slightly to ensure it runs after initialization attempts
+      setTimeout(fixVisibility, 100)
+      // Also run again after a longer delay as a failsafe
+      setTimeout(fixVisibility, 500)
+    }
   }
 }
 
@@ -58,28 +77,42 @@ const DEFAULT_OPTIONS = {
     'iframe', // , 'video'?
   ],
 
+  breakpointConfig: {
+    breakpoints: [
+      'iphone',
+      'mobile',
+      'ipad_portrait',
+      'ipad_landscape',
+      'desktop_md',
+      'desktop_lg',
+      'desktop_xl',
+    ],
+  },
+
   bindScroll: true,
   bindResize: true,
 
   // Big Sur + Safari 14 is now trying to display webp, but fails intermittently
-  disableWebpSafari: true,
+  disableWebpSafari: false,
 
   faderOpts: {
     fadeIn: (callback = () => {}) => {
       const fader = document.querySelector('#fader')
-      gsap.to(fader, {
-        opacity: 0,
-        ease: 'power1.inOut',
-        delay: 0,
-        duration: 0.65,
-        onComplete: () => {
-          if (window.bfTO) {
-            clearTimeout(window.bfTO)
-          }
-          gsap.set(fader, { display: 'none' })
-          document.body.classList.remove('unloaded')
-          callback()
-        },
+      if (!fader) {
+        if (window.bfTO) {
+          clearTimeout(window.bfTO)
+        }
+        document.body.classList.remove('unloaded')
+        callback()
+        return
+      }
+
+      animate(fader, { opacity: 0 }, { duration: 0.65 }).finished.then(() => {
+        if (window.bfTO) {
+          clearTimeout(window.bfTO)
+        }
+        document.body.classList.remove('unloaded')
+        callback()
       })
     },
   },
@@ -107,16 +140,26 @@ export default class Application {
     this.position = {
       top: 0,
       left: 0,
+      lastTop: 0,
+      lastLeft: 0,
     }
 
     this.state = {
       revealed: false,
       forcedScroll: false,
+      scrollDirection: null,
     }
 
+    // Special handling for breakpointConfig to avoid array merging
+    const breakpointConfig = opts.breakpointConfig
+    delete opts.breakpointConfig
+
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
-    this.focusableSelectors = this.opts.focusableSelectors
 
+    // Restore breakpointConfig, using provided config or default
+    this.opts.breakpointConfig = breakpointConfig || DEFAULT_OPTIONS.breakpointConfig
+
+    this.focusableSelectors = this.opts.focusableSelectors
     this.featureTests = new FeatureTests(this, this.opts.featureTests)
 
     if (typeof this.opts.breakpointConfig === 'object') {
@@ -142,35 +185,20 @@ export default class Application {
 
     this.PREFERS_REDUCED_MOTION = prefersReducedMotion()
     if (this.PREFERS_REDUCED_MOTION && this.opts.respectReducedMotion) {
-      gsap.globalTimeline.timeScale(200)
+      // Motion respects prefers-reduced-motion automatically
       document.documentElement.classList.add('prefers-reduced-motion')
     }
-    window.addEventListener(
-      Events.BREAKPOINT_CHANGE,
-      this.onBreakpointChanged.bind(this)
-    )
+    window.addEventListener(Events.BREAKPOINT_CHANGE, this.onBreakpointChanged.bind(this))
 
-    this.beforeInitializedEvent = new window.CustomEvent(
-      Events.APPLICATION_PRELUDIUM,
-      this
-    )
-    this.initializedEvent = new window.CustomEvent(
-      Events.APPLICATION_INITIALIZED,
-      this
-    )
+    this.beforeInitializedEvent = new window.CustomEvent(Events.APPLICATION_PRELUDIUM, this)
+    this.initializedEvent = new window.CustomEvent(Events.APPLICATION_INITIALIZED, this)
     this.readyEvent = new window.CustomEvent(Events.APPLICATION_READY, this)
-    this.revealedEvent = new window.CustomEvent(
-      Events.APPLICATION_REVEALED,
-      this
-    )
+    this.revealedEvent = new window.CustomEvent(Events.APPLICATION_REVEALED, this)
 
     /**
      * Grab common events and defer
      */
-    document.addEventListener(
-      'visibilitychange',
-      this.onVisibilityChange.bind(this)
-    )
+    document.addEventListener('visibilitychange', this.onVisibilityChange.bind(this))
     window.addEventListener('orientationchange', this.onResize.bind(this), {
       capture: false,
       passive: true,
@@ -224,13 +252,10 @@ export default class Application {
         break
 
       case 'safari':
-        this._zoomSVG = document.createElementNS(
-          'http://www.w3.org/2000/svg',
-          'svg'
-        )
+        this._zoomSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
         this._zoomSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
         this._zoomSVG.setAttribute('version', '1.1')
-        gsap.set(this._zoomSVG, { display: 'none' })
+        set(this._zoomSVG, { display: 'none' })
         document.body.appendChild(this._zoomSVG)
         this._initialZoom = this._zoomSVG.currentScale
         break
@@ -271,17 +296,13 @@ export default class Application {
       default:
         if ([1, -1].indexOf(dprDelta) === -1) {
           if (dimsChanged) {
-            this.size.zoom =
-              1 + (zoom.calculate(this.browser) - this._initialZoom)
+            this.size.zoom = 1 + (zoom.calculate(this.browser) - this._initialZoom)
             if (this.size.zoom === 0) {
               this.size.zoom = 1
             }
           }
         } else {
-          this._initialZoom = Math.min(
-            Math.max(this._initialZoom - dprDelta, 1),
-            2
-          )
+          this._initialZoom = Math.min(Math.max(this._initialZoom - dprDelta, 1), 2)
         }
     }
 
@@ -312,7 +333,7 @@ export default class Application {
     if (!Object.prototype.hasOwnProperty.call(this.callbacks, type)) {
       return
     }
-    this.callbacks[type].forEach((cb) => cb(this))
+    this.callbacks[type].forEach(cb => cb(this))
   }
 
   /**
@@ -347,9 +368,9 @@ export default class Application {
     this._scrollPaddedElements = [document.body, ...extraPaddedElements]
     window.dispatchEvent(ev)
     this.SCROLL_LOCKED = true
-    gsap.set(document.body, { overflow: 'hidden' })
-    gsap.set(this._scrollPaddedElements, {
-      paddingRight: currentScrollbarWidth,
+    set(document.body, { overflow: 'hidden' })
+    set(this._scrollPaddedElements, {
+      paddingRight: `${currentScrollbarWidth}px`,
     })
     document.addEventListener('touchmove', this.scrollVoid, false)
   }
@@ -361,8 +382,8 @@ export default class Application {
     const ev = new window.CustomEvent(Events.APPLICATION_SCROLL_RELEASED, this)
     window.dispatchEvent(ev)
     this.SCROLL_LOCKED = false
-    gsap.set(document.body, { overflow: defaultOverflow })
-    gsap.set(this._scrollPaddedElements, { clearProps: 'paddingRight' })
+    set(document.body, { overflow: defaultOverflow })
+    clearProps(this._scrollPaddedElements, ['paddingRight'])
     document.removeEventListener('touchmove', this.scrollVoid, false)
   }
 
@@ -373,36 +394,74 @@ export default class Application {
    * @param {*} time
    * @param {*} emitEvents
    */
-  scrollTo(target, time = 0.8, emitEvents = true, ease = 'sine.inOut') {
-    let scrollToData
-    const forcedScrollEventStart = new window.CustomEvent(
-      Events.APPLICATION_FORCED_SCROLL_START
-    )
+  scrollTo(target, time = 0.8, emitEvents = true, ease = 'easeInOut') {
+    const forcedScrollEventStart = new window.CustomEvent(Events.APPLICATION_FORCED_SCROLL_START)
     this.state.forcedScroll = true
     if (emitEvents) {
       window.dispatchEvent(forcedScrollEventStart)
     }
 
-    if (typeof target === 'object') {
-      scrollToData = target
-    } else {
-      scrollToData = { y: target, autoKill: false }
+    // Calculate target position
+    let targetY = 0
+    if (typeof target === 'number') {
+      // Handle number
+      targetY = target
+    } else if (typeof target === 'string') {
+      // Handle selector string
+      const el = document.querySelector(target)
+      if (el) {
+        targetY = el.getBoundingClientRect().top + window.pageYOffset
+      }
+    } else if (target instanceof Element) {
+      // Handle DOM element
+      targetY = target.getBoundingClientRect().top + window.pageYOffset
+    } else if (typeof target === 'object') {
+      // Handle object format: {y: "#someID", offsetY: 50} or {y: element, offsetY: 50}
+      const yValue = target.y
+      if (yValue instanceof Element) {
+        targetY = yValue.getBoundingClientRect().top + window.pageYOffset
+      } else if (typeof yValue === 'string') {
+        const el = document.querySelector(yValue)
+        if (el) {
+          targetY = el.getBoundingClientRect().top + window.pageYOffset
+        }
+      } else if (typeof yValue === 'number') {
+        targetY = yValue
+      }
+      // Add offset if provided
+      if (target.offsetY) {
+        targetY += target.offsetY
+      }
     }
 
-    gsap.to(window, {
-      duration: time,
-      scrollTo: scrollToData,
-      onComplete: () => {
-        const forcedScrollEventEnd = new window.CustomEvent(
-          Events.APPLICATION_FORCED_SCROLL_END
-        )
+    // Animate scroll using requestAnimationFrame
+    const startY = window.pageYOffset
+    const distance = targetY - startY
+    const duration = time * 1000 // convert to milliseconds
+    const startTime = performance.now()
+
+    const easeInOut = t => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t)
+
+    const animateScroll = currentTime => {
+      const elapsed = currentTime - startTime
+      const progress = Math.min(elapsed / duration, 1)
+      const eased = easeInOut(progress)
+      const currentY = startY + distance * eased
+
+      window.scrollTo(0, currentY)
+
+      if (progress < 1) {
+        requestAnimationFrame(animateScroll)
+      } else {
+        const forcedScrollEventEnd = new window.CustomEvent(Events.APPLICATION_FORCED_SCROLL_END)
         if (emitEvents) {
           window.dispatchEvent(forcedScrollEventEnd)
           requestAnimationFrame(() => (this.state.forcedScroll = false))
         }
-      },
-      ease,
-    })
+      }
+    }
+
+    requestAnimationFrame(animateScroll)
   }
 
   hardScrollToTop() {
@@ -458,7 +517,6 @@ export default class Application {
   hacks() {
     if (this.opts.disableWebpSafari) {
       if (this.browser === 'safari') {
-        console.debug('==> disable webp')
         const webps = Dom.all('source[type="image/webp"]')
         for (let i = 0; i < webps.length; i += 1) {
           webps[i].remove()
@@ -547,22 +605,10 @@ export default class Application {
     this.size.initialOuterWidth = window.outerWidth
     this.size.scrollHeight = document.body.scrollHeight
 
-    root.style.setProperty(
-      '--vp-initial-inner-h',
-      `${this.size.initialInnerHeight}px`
-    )
-    root.style.setProperty(
-      '--vp-initial-outer-h',
-      `${this.size.initialOuterHeight}px`
-    )
-    root.style.setProperty(
-      '--vp-initial-inner-w',
-      `${this.size.initialInnerWidth}px`
-    )
-    root.style.setProperty(
-      '--vp-initial-outer-w',
-      `${this.size.initialOuterWidth}px`
-    )
+    root.style.setProperty('--vp-initial-inner-h', `${this.size.initialInnerHeight}px`)
+    root.style.setProperty('--vp-initial-outer-h', `${this.size.initialOuterHeight}px`)
+    root.style.setProperty('--vp-initial-inner-w', `${this.size.initialInnerWidth}px`)
+    root.style.setProperty('--vp-initial-outer-w', `${this.size.initialOuterWidth}px`)
     root.style.setProperty('--ec-zoom', `${this.size.zoom}`)
     root.style.setProperty('--scroll-h', `${this.size.scrollHeight}px`)
 
@@ -594,9 +640,7 @@ export default class Application {
    */
   setvh100() {
     const root = document.querySelector(':root')
-    const height = this.featureTests.results.ios
-      ? screen.height
-      : window.innerHeight
+    const height = this.featureTests.results.ios ? screen.height : window.innerHeight
     root.style.setProperty('--vp-100vh', `${height}px`)
     root.style.setProperty('--vp-1vh', `${height * 0.01}px`)
   }
@@ -662,10 +706,33 @@ export default class Application {
       return
     }
 
+    // Store previous position
+    this.position.lastTop = this.position.top
+    this.position.lastLeft = this.position.left
+
+    // Get current position
     this.position.top = window.pageYOffset
     this.position.left = window.pageXOffset
 
-    const evt = new CustomEvent(Events.APPLICATION_SCROLL, e)
+    // Determine scroll direction
+    if (this.position.top > this.position.lastTop) {
+      this.state.scrollDirection = 'down'
+    } else if (this.position.top < this.position.lastTop) {
+      this.state.scrollDirection = 'up'
+    } else if (this.position.left > this.position.lastLeft) {
+      this.state.scrollDirection = 'right'
+    } else if (this.position.left < this.position.lastLeft) {
+      this.state.scrollDirection = 'left'
+    }
+
+    // Create an enhanced event object with additional data
+    const detail = {
+      scrollDirection: this.state.scrollDirection,
+      position: this.position,
+      originalEvent: e,
+    }
+
+    const evt = new CustomEvent(Events.APPLICATION_SCROLL, { detail })
     window.dispatchEvent(evt)
   }
 
@@ -712,18 +779,14 @@ export default class Application {
     this.debugOverlay.addEventListener('click', this.toggleDebug.bind(this))
 
     const userAgent = this.debugOverlay.querySelector('.user-agent')
-    gsap.set(userAgent, { display: 'none' })
+    set(userAgent, { display: 'none' })
     userAgent.innerHTML = `<b>&rarr; ${this.userAgent}</b> >> <span>KOPIER</span>`
 
     const span = userAgent.querySelector('span')
     const windowWidth =
-      window.innerWidth ||
-      document.documentElement.clientWidth ||
-      document.body.clientWidth
+      window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
     const windowHeight =
-      window.innerHeight ||
-      document.documentElement.clientHeight ||
-      document.body.clientHeight
+      window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
 
     span.addEventListener('click', () => {
       const copyText = userAgent.querySelector('b')
@@ -748,7 +811,6 @@ ${JSON.stringify(this.featureTests.results, undefined, 2)}
   }
 
   toggleDebug() {
-    const tl = gsap.timeline()
     const breakpoint = this.debugOverlay.querySelector('.breakpoint')
     const userAgent = this.debugOverlay.querySelector('.user-agent')
 
@@ -761,28 +823,35 @@ ${JSON.stringify(this.featureTests.results, undefined, 2)}
     switch (this.debugType) {
       case 0:
         // hide all except branding
-        tl.to([breakpoint, userAgent], { duration: 0.3, autoAlpha: 0 })
-          .to([breakpoint, userAgent], { duration: 0.7, width: 0 })
-          .call(() => {
-            gsap.set([breakpoint, userAgent], { display: 'none' })
+        // First fade out (autoAlpha: 0 = opacity: 0 + visibility: hidden)
+        animate([breakpoint, userAgent], { opacity: 0 }, { duration: 0.3 }).finished.then(() => {
+          ;[breakpoint, userAgent].forEach(el => (el.style.visibility = 'hidden'))
+          // Then collapse width
+          animate([breakpoint, userAgent], { width: 0 }, { duration: 0.7 }).finished.then(() => {
+            set([breakpoint, userAgent], { display: 'none' })
           })
+        })
         break
 
       case 1:
-        //
-        gsap.set(breakpoint, { width: 'auto', display: 'block' })
-        tl.from(breakpoint, { duration: 0.7, width: 0 }).to(breakpoint, {
-          duration: 0.3,
-          autoAlpha: 1,
+        // Show breakpoint
+        set(breakpoint, { width: 'auto', display: 'block' })
+        breakpoint.style.visibility = 'visible'
+        // Animate from width: 0 to auto
+        animate(breakpoint, { width: [0, 'auto'] }, { duration: 0.7 }).finished.then(() => {
+          // Then fade in (autoAlpha: 1 = opacity: 1 + visibility: visible)
+          animate(breakpoint, { opacity: 1 }, { duration: 0.3 })
         })
         break
 
       case 2:
-        //
-        gsap.set(userAgent, { width: 'auto', display: 'block' })
-        tl.from(userAgent, { duration: 0.7, width: 0 }).to(userAgent, {
-          duration: 0.3,
-          autoAlpha: 1,
+        // Show userAgent
+        set(userAgent, { width: 'auto', display: 'block' })
+        userAgent.style.visibility = 'visible'
+        // Animate from width: 0 to auto
+        animate(userAgent, { width: [0, 'auto'] }, { duration: 0.7 }).finished.then(() => {
+          // Then fade in (autoAlpha: 1 = opacity: 1 + visibility: visible)
+          animate(userAgent, { opacity: 1 }, { duration: 0.3 })
         })
         break
 
@@ -795,7 +864,7 @@ ${JSON.stringify(this.featureTests.results, undefined, 2)}
    * CTRL-G to show grid overlay
    */
   setupGridoverlay() {
-    const gridKeyPressed = (e) => {
+    const gridKeyPressed = e => {
       if (e.keyCode === 71 && e.ctrlKey) {
         const guides = Dom.find('.dbg-grid')
         const cols = Dom.all(guides, 'b')
@@ -805,25 +874,34 @@ ${JSON.stringify(this.featureTests.results, undefined, 2)}
         }
 
         if (Dom.hasClass(guides, 'visible')) {
-          gsap.set(cols, { width: 'auto' })
-          gsap.to(cols, {
-            duration: 0.35,
-            width: 0,
-            stagger: 0.02,
-            ease: 'sine.inOut',
-            onComplete: () => {
-              guides.classList.toggle('visible')
+          set(cols, { width: 'auto' })
+          animate(
+            cols,
+            {
+              width: 0,
             },
+            {
+              duration: 0.35,
+              delay: stagger(0.02),
+              ease: 'easeInOut',
+            }
+          ).finished.then(() => {
+            guides.classList.toggle('visible')
           })
         } else {
-          gsap.set(cols, { width: 0 })
+          set(cols, { width: 0 })
           guides.classList.toggle('visible')
-          gsap.to(cols, {
-            duration: 0.35,
-            width: '100%',
-            stagger: 0.02,
-            ease: 'sine.inOut',
-          })
+          animate(
+            cols,
+            {
+              width: '100%',
+            },
+            {
+              duration: 0.35,
+              delay: stagger(0.02),
+              ease: 'easeInOut',
+            }
+          )
         }
       }
     }