@brandocms/jupiter 3.54.1 → 3.54.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brandocms/jupiter",
-  "version": "3.54.1",
+  "version": "3.54.2",
   "description": "Frontend helpers.",
   "author": "Univers/Twined",
   "license": "UNLICENSED",

package/src/modules/Application/index.js

@@ -12,10 +12,10 @@ import Dom from '../Dom'
 
 gsap.registerPlugin(ScrollToPlugin)
 gsap.defaults({
-  ease: 'sine.out'
+  ease: 'sine.out',
 })
 
-window.onpageshow = event => {
+window.onpageshow = (event) => {
   if (event.persisted) {
     const f = document.querySelector('#fader')
     if (f) {
@@ -46,7 +46,7 @@ window.onpageshow = event => {
 const DEFAULT_OPTIONS = {
   respectReducedMotion: true,
   featureTests: {
-    touch: true
+    touch: true,
   },
 
   focusableSelectors: [
@@ -55,7 +55,7 @@ const DEFAULT_OPTIONS = {
     'select',
     'button',
     'textarea',
-    'iframe' // , 'video'?
+    'iframe', // , 'video'?
   ],
 
   bindScroll: true,
@@ -79,10 +79,10 @@ const DEFAULT_OPTIONS = {
           gsap.set(fader, { display: 'none' })
           document.body.classList.remove('unloaded')
           callback()
-        }
+        },
       })
-    }
-  }
+    },
+  },
 }
 
 export default class Application {
@@ -101,16 +101,17 @@ export default class Application {
       initialOuterHeight: 0,
       initialInnerWidth: 0,
       initialOuterWidth: 0,
-      zoom: 1
+      zoom: 1,
     }
 
     this.position = {
       top: 0,
-      left: 0
+      left: 0,
     }
 
     this.state = {
-      revealed: false
+      revealed: false,
+      forcedScroll: false,
     }
 
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
@@ -144,33 +145,48 @@ export default class Application {
       gsap.globalTimeline.timeScale(200)
       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
+      passive: true,
     })
 
     if (opts.bindScroll) {
       window.addEventListener('scroll', rafCallback(this.onScroll.bind(this)), {
         capture: false,
-        passive: true
+        passive: true,
       })
     }
 
     if (opts.bindResize) {
       window.addEventListener('resize', rafCallback(this.onResize.bind(this)), {
         capture: false,
-        passive: true
+        passive: true,
       })
     }
   }
@@ -208,7 +224,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' })
@@ -252,13 +271,17 @@ 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
+          )
         }
     }
 
@@ -289,7 +312,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))
   }
 
   /**
@@ -325,7 +348,9 @@ export default class Application {
     window.dispatchEvent(ev)
     this.SCROLL_LOCKED = true
     gsap.set(document.body, { overflow: 'hidden' })
-    gsap.set(this._scrollPaddedElements, { paddingRight: currentScrollbarWidth })
+    gsap.set(this._scrollPaddedElements, {
+      paddingRight: currentScrollbarWidth,
+    })
     document.addEventListener('touchmove', this.scrollVoid, false)
   }
 
@@ -350,7 +375,10 @@ export default class Application {
    */
   scrollTo(target, time = 0.8, emitEvents = true, ease = 'sine.inOut') {
     let scrollToData
-    const forcedScrollEventStart = new window.CustomEvent(Events.APPLICATION_FORCED_SCROLL_START)
+    const forcedScrollEventStart = new window.CustomEvent(
+      Events.APPLICATION_FORCED_SCROLL_START
+    )
+    this.state.forcedScroll = true
     if (emitEvents) {
       window.dispatchEvent(forcedScrollEventStart)
     }
@@ -365,12 +393,15 @@ export default class Application {
       duration: time,
       scrollTo: scrollToData,
       onComplete: () => {
-        const forcedScrollEventEnd = new window.CustomEvent(Events.APPLICATION_FORCED_SCROLL_END)
+        const forcedScrollEventEnd = new window.CustomEvent(
+          Events.APPLICATION_FORCED_SCROLL_END
+        )
         if (emitEvents) {
           window.dispatchEvent(forcedScrollEventEnd)
+          requestAnimationFrame(() => (this.state.forcedScroll = false))
         }
       },
-      ease
+      ease,
     })
   }
 
