@brandocms/jupiter 3.42.4 → 3.42.5

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+#### 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

package/package.json

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

@@ -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)