@brandocms/jupiter 3.45.0 → 3.46.2

package/README.md

@@ -268,7 +268,7 @@ include images from this section. Otherwise, all lightboxed images will be inclu
 HTML
 ```html
 <div data-toggle>
-  <button data-toggle-trigger>Click to expand <span class="arrow">&darr;</span></button>
+  <button data-toggle-trigger>Click to expand <span class="arrow icon">&darr;</span></button>
   <div class="panel" data-toggle-content>
     <div class="panel-content">
       Content goes here

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@brandocms/jupiter",
-    "version": "3.45.0",
+    "version": "3.46.2",
     "description": "Frontend helpers.",
     "author": "Univers/Twined",
     "license": "UNLICENSED",
@@ -33,18 +33,19 @@
     "dependencies": {
         "@egjs/hammerjs": "^2.0.17",
         "body-scroll-lock": "^4.0.0-beta.0",
-        "gsap": "3.8.0",
+        "gsap": "3.11.0",
         "lodash.defaultsdeep": "^4.6.1"
     },
     "devDependencies": {
-        "@babel/core": "^7.16.0",
-        "@babel/preset-env": "^7.16.4",
-        "babel-jest": "^27.3.1",
-        "eslint": "8.3.0",
+        "@babel/core": "^7.18.13",
+        "@babel/preset-env": "^7.18.10",
+        "babel-jest": "^29.0.1",
+        "eslint": "8.23.0",
         "eslint-config-airbnb-base": "^15.0.0",
-        "eslint-plugin-import": "^2.25.3",
+        "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-node": "^11.1.0",
-        "eslint-plugin-promise": "^5.1.1",
-        "jest": "^27.3.1"
+        "eslint-plugin-promise": "^6.0.1",
+        "jest": "^29.0.1",
+        "jest-environment-jsdom": "^29.0.1"
     }
 }

package/src/modules/Application/index.js

@@ -71,6 +71,7 @@ export default class Application {
     this.userAgent = navigator.userAgent
     this._lastWindowHeight = 0
     this.breakpoint = null
+    this.language = document.documentElement.lang
 
     this.size = {
       width: 0,
@@ -195,29 +196,41 @@ export default class Application {
     }
   }
 
-  zoomCalculateChrome () {
-    const currentDevicePixelRatio = Math.round(window.devicePixelRatio * 100)
-    const delta = (currentDevicePixelRatio - this._lastDevicePixelRatio) / 100
-    this.size.zoom += delta
-    this._lastDevicePixelRatio = currentDevicePixelRatio
+  zoomCalculateChrome (dimsChanged) {
+    // only calc new zoom if width/height changed
+    if (dimsChanged) {
+      const currentDevicePixelRatio = Math.round(window.devicePixelRatio * 100)
+      const delta = (currentDevicePixelRatio - this._lastDevicePixelRatio) / 100
+      this.size.zoom += delta
+      if (this.size.zoom === 0) { this.size.zoom = 1 }
+      this._lastDevicePixelRatio = currentDevicePixelRatio
+    } 
   }
 
   zoomCalculateSafari () {
+    // safari does not call resize when switching dpi/monitors
     this.size.zoom = this._zoomSVG.currentScale
   }
 
-  updateZoom () {
+  updateZoom (dimsChanged = false, dprDelta = 0) {
     switch (this.browser) {
       case 'chrome':
-        this.zoomCalculateChrome()
+        this.zoomCalculateChrome(dimsChanged)
         break
 
       case 'safari':
-        this.zoomCalculateSafari()
+        this.zoomCalculateSafari(dimsChanged)
         break
 
       default:
-        this.size.zoom = 1 + (zoom.calculate(this.browser) - this._initialZoom)
+        if ([1, -1].indexOf(dprDelta) === -1) {
+          if (dimsChanged) {
+            this.size.zoom = 1 + (zoom.calculate(this.browser) - this._initialZoom)
+            if (this.size.zoom === 0) { this.size.zoom = 1 }
+          }
+        } else {
+          this._initialZoom = Math.min(Math.max(this._initialZoom - dprDelta, 1), 2)
+        }
     }
 
     this.setZoom()
@@ -329,6 +342,10 @@ export default class Application {
     })
   }
 
+  hardScrollToTop () {
+    window.scrollTo(0, 0)
+  }
+
   hardScrollTo (target) {
     const element = Dom.find(target)
     if (element) {
@@ -450,6 +467,13 @@ export default class Application {
     }
   }
 
+  _getBaseVW () {
+    const fontBasePx = Dom.getCSSVar('--font-base-px')
+    const fontBase = parseFloat(fontBasePx, 10)
+    const innerWidth = window.innerWidth
+    return `${fontBase / innerWidth * 100}vw`
+  }
+
   setDims () {
     const root = document.querySelector(':root')
 
@@ -457,16 +481,18 @@ export default class Application {
     this.size.initialOuterHeight = window.outerHeight
     this.size.initialInnerWidth = window.innerWidth
     this.size.initialOuterWidth = window.outerWidth
-
+    
     root.style.setProperty('--vp-initial-inner-h', `${this.size.initialInnerHeight}px`)
     root.style.setProperty('--vp-initial-outer-h', `${this.size.initialOuterHeight}px`)
     root.style.setProperty('--vp-initial-inner-w', `${this.size.initialInnerWidth}px`)
     root.style.setProperty('--vp-initial-outer-w', `${this.size.initialOuterWidth}px`)
     root.style.setProperty('--ec-zoom', `${this.size.zoom}`)
-
+    
     this.setvh100Max()
     this.setvh100()
+    this.setFontBaseVw()
 
+    this.size.devicePixelRatio = window.devicePixelRatio
     this.size.container = Dom.getCSSVar('--container-padding')
     this.size.width = window.innerWidth
     this.size.height = window.innerHeight
@@ -474,6 +500,12 @@ export default class Application {
     this.position.left = window.pageXOffset
   }
 
+  setFontBaseVw () {
+    const root = document.querySelector(':root')
+    this.size.baseVW = this._getBaseVW()
+    root.style.setProperty('--font-base-vw', `${this.size.baseVW}`)
+  }
+
   setZoom () {
     const root = document.querySelector(':root')
     root.style.setProperty('--ec-zoom', `${this.size.zoom}`)
@@ -488,6 +520,12 @@ export default class Application {
     root.style.setProperty('--vp-1vh', `${window.innerHeight * 0.01}px`)
   }
 
+  setvw100 () {
+    const root = document.querySelector(':root')
+    root.style.setProperty('--vp-100vw', `${window.innerWidth}px`)
+    root.style.setProperty('--vp-1vw', `${window.innerWidth * 0.01}px`)
+  }
+
   /**
    * Get the max 100vh for iOS
    */
@@ -509,11 +547,16 @@ export default class Application {
   onResize (e) {
     const widthChanged = (this.size.width !== window.innerWidth)
     const heightChanged = (this.size.height !== window.innerHeight)
-
+    const dimsChanged = widthChanged || heightChanged
+    const dprDelta = this.size.devicePixelRatio - window.devicePixelRatio
+    
     this.size.width = window.innerWidth
     this.size.height = window.innerHeight
+    this.size.devicePixelRatio = window.devicePixelRatio
+
+    this.updateZoom(dimsChanged, dprDelta)
     this.setvh100()
-    this.updateZoom()
+    this.setFontBaseVw()
 
     const evt = new CustomEvent(Events.APPLICATION_RESIZE, { detail: { widthChanged, heightChanged } })
     window.dispatchEvent(evt)

package/src/modules/Dataloader/index.js

@@ -0,0 +1,8 @@
+/**
+ * <article 
+ *  data-loader>
+ *  <div data-loader-canvas>
+ * 
+ * </div>
+ * 
+ */

package/src/modules/Lazyload/index.js

@@ -187,10 +187,24 @@ export default class Lazyload {
     const img = picture.querySelector('img')
 
     const onload = () => {
+      if (!img.getAttribute('data-ll-loaded') && this.app.browser === 'firefox') {
+        // set sizes attribute on load again, 
+        // since firefox sometimes is a bit slow to 
+        // get the actual image width
+        const width = this.getWidth(img)
+
+        img.setAttribute('sizes', `${width}px`)
+        if (img.parentNode) {
+          Array.from(Dom.all(img.parentNode, 'source'))
+            .forEach(source => source.setAttribute('sizes', `${width}px`))
+        }
+      }
+
       img.removeAttribute('data-ll-placeholder')
       img.removeAttribute('data-ll-blurred')
       img.removeAttribute('data-ll-loading')
       img.setAttribute('data-ll-loaded', '')
+      picture.setAttribute('data-ll-srcset-loaded', '')
     }
 
     img.addEventListener('load', onload, false)

package/src/modules/Links/index.js

@@ -15,7 +15,7 @@ const DEFAULT_OPTIONS = {
     links.app.scrollTo(target, links.opts.scrollDuration, links.opts.triggerEvents)
   },
 
-  onTransition: href => {
+  onTransition: (href, app) => {
     const main = document.querySelector('main')
     const header = document.querySelector('header[data-nav]')
     const footer = document.querySelector('footer')
@@ -152,7 +152,7 @@ export default class Links {
 
         if (href.indexOf(document.location.hostname) > -1 || href.startsWith('/')) {
           e.preventDefault()
-          this.opts.onTransition(href)
+          this.opts.onTransition(href, this.app)
         }
       })
     })

package/src/modules/Marquee/index.js

@@ -6,7 +6,9 @@ const DEFAULT_OPTIONS = {
   speed: 100,
   extraHeight: 0,
   slowDownOnHover: true,
-  paddingLeft: 0,
+  paddingLeft: 0, //DEPRECATED
+  startProgress: 0,
+
   onReveal: marqueeEl => {
     gsap.to(marqueeEl, { opacity: 1 })
   }
@@ -87,14 +89,16 @@ export default class Marquee {
     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 })
     this.timeline
-      .to($allHolders, { xPercent: -100, ease: 'none', duration: this.duration })
+      .to($allHolders, { xPercent: -100, ease: 'none', duration: this.duration }, 'standard')
       .repeat(-1)
 
+    this.timeline.totalProgress(this.opts.startProgress)
+
     window.timeline = this.timeline
     window.marquee = this
   }
@@ -172,7 +176,7 @@ export default class Marquee {
 
     const textWidth = this.elements.$item.offsetWidth
     if (textWidth) {
-      const count = Math.ceil(this.app.size.width / textWidth) - 1
+      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))

package/src/modules/Moonwalk/index.js

@@ -249,8 +249,8 @@ export default class Moonwalk {
     }
 
     const timeline = gsap.timeline({
-      // autoRemoveChildren: true
-      smoothChildTiming: true
+      autoRemoveChildren: false,
+      smoothChildTiming: false      
     })
 
     return {
@@ -562,9 +562,13 @@ export default class Moonwalk {
       for (let i = 0; i < entries.length; i += 1) {
         const entry = entries[i]
 
-        if (entry.isIntersecting) {
+        if (entry.isIntersecting || entry.intersectionRatio > 0) {
           section.running = true
 
+          if (entry.target.dataset.moonwalkId) {
+            console.debug('-- intersecting', entry.target.dataset.moonwalkId)
+          }
+
           const walkName = entry.target.getAttribute('data-moonwalk')
           const cfg = !walkName.length ? opts.walks.default : opts.walks[walkName]
 
@@ -576,7 +580,7 @@ export default class Moonwalk {
           } = cfg
 
           let { alphaTween } = cfg
-          let overlap = duration - interval
+          let overlap = (duration - interval) * -1 // flip it
 
           if (section.stage.firstTween) {
             overlap = 0
@@ -599,6 +603,7 @@ export default class Moonwalk {
               section,
               entry.target,
               duration,
+              interval,
               transition,
               overlap,
               alphaTween
@@ -651,7 +656,7 @@ export default class Moonwalk {
    * @param {*} tweenOverlap
    * @param {*} alphaTween
    */
-  tweenJS (section, target, tweenDuration, tweenTransition, tweenOverlap, alphaTween) {
+  tweenJS (section, target, tweenDuration, tweenInterval, tweenTransition, tweenOverlap, alphaTween) {
     let tweenPosition
     const startingPoint = tweenDuration - tweenOverlap
 
@@ -666,7 +671,7 @@ export default class Moonwalk {
         tweenPosition = () => section.timeline.time()
       } else {
         /* Still time, add as normal overlap at the end */
-        tweenPosition = () => `>-${tweenOverlap}`
+        tweenPosition = () => `>${tweenOverlap}`
       }
     } else {
       tweenPosition = () => '+=0'
@@ -674,14 +679,13 @@ export default class Moonwalk {
 
     gsap.set(target, tweenTransition.from)
 
-    section.timeline.to(
-      target, {
-        ...tweenTransition.to,
-        duration: tweenDuration
-      },
-      tweenPosition()
-    )
-    .call(() => { target.setAttribute('data-moonwalked', '') }, null, '<')
+    const toTransition = {
+      ...tweenTransition.to,
+      duration: tweenDuration,
+      onComplete: () => target.setAttribute('data-moonwalked', '')
+    }
+
+    section.timeline.to(target, toTransition, tweenPosition())
 
     if (alphaTween) {
       section.timeline.to(target, {
@@ -702,10 +706,10 @@ export default class Moonwalk {
    * @param {*} transition
    * @param {*} overlap
    */
-  tweenCSS (section, target, tweenDuration, tweenTransition, tweenOverlap) {
+  tweenCSS (section, target, tweenDuration, tweenInterval, tweenTransition, tweenOverlap) {
     let tweenPosition
-    const startingPoint = tweenDuration - tweenOverlap
-
+    const startingPoint = tweenDuration - (tweenOverlap * -1)
+    
     if (Dom.hasAttribute(target, 'data-moonwalked')) {
       return
     }
@@ -717,7 +721,7 @@ export default class Moonwalk {
         tweenPosition = () => section.timeline.time()
       } else {
         /* Still time, add as normal overlap at the end */
-        tweenPosition = () => `>-${tweenOverlap}`
+        tweenPosition = () => `>${tweenOverlap}`
       }
     } else {
       tweenPosition = () => '+=0'
@@ -731,6 +735,6 @@ export default class Moonwalk {
         duration: tweenDuration
       },
       tweenPosition()
-    ).call(() => { target.setAttribute('data-moonwalked', '') }, null, '<')
+    ).call(() => target.setAttribute('data-moonwalked', ''), null, '>')
   }
 }

package/src/modules/Typography/index.js

@@ -18,6 +18,12 @@ export default class Typography {
       self.elems = [...parent.querySelectorAll(self.settings.selector)]
     }
 
+    // load children
+    const typoParents = document.querySelectorAll('[data-typo-children]')
+    typoParents.forEach(typoParent => {
+      self.elems = [...typoParent.children]
+    })
+
     this.apply()
   }
 

package/src/utils/zoom.js

@@ -24,15 +24,10 @@ const _mediaQueryBinarySearch = (property, unit, a, b, maxIter, epsilon) => {
   return ratio
 }
 
-/**
-Firefox: OK
-Chrome: get the devicePixelRatio
-
-window.devicePixelRatio - initial 
-
- */
+const calculateFirefox = () => {
+  return Math.round(_mediaQueryBinarySearch('min--moz-device-pixel-ratio', '', 0, 10, 20, 0.0001) * 10) / 10
+}
 
-const calculateFirefox = () => Math.round(_mediaQueryBinarySearch('min--moz-device-pixel-ratio', '', 0, 10, 20, 0.0001) * 10) / 10
 const calculateChrome = initial => Math.round(window.devicePixelRatio * 100) - initial
 const calculateDefault = () => Math.round(((window.outerWidth) / window.innerWidth) * 10) / 10
 

package/CHANGELOG.md

@@ -1,383 +0,0 @@
-#### 3.45.0
-
-- Marquee: Reveal on `APPLICATION:REVEALED`
-- Add Toggler module
-
-
-#### 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
-- MobileMenu: set `this.open` boolean on opening/closing
-
-
-#### 3.42.5
-
-- Links: Fade out header/footer (if found) in default transition
-- Moonwalk: Don't wait for images with `data-placeholder`, render right away
-  and let Lazyload do the image reveal.
-
-#### 3.42.4
-
-- Moonwalk: Fix fallback selector. This could have broken devices with
-  prefer reduced motion enabled.
-
-#### 3.42.3
-
-- Zoom: Change logic for Chrome/Safari
-
-#### 3.42.2
-
-- Popup: Listen for ESC to close popup
-
-#### 3.42.1
-
-- Moonwalk: Also remove `-children` when resetting
-- FixedHeader: Only run `onAltBg` and `onNotAltBg` if `altBgColor` is set
-- Application: Set browser zoom as `--ec-zoom` variable. This is used
-  in EuropaCSS for scaling/zooming vw fontsizes.
-
-#### 3.42.0
-
-- FixedHeader: Try to fix scroll jank with content-visibility
-- General: Better checking for existing elements before proceeding
-
-#### 3.41.3
-
-- CoverOverlay: Check that iframe exists
-- Lazyload: Ensure parent node exists before setting sizes
-- General: Switch package scope to brandocms
-
-#### 3.41.2
-
-- Marquee: Play when in viewport initially. Fixes resize bug.
-
-#### 3.41.1
-
-- Marquee: Update marquee dimensions on resize
-
-#### 3.41.0
-
-- Marquee: New module
-
-#### 3.40.1
-
-- FixedHeader: Check props as preflight
-- FixedHeader: Set data-header-transitions after initial preflight
-
-#### 3.40.0
-
-- Dropdown: New module
-- Scrollspy: New module
-
-#### 3.39.1
-
-- FixedHeader: Fix `onOutline` callback
-- Lazyload: Also set `sizes` on `source` tags
-
-
-#### 3.39.0
-
-- Lightbox: Add support for srcset. Add `data-srcset` to your anchor tag with `data-lightbox`
-- FixedHeader: Remove unused intersect logic.
-- Lazyload: Fix setting `srcset` on `source` tags that have `data-srcset`
-
-
-#### 3.38.0
-
-- Application: Prevent scrollLock running while already locked, since this would reset scrollbar
-  width padding compensation
-- Application: Add `extraPaddedElements` param to `scrollLock`. If for instance your nav needs
-  the same padding as the body element when compensating for scrollbar width.
-  `app.scrollLock(['header[data-nav] nav']);`
-- Cookies: Expire cookie law cookie one year in the future.
-- Dom: Add `Dom.inViewport(el)` to check if parts of `el` is currently visible
-- Dom: Add `Dom.create('div', ['my-class1', 'my-class2'])` convenience function
-- Dom: Add `Dom.remove(el)` convenience function for removing `el` from document
-- Dom: Add `Dom.append(el)` convenience function for appending `el` to `body`
-- Lazyload: Set `data-ll-loaded` on finished lazy loaded images.
-- Lazyload: Prevent repeat lazyloading already loaded image
-- Lazyload: Prevent repeat lazyloading already loaded image
-- Lazyload: Dynamically set `sizes` for images with `[data-sizes="auto"]`
-- Moonwalk: Add `container` param to constructor. For instance if we want to run Moonwalk
-  on a json loaded doc.
-
-
-#### 3.37.0
-
-- update GSAP, export ScrollTrigger
-- Application: add `app.section`
-- HeroSlider: add `lazyImages` config. If true, tries to lazyload first image before
-  setting slider as ready
-
-
-#### 3.36.0
-
-- Moonwalk: Fix space in class name when css tweening
-- Moonwalk: add `clearMoonwalkOnAnchors`. Removes all moonwalks if called from a link with hash/anchor.
-I.e if the URL is `/news#latest`, all moonwalks are removed. This can sort out a rendering bug with
-IntersectionObserver that sometimes happens.
-- Application: add `respectReducedMotion`. Set to false if you don't want to respect the user's
-reduced-motion settings. May prevent some rendering bugs in extreme cases, but not recommended.
-- General: Don't include polyfills in package, include from application
-- General: Only try to call object-fit polyfill on IE11
-- General: Set capture/passive for events where applicable.
-- Lazyload: Force picturefill after lazyload on IE11
-
-
-#### 3.35.0
-
-- Dom: `setCSSVar`
-- FixedHeader: fix `onOutline` event
-- Lightbox: `swipe: true/false` cfg setting. If swipe is true, native zoom won't work, so allow to choose.
-- Moonwalk: add `clearNestedSections` -- NOTE: This is enabled by default, since nested sections
-  usually leads to trouble!
-- StickyHeader: add `beforeEnter` event
-- StickyHeader: add `unPinOnResize` cfg.
-
-
-#### 3.34.1
-
-- Cookies: Set `cookielaw` cookie to ROOT
-
-
-#### 3.34.0
-
-- Lightbox: Add `trigger` to opts.
-- Drop node 8 from travis
-
-
-#### 3.33.0
-
-- Add `APPLICATION_REVEALED` to registerable callbacks.
-  app.registerCallback(Events.APPLICATION_REVEALED, () => {})
-
-
-#### 3.32.0
-
-- FixedHeader: Add `onOutline` event that pins header when outline is enabled. Replaces `pinOnOutline`.
-- Moonwalk: Change default starting style to be `opacity 0` instead of `visibility: hidden`, since the latter
-screws up tabbing. Make sure your css reflects this by setting `[data-moonwalk], [data-moonwalk-section], ...`
-to `opacity: 0` instead of `visibility: hidden`. If you update `europacss` this is fixed automatically.
-
-
-#### 3.31.0
-
-- Fix cookielaw banner not respecting cookie set
-
-
-#### 3.30.0
-
-- Kill all faders
-
-
-#### 3.29.0
-
-- HeroVideo: Add `data-src` option for choosing mobile/desktop versions.
-
-
-#### 3.28.0
-
-- Bug fixes
-- Update GSAP to 3.1.1
-- Moonwalk: Fix CSS transitions
-
-
-#### 3.27.0
-
-- Moonwalk: Allow setting named children - `data-moonwalk-children="slide"`
-- Moonwalk: Clear out more keys on reduced-motion. Update EuropaCSS too for fixes.
-- HeroVideo: Add `data-cover` for cover image.
-
-
-#### 3.26.0
-
-- Links: Add `triggerEvents` and `scrollDuration` to config.
-
-
-#### 3.25.0
-
-- Fix Safari back button bug where fader would stay activated.
-
-
-#### 3.24.2
-
-- Lock GSAP to 3.0.4 due to a timeline regression.
-
-
-#### 3.24.1
-
-- Remove debug log
-
-
-#### 3.24.0
-
-- MobileMenu: Fix: Prevent default when binding click event
-
-
-#### 3.23.0
-
-- MobileMenu: Fix: Pass self to `onResize` event.
-
-
-#### 3.22.0
-
-- Moonwalk: Fix visual bug
-- Moonwalk: Add runs. Runs a function when element comes into view.
-
-
-#### 3.21.0
-
-- gsap 3!
-- FixedHeader: Allow function as `offset` and `offsetBg`
-
-
-#### 3.20.0
-
-- FixedHeader: Allow element as `offset`
-- Move `unPinOnResize` to section config!
-
-
-#### 3.19.0
-
-- HeroVideo: Don't autoplay when in viewport if pause is pressed
-- Links: Ignore `noanim` classed anchors
-
-
-#### 3.18.0
-
-- Applicaton: Add `Application.pollForElement` and `Application.pollForVariable`
-- FixedHeader: Add `onMobileMenuOpen` and `onMobileMenuClose` callbacks
-- Dom: Add `Dom.offset` and `Dom.position`
-
-
-#### 3.17.0
-
-- StickyHeader: Add `opts.pinOnForcedScroll`
-- Application: Add `Application.scrollTo`
-- HeroVideo: Add pause/play.
-  `opts.elements.play` and `opts.elements.pause` are strings representing the SVG icons.
-  They get wrapped in a button with `[data-hero-video-pause].
-
-
-#### 3.16.0
-
-- Lightbox: track pointer direction in `pointerDirection`
-- Lightbox: expose `onClick`, `onPointerLeft` and `onPointerRight` events.
-- StickyHeader: add `onClone` event to customize how the auxillary header is created.
-
-#### 3.15.0
-
-- HeroSlider: better initialization. Expose `onFadeIn` event
-- Export `_defaultsDeep`
-
-
-#### 3.14.0
-
-- StickyHeader: reveals on `Events.APPLICATION_REVEALED`. Can be set with `opts.on`
-- Moonwalk: Force section element to be visible (Set `visibility: hidden`
-  in pcss for `[data-moonwalk-section]`)
-- Application: remove default fader delay.
-
-
-#### 3.13.0
-
-- Lightbox: Add keyboard navigation
-
-
-#### 3.12.0
-
-- Lightbox: Use timelines for even more flexibility with captions
-
-
-#### 3.11.0
-
-- Lightbox: Rewritten to be more flexible. Exposes more events. Preloads more images.
-
-
-#### 3.10.0
-
-- Moonwalk: Removed `opts.fireOnReady`. Added `opts.on` option instead. Pass the event
-  we should listen for. The default is `on: Events.APPLICATION_REVEALED`
-- Moonwalk: add `opts.initialDelay`. This is an added delay before `ready()` is fired.
-- FixedHeader: add `opts.on` option for listening to an event before firing `enter()`
-- FixedHeader: added `opts.<section>.beforeEnter`. This gets called during init, so
-  it's a good place to hide items that should be revealed in `opts.<section>.enter`.
-
-
-#### 3.9.0
-
-- FixedHeader: Allow locking/unlocking pin/unpin
-- StickyHeader: Allow locking/unlocking pin/unpin
-
-
-#### 3.8.0
-
-- Lightbox: Lock scroll
-- Lightbox: Ensure image is loaded before fading in
-
-
-#### 3.7.0
-
-- Cookielaw: Show after application is revealed. Delay by 0.5 as standard.
-- Fontloader: Check that fonts are loaded before calling fadeIn() / revealed event
-
-
-#### 3.6.0
-
-- Lightbox: More hooks
-- Breakpoints: Initialize earlier to ensure breakpoints are available to other modules
-- Remove `no-js`/`js` feature test. Handle this at the application
-level instead to try and avoid fouc. Newest Brando version does this for us
-in the `render_meta`.
-
-
-#### 3.5.0
-
-- Dom: Add `overlapsVertically` function
-- FixedHeader: Add `unPinOnResize` boolean switch
-- Export `rafCallback` function
-
-
-#### 3.4.0
-
-- Add `Dom` class
-
-
-#### 3.3.0
-
-- Force update Parallax after Git tries to ruin everything
-
-
-#### 3.2.0
-
-- Popup: Add triggers for opening and closing popups. Add docs in README
-
-
-#### 3.1.0
-
-- Application: Set dimensions on application init
-- Application: Extended debug info (screen size, viewport, features)
-- Moonwalk: Clean up Moonwalk code
-- Parallax: Fix parallax up a bit. Still mainly for hero usage.
-- Parallax: Fix parallax up a bit. Still mainly for hero usage.