@brandocms/jupiter 3.46.4 → 3.48.0

package/src/modules/Lightbox/index.js

@@ -53,8 +53,7 @@ const DEFAULT_OPTIONS = {
       return
     }
 
-    lightbox.timelines.caption
-      .to(lightbox.elements.caption, { duration: 0.4, autoAlpha: 0 })
+    lightbox.timelines.caption.to(lightbox.elements.caption, { duration: 0.4, autoAlpha: 0 })
   },
 
   onCaptionIn: (lightbox, captionHasChanged) => {
@@ -62,19 +61,16 @@ const DEFAULT_OPTIONS = {
       return
     }
 
-    lightbox.timelines.caption
-      .to(lightbox.elements.caption, { duration: 0.4, autoAlpha: 1 })
+    lightbox.timelines.caption.to(lightbox.elements.caption, { duration: 0.4, autoAlpha: 1 })
   },
 
   onImageOut: lightbox => {
-    lightbox.timelines.image
-      .to(lightbox.currentImage, { duration: 0.5, autoAlpha: 0 })
+    lightbox.timelines.image.to(lightbox.currentImage, { duration: 0.5, autoAlpha: 0 })
   },
 
   onImageIn: lightbox => {
     const delay = lightbox.firstTransition ? 0.6 : 0.4
-    lightbox.timelines.image
-      .to(lightbox.nextImage, { duration: 0.5, autoAlpha: 1, delay })
+    lightbox.timelines.image.to(lightbox.nextImage, { duration: 0.5, autoAlpha: 1, delay })
   },
 
   onBeforeOpen: () => {},
@@ -98,31 +94,34 @@ const DEFAULT_OPTIONS = {
       })
     }
 
