@brandocms/jupiter 3.42.6 → 3.44.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+#### 3.44.0
+
+- Moonwalk: Add `data-moonwalked` to walked elements. Don't run again on
+  already walked elements.
+- Dom: Add `hasAttribute`
+
+
+#### 3.43.0
+
+- **BREAKING** Marquee: More consistent `speed`. This means you should probably 
+  verify that the speed you set looks ok with the new config
+- Marquee: Add `paddingLeft` and `slowDownOnHover` options
+- Application: send `widthChanged` and `heightChanged` booleans 
+  in `APPLICATION:RESIZE` event detail
+
+
+#### 3.42.7
+
+- Links: Check for zero opacity body element on back/forward nav
+
+
 #### 3.42.6
 
 - Typography: Better defaults

package/package.json

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

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'
+    })
   }
 }
 
@@ -496,12 +507,15 @@ export default class Application {
    * RAF'ed resize event
    */
   onResize (e) {
+    const widthChanged = (this.size.width !== window.innerWidth)
+    const heightChanged = (this.size.height !== window.innerHeight)
+
     this.size.width = window.innerWidth
     this.size.height = window.innerHeight
     this.setvh100()
     this.updateZoom()
 
-    const evt = new CustomEvent(Events.APPLICATION_RESIZE, e)
+    const evt = new CustomEvent(Events.APPLICATION_RESIZE, { detail: { widthChanged, heightChanged } })
     window.dispatchEvent(evt)
   }
 

package/src/modules/Dom/index.js

@@ -73,6 +73,10 @@ class DOM {
     return classes.map(className => element.classList.toggle(className))
   }
 
+  hasAttribute (element, attributeName) {
+    return element.hasAttribute(attributeName)
+  }
+
   overlapsVertically ($div1, $div2) {
     // Div 1 data
     const d1Offset = $div1.getBoundingClientRect()

package/src/modules/Marquee/index.js

@@ -3,8 +3,10 @@ import _defaultsDeep from 'lodash.defaultsdeep'
 import Dom from '../Dom'
 
 const DEFAULT_OPTIONS = {
-  speed: 25,
-  extraHeight: 0
+  speed: 100,
+  extraHeight: 0,
+  slowDownOnHover: true,
+  paddingLeft: 0
 }
 
 export default class Marquee {
@@ -26,18 +28,29 @@ export default class Marquee {
     window.addEventListener('APPLICATION:RESIZE', this.updateMarquee.bind(this))
     this.updateMarquee()
     this.setupObserver()
-    this.elements.$el.addEventListener('mouseenter', this.slowDown.bind(this))
-    this.elements.$el.addEventListener('mouseleave', this.speedUp.bind(this))
+    if (this.opts.slowDownOnHover) {
+      this.elements.$el.addEventListener('mouseenter', this.slowDown.bind(this))
+      this.elements.$el.addEventListener('mouseleave', this.speedUp.bind(this))
+    }
   }
 
-  updateMarquee () {
+  updateMarquee (e) {
+    if (e) {
+      // updating cause of a resize. we only care about width change
+      if (!e.detail.widthChanged) {
+        return
+      }
+    }
     this.killTweens()
     this.clearHolders()
     this.setHeight()
     this.fillText()
+
     const holderWidth = this.elements.$holder.offsetWidth
     const $allHolders = Dom.all(this.elements.$el, '[data-marquee-holder]')
     const marqueeWidth = holderWidth * $allHolders.length
+    
+    this.duration = holderWidth / this.opts.speed
 
     gsap.set(this.elements.$marquee, { width: marqueeWidth })
     this.initializeTween()
@@ -68,7 +81,7 @@ export default class Marquee {
 
     this.timeline = gsap.timeline({ paused: true })
     this.timeline
-      .to($allHolders, this.opts.speed, { xPercent: -100, ease: 'none' })
+      .to($allHolders, { xPercent: -100, ease: 'none', duration: this.duration })
       .repeat(-1)
 
     window.timeline = this.timeline

package/src/modules/Moonwalk/index.js

@@ -655,6 +655,10 @@ export default class Moonwalk {
     let tweenPosition
     const startingPoint = tweenDuration - tweenOverlap
 
+    if (Dom.hasAttribute(target, 'data-moonwalked')) {
+      return
+    }
+
     if (section.timeline.isActive() && section.timeline.recent()) {
       if (section.timeline.recent().time() > startingPoint) {
         /* We're late for this tween if it was supposed to be sequential,
@@ -677,6 +681,7 @@ export default class Moonwalk {
       },
       tweenPosition()
     )
+    .call(() => { target.setAttribute('data-moonwalked', '') }, null, '<')
 
     if (alphaTween) {
       section.timeline.to(target, {
@@ -701,7 +706,7 @@ export default class Moonwalk {
     let tweenPosition
     const startingPoint = tweenDuration - tweenOverlap
 
-    if (Dom.hasClass(target, 'moonwalked')) {
+    if (Dom.hasAttribute(target, 'data-moonwalked')) {
       return
     }
 
@@ -726,6 +731,6 @@ export default class Moonwalk {
         duration: tweenDuration
       },
       tweenPosition()
-    )
+    ).call(() => { target.setAttribute('data-moonwalked', '') }, null, '<')
   }
 }