@@ -516,10 +547,22 @@ 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`)
 
@@ -551,7 +594,9 @@ 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`)
   }
@@ -603,7 +648,7 @@ export default class Application {
     this.setFontBaseVw()
 
     const evt = new CustomEvent(Events.APPLICATION_RESIZE, {
-      detail: { widthChanged, heightChanged }
+      detail: { widthChanged, heightChanged },
     })
     window.dispatchEvent(evt)
   }
@@ -672,9 +717,13 @@ export default class Application {
 
     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')
@@ -724,7 +773,7 @@ ${JSON.stringify(this.featureTests.results, undefined, 2)}
         gsap.set(breakpoint, { width: 'auto', display: 'block' })
         tl.from(breakpoint, { duration: 0.7, width: 0 }).to(breakpoint, {
           duration: 0.3,
-          autoAlpha: 1
+          autoAlpha: 1,
         })
         break
 
@@ -733,7 +782,7 @@ ${JSON.stringify(this.featureTests.results, undefined, 2)}
         gsap.set(userAgent, { width: 'auto', display: 'block' })
         tl.from(userAgent, { duration: 0.7, width: 0 }).to(userAgent, {
           duration: 0.3,
-          autoAlpha: 1
+          autoAlpha: 1,
         })
         break
 
@@ -746,7 +795,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')
@@ -764,7 +813,7 @@ ${JSON.stringify(this.featureTests.results, undefined, 2)}
             ease: 'sine.inOut',
             onComplete: () => {
               guides.classList.toggle('visible')
-            }
+            },
           })
         } else {
           gsap.set(cols, { width: 0 })
@@ -773,7 +822,7 @@ ${JSON.stringify(this.featureTests.results, undefined, 2)}
             duration: 0.35,
             width: '100%',
             stagger: 0.02,
-            ease: 'sine.inOut'
+            ease: 'sine.inOut',
           })
         }
       }

package/src/modules/Dataloader/index.js

