@brandocms/jupiter 3.42.3 → 3.42.7

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+#### 3.42.7
+
+- Links: Check for zero opacity body element on back/forward nav
+
+
+#### 3.42.6
+
+- Typography: Better defaults
+- MobileMenu: set `this.open` boolean on opening/closing
+
+
+#### 3.42.5
+
+- Links: Fade out header/footer (if found) in default transition
+- Moonwalk: Don't wait for images with `data-placeholder`, render right away
+  and let Lazyload do the image reveal.
+
+#### 3.42.4
+
+- Moonwalk: Fix fallback selector. This could have broken devices with
+  prefer reduced motion enabled.
+
 #### 3.42.3
 
 - Zoom: Change logic for Chrome/Safari

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@brandocms/jupiter",
-    "version": "3.42.3",
+    "version": "3.42.7",
     "description": "Frontend helpers.",
     "author": "Univers/Twined",
     "license": "UNLICENSED",
@@ -32,19 +32,19 @@
     },
     "dependencies": {
         "@egjs/hammerjs": "^2.0.17",
-        "body-scroll-lock": "^3.1.5",
-        "gsap": "3.6.1",
+        "body-scroll-lock": "^4.0.0-beta.0",
+        "gsap": "3.8.0",
         "lodash.defaultsdeep": "^4.6.1"
     },
     "devDependencies": {
-        "@babel/core": "^7.14.2",
-        "@babel/preset-env": "^7.14.2",
-        "babel-jest": "^26.6.3",
-        "eslint": "7.26.0",
-        "eslint-config-airbnb-base": "^14.2.1",
-        "eslint-plugin-import": "^2.23.1",
+        "@babel/core": "^7.16.0",
+        "@babel/preset-env": "^7.16.4",
+        "babel-jest": "^27.3.1",
+        "eslint": "8.3.0",
+        "eslint-config-airbnb-base": "^15.0.0",
+        "eslint-plugin-import": "^2.25.3",
         "eslint-plugin-node": "^11.1.0",
-        "eslint-plugin-promise": "^5.1.0",
-        "jest": "^26.6.3"
+        "eslint-plugin-promise": "^5.1.1",
+        "jest": "^27.3.1"
     }
 }

package/src/modules/Application/index.js

@@ -15,8 +15,19 @@ gsap.defaults({ overwrite: 'auto', ease: 'sine.out' })
 
 window.onpageshow = event => {
   if (event.persisted) {
-    gsap.to(document.querySelector('#fader'), { duration: 0.35, autoAlpha: 0 })
-    gsap.to(document.querySelectorAll('[data-fader]'), { duration: 0.35, autoAlpha: 0 })
+    const f = document.querySelector('#fader')
+    if (f) {
+      gsap.to(f, { duration: 0.35, autoAlpha: 0 })
+    }
+
+    const dataFaders = document.querySelectorAll('[data-fader]')
+    if (dataFaders.length) {
+      gsap.to(dataFaders, { duration: 0.35, autoAlpha: 0 })
+    }
+
+    gsap.set(document.body, {
+      clearProps: 'opacity'
+    })
   }
 }
 

package/src/modules/HeroSlider/index.js

