@brandocms/jupiter 3.42.5 → 3.43.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+#### 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
+- MobileMenu: set `this.open` boolean on opening/closing
+
+
 #### 3.42.5
 
 - Links: Fade out header/footer (if found) in default transition

package/package.json

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