@@ -42,7 +42,7 @@ const DEFAULT_OPTIONS = {
   page: 0,
   loaderParam: {},
   filter: '',
-  onFetch: dataloader => {
+  onFetch: (dataloader) => {
     /**
      * Called after fetch complete. Do your DOM manipulation here
      *
@@ -53,7 +53,7 @@ const DEFAULT_OPTIONS = {
      *    new EqualHeightImages(dataloader.app, {}, dataloader.$canvasEl)
      *    mw.ready()
      */
-  }
+  },
 }
 
 export default class Dataloader {
@@ -71,12 +71,12 @@ export default class Dataloader {
   }
 
   static replaceInnerHTML(el, url) {
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
       fetch(url)
-        .then(res => {
+        .then((res) => {
           return res.text()
         })
-        .then(html => {
+        .then((html) => {
           el.innerHTML = html
           return resolve(el)
         })
@@ -101,7 +101,7 @@ export default class Dataloader {
     this.baseURL = this.$el.dataset.loader
     this.$paramEls = Dom.all(this.$el, '[data-loader-param]')
 
-    this.$paramEls.forEach($paramEl => {
+    this.$paramEls.forEach(($paramEl) => {
       $paramEl.addEventListener('click', this.onParam.bind(this))
     })
 
@@ -119,7 +119,10 @@ export default class Dataloader {
     }
 
     if (this.$filterInput) {
-      this.$filterInput.addEventListener('input', this.debounce(this.onFilterInput.bind(this)))
+      this.$filterInput.addEventListener(
+        'input',
+        this.debounce(this.onFilterInput.bind(this))
+      )
     }
   }
 
@@ -156,14 +159,15 @@ export default class Dataloader {
         // if already selected, clear it
         const key = e.currentTarget.dataset.loaderParamKey || 'defaultParam'
         if (multiVals) {
-          this.opts.loaderParam[key] = this.opts.loaderParam[key].filter(val => {
-            return val !== e.currentTarget.dataset.loaderParam
-          })
+          this.opts.loaderParam[key] = this.opts.loaderParam[key].filter(
+            (val) => {
+              return val !== e.currentTarget.dataset.loaderParam
+            }
+          )
         } else {
           delete this.opts.loaderParam[key]
         }
         e.currentTarget.removeAttribute('data-loader-param-selected')
-        console.log(this.opts.loaderParam[key])
       } else {
         if (multiVals) {
           const key = e.currentTarget.dataset.loaderParamKey || 'defaultParam'
@@ -174,7 +178,7 @@ export default class Dataloader {
           e.currentTarget.setAttribute('data-loader-param-selected', '')
         } else {
           const paramKey = e.currentTarget.dataset.loaderParamKey
-          this.$paramEls.forEach($paramEl => {
+          this.$paramEls.forEach(($paramEl) => {
             if (paramKey) {
               if ($paramEl.dataset.loaderParamKey === paramKey) {
                 $paramEl.removeAttribute('data-loader-param-selected')
@@ -201,12 +205,12 @@ export default class Dataloader {
       `${this.baseURL}/${defaultParam ? defaultParam + '/' : ''}${this.opts.page}?` +
         new URLSearchParams({ filter, ...otherParams })
     )
-      .then(res => {
+      .then((res) => {
         this.status = res.headers.get('jpt-dataloader') || 'available'
         this.updateButton()
         return res.text()
       })
-      .then(html => {
+      .then((html) => {
         if (addEntries) {
           this.$canvasEl.innerHTML += html
         } else {

package/src/modules/FixedHeader/index.js

@@ -29,16 +29,16 @@ import * as Events from '../../events'
 import Dom from '../Dom'
 
 const DEFAULT_EVENTS = {
-  onPin: h => {
+  onPin: (h) => {
     gsap.to(h.el, {
       duration: 0.35,
       yPercent: '0',
       ease: 'sine.out',
-      autoRound: true
+      autoRound: true,
     })
   },
 
-  onUnpin: h => {
+  onUnpin: (h) => {
     h._hiding = true
     gsap.to(h.el, {
       duration: 0.25,
@@ -47,50 +47,50 @@ const DEFAULT_EVENTS = {
       autoRound: true,
       onComplete: () => {
         h._hiding = false
-      }
+      },
     })
   },
 
-  onAltBg: h => {
+  onAltBg: (h) => {
     if (h.opts.altBgColor) {
       gsap.to(h.el, {
         duration: 0.2,
-        backgroundColor: h.opts.altBgColor
+        backgroundColor: h.opts.altBgColor,
       })
     }
   },
 
-  onNotAltBg: h => {
+  onNotAltBg: (h) => {
     if (h.opts.regBgColor) {
       gsap.to(h.el, {
         duration: 0.4,
-        backgroundColor: h.opts.regBgColor
+        backgroundColor: h.opts.regBgColor,
       })
     }
   },
 
   // eslint-disable-next-line no-unused-vars
-  onSmall: h => {},
+  onSmall: (h) => {},
   // eslint-disable-next-line no-unused-vars
-  onNotSmall: h => {},
+  onNotSmall: (h) => {},
   // eslint-disable-next-line no-unused-vars
-  onTop: h => {},
+  onTop: (h) => {},
   // eslint-disable-next-line no-unused-vars
-  onNotTop: h => {},
+  onNotTop: (h) => {},
   // eslint-disable-next-line no-unused-vars
-  onBottom: h => {},
+  onBottom: (h) => {},
   // eslint-disable-next-line no-unused-vars
-  onNotBottom: h => {},
+  onNotBottom: (h) => {},
   // eslint-disable-next-line no-unused-vars
-  onMobileMenuOpen: h => {},
+  onMobileMenuOpen: (h) => {},
   // eslint-disable-next-line no-unused-vars
-  onMobileMenuClose: h => {},
+  onMobileMenuClose: (h) => {},
   // eslint-disable-next-line no-unused-vars
-  onIntersect: h => {},
-  onOutline: h => {
+  onIntersect: (h) => {},
+  onOutline: (h) => {
     h.preventUnpin = true
     h.pin()
-  }
+  },
 }
 
 const DEFAULT_OPTIONS = {
@@ -98,18 +98,19 @@ const DEFAULT_OPTIONS = {
   on: Events.APPLICATION_REVEALED,
   unpinOnForcedScrollStart: true,
   pinOnForcedScrollEnd: true,
+  ignoreForcedScroll: false,
   rafScroll: true,
 
   default: {
     unPinOnResize: true,
     canvas: window,
     intersects: null,
-    beforeEnter: h => {
+    beforeEnter: (h) => {
       const timeline = gsap.timeline()
       timeline.set(h.el, { yPercent: -100 }).set(h.lis, { opacity: 0 })
     },
 
-    enter: h => {
+    enter: (h) => {
       const timeline = gsap.timeline()
       timeline
         .to(h.el, {
@@ -117,7 +118,7 @@ const DEFAULT_OPTIONS = {
           yPercent: 0,
           delay: h.opts.enterDelay,
           ease: 'power3.out',
-          autoRound: true
+          autoRound: true,
         })
         .staggerTo(h.lis, 0.8, { opacity: 1, ease: 'sine.in' }, 0.1, '-=1')
     },
@@ -129,8 +130,8 @@ const DEFAULT_OPTIONS = {
     offsetBg: 200, // how far down before changing backgroundcolor
     regBgColor: null,
     altBgColor: null,
-    ...DEFAULT_EVENTS
-  }
+    ...DEFAULT_EVENTS,
+  },
 }
 
 export default class FixedHeader {
@@ -223,7 +224,11 @@ export default class FixedHeader {
     }
 
     if (this.mainOpts.pinOnForcedScrollEnd) {
-      window.addEventListener(Events.APPLICATION_FORCED_SCROLL_END, this.pin.bind(this), false)
+      window.addEventListener(
+        Events.APPLICATION_FORCED_SCROLL_END,
+        this.pin.bind(this),
+        false
+      )
     }
 
     this.app.registerCallback(Events.APPLICATION_REVEALED, () => {
@@ -234,11 +239,14 @@ export default class FixedHeader {
 
       window.addEventListener(SCROLL_EVENT, this.redraw.bind(this), {
         capture: false,
-        passive: true
+        passive: true,
       })
     })
 
-    this.app.registerCallback(Events.APPLICATION_READY, this.unpinIfScrolled.bind(this))
+    this.app.registerCallback(
+      Events.APPLICATION_READY,
+      this.unpinIfScrolled.bind(this)
+    )
 
     this.preflight()
 
@@ -248,7 +256,11 @@ export default class FixedHeader {
 
     // DON'T unpin on iOS since this will unpin when bottom menu bar appears on scrolling upwards!
     if (this.opts.unPinOnResize && !this.app.featureTests.results.ios) {
-      window.addEventListener(Events.APPLICATION_RESIZE, this.setResizeTimer.bind(this), false)
+      window.addEventListener(
+        Events.APPLICATION_RESIZE,
+        this.setResizeTimer.bind(this),
+        false
+      )
     }
 
     this.opts.beforeEnter(this)
@@ -367,7 +379,10 @@ export default class FixedHeader {
   }
 
   checkBot(force) {
-    if (this.currentScrollY + this.getViewportHeight() >= this.getScrollerHeight()) {
+    if (
+      this.currentScrollY + this.getViewportHeight() >=
+      this.getScrollerHeight()
+    ) {
       if (force) {
         this.bottom()
       } else if (!this._bottom) {
@@ -411,7 +426,10 @@ export default class FixedHeader {
 
     /* content-visibility: auto may CHANGE the scrollheight of the document
     as we roll down/up. Try to avoid false positives here */
-    if (this.currentScrollHeight !== this.lastKnownScrollHeight && !this._firstLoad) {
+    if (
+      this.currentScrollHeight !== this.lastKnownScrollHeight &&
+      !this._firstLoad
+    ) {
       this.lastKnownScrollY = this.currentScrollY
       this.lastKnownScrollHeight = this.currentScrollHeight
       return
@@ -421,7 +439,12 @@ export default class FixedHeader {
     this.checkBg(false)
     this.checkTop(false)
     this.checkBot(false)
-    this.checkPin(false, toleranceExceeded)
+
+    if (this.mainOpts.ignoreForcedScroll && this.app.state.forcedScroll) {
+      // ignore forced scroll
+    } else {
+      this.checkPin(false, toleranceExceeded)
+    }
 
     this.lastKnownScrollY = this.currentScrollY
     this.lastKnownScrollHeight = this.currentScrollHeight
@@ -526,7 +549,8 @@ export default class FixedHeader {
   isOutOfBounds() {
     const pastTop = this.currentScrollY < 0
     const pastBottom =
-      this.currentScrollY + this.getScrollerPhysicalHeight() > this.getScrollerHeight()
+      this.currentScrollY + this.getScrollerPhysicalHeight() >
+      this.getScrollerHeight()
 
     return pastTop || pastBottom
   }
@@ -559,7 +583,9 @@ export default class FixedHeader {
 
   getViewportHeight() {
     return (
-      window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+      window.innerHeight ||
+      document.documentElement.clientHeight ||
+      document.body.clientHeight
     )
   }
 
@@ -578,11 +604,18 @@ export default class FixedHeader {
     if (this.opts.canvas.scrollTop !== undefined) {
       return this.opts.canvas.scrollTop
     }
-    return (document.documentElement || document.body.parentNode || document.body).scrollTop
+    return (
+      document.documentElement ||
+      document.body.parentNode ||
+      document.body
+    ).scrollTop
   }
 
   toleranceExceeded() {
-    return Math.abs(this.currentScrollY - this.lastKnownScrollY) >= this.opts.tolerance
+    return (
+      Math.abs(this.currentScrollY - this.lastKnownScrollY) >=
+      this.opts.tolerance
+    )
   }
 
   _getOptionsForSection(section, opts) {
@@ -601,8 +634,14 @@ export default class FixedHeader {
   }
 
   _bindMobileMenuListeners() {
-    window.addEventListener('APPLICATION:MOBILE_MENU:OPEN', this._onMobileMenuOpen.bind(this))
-    window.addEventListener('APPLICATION:MOBILE_MENU:CLOSED', this._onMobileMenuClose.bind(this))
+    window.addEventListener(
+      'APPLICATION:MOBILE_MENU:OPEN',
+      this._onMobileMenuOpen.bind(this)
+    )
+    window.addEventListener(
+      'APPLICATION:MOBILE_MENU:CLOSED',
+      this._onMobileMenuClose.bind(this)
+    )
   }
 
   _onMobileMenuOpen() {

package/src/modules/Lazyload/index.js

@@ -7,17 +7,17 @@ import * as Events from '../../events'
 const DEFAULT_OPTIONS = {
   revealIntersectionObserverConfig: {
     rootMargin: '0px 100px 0px 100px',
-    threshold: 0.0
+    threshold: 0.0,
   },
   loadIntersectionObserverConfig: {
     rootMargin: '850px 500px 850px 500px',
-    threshold: 0.0
+    threshold: 0.0,
   },
   useNativeLazyloadIfAvailable: true,
   mode: 'default',
   minSize: 40,
   updateSizes: true,
-  registerCallback: true
+  registerCallback: true,
 }
 
 export default class Lazyload {
@@ -49,16 +49,21 @@ export default class Lazyload {
     this.initializeSections()
 
     // if we have native lazyload, use it.
-    if ('loading' in HTMLImageElement.prototype && this.opts.useNativeLazyloadIfAvailable) {
+    if (
+      'loading' in HTMLImageElement.prototype &&
+      this.opts.useNativeLazyloadIfAvailable
+    ) {
       const lazyImages = document.querySelectorAll('[data-ll-image]')
-      lazyImages.forEach(img => {
+      lazyImages.forEach((img) => {
         img.setAttribute('loading', 'lazy')
         this.swapImage(img)
       })
 
       const lazyPictures = document.querySelectorAll('[data-ll-srcset]')
-      lazyPictures.forEach(picture => {
-        picture.querySelectorAll('img').forEach(img => img.setAttribute('loading', 'lazy'))
+      lazyPictures.forEach((picture) => {
+        picture
+          .querySelectorAll('img')
+          .forEach((img) => img.setAttribute('loading', 'lazy'))
         this.swapPicture(picture)
       })
 
@@ -98,7 +103,7 @@ export default class Lazyload {
     this.lazyPictures.forEach((picture, idx) => {
       if (setAttrs) {
         picture.setAttribute('data-ll-srcset-initialized', '')
-        picture.querySelectorAll('img:not([data-ll-loaded])').forEach(img => {
+        picture.querySelectorAll('img:not([data-ll-loaded])').forEach((img) => {
           img.setAttribute('data-ll-blurred', '')
           img.setAttribute('data-ll-idx', idx)
           img.style.setProperty('--ll-idx', idx)
@@ -108,6 +113,14 @@ export default class Lazyload {
     })
   }
 
+  forceLoad($container = document.body) {
+    const images = Dom.all($container, '[data-ll-image]')
+    images.forEach((img) => this.swapImage(img))
+
+    const pictures = Dom.all($container, '[data-ll-srcset]')
+    pictures.forEach((picture) => this.revealPicture(picture))
+  }
+
   initializeAutoSizes() {
     if (this.opts.updateSizes) {
       this.$autoSizesImages = Dom.all('[data-sizes="auto"]')
@@ -120,11 +133,11 @@ export default class Lazyload {
    * Set sizes attribute for all imgs with `data-sizes="auto"` and source within the <picture>
    */
   autoSizes() {
-    Array.from(this.$autoSizesImages).forEach(img => {
+    Array.from(this.$autoSizesImages).forEach((img) => {
       const width = this.getWidth(img)
       img.setAttribute('sizes', `${width}px`)
       if (img.parentNode) {
-        Array.from(Dom.all(img.parentNode, 'source')).forEach(source =>
+        Array.from(Dom.all(img.parentNode, 'source')).forEach((source) =>
           source.setAttribute('sizes', `${width}px`)
         )
       }
@@ -149,12 +162,12 @@ export default class Lazyload {
       const sectionObserver = (section, children) => {
         const imagesInSection = Dom.all(section, 'img')
         return new IntersectionObserver((entries, self) => {
-          entries.forEach(entry => {
+          entries.forEach((entry) => {
             if (entry.isIntersecting || entry.intersectionRatio > 0) {
               imagesAreLoaded(imagesInSection, true).then(() => {
                 dispatchElementEvent(section, Events.SECTION_LAZYLOADED)
               })
-              children.forEach(picture => {
+              children.forEach((picture) => {
                 this.loadPicture(picture)
                 this.loadObserver.unobserve(picture)
               })
@@ -164,7 +177,7 @@ export default class Lazyload {
         }, this.opts.intersectionObserverConfig)
       }
 
-      sections.forEach(section => {
+      sections.forEach((section) => {
         const children = section.querySelectorAll('picture')
         const obs = sectionObserver(section, children)
         obs.observe(section)
@@ -174,7 +187,7 @@ export default class Lazyload {
 
   // we load the picture a ways before it enters the viewport
   handleLoadEntries(elements) {
-    elements.forEach(item => {
+    elements.forEach((item) => {
       if (item.isIntersecting || item.intersectionRatio > 0) {
         const picture = item.target
         this.loadPicture(picture)
@@ -185,16 +198,19 @@ export default class Lazyload {
 
   // we reveal the picture when it enters the viewport
   handleRevealEntries(elements) {
-    const srcsetReadyObserver = new MutationObserver(mutations => {
-      mutations.forEach(record => {
-        if (record.type === 'attributes' && record.attributeName === 'data-ll-srcset-ready') {
+    const srcsetReadyObserver = new MutationObserver((mutations) => {
+      mutations.forEach((record) => {
+        if (
+          record.type === 'attributes' &&
+          record.attributeName === 'data-ll-srcset-ready'
+        ) {
           this.revealPicture(record.target)
           this.revealObserver.unobserve(record.target)
         }
       })
     })
 
-    elements.forEach(item => {
+    elements.forEach((item) => {
       if (item.isIntersecting || item.intersectionRatio > 0) {
         const picture = item.target
         const ready = item.target.hasAttribute('data-ll-srcset-ready')
@@ -233,7 +249,10 @@ export default class Lazyload {
     const img = picture.querySelector('img')
 
     const onload = () => {
-      if (!img.getAttribute('data-ll-ready') && this.app.browser === 'firefox') {
+      if (
+        !img.getAttribute('data-ll-ready') &&
+        this.app.browser === 'firefox'
+      ) {
         // set sizes attribute on load again,
         // since firefox sometimes is a bit slow to
         // get the actual image width
@@ -241,7 +260,7 @@ export default class Lazyload {
 
         img.setAttribute('sizes', `${width}px`)
         if (img.parentNode) {
-          Array.from(Dom.all(img.parentNode, 'source')).forEach(source =>
+          Array.from(Dom.all(img.parentNode, 'source')).forEach((source) =>
             source.setAttribute('sizes', `${width}px`)
           )
         }
@@ -290,7 +309,7 @@ export default class Lazyload {
   }
 
   lazyloadImages(elements) {
-    elements.forEach(item => {
+    elements.forEach((item) => {
       if (item.isIntersecting || item.intersectionRatio > 0) {
         const image = item.target
         this.swapImage(image)

package/src/modules/Links/index.js

@@ -7,13 +7,24 @@ gsap.registerPlugin(ScrollToPlugin)
 const DEFAULT_OPTIONS = {
   triggerEvents: true,
   scrollDuration: 0.8,
+  scrollOffsetNav: false,
   mobileMenuDelay: 800,
   openExternalInWindow: true,
-  linkQuery: 'a:not([href^="#"]):not([target="_blank"]):not([data-lightbox]):not(.noanim)',
+  linkQuery:
+    'a:not([href^="#"]):not([target="_blank"]):not([data-lightbox]):not(.noanim)',
   anchorQuery: 'a[href^="#"]:not(.noanim)',
 
   onAnchor: (target, links) => {
-    links.app.scrollTo(target, links.opts.scrollDuration, links.opts.triggerEvents)
+    if (links.opts.scrollOffsetNav) {
+      const header = document.querySelector('header[data-nav]')
+      const headerHeight = header ? header.clientHeight : 0
+      target = { y: target, offsetY: headerHeight }
+    }
+    links.app.scrollTo(
+      target,
+      links.opts.scrollDuration,
+      links.opts.triggerEvents
+    )
   },
 
   onTransition: (href, app) => {
@@ -27,7 +38,7 @@ const DEFAULT_OPTIONS = {
       gsap.to(main, {
         duration: 0.8,
         y: 25,
-        ease: 'power3.out'
+        ease: 'power3.out',
       })
 
       if (header) {
@@ -43,13 +54,13 @@ const DEFAULT_OPTIONS = {
         opacity: 1,
         onComplete: () => {
           window.location = href
-        }
+        },
       })
     } else {
       gsap.to(main, {
         duration: 0.8,
         y: 25,
-        ease: 'power3.out'
+        ease: 'power3.out',
       })
 
       if (header) {
@@ -65,10 +76,10 @@ const DEFAULT_OPTIONS = {
         opacity: 0,
         onComplete: () => {
           window.location = href
-        }
+        },
       })
     }
-  }
+  },
 }
 
 export default class Links {
@@ -87,7 +98,7 @@ export default class Links {
   bindHeroLink() {
     const el = document.querySelector('[data-link-to-content]')
     if (el) {
-      el.addEventListener('click', e => {
+      el.addEventListener('click', (e) => {
         const dataTarget = document.querySelector('main')
         e.preventDefault()
         if (dataTarget) {
@@ -99,8 +110,8 @@ export default class Links {
 
   bindAnchors(anchors) {
     let wait = false
-    Array.from(anchors).forEach(anchor => {
-      anchor.addEventListener('click', e => {
+    Array.from(anchors).forEach((anchor) => {
+      anchor.addEventListener('click', (e) => {
         e.preventDefault()
         const href = anchor.getAttribute('href')
         if (href === '#') {
@@ -124,11 +135,22 @@ export default class Links {
               history.pushState({}, '', href)
             }
 
-            if (this.app.header && dataTarget.id !== 'top') {
-              setTimeout(() => {
-                this.app.header.unpin()
-              }, 800)
+            if (!this.app.header) {
+              return
             }
+            if (dataTarget.id === 'top') {
+              return
+            }
+            if (this.app.header.mainOpts.ignoreForcedScroll) {
+              return
+            }
+            if (this.app.header.mainOpts.pinOnForcedScrollEnd) {
+              return
+            }
+
+            setTimeout(() => {
+              this.app.header.unpin()
+            }, 800)
           }
         }
 
@@ -142,19 +164,38 @@ export default class Links {
   }
 
   bindLinks(links) {
-    Array.from(links).forEach(link => {
+    const loadingContainer = document.querySelector('.loading-container')
+
+    Array.from(links).forEach((link) => {
       const href = link.getAttribute('href')
-      if (!href) {
-        return
+      if (!href || href === '#' || href.startsWith('javascript:')) {
+        return // Skip empty, anchor, or JS-based links
+      }
+
+      // Determine the normalized hostname of the current document.
+      const normalizedCurrentHost = this.normalizeHostname(
+        document.location.hostname
+      )
+
+      // For absolute URLs, use the URL constructor.
+      let linkHostname
+      try {
+        linkHostname = new URL(href, document.location.href).hostname
+      } catch (error) {
+        // If URL construction fails, assume it's not internal.
+        console.warn(`Failed to parse URL for href "${href}":`, error) // Log errors for debugging
+        linkHostname = ''
       }
-      const internalLink = href.indexOf(document.location.hostname) > -1 || href.startsWith('/')
+      const normalizedLinkHost = this.normalizeHostname(linkHostname)
+
+      // Check if the link is internal by comparing the normalized hostnames.
+      const internalLink = normalizedLinkHost === normalizedCurrentHost
+
       if (this.opts.openExternalInWindow && !internalLink) {
         link.setAttribute('target', '_blank')
       }
 
-      link.addEventListener('click', e => {
-        const loadingContainer = document.querySelector('.loading-container')
-
+      link.addEventListener('click', (e) => {
         if (e.shiftKey || e.metaKey || e.ctrlKey) {
           return
         }
@@ -170,4 +211,8 @@ export default class Links {
       })
     })
   }
+
+  normalizeHostname(hostname) {
+    return hostname.replace(/^www\./, '')
+  }
 }