@@ -150,7 +150,7 @@ export default class HeroSlider {
    * Calculate which slide is next, and call the slide function
    */
   next () {
-    if (prefersReducedMotion()) {
+    if (prefersReducedMotion() && this.app.opts.respectReducedMotion) {
       return
     }
 

package/src/modules/Links/index.js

@@ -17,7 +17,10 @@ const DEFAULT_OPTIONS = {
 
   onTransition: href => {
     const main = document.querySelector('main')
+    const header = document.querySelector('header[data-nav]')
+    const footer = document.querySelector('footer')
     const fader = document.querySelector('#fader')
+    console.log('transition')
 
     if (fader) {
       gsap.set(fader, { display: 'block', opacity: 0 })
@@ -26,6 +29,15 @@ const DEFAULT_OPTIONS = {
         y: 25,
         ease: 'power3.out'
       })
+
+      if (header) {
+        gsap.to(header, { duration: 0.2, opacity: 0 })
+      }
+
+      if (footer) {
+        gsap.to(footer, { duration: 0.2, opacity: 0 })
+      }
+
       gsap.to(fader, {
         duration: 0.2,
         opacity: 1,
@@ -39,6 +51,15 @@ const DEFAULT_OPTIONS = {
         y: 25,
         ease: 'power3.out'
       })
+      
+      if (header) {
+        gsap.to(header, { duration: 0.2, opacity: 0 })
+      }
+
+      if (footer) {
+        gsap.to(footer, { duration: 0.2, opacity: 0 })
+      }
+
       gsap.to(main, {
         duration: 0.2,
         opacity: 0,

package/src/modules/MobileMenu/index.js

@@ -105,6 +105,7 @@ export default class MobileMenu {
     this.app = app
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
 
+    this.open = false
     this.header = document.querySelector('header')
     this.bg = this.header.querySelector('.mobile-bg')
     this.logo = this.header.querySelector('figure.brand')
@@ -140,11 +141,13 @@ export default class MobileMenu {
   toggleMenuClosed () {
     // CLOSING MENU
     this.opts.closeTween(this)
+    this.open = false
   }
 
   toggleMenuOpen () {
     // OPENING MENU
     this.opts.openTween(this)
+    this.open = true
   }
 
   _emitMobileMenuOpenEvent () {

package/src/modules/Moonwalk/index.js

@@ -93,16 +93,16 @@ const DEFAULT_OPTIONS = {
 }
 
 export default class Moonwalk {
-  constructor (app, opts = {}, container = document) {
+  constructor (app, opts = {}, container = document.body) {
     this.app = app
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
-    if (container !== document) {
+    if (container !== document.body) {
       this.opts.on = () => {}
     }
     this.initialize(container)
   }
 
-  initialize (container = document) {
+  initialize (container = document.body) {
     if (this.opts.clearMoonwalkOnAnchors) {
       if (window.location.hash) {
         this.removeAllWalks()
@@ -122,7 +122,7 @@ export default class Moonwalk {
       this.clearLazyloads(container)
     }
 
-    if (prefersReducedMotion()) {
+    if (prefersReducedMotion() && this.app.opts.respectReducedMotion) {
       this.removeAllWalks(container)
     }
 
@@ -141,7 +141,7 @@ export default class Moonwalk {
   /**
    * Remove all moonwalks. Useful for clients who prefer reduced motion
    */
-  removeAllWalks (container = document) {
+  removeAllWalks (container = document.body) {
     const keys = ['data-moonwalk', 'data-moonwalk-run', 'data-moonwalk-section', 'data-moonwalk-children']
     keys.forEach(key => {
       const elems = container.querySelectorAll(`[${key}]`)
@@ -150,7 +150,7 @@ export default class Moonwalk {
     })
   }
 
-  removeFor (container = document, selector) {
+  removeFor (container = document.body, selector) {
     const keys = ['data-moonwalk', 'data-moonwalk-run', 'data-moonwalk-section', 'data-moonwalk-children']
     keys.forEach(key => {
       const elems = container.querySelectorAll(`${selector}[${key}]`)
@@ -161,7 +161,7 @@ export default class Moonwalk {
   /**
   * Remove run matching name
   */
-  removeRun (container = document, name) {
+  removeRun (container = document.body, name) {
     const key = 'data-moonwalk-run'
     const elems = container.querySelectorAll(`[${key}="${name}"]`)
     Array.from(elems).forEach(el => el.removeAttribute(key))
@@ -170,7 +170,7 @@ export default class Moonwalk {
   /**
   * Remove all runs
   */
-  removeRuns (container = document) {
+  removeRuns (container = document.body) {
     const key = 'data-moonwalk-run'
     const elems = container.querySelectorAll(`[${key}]`)
     Array.from(elems).forEach(el => el.removeAttribute(key))
@@ -207,7 +207,7 @@ export default class Moonwalk {
    * Go through each `data-moonwalk-run`, parse children, add IDs/indexes
    * (if wanted), initialize a new object for each.
    */
-  initializeRuns (container = document) {
+  initializeRuns (container = document.body) {
     const runs = container.querySelectorAll('[data-moonwalk-run]')
     return Array.from(runs).map(run => {
       const foundRun = this.opts.runs[run.getAttribute('data-moonwalk-run')]
@@ -227,7 +227,7 @@ export default class Moonwalk {
    * Go through each `data-moonwalk-section`, parse children, add IDs/indexes
    * (if wanted), initialize a new object for each.
    */
-  initializeSections (container = document) {
+  initializeSections (container = document.body) {
     const sections = container.querySelectorAll('[data-moonwalk-section]')
 
     if (container !== document && !sections.length && container.hasAttribute('data-moonwalk-section')) {
@@ -272,7 +272,7 @@ export default class Moonwalk {
    * Removes `data-moonwalk` from all elements who already have `data-ll-srcset´
    * Can be used if Moonwalking interferes with custom lazyloading animations
    */
-  clearLazyloads (container = document) {
+  clearLazyloads (container = document.body) {
     const srcsets = container.querySelectorAll('[data-ll-srcset][data-moonwalk]')
     Array.from(srcsets).forEach(srcset => srcset.removeAttribute('data-moonwalk'))
   }
@@ -617,13 +617,19 @@ export default class Moonwalk {
             // ensure image is loaded before we tween
             imageIsLoaded(entry.target).then(() => wrappedTweenFn())
           } else {
-            const imagesInEntry = entry.target.querySelectorAll('img')
-            if (imagesInEntry.length) {
-              // entry has children elements that are images
-              imagesAreLoaded(imagesInEntry).then(() => wrappedTweenFn())
-            } else {
-              // regular entry, just tween it
+            if (entry.target.hasAttribute('data-placeholder')) {              
+              // if the moonwalked element has data-placeholder, we don't want to wait
+              // for the image to load before tweening
               wrappedTweenFn()
+            } else {
+              const imagesInEntry = entry.target.querySelectorAll('img')
+              if (imagesInEntry.length) {
+                // entry has children elements that are images
+                imagesAreLoaded(imagesInEntry).then(() => wrappedTweenFn())
+              } else {
+                // regular entry, just tween it
+                wrappedTweenFn()
+              }
             }
           }
           self.unobserve(entry.target)

package/src/modules/Typography/index.js

@@ -5,7 +5,7 @@ export default class Typography {
     // Set some settings, by merging defaults and passed settings
     self.settings = {
       minWords: 4,
-      selector: 'h1,h2,h3,p',
+      selector: '[data-typo]',
       ignoreClass: 'no-typo-fix',
       ignoreExistingSpaceChars: false,
       ...settings
@@ -29,11 +29,6 @@ export default class Typography {
     const self = this
 
     self.elems.map(elem => {
-      // Bail out if the ignore class is present on this element
-      if (elem.classList.contains(self.settings.ignoreClass)) {
-        return false
-      }
-
       // Run the ignore checker nd bail if required
       if (self.shouldElementBeIgnored(elem)) {
         return false