-    gsap.to([
-      h.elements.imgWrapper,
-      h.elements.nextArrow,
-      h.elements.prevArrow,
-      h.elements.close,
-      h.elements.dots
-    ], {
-      duration: 0.50,
-      opacity: 0,
-      onComplete: () => {
-        gsap.to(h.elements.wrapper, {
-          duration: 0.45,
-          opacity: 0,
-          onComplete: () => {
-            h.app.scrollRelease()
-            h.destroy()
-          }
-        })
+    gsap.to(
+      [
+        h.elements.imgWrapper,
+        h.elements.nextArrow,
+        h.elements.prevArrow,
+        h.elements.close,
+        h.elements.dots
+      ],
+      {
+        duration: 0.5,
+        opacity: 0,
+        onComplete: () => {
+          gsap.to(h.elements.wrapper, {
+            duration: 0.45,
+            opacity: 0,
+            onComplete: () => {
+              h.app.scrollRelease()
+              h.destroy()
+            }
+          })
+        }
       }
-    })
+    )
   }
 }
 
 export default class Lightbox {
-  constructor (app, opts = {}) {
+  constructor(app, opts = {}) {
     this.app = app
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
     this.lightboxes = document.querySelectorAll('[data-lightbox]')
@@ -168,12 +167,12 @@ export default class Lightbox {
     })
   }
 
-  showBox (section, index) {
+  showBox(section, index) {
     this.opts.onBeforeOpen(this)
     this.buildBox(section, index)
   }
 
-  buildBox (section, index) {
+  buildBox(section, index) {
     this.elements.wrapper = document.createElement('div')
     this.elements.content = document.createElement('div')
     this.elements.imgWrapper = document.createElement('div')
@@ -289,7 +288,7 @@ export default class Lightbox {
     })
   }
 
-  close () {
+  close() {
     document.removeEventListener('keyup', this.onKeyup.bind(this))
     this.opts.onClose(this)
     this.opts.onAfterClose(this)
@@ -299,11 +298,11 @@ export default class Lightbox {
     this.imgs = []
   }
 
-  destroy () {
+  destroy() {
     this.elements.wrapper.parentNode.removeChild(this.elements.wrapper)
   }
 
-  setImg (section, index) {
+  setImg(section, index) {
     let captionHasChanged = false
 
     this.currentIndex = index
@@ -319,9 +318,7 @@ export default class Lightbox {
     activeDot.classList.add('active')
 
     if (this.elements.caption) {
-      captionHasChanged = (
-        this.previousCaption !== this.sections[section][index].alt
-      )
+      captionHasChanged = this.previousCaption !== this.sections[section][index].alt
       this.previousCaption = this.sections[section][index].alt
       this.opts.onCaptionOut(this, captionHasChanged)
       this.timelines.caption.call(() => {
@@ -372,7 +369,7 @@ export default class Lightbox {
     this.currentImage = this.nextImage
   }
 
-  getNextIdx (section) {
+  getNextIdx(section) {
     const index = this.currentIndex
     if (index === this.sections[section].length - 1) {
       return 0
@@ -380,7 +377,7 @@ export default class Lightbox {
     return index + 1
   }
 
-  getPrevIdx (section) {
+  getPrevIdx(section) {
     const index = this.currentIndex
     if (index === 0) {
       return this.sections[section].length - 1
@@ -388,11 +385,11 @@ export default class Lightbox {
     return index - 1
   }
 
-  onClick (e, section) {
+  onClick(e, section) {
     this.opts.onClick(this, section, e)
   }
 
-  onKeyup (e, section) {
+  onKeyup(e, section) {
     const key = e.keyCode || e.which
 
     switch (key) {
@@ -410,8 +407,8 @@ export default class Lightbox {
     }
   }
 
-  onMouseMove (e) {
-    if (e.clientX < (this.app.size.width / 2)) {
+  onMouseMove(e) {
+    if (e.clientX < this.app.size.width / 2) {
       if (this.pointerDirection === 'left') {
         return
       }
@@ -426,7 +423,7 @@ export default class Lightbox {
     }
   }
 
-  attachSwiper (section, el, initialIdx) {
+  attachSwiper(section, el, initialIdx) {
     const hammerManager = new Manager(el)
     const swipeHandler = new Swipe()
 

package/src/modules/Links/index.js

@@ -20,7 +20,6 @@ const DEFAULT_OPTIONS = {
     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 })
@@ -51,7 +50,7 @@ const DEFAULT_OPTIONS = {
         y: 25,
         ease: 'power3.out'
       })
-      
+
       if (header) {
         gsap.to(header, { duration: 0.2, opacity: 0 })
       }
@@ -72,7 +71,7 @@ const DEFAULT_OPTIONS = {
 }
 
 export default class Links {
-  constructor (app, opts = {}) {
+  constructor(app, opts = {}) {
     this.app = app
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
 
@@ -84,7 +83,7 @@ export default class Links {
     this.bindLinks(links)
   }
 
-  bindHeroLink () {
+  bindHeroLink() {
     const el = document.querySelector('[data-link-to-content]')
     if (el) {
       el.addEventListener('click', e => {
@@ -97,7 +96,7 @@ export default class Links {
     }
   }
 
-  bindAnchors (anchors) {
+  bindAnchors(anchors) {
     let wait = false
     Array.from(anchors).forEach(anchor => {
       anchor.addEventListener('click', e => {
@@ -122,7 +121,9 @@ export default class Links {
             this.opts.onAnchor(dataTarget, this)
 
             if (this.app.header && dataTarget.id !== 'top') {
-              setTimeout(() => { this.app.header.unpin() }, 800)
+              setTimeout(() => {
+                this.app.header.unpin()
+              }, 800)
             }
           }
         }
@@ -136,7 +137,7 @@ export default class Links {
     })
   }
 
-  bindLinks (links) {
+  bindLinks(links) {
     Array.from(links).forEach(link => {
       link.addEventListener('click', e => {
         const loadingContainer = document.querySelector('.loading-container')

package/src/modules/Marquee/index.js

@@ -8,14 +8,15 @@ const DEFAULT_OPTIONS = {
   slowDownOnHover: true,
   paddingLeft: 0, //DEPRECATED
   startProgress: 0,
+  spacer: '<span>&nbsp;&mdash;&nbsp;</span>',
 
   onReveal: marqueeEl => {
-    gsap.to(marqueeEl, { opacity: 1 })
+    gsap.to(marqueeEl, { opacity: 1, ease: 'none' })
   }
 }
 
 export default class Marquee {
-  constructor (app, el, opts) {
+  constructor(app, el, opts) {
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
     this.app = app
     this.elements = {}
@@ -29,7 +30,7 @@ export default class Marquee {
     this.initialize()
   }
 
-  initialize () {
+  initialize() {
     gsap.set(this.elements.$marquee, { opacity: 0 })
     window.addEventListener('APPLICATION:RESIZE', this.updateMarquee.bind(this))
     window.addEventListener('APPLICATION:REVEALED', this.revealMarquee.bind(this))
@@ -41,12 +42,12 @@ export default class Marquee {
     }
   }
 
-  revealMarquee (e) {
+  revealMarquee(e) {
     this.updateMarquee()
     this.opts.onReveal(this.elements.$marquee)
   }
 
-  updateMarquee (e) {
+  updateMarquee(e) {
     if (e) {
       // updating cause of a resize. we only care about width change
       if (!e.detail.widthChanged) {
@@ -62,7 +63,7 @@ export default class Marquee {
     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 })
@@ -73,23 +74,23 @@ export default class Marquee {
     }
   }
 
-  clearHolders () {
+  clearHolders() {
     const $allHolders = Dom.all(this.elements.$el, '[data-marquee-holder]')
     Array.from($allHolders).forEach(h => gsap.set(h, { clearProps: 'all' }))
   }
 
-  killTweens () {
+  killTweens() {
     if (this.timeline) {
       this.timeline.kill()
       this.timeline = null
     }
   }
 
-  initializeTween () {
+  initializeTween() {
     const $allHolders = Dom.all(this.elements.$el, '[data-marquee-holder]')
 
     Array.from($allHolders).forEach((h, idx) => {
-      gsap.set(h, { position: 'absolute', left: (h.offsetWidth * idx) })
+      gsap.set(h, { position: 'absolute', left: h.offsetWidth * idx })
     })
 
     this.timeline = gsap.timeline({ paused: true })
@@ -103,7 +104,7 @@ export default class Marquee {
     window.marquee = this
   }
 
-  play (rampUp = false) {
+  play(rampUp = false) {
     this.playing = true
     gsap.killTweensOf(this.timeline)
 
@@ -120,7 +121,7 @@ export default class Marquee {
     }
   }
 
-  pause () {
+  pause() {
     this.playing = false
     gsap.to(this.timeline, {
       timeScale: 0.01,
@@ -131,14 +132,14 @@ export default class Marquee {
     })
   }
 
-  slowDown () {
+  slowDown() {
     gsap.to(this.timeline, {
       timeScale: 0.5,
       duration: 0.8
     })
   }
 
-  speedUp () {
+  speedUp() {
     gsap.to(this.timeline, {
       timeScale: 1,
       duration: 0.8,
@@ -146,50 +147,59 @@ export default class Marquee {
     })
   }
 
-  setupObserver () {
-    this.observer = new IntersectionObserver(entries => {
-      entries.forEach(entry => {
-        const { isIntersecting } = entry;
-
-        if (isIntersecting && !this.playing) {
-          this.play()
-        } else if (!isIntersecting && this.playing) {
-          this.pause()
-        }
-      })
-    }, {
-      root: null,
-      threshold: 0
-    })
+  setupObserver() {
+    this.observer = new IntersectionObserver(
+      entries => {
+        entries.forEach(entry => {
+          const { isIntersecting } = entry
+
+          if (isIntersecting && !this.playing) {
+            this.play()
+          } else if (!isIntersecting && this.playing) {
+            this.pause()
+          }
+        })
+      },
+      {
+        root: null,
+        threshold: 0
+      }
+    )
 
     this.observer.observe(this.elements.$el)
   }
 
-  fillText () {
+  fillText() {
     this.elements.$marquee.innerHTML = ''
     this.elements.$marquee.appendChild(this.elements.$holder)
 
     this.elements.$holder.innerHTML = ''
     this.elements.$holder.appendChild(this.elements.$item)
 
-    this.elements.$holder.appendChild(Dom.new('<span>&nbsp;&mdash;&nbsp;</span>')[0])
-
     const textWidth = this.elements.$item.offsetWidth
     if (textWidth) {
+      if (this.opts.spacer) {
+        this.elements.$holder.appendChild(Dom.new(this.opts.spacer)[0])
+      }
       const count = Math.max(Math.ceil(this.app.size.width / textWidth) - 1, 2)
-  
+
       for (let i = 0; i < count; i += 1) {
         this.elements.$holder.append(this.elements.$item.cloneNode(true))
-        this.elements.$holder.appendChild(Dom.new('<span>&nbsp;&mdash;&nbsp;</p>')[0])
+        if (this.opts.spacer) {
+          this.elements.$holder.appendChild(Dom.new(this.opts.spacer)[0])
+        }
       }
-  
+
       this.elements.$marquee.appendChild(this.elements.$holder.cloneNode(true))
     } else {
-      console.error('no textWidth! probably image?', this.elements.$item)
+      console.error(
+        'no textWidth! probably image? Set width to elements inside holder',
+        this.elements.$item
+      )
     }
   }
 
-  setHeight () {
+  setHeight() {
     const height = this.elements.$item.offsetHeight + this.opts.extraHeight
     gsap.set(this.elements.$el, { height })
   }

package/src/modules/MobileMenu/index.js

@@ -17,47 +17,70 @@ const DEFAULT_OPTIONS = {
     document.body.classList.toggle('open-menu')
 
     timeline
-      .fromTo(m.bg, {
-        duration: 0.35,
-        x: '0%',
-        opacity: 0,
-        height: window.innerHeight
-      }, {
-        duration: 0.35,
-        opacity: 1,
-        ease: 'sine.in'
+      .fromTo(
+        m.bg,
+        {
+          duration: 0.35,
+          x: '0%',
+          opacity: 0,
+          height: window.innerHeight
+        },
+        {
+          duration: 0.35,
+          opacity: 1,
+          ease: 'sine.in'
+        }
+      )
+      .to(
+        m.logo,
+        {
+          duration: 0.35,
+          opacity: 0,
+          ease: 'power3.out'
+        },
+        '-=0.35'
+      )
+      .to(
+        m.header,
+        {
+          duration: 0.55,
+          backgroundColor: 'transparent',
+          ease: 'power3.out'
+        },
+        '-=0.35'
+      )
+      .call(() => {
+        m.nav.style.gridTemplateRows = 'auto 1fr'
       })
-      .to(m.logo, {
-        duration: 0.35,
-        opacity: 0,
-        ease: 'power3.out'
-      }, '-=0.35')
-      .to(m.header, {
-        duration: 0.55,
-        backgroundColor: 'transparent',
-        ease: 'power3.out'
-      }, '-=0.35')
-      .call(() => { m.nav.style.gridTemplateRows = 'auto 1fr' })
       .set(m.nav, { height: window.innerHeight })
       .set(m.content, { display: 'block' })
       .set(m.logoPath, { fill: m.opts.logoColor })
       .set(m.logo, { xPercent: 3 })
-      .staggerFromTo(m.lis, {
-        duration: 1,
-        opacity: 0,
-        x: 20
-      }, {
-        duration: 1,
-        x: 0,
-        opacity: 1,
-        ease: 'power3.out'
-      }, 0.05)
-      .to(m.logo, {
-        duration: 0.55,
-        opacity: 1,
-        xPercent: 0,
-        ease: 'power3.inOut'
-      }, '-=1.2')
+      .staggerFromTo(
+        m.lis,
+        {
+          duration: 1,
+          opacity: 0,
+          x: 20
+        },
+        {
+          duration: 1,
+          x: 0,
+          opacity: 1,
+          ease: 'power3.out'
+        },
+        0.05
+      )
+      .to(
+        m.logo,
+        {
+          duration: 0.55,
+          opacity: 1,
+          xPercent: 0,
+          ease: 'power3.inOut'
+        },
+        '-=1.2'
+      )
       .call(m._emitMobileMenuOpenEvent)
   },
 
@@ -66,31 +89,51 @@ const DEFAULT_OPTIONS = {
     const timeline = gsap.timeline()
 
     timeline
-      .call(() => { m.hamburger.classList.toggle('is-active') })
-      .fromTo(m.logo, {
-        duration: 0.2,
-        opacity: 1,
-        xPercent: 0
-      },
-      {
-        duration: 0.2,
-        opacity: 0,
-        xPercent: 5,
-        ease: 'power3.out'
+      .call(() => {
+        m.hamburger.classList.toggle('is-active')
       })
+      .fromTo(
+        m.logo,
+        {
+          duration: 0.2,
+          opacity: 1,
+          xPercent: 0
+        },
+        {
+          duration: 0.2,
+          opacity: 0,
+          xPercent: 5,
+          ease: 'power3.out'
+        }
+      )
       .set(m.logoPath, { clearProps: 'fill' })
-      .staggerTo(m.lis, {
-        duration: 0.5, opacity: 0, x: 20, ease: 'power3.out'
-      }, 0.04)
+      .staggerTo(
+        m.lis,
+        {
+          duration: 0.5,
+          opacity: 0,
+          x: 20,
+          ease: 'power3.out'
+        },
+        0.04
+      )
       .set(m.nav, { clearProps: 'height' })
-      .to(m.bg, {
-        duration: 0.25,
-        x: '100%',
-        ease: 'sine.in'
-      }, '-=0.3')
-      .call(() => { m._emitMobileMenuClosedEvent() })
+      .to(
+        m.bg,
+        {
+          duration: 0.25,
+          x: '100%',
+          ease: 'sine.in'
+        },
+        '-=0.3'
+      )
+      .call(() => {
+        m._emitMobileMenuClosedEvent()
+      })
       .set(m.content, { display: 'none' })
-      .call(() => { m.nav.style.gridTemplateRows = 'auto' })
+      .call(() => {
+        m.nav.style.gridTemplateRows = 'auto'
+      })
       .set(m.lis, { clearProps: 'opacity' })
       .to(m.logo, {
         duration: 0.35,
@@ -101,7 +144,7 @@ const DEFAULT_OPTIONS = {
 }
 
 export default class MobileMenu {
-  constructor (app, opts = {}) {
+  constructor(app, opts = {}) {
     this.app = app
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
 
@@ -112,7 +155,9 @@ export default class MobileMenu {
     this.logoPath = this.logo ? this.logo.querySelectorAll(this.opts.logoPathSelector) : null
     this.menuButton = this.header.querySelector('figure.menu-button')
     this.hamburger = this.menuButton ? this.menuButton.querySelector('.hamburger') : null
-    this.hamburgerInner = this.menuButton ? this.menuButton.querySelector('.hamburger-inner') : null
+    this.hamburgerInner = this.menuButton
+      ? this.menuButton.querySelector('.hamburger-inner')
+      : null
     this.content = this.header.querySelectorAll(this.opts.contentSelector)
     this.lis = this.header.querySelectorAll(this.opts.liSelector)
     this.nav = this.header.querySelector('nav')
@@ -126,11 +171,13 @@ export default class MobileMenu {
     }
 
     if (this.opts.onResize) {
-      window.addEventListener(Events.APPLICATION_RESIZE, () => { this.opts.onResize(this) })
+      window.addEventListener(Events.APPLICATION_RESIZE, () => {
+        this.opts.onResize(this)
+      })
     }
   }
 
-  toggleMenu () {
+  toggleMenu() {
     if (document.body.classList.contains('open-menu')) {
       this.toggleMenuClosed()
     } else {
@@ -138,24 +185,24 @@ export default class MobileMenu {
     }
   }
 
-  toggleMenuClosed () {
+  toggleMenuClosed() {
     // CLOSING MENU
     this.opts.closeTween(this)
     this.open = false
   }
 
-  toggleMenuOpen () {
+  toggleMenuOpen() {
     // OPENING MENU
     this.opts.openTween(this)
     this.open = true
   }
 
-  _emitMobileMenuOpenEvent () {
+  _emitMobileMenuOpenEvent() {
     const mobileMenuOpenEvent = new window.CustomEvent(Events.APPLICATION_MOBILE_MENU_OPEN)
     window.dispatchEvent(mobileMenuOpenEvent)
   }
 
-  _emitMobileMenuClosedEvent () {
+  _emitMobileMenuClosedEvent() {
     const mobileMenuClosedEvent = new window.CustomEvent(Events.APPLICATION_MOBILE_MENU_CLOSED)
     window.dispatchEvent(mobileMenuClosedEvent)
   }