@brandocms/jupiter 3.52.0 → 3.54.0

package/package.json

@@ -1,46 +1,46 @@
 {
-    "name": "@brandocms/jupiter",
-    "version": "3.52.0",
-    "description": "Frontend helpers.",
-    "author": "Univers/Twined",
-    "license": "UNLICENSED",
-    "repository": {
-        "type": "git",
-        "url": "git+https://brandocms@github.com/brandocms/jupiter.git"
-    },
-    "bugs": {
-        "url": "https://github.com/brandocms/jupiter/issues"
-    },
-    "main": "src/index.js",
-    "module": "src/index.js",
-    "browser": "src/index.js",
-    "files": [
-        "src"
-    ],
-    "homepage": "https://github.com/brandocms/jupiter#readme",
-    "sideEffects": false,
-    "scripts": {
-        "test": "jest __tests__ --passWithNoTests",
-        "coverage": "jest __tests__ --coverage"
-    },
-    "jest": {
-        "testEnvironment": "jsdom",
-        "transformIgnorePatterns": [
-            "/node_modules/(?!gsap).+\\.js$"
-        ]
-    },
-    "dependencies": {
-        "@egjs/hammerjs": "^2.0.17",
-        "body-scroll-lock": "^4.0.0-beta.0",
-        "gsap": "3.12.5",
-        "lodash.defaultsdeep": "^4.6.1"
-    },
-    "devDependencies": {
-        "@babel/core": "^7.25.2",
-        "@babel/preset-env": "^7.25.3",
-        "babel-jest": "^29.7.0",
-        "jest": "^29.7.0",
-        "jest-environment-jsdom": "^29.7.0"
-    },
-    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  "name": "@brandocms/jupiter",
+  "version": "3.54.0",
+  "description": "Frontend helpers.",
+  "author": "Univers/Twined",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://brandocms@github.com/brandocms/jupiter.git"
+  },
+  "bugs": {
+    "url": "https://github.com/brandocms/jupiter/issues"
+  },
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "browser": "src/index.js",
+  "files": [
+    "src"
+  ],
+  "homepage": "https://github.com/brandocms/jupiter#readme",
+  "sideEffects": false,
+  "scripts": {
+    "test": "jest __tests__ --passWithNoTests",
+    "coverage": "jest __tests__ --coverage"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "transformIgnorePatterns": [
+      "/node_modules/(?!gsap).+\\.js$"
+    ]
+  },
+  "dependencies": {
+    "@egjs/hammerjs": "^2.0.17",
+    "body-scroll-lock": "^4.0.0-beta.0",
+    "gsap": "3.12.5",
+    "lodash.defaultsdeep": "^4.6.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "babel-jest": "^29.7.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package/src/modules/Moonwalk/index.js

@@ -87,14 +87,14 @@ const DEFAULT_OPTIONS = {
       /* The transitions that will be tweened */
       transition: {
         from: {
-          opacity: 0
+          opacity: 0,
         },
         to: {
-          opacity: 1
-        }
-      }
-    }
-  }
+          opacity: 1,
+        },
+      },
+    },
+  },
 }
 
 export default class Moonwalk {
@@ -108,23 +108,22 @@ export default class Moonwalk {
   }
 
   initialize(container = document.body) {
-    if (this.opts.clearMoonwalkOnAnchors) {
-      if (window.location.hash) {
-        this.removeAllWalks()
-        return
-      }
-    }
-
     if (this.opts.clearNestedSections) {
       container
         .querySelectorAll('[data-moonwalk-section] [data-moonwalk-section]')
-        .forEach(ms => ms.removeAttribute('data-moonwalk-section'))
+        .forEach((ms) => ms.removeAttribute('data-moonwalk-section'))
     }
 
     if (this.opts.clearNestedWalks) {
       container
         .querySelectorAll('[data-moonwalk] [data-moonwalk]')
-        .forEach(ms => ms.removeAttribute('data-moonwalk'))
+        .forEach((ms) => ms.removeAttribute('data-moonwalk'))
+    }
+
+    if (this.opts.clearMoonwalkOnAnchors) {
+      if (window.location.hash) {
+        this.walkToThisPoint(window.location.hash)
+      }
     }
 
     this.addClass()
@@ -151,19 +150,52 @@ export default class Moonwalk {
     document.documentElement.classList.add('moonwalk')
   }
 
+  /**
+   * Matching moonwalk elements before the element matching the hash should be set to visible
+   * by setting the `data-moonwalked` attribute on `data-moonwalk` elements and
+   * `data-moonwalk-section-ready` on `data-moonwalk-section` elements.
+   */
+  walkToThisPoint(hash) {
+    // Find the target element using the hash
+    const targetElement = document.querySelector(hash)
+    if (!targetElement) return // Exit if the element is not found
+
+    // Get all elements with the 'data-moonwalk' attribute
+    const moonwalkElements = document.querySelectorAll('[data-moonwalk]')
+    moonwalkElements.forEach((el) => {
+      const position = el.compareDocumentPosition(targetElement)
+      // Check if 'el' comes before 'targetElement' or is the same element
+      if (position & Node.DOCUMENT_POSITION_FOLLOWING || el === targetElement) {
+        el.setAttribute('data-moonwalked', '')
+        el.classList.add('moonwalked')
+      }
+    })
+
+    // Get all elements with the 'data-moonwalk-section' attribute
+    const moonwalkSectionElements = document.querySelectorAll(
+      '[data-moonwalk-section]'
+    )
+    moonwalkSectionElements.forEach((el) => {
+      const position = el.compareDocumentPosition(targetElement)
+      // Check if 'el' comes before 'targetElement' or is the same element
+      if (position & Node.DOCUMENT_POSITION_FOLLOWING || el === targetElement) {
+        el.setAttribute('data-moonwalk-section-ready', '')
+      }
+    })
+  }
+
   /**
    * Remove all moonwalks. Useful for clients who prefer reduced motion
    */
-  removeAllWalks(container = document.body) {
+  removeAllWalks(container = document.body, beforeEl = nil) {
     const keys = [
       'data-moonwalk',
-      'data-moonwalk-run',
       'data-moonwalk-section',
-      'data-moonwalk-children'
+      'data-moonwalk-children',
     ]
-    keys.forEach(key => {
+    keys.forEach((key) => {
       const elems = container.querySelectorAll(`[${key}]`)
-      Array.from(elems).forEach(el => el.removeAttribute(key))
+      Array.from(elems).forEach((el) => el.removeAttribute(key))
       container.removeAttribute(key)
     })
   }
@@ -171,13 +203,12 @@ export default class Moonwalk {
   removeFor(container = document.body, selector) {
     const keys = [
       'data-moonwalk',
-      'data-moonwalk-run',
       'data-moonwalk-section',
-      'data-moonwalk-children'
+      'data-moonwalk-children',
     ]
-    keys.forEach(key => {
+    keys.forEach((key) => {
       const elems = container.querySelectorAll(`${selector}[${key}]`)
-      Array.from(elems).forEach(el => el.removeAttribute(key))
+      Array.from(elems).forEach((el) => el.removeAttribute(key))
     })
   }
 
@@ -187,7 +218,7 @@ export default class Moonwalk {
   removeRun(container = document.body, name) {
     const key = 'data-moonwalk-run'
     const elems = container.querySelectorAll(`[${key}="${name}"]`)
-    Array.from(elems).forEach(el => el.removeAttribute(key))
+    Array.from(elems).forEach((el) => el.removeAttribute(key))
   }
 
   /**
@@ -196,7 +227,7 @@ export default class Moonwalk {
   removeRuns(container = document.body) {
     const key = 'data-moonwalk-run'
     const elems = container.querySelectorAll(`[${key}]`)
-    Array.from(elems).forEach(el => el.removeAttribute(key))
+    Array.from(elems).forEach((el) => el.removeAttribute(key))
   }
 
   /**
@@ -205,8 +236,11 @@ export default class Moonwalk {
    * @param {*} section
    */
   addIds(section) {
-    Array.from(section.querySelectorAll('[data-moonwalk]')).forEach(el => {
-      el.setAttribute('data-moonwalk-id', Math.random().toString(36).substring(7))
+    Array.from(section.querySelectorAll('[data-moonwalk]')).forEach((el) => {
+      el.setAttribute(
+        'data-moonwalk-id',
+        Math.random().toString(36).substring(7)
+      )
     })
   }
 
@@ -216,8 +250,9 @@ export default class Moonwalk {
    * @param {*} section
    */
   addIndexes(section) {
-    Object.keys(this.opts.walks).forEach(key => {
-      const searchAttr = key === 'default' ? '[data-moonwalk=""]' : `[data-moonwalk="${key}"]`
+    Object.keys(this.opts.walks).forEach((key) => {
+      const searchAttr =
+        key === 'default' ? '[data-moonwalk=""]' : `[data-moonwalk="${key}"]`
       const elements = section.querySelectorAll(searchAttr)
 
       Array.from(elements).forEach((element, index) => {
@@ -232,7 +267,7 @@ export default class Moonwalk {
    */
   initializeRuns(container = document.body) {
     const runs = container.querySelectorAll('[data-moonwalk-run]')
-    return Array.from(runs).map(run => {
+    return Array.from(runs).map((run) => {
       const foundRun = this.opts.runs[run.getAttribute('data-moonwalk-run')]
       if (foundRun) {
         if (foundRun.initialize) {
@@ -245,7 +280,7 @@ export default class Moonwalk {
           callback: foundRun.callback,
           onExit: foundRun.onExit,
           repeated: foundRun.repeated,
-          rootMargin: foundRun.rootMargin
+          rootMargin: foundRun.rootMargin,
         }
       }
 
@@ -268,7 +303,9 @@ export default class Moonwalk {
       return [this.initializeSection(container)]
     }
 
-    return Array.from(sections).map(section => this.initializeSection(section))
+    return Array.from(sections).map((section) =>
+      this.initializeSection(section)
+    )
   }
 
   initializeSection(section) {
@@ -284,7 +321,7 @@ export default class Moonwalk {
 
     const timeline = gsap.timeline({
       autoRemoveChildren: false,
-      smoothChildTiming: false
+      smoothChildTiming: false,
     })
 
     return {
@@ -296,9 +333,9 @@ export default class Moonwalk {
       stage: {
         name: section.getAttribute('data-moonwalk-stage') || null,
         running: false,
-        firstTween: false
+        firstTween: false,
       },
-      elements: []
+      elements: [],
     }
   }
 
@@ -307,8 +344,12 @@ export default class Moonwalk {
    * Can be used if Moonwalking interferes with custom lazyloading animations
    */
   clearLazyloads(container = document.body) {
-    const srcsets = container.querySelectorAll('[data-ll-srcset][data-moonwalk]')
-    Array.from(srcsets).forEach(srcset => srcset.removeAttribute('data-moonwalk'))
+    const srcsets = container.querySelectorAll(
+      '[data-ll-srcset][data-moonwalk]'
+    )
+    Array.from(srcsets).forEach((srcset) =>
+      srcset.removeAttribute('data-moonwalk')
+    )
   }
 
   /**
@@ -321,7 +362,7 @@ export default class Moonwalk {
   parseChildren(section) {
     const mwc = Dom.all(section, '[data-moonwalk-children]')
 
-    Array.from(mwc).forEach(c => {
+    Array.from(mwc).forEach((c) => {
       const key = c.getAttribute('data-moonwalk-children')
       this.setAttrs(c, key)
     })
@@ -336,7 +377,7 @@ export default class Moonwalk {
   setAttrs(element, val) {
     const affectedElements = []
 
-    Array.prototype.forEach.call(element.children, c => {
+    Array.prototype.forEach.call(element.children, (c) => {
       c.setAttribute('data-moonwalk', val)
       affectedElements.push(c)
     })
@@ -359,7 +400,7 @@ export default class Moonwalk {
     }
 
     const {
-      opts: { walks }
+      opts: { walks },
     } = this
 
     if (section.name) {
@@ -376,7 +417,7 @@ export default class Moonwalk {
       const fromTransition = sectionWalk.alphaTween
         ? {
             ...sectionWalk.transition.from,
-            opacity: 0
+            opacity: 0,
           }
         : sectionWalk.transition.from
 
@@ -424,7 +465,7 @@ export default class Moonwalk {
 
                 const to = {
                   ...stageTween.transition.to,
-                  duration: stageTween.duration
+                  duration: stageTween.duration,
                 }
 
                 section.timeline.to(entry.target, to, 0)
@@ -437,7 +478,9 @@ export default class Moonwalk {
               const tween = walks[section.name]
 
               if (!tween) {
-                console.error(`==> JUPITER: Walk [${section.name}] not found in config`)
+                console.error(
+                  `==> JUPITER: Walk [${section.name}] not found in config`
+                )
               }
 
               if (typeof tween.alphaTween === 'object') {
@@ -447,14 +490,14 @@ export default class Moonwalk {
               } else if (tween.alphaTween === true) {
                 tween.alphaTween = {
                   duration: tween.duration,
-                  ease: 'sine.in'
+                  ease: 'sine.in',
                 }
               }
 
               if (tween.startDelay) {
                 tween.transition.to = {
                   ...tween.transition.to,
-                  delay: tween.startDelay
+                  delay: tween.startDelay,
                 }
               }
 
@@ -473,7 +516,7 @@ export default class Moonwalk {
                   {
                     opacity: 1,
                     ease: tween.alphaTween.ease,
-                    delay: tween.startDelay || 0
+                    delay: tween.startDelay || 0,
                   },
                   tween.interval,
                   0
@@ -578,7 +621,7 @@ export default class Moonwalk {
       }
 
       section.elements = section.el.querySelectorAll('[data-moonwalk]')
-      section.elements.forEach(box => section.observer.observe(box))
+      section.elements.forEach((box) => section.observer.observe(box))
     }
   }
 
@@ -594,16 +637,22 @@ export default class Moonwalk {
         for (let i = 0; i < entries.length; i += 1) {
           const entry = entries[i]
           if (entry.isIntersecting && run.callback) {
-            const runRepeated = entry.target.hasAttribute('data-moonwalk-run-triggered')
+            const runRepeated = entry.target.hasAttribute(
+              'data-moonwalk-run-triggered'
+            )
             run.callback(entry.target, runRepeated)
             entry.target.setAttribute('data-moonwalk-run-triggered', '')
             if (!run.onExit && !run.repeated) {
               self.unobserve(entry.target)
             }
           } else {
-            if (run.onExit && entry.target.hasAttribute('data-moonwalk-run-triggered')) {
-              const runExited = entry.target.hasAttribute('data-moonwalk-run-exit-triggered')
-              // entry.target.removeAttribute('data-moonwalk-run-triggered')
+            if (
+              run.onExit &&
+              entry.target.hasAttribute('data-moonwalk-run-triggered')
+            ) {
+              const runExited = entry.target.hasAttribute(
+                'data-moonwalk-run-exit-triggered'
+              )
               entry.target.setAttribute('data-moonwalk-run-exit-triggered', '')
               run.onExit(entry.target, runExited)
               if (!run.repeated) {
@@ -615,7 +664,7 @@ export default class Moonwalk {
       },
       {
         rootMargin,
-        threshold: run.threshold
+        threshold: run.threshold,
       }
     )
   }
@@ -643,7 +692,9 @@ export default class Moonwalk {
             }
 
             const walkName = entry.target.getAttribute('data-moonwalk')
-            const cfg = !walkName.length ? opts.walks.default : opts.walks[walkName]
+            const cfg = !walkName.length
+              ? opts.walks.default
+              : opts.walks[walkName]
 
             const { duration, transition, interval, startDelay } = cfg
 
@@ -656,18 +707,28 @@ export default class Moonwalk {
             }
 
             if (typeof alphaTween === 'object' && alphaTween !== null) {
-              alphaTween.duration = alphaTween.duration ? alphaTween.duration : duration
+              alphaTween.duration = alphaTween.duration
+                ? alphaTween.duration
+                : duration
             } else if (alphaTween === true) {
               alphaTween = {
                 duration,
-                ease: 'sine.in'
+                ease: 'sine.in',
               }
             }
 
             const tween = transition ? this.tweenJS : this.tweenCSS
 
             const tweenFn = () => {
-              tween(section, entry.target, duration, interval, transition, overlap, alphaTween)
+              tween(
+                section,
+                entry.target,
+                duration,
+                interval,
+                transition,
+                overlap,
+                alphaTween
+              )
             }
 
             const wrappedTweenFn = () => {
@@ -689,8 +750,17 @@ export default class Moonwalk {
               } else {
                 const imagesInEntry = entry.target.querySelectorAll('img')
                 if (imagesInEntry.length) {
-                  // entry has children elements that are images
-                  imagesAreLoaded(imagesInEntry).then(() => wrappedTweenFn())
+                  const allPlaceholders = Array.from(imagesInEntry).every(
+                    (img) => img.hasAttribute('data-ll-placeholder')
+                  )
+
+                  // if all images in the entry have `data-ll-placeholder`,
+                  // they are lazyloaded and we don't need to wait
+                  if (allPlaceholders) {
+                    wrappedTweenFn()
+                  } else {
+                    imagesAreLoaded(imagesInEntry).then(() => wrappedTweenFn())
+                  }
                 } else {
                   // regular entry, just tween it
                   wrappedTweenFn()
@@ -703,7 +773,7 @@ export default class Moonwalk {
       },
       {
         rootMargin,
-        threshold: opts.threshold
+        threshold: opts.threshold,
       }
     )
   }
@@ -760,7 +830,7 @@ export default class Moonwalk {
     const toTransition = {
       ...tweenTransition.to,
       duration: tweenDuration,
-      onComplete: () => target.setAttribute('data-moonwalked', '')
+      onComplete: () => target.setAttribute('data-moonwalked', ''),
     }
 
     section.timeline.to(target, toTransition, tweenPosition())
@@ -772,7 +842,7 @@ export default class Moonwalk {
           duration: alphaTween.duration,
           opacity: 1,
           ease: alphaTween.ease,
-          delay: alphaTween.delay ? alphaTween.delay : 0
+          delay: alphaTween.delay ? alphaTween.delay : 0,
         },
         '<'
       )
@@ -788,7 +858,14 @@ export default class Moonwalk {
    * @param {*} transition
    * @param {*} overlap
    */
-  tweenCSS(section, target, tweenDuration, tweenInterval, tweenTransition, tweenOverlap) {
+  tweenCSS(
+    section,
+    target,
+    tweenDuration,
+    tweenInterval,
+    tweenTransition,
+    tweenOverlap
+  ) {
     let tweenPosition
     const startingPoint = tweenDuration - tweenOverlap * -1
 
@@ -822,9 +899,11 @@ export default class Moonwalk {
         target,
         {
           css: {
-            className: target.className ? `${target.className} moonwalked` : 'moonwalked'
+            className: target.className
+              ? `${target.className} moonwalked`
+              : 'moonwalked',
           },
-          duration: tweenDuration
+          duration: tweenDuration,
         },
         tweenPosition()
       )

package/src/modules/ScrollSpy/index.js

@@ -1,7 +1,9 @@
 import _defaultsDeep from 'lodash.defaultsdeep'
 import Dom from '../Dom'
 
-const DEFAULT_OPTIONS = {}
+const DEFAULT_OPTIONS = {
+  onIntersect: (target, trigger) => {}
+}
 
 export default class ScrollSpy {
   constructor(app, opts = {}) {
@@ -37,6 +39,7 @@ export default class ScrollSpy {
     }
     if (shouldBeActive) {
       shouldBeActive.dataset.scrollspyActive = ''
+      this.opts.onIntersect(entry.target, shouldBeActive)
     }
   }
 }