@brandocms/jupiter 3.46.4 → 3.48.0

package/src/modules/EqualHeightElements/index.js

@@ -0,0 +1,70 @@
+import { gsap } from 'gsap'
+import Dom from '../Dom'
+import _defaultsDeep from 'lodash.defaultsdeep'
+import * as Events from '../../events'
+
+const DEFAULT_OPTIONS = {}
+
+export default class EqualHeightElements {
+  constructor(app, selector, opts = {}, container = document.body) {
+    this.app = app
+    this.container = container
+    this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
+    this.selector = selector
+    this.initialize()
+    window.addEventListener(Events.APPLICATION_RESIZE, () => {
+      gsap.set('[data-eq-height-elements-adjusted]', { clearProps: 'minHeight' })
+      this.initialize()
+    })
+  }
+
+  initialize() {
+    const canvases = Dom.all(this.container, '[data-eq-height-elements]')
+    Array.from(canvases).forEach(canvas => {
+      let lastTop = null
+      const actionables = []
+      let elements = []
+      let height = 0
+      const eqElements = Dom.all(canvas, this.selector)
+
+      eqElements.forEach(el => {
+        const rect = el.getBoundingClientRect()
+
+        if (lastTop === null) {
+          height = rect.height
+          elements.push(el)
+          lastTop = rect.top
+          return
+        }
+
+        if (lastTop !== rect.top) {
+          console.debug('== pushing actionables', { elements, height })
+          actionables.push({ elements, height })
+          elements = []
+          height = rect.height
+        } else if (lastTop === rect.top) {
+          if (rect.height > height) {
+            height = rect.height
+          }
+        } else {
+          height = rect.height
+        }
+        elements.push(el)
+        lastTop = rect.top
+      })
+
+      if (elements.length) {
+        actionables.push({ elements, height })
+      }
+
+      if (actionables.length) {
+        actionables.forEach(a => {
+          gsap.set(a.elements, {
+            minHeight: a.height,
+            attr: { 'data-eq-height-elements-adjusted': true }
+          })
+        })
+      }
+    })
+  }
+}

package/src/modules/EqualHeightImages/index.js

@@ -0,0 +1,95 @@
+import { gsap } from 'gsap'
+import Dom from '../Dom'
+import imagesAreLoaded from '../../utils/imagesAreLoaded'
+import _defaultsDeep from 'lodash.defaultsdeep'
+
+const DEFAULT_OPTIONS = {}
+
+export default class EqualHeightImages {
+  constructor(app, opts = {}, container = document.body) {
+    this.app = app
+    this.container = container
+    this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
+    this.initialize()
+  }
+
+  initialize() {
+    const canvases = Dom.all(this.container, '[data-eq-height-images]')
+    Array.from(canvases).forEach(canvas => {
+      let lastTop = null
+      const actionables = []
+      let elements = []
+      let height = 0
+      const imgs = Dom.all(canvas, 'img')
+
+      imagesAreLoaded(imgs, false).then(() => {
+        imgs.forEach(el => {
+          const rect = el.getBoundingClientRect()
+          const size = this.getImgSizeInfo(el)
+
+          if (lastTop === null) {
+            height = size.height
+            elements.push(el)
+            lastTop = rect.top
+            return
+          }
+
+          if (lastTop !== rect.top) {
+            actionables.push({ elements, height })
+            elements = []
+            height = size.height
+          } else if (lastTop === rect.top) {
+            if (size.height > height) {
+              height = size.height
+            }
+          } else {
+            height = size.height
+          }
+          elements.push(el)
+          lastTop = rect.top
+        })
+
+        if (elements.length) {
+          actionables.push({ elements, height })
+        }
+
+        if (actionables.length) {
+          actionables.forEach(a => {
+            gsap.set(a.elements, { minHeight: a.height })
+          })
+        }
+      })
+    })
+  }
+
+  getRenderedSize(contains, cWidth, cHeight, width, height, pos) {
+    const oRatio = width / height
+    const cRatio = cWidth / cHeight
+    // eslint-disable-next-line func-names
+    return function () {
+      if (contains ? oRatio > cRatio : oRatio < cRatio) {
+        this.width = cWidth
+        this.height = cWidth / oRatio
+      } else {
+        this.width = cHeight * oRatio
+        this.height = cHeight
+      }
+      this.left = (cWidth - this.width) * (pos / 100)
+      this.right = this.width + this.left
+      return this
+    }.call({})
+  }
+
+  getImgSizeInfo(img) {
+    const pos = window.getComputedStyle(img).getPropertyValue('object-position').split(' ')
+
+    return this.getRenderedSize(
+      true,
+      img.width,
+      img.height,
+      img.naturalWidth,
+      img.naturalHeight,
+      parseInt(pos[0])
+    )
+  }
+}

