@brandocms/jupiter 3.42.1 → 3.42.5

package/CHANGELOG.md

@@ -1,6 +1,25 @@
+#### 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
+
+#### 3.42.2
+
+- Popup: Listen for ESC to close popup
+
 #### 3.42.1
 
-- Moonwalk: Also remove `-children` when reseting
+- Moonwalk: Also remove `-children` when resetting
 - FixedHeader: Only run `onAltBg` and `onNotAltBg` if `altBgColor` is set
 - Application: Set browser zoom as `--ec-zoom` variable. This is used
   in EuropaCSS for scaling/zooming vw fontsizes.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@brandocms/jupiter",
-    "version": "3.42.1",
+    "version": "3.42.5",
     "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

@@ -164,11 +164,51 @@ export default class Application {
   }
 
   getZoom () {
-    this._initialZoom = zoom.calculate(this.browser)
+    switch (this.browser) {
+      case 'chrome':
+        this._lastDevicePixelRatio = Math.round(window.devicePixelRatio * 100)
+        this._initialZoom = 1
+        break
+
+      case 'safari':
+        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' })
+        document.body.appendChild(this._zoomSVG)
+        this._initialZoom = this._zoomSVG.currentScale
+        break
+
+      default:
+        this._initialZoom = zoom.calculate(this.browser)
+    }
+  }
+
+  zoomCalculateChrome () {
+    const currentDevicePixelRatio = Math.round(window.devicePixelRatio * 100)
+    const delta = (currentDevicePixelRatio - this._lastDevicePixelRatio) / 100
+    this.size.zoom += delta
+    this._lastDevicePixelRatio = currentDevicePixelRatio
+  }
+
+  zoomCalculateSafari () {
+    this.size.zoom = this._zoomSVG.currentScale
   }
 
   updateZoom () {
-    this.size.zoom = 1 + (zoom.calculate(this.browser) - this._initialZoom)
+    switch (this.browser) {
+      case 'chrome':
+        this.zoomCalculateChrome()
+        break
+
+      case 'safari':
+        this.zoomCalculateSafari()
+        break
+
+      default:
+        this.size.zoom = 1 + (zoom.calculate(this.browser) - this._initialZoom)
+    }
+
     this.setZoom()
   }
 
@@ -459,7 +499,6 @@ export default class Application {
     this.size.width = window.innerWidth
     this.size.height = window.innerHeight
     this.setvh100()
-
     this.updateZoom()
 
     const evt = new CustomEvent(Events.APPLICATION_RESIZE, e)

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/Lazyload/index.js

@@ -180,7 +180,7 @@ export default class Lazyload {
       }
     }
 
-    if (!loadedSomething) {
+    if (!loadedSomething && sources.length > 0) {
       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/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,14 +141,41 @@ 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}]`)
       Array.from(elems).forEach(el => el.removeAttribute(key))
+      container.removeAttribute(key)
     })
   }
 
+  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}]`)
+      Array.from(elems).forEach(el => el.removeAttribute(key))
+    })
+  }
+
+  /**
+  * Remove run matching 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))
+  }
+
+  /**
+  * Remove all runs
+  */
+  removeRuns (container = document.body) {
+    const key = 'data-moonwalk-run'
+    const elems = container.querySelectorAll(`[${key}]`)
+    Array.from(elems).forEach(el => el.removeAttribute(key))
+  }
+
   /**
    * Add a random ID to each moonwalk element
    *
@@ -180,20 +207,27 @@ 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 => ({
-      el: run,
-      threshold: this.opts.runs[run.getAttribute('data-moonwalk-run')].threshold || 0,
-      callback: this.opts.runs[run.getAttribute('data-moonwalk-run')].callback
-    }))
+    return Array.from(runs).map(run => {
+      const foundRun = this.opts.runs[run.getAttribute('data-moonwalk-run')]
+      if (foundRun) {
+        return {
+          el: run,
+          threshold: foundRun.threshold || 0,
+          callback: foundRun.callback
+        }
+      }
+
+      return null
+    })
   }
 
   /**
    * 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')) {
@@ -238,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'))
   }
@@ -453,6 +487,11 @@ export default class Moonwalk {
 
     for (let idx = 0; idx < this.runs.length; idx += 1) {
       const run = this.runs[idx]
+
+      if (!run) {
+        return
+      }
+
       // if this is the last section, set rootMargin to 0
       let rootMargin
 
@@ -578,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/Popup/index.js

@@ -106,6 +106,8 @@ export default class Popup {
   }
 
   open (trigger, target) {
+    this.keyUpListener = this.onKeyup.bind(this)
+    document.addEventListener('keyup', this.keyUpListener)
     if (typeof target === 'string') {
       target = document.querySelector(target)
     }
@@ -118,7 +120,20 @@ export default class Popup {
   }
 
   close () {
+    document.removeEventListener('keyup', this.keyUpListener)
     this.opts.onClose(this)
     this.opts.tweenOut(this)
   }
+
+  onKeyup (e) {
+    const key = e.keyCode || e.which
+
+    switch (key) {
+      case 27:
+        this.close()
+        break
+      default:
+        break
+    }
+  }
 }

package/src/utils/zoom.js

@@ -24,14 +24,26 @@ const _mediaQueryBinarySearch = (property, unit, a, b, maxIter, epsilon) => {
   return ratio
 }
 
+/**
+Firefox: OK
+Chrome: get the devicePixelRatio
+
+window.devicePixelRatio - initial 
+
+ */
+
 const calculateFirefox = () => Math.round(_mediaQueryBinarySearch('min--moz-device-pixel-ratio', '', 0, 10, 20, 0.0001) * 10) / 10
+const calculateChrome = initial => Math.round(window.devicePixelRatio * 100) - initial
 const calculateDefault = () => Math.round(((window.outerWidth) / window.innerWidth) * 10) / 10
 
 const impls = {
   firefox: calculateFirefox,
+  chrome: calculateChrome,
   default: calculateDefault
 }
 
 export default {
-  calculate: browser => (impls[browser] ? impls[browser]() : impls.default())
+  calculate: (browser, initial) => (
+    impls[browser] ? impls[browser](initial) : impls.default(initial)
+  )
 }