@brandocms/jupiter 3.42.7 → 3.43.0

package/CHANGELOG.md

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

package/package.json

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

package/src/modules/Application/index.js

@@ -507,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/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