package/src/modules/FeatureTests/index.js

@@ -1,7 +1,7 @@
 import * as Events from '../../events'
 
 export default class FeatureTests {
-  constructor (app, tests) {
+  constructor(app, tests) {
     this.app = app
 
     this.testFns = {
@@ -40,13 +40,13 @@ export default class FeatureTests {
     this.bindEventTests()
   }
 
-  runTests (tests) {
+  runTests(tests) {
     tests.forEach(test => {
       this.testFor(test, this.testFns[test]())
     })
   }
 
-  testFor (feature, result) {
+  testFor(feature, result) {
     this.results[feature] = result
     document.documentElement.setAttribute(`data-${feature}`, result)
   }
@@ -55,7 +55,7 @@ export default class FeatureTests {
    * Check if we should outline elements. If the user hits TAB, we should outline,
    * otherwise we skip it.
    */
-  testOutlineEvents () {
+  testOutlineEvents() {
     document.addEventListener('mousedown', () => {
       this.testFor('outline', false)
     })
@@ -73,7 +73,7 @@ export default class FeatureTests {
    * Sometimes the initial test for touch/mouse fail, so
    * listen for events as well
    */
-  testTouchMouseEvents () {
+  testTouchMouseEvents() {
     const onTouchStart = () => {
       if (!this.results.touch) {
         this.results.touch = true
@@ -93,7 +93,7 @@ export default class FeatureTests {
 
     const onMouseMove = () => {
       if (!this.results.mouse) {
-        if ((Date.now() - this.devicelastTouched) > 300) {
+        if (Date.now() - this.devicelastTouched > 300) {
           this.results.touch = false
           this.results.mouse = true
           this.testFor('touch', false)
@@ -105,24 +105,29 @@ export default class FeatureTests {
     document.addEventListener('mousemove', onMouseMove, false)
   }
 
-  bindEventTests () {
+  bindEventTests() {
     this.testOutlineEvents()
     this.testTouchMouseEvents()
   }
 
-  testTouch () {
-    return ('ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0)
+  testTouch() {
+    return (
+      'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0
+    )
   }
 
-  testIE11 () {
-    return '-ms-scroll-limit' in document.documentElement.style && '-ms-ime-align' in document.documentElement.style
+  testIE11() {
+    return (
+      '-ms-scroll-limit' in document.documentElement.style &&
+      '-ms-ime-align' in document.documentElement.style
+    )
   }
 
-  testIOS () {
+  testIOS() {
     return navigator.userAgent.match(/iphone|ipod|ipad/i)
   }
 
-  testBrowsers () {
+  testBrowsers() {
     let browser = 'unknown'
     let isChrome = false
     let isSafari = false
@@ -140,12 +145,14 @@ export default class FeatureTests {
       browser = 'safari'
       isSafari = true
     }
-    if ((isChrome) && (isSafari)) { browser = 'chrome' }
+    if (isChrome && isSafari) {
+      browser = 'chrome'
+    }
 
     return browser
   }
 
-  testWebview () {
+  testWebview() {
     return navigator.userAgent.match(/FBAN|FBAV|instagram|facebook|messenger/i)
   }
 }

package/src/modules/FixedHeader/index.js

@@ -82,11 +82,11 @@ const DEFAULT_EVENTS = {
   // eslint-disable-next-line no-unused-vars
   onNotBottom: h => {},
   // eslint-disable-next-line no-unused-vars
-  onMobileMenuOpen: h => { },
+  onMobileMenuOpen: h => {},
   // eslint-disable-next-line no-unused-vars
-  onMobileMenuClose: h => { },
+  onMobileMenuClose: h => {},
   // eslint-disable-next-line no-unused-vars
-  onIntersect: h => { },
+  onIntersect: h => {},
   onOutline: h => {
     h.preventUnpin = true
     h.pin()
@@ -105,9 +105,7 @@ const DEFAULT_OPTIONS = {
     intersects: null,
     beforeEnter: h => {
       const timeline = gsap.timeline()
-      timeline
-        .set(h.el, { yPercent: -100 })
-        .set(h.lis, { opacity: 0 })
+      timeline.set(h.el, { yPercent: -100 }).set(h.lis, { opacity: 0 })
     },
 
     enter: h => {
@@ -135,7 +133,7 @@ const DEFAULT_OPTIONS = {
 }
 
 export default class FixedHeader {
-  constructor (app, opts = {}) {
+  constructor(app, opts = {}) {
     this.app = app
     this.mainOpts = _defaultsDeep(opts, DEFAULT_OPTIONS)
 
@@ -183,7 +181,7 @@ export default class FixedHeader {
     this.initialize()
   }
 
-  initialize () {
+  initialize() {
     // bind to canvas scroll
     this.lastKnownScrollY = this.getScrollY()
     this.lastKnownScrollHeight = document.body.scrollHeight
@@ -216,21 +214,25 @@ export default class FixedHeader {
     }
 
     if (this.mainOpts.unpinOnForcedScrollStart) {
-      window.addEventListener(Events.APPLICATION_FORCED_SCROLL_START, this.unpin.bind(this), false)
+      window.addEventListener(
+        Events.APPLICATION_FORCED_SCROLL_START,
+        this.unpin.bind(this),
+        false
+      )
     }
 
     if (this.mainOpts.pinOnForcedScrollEnd) {
       window.addEventListener(Events.APPLICATION_FORCED_SCROLL_END, this.pin.bind(this), false)
     }
 
-    window.addEventListener(Events.APPLICATION_REVEALED, e => {
+    this.app.registerCallback(Events.APPLICATION_REVEALED, () => {
       window.addEventListener(Events.APPLICATION_SCROLL, this.update.bind(this), {
         capture: false,
         passive: true
       })
     })
 
-    window.addEventListener(Events.APPLICATION_READY, this.unpinIfScrolled.bind(this))
+    this.app.registerCallback(Events.APPLICATION_READY, this.unpinIfScrolled.bind(this))
 
     this.preflight()
 
@@ -246,34 +248,37 @@ export default class FixedHeader {
     this.opts.beforeEnter(this)
   }
 
-  preflight () {
+  preflight() {
     this.checkSize(true)
     this.checkBg(true)
     this.checkTop(true)
 
-    window.addEventListener(Events.APPLICATION_REVEALED, e => {
+    this.app.registerCallback(Events.APPLICATION_REVEALED, () => {
       setTimeout(() => {
         this.el.setAttribute('data-header-transitions', '')
       }, 350)
     })
   }
 
-  lock () {
+  lock() {
     this.preventPin = true
     this.preventUnpin = true
   }
 
-  unlock () {
+  unlock() {
     this.preventPin = false
     this.preventUnpin = false
   }
 
-  isScrolled () {
-    return (window.pageYOffset
-      || document.documentElement.scrollTop) - (document.documentElement.clientTop || 0) > 0
+  isScrolled() {
+    return (
+      (window.pageYOffset || document.documentElement.scrollTop) -
+        (document.documentElement.clientTop || 0) >
+      0
+    )
   }
 
-  unpinIfScrolled () {
+  unpinIfScrolled() {
     if (this.isScrolled()) {
       // page is scrolled on ready -- ensure we unpin
       this.pageIsScrolledOnReady = true
@@ -281,7 +286,7 @@ export default class FixedHeader {
     }
   }
 
-  enter () {
+  enter() {
     if (this.opts.enter) {
       this.checkSize(true)
       this.checkBg(true)
@@ -290,7 +295,7 @@ export default class FixedHeader {
     }
   }
 
-  setResizeTimer () {
+  setResizeTimer() {
     this._isResizing = true
     if (this._pinned) {
       // unpin if resizing to prevent visual clutter.
@@ -307,11 +312,11 @@ export default class FixedHeader {
     }, 500)
   }
 
-  update () {
+  update() {
     this.redraw()
   }
 
-  checkSize (force) {
+  checkSize(force) {
     if (this.currentScrollY > this.opts.offsetSmall) {
       if (force) {
         this.small()
@@ -325,7 +330,7 @@ export default class FixedHeader {
     }
   }
 
-  checkBg (force) {
+  checkBg(force) {
     if (this.currentScrollY > this.opts.offsetBg) {
       if (force) {
         this.altBg()
@@ -339,7 +344,7 @@ export default class FixedHeader {
     }
   }
 
-  checkTop (force) {
+  checkTop(force) {
     if (this.currentScrollY <= this.opts.offset) {
       if (force) {
         this.top()
@@ -353,7 +358,7 @@ export default class FixedHeader {
     }
   }
 
-  checkBot (force) {
+  checkBot(force) {
     if (this.currentScrollY + this.getViewportHeight() >= this.getScrollerHeight()) {
       if (force) {
         this.bottom()
@@ -367,7 +372,7 @@ export default class FixedHeader {
     }
   }
 
-  checkPin (force, toleranceExceeded) {
+  checkPin(force, toleranceExceeded) {
     if (this.shouldUnpin(toleranceExceeded)) {
       if (this.mobileMenuOpen) {
         return
@@ -386,12 +391,13 @@ export default class FixedHeader {
     }
   }
 
-  redraw () {
+  redraw() {
     this.currentScrollY = this.getScrollY()
     this.currentScrollHeight = document.body.scrollHeight
     const toleranceExceeded = this.toleranceExceeded()
 
-    if (this.isOutOfBounds()) { // Ignore bouncy scrolling in OSX
+    if (this.isOutOfBounds()) {
+      // Ignore bouncy scrolling in OSX
       return
     }
 
@@ -415,35 +421,35 @@ export default class FixedHeader {
     this._firstLoad = false
   }
 
-  notTop () {
+  notTop() {
     this._top = false
     this.el.removeAttribute('data-header-top')
     this.el.setAttribute('data-header-not-top', '')
     this.opts.onNotTop(this)
   }
 
-  top () {
+  top() {
     this._top = true
     this.el.setAttribute('data-header-top', '')
     this.el.removeAttribute('data-header-not-top')
     this.opts.onTop(this)
   }
 
-  notBottom () {
+  notBottom() {
     this._bottom = false
     this.el.setAttribute('data-header-not-bottom', '')
     this.el.removeAttribute('data-header-bottom')
     this.opts.onNotBottom(this)
   }
 
-  bottom () {
+  bottom() {
     this._bottom = true
     this.el.setAttribute('data-header-bottom', '')
     this.el.removeAttribute('data-header-not-bottom')
     this.opts.onBottom(this)
   }
 
-  unpin () {
+  unpin() {
     if (this.preventUnpin) {
       return
     }
@@ -453,7 +459,7 @@ export default class FixedHeader {
     this.opts.onUnpin(this)
   }
 
-  pin () {
+  pin() {
     if (this.preventPin) {
       return
     }
@@ -463,42 +469,42 @@ export default class FixedHeader {
     this.opts.onPin(this)
   }
 
-  notSmall () {
+  notSmall() {
     this._small = false
     this.el.setAttribute('data-header-big', '')
     this.el.removeAttribute('data-header-small')
     this.opts.onNotSmall(this)
   }
 
-  small () {
+  small() {
     this._small = true
     this.el.setAttribute('data-header-small', '')
     this.el.removeAttribute('data-header-big')
     this.opts.onSmall(this)
   }
 
-  notAltBg () {
+  notAltBg() {
     this._altBg = false
     this.el.setAttribute('data-header-reg-bg', '')
     this.el.removeAttribute('data-header-alt-bg')
     this.opts.onNotAltBg(this)
   }
 
-  altBg () {
+  altBg() {
     this._altBg = true
     this.el.setAttribute('data-header-alt-bg', '')
     this.el.removeAttribute('data-header-reg-bg')
     this.opts.onAltBg(this)
   }
 
-  shouldUnpin (toleranceExceeded) {
+  shouldUnpin(toleranceExceeded) {
     const scrollingDown = this.currentScrollY > this.lastKnownScrollY
     const pastOffset = this.currentScrollY >= this.opts.offset
 
     return scrollingDown && pastOffset && toleranceExceeded
   }
 
-  shouldPin (toleranceExceeded) {
+  shouldPin(toleranceExceeded) {
     if (this._isResizing) {
       return false
     }
@@ -509,60 +515,55 @@ export default class FixedHeader {
     return (scrollingUp && toleranceExceeded) || pastOffset
   }
 
-  isOutOfBounds () {
+  isOutOfBounds() {
     const pastTop = this.currentScrollY < 0
-    const pastBottom = this.currentScrollY
-      + this.getScrollerPhysicalHeight()
-      > this.getScrollerHeight()
+    const pastBottom =
+      this.currentScrollY + this.getScrollerPhysicalHeight() > this.getScrollerHeight()
 
     return pastTop || pastBottom
   }
 
-  getScrollerPhysicalHeight () {
-    return (this.opts.canvas === window || this.opts.canvas === document.body)
+  getScrollerPhysicalHeight() {
+    return this.opts.canvas === window || this.opts.canvas === document.body
       ? this.getViewportHeight()
       : this.getElementPhysicalHeight(this.opts.canvas)
   }
 
-  getScrollerHeight () {
-    return (this.opts.canvas === window || this.opts.canvas === document.body)
+  getScrollerHeight() {
+    return this.opts.canvas === window || this.opts.canvas === document.body
       ? this.getDocumentHeight()
       : this.getElementHeight(this.opts.canvas)
   }
 
-  getDocumentHeight () {
+  getDocumentHeight() {
     const { body } = document
     const { documentElement } = document
 
     return Math.max(
-      body.scrollHeight, documentElement.scrollHeight,
-      body.offsetHeight, documentElement.offsetHeight,
-      body.clientHeight, documentElement.clientHeight
+      body.scrollHeight,
+      documentElement.scrollHeight,
+      body.offsetHeight,
+      documentElement.offsetHeight,
+      body.clientHeight,
+      documentElement.clientHeight
     )
   }
 
-  getViewportHeight () {
-    return window.innerHeight
-      || document.documentElement.clientHeight
-      || document.body.clientHeight
+  getViewportHeight() {
+    return (
+      window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+    )
   }
 
-  getElementHeight (el) {
-    return Math.max(
-      el.scrollHeight,
-      el.offsetHeight,
-      el.clientHeight
-    )
+  getElementHeight(el) {
+    return Math.max(el.scrollHeight, el.offsetHeight, el.clientHeight)
   }
 
-  getElementPhysicalHeight (el) {
-    return Math.max(
-      el.offsetHeight,
-      el.clientHeight
-    )
+  getElementPhysicalHeight(el) {
+    return Math.max(el.offsetHeight, el.clientHeight)
   }
 
-  getScrollY () {
+  getScrollY() {
     if (this.opts.canvas.pageYOffset !== undefined) {
       return this.opts.canvas.pageYOffset
     }
@@ -572,13 +573,16 @@ export default class FixedHeader {
     return (document.documentElement || document.body.parentNode || document.body).scrollTop
   }
 
-  toleranceExceeded () {
+  toleranceExceeded() {
     return Math.abs(this.currentScrollY - this.lastKnownScrollY) >= this.opts.tolerance
   }
 
-  _getOptionsForSection (section, opts) {
+  _getOptionsForSection(section, opts) {
     // if section is not a key in opts, return default opts
-    if (!Object.prototype.hasOwnProperty.call(opts, 'sections') || !Object.prototype.hasOwnProperty.call(opts.sections, section)) {
+    if (
+      !Object.prototype.hasOwnProperty.call(opts, 'sections') ||
+      !Object.prototype.hasOwnProperty.call(opts.sections, section)
+    ) {
       return opts.default
     }
 
@@ -588,17 +592,17 @@ export default class FixedHeader {
     return opts
   }
 
-  _bindMobileMenuListeners () {
+  _bindMobileMenuListeners() {
     window.addEventListener('APPLICATION:MOBILE_MENU:OPEN', this._onMobileMenuOpen.bind(this))
     window.addEventListener('APPLICATION:MOBILE_MENU:CLOSED', this._onMobileMenuClose.bind(this))
   }
 
-  _onMobileMenuOpen () {
+  _onMobileMenuOpen() {
     this.opts.onMobileMenuOpen(this)
     this.mobileMenuOpen = true
   }
 
-  _onMobileMenuClose () {
+  _onMobileMenuClose() {
     this.opts.onMobileMenuClose(this)
     this.mobileMenuOpen = false
   }