@brandocms/jupiter 3.43.0 → 3.46.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+#### 3.46.0
+
+- **BREAKING** Marquee: Drop `paddingLeft` -- add `startProgress`. This sets where in the 
+  timeline we should start. Default is `0.5`
+- Application: Add `hardScrollToTop()`
+- Zoom: Try to improve zoom handling for chrome
+
+
+#### 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 

package/README.md

@@ -261,6 +261,57 @@ include images from this section. Otherwise, all lightboxed images will be inclu
 - `onPointerLeft/onPointerRight` - `function (lightbox)` - callback for when pointer direction changes
 
 
+## Toggler
+
+#### Example
+
+HTML
+```html
+<div data-toggle>
+  <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
+    </div>
+  </div>
+</div>
+```
+
+CSS
+```css
+[data-toggle-trigger] {
+  .arrow {
+    display: inline-block;
+    transform: scaleY(1);
+    transition: transform 250ms ease;
+    &.active {
+      transform: scaleY(-1);
+    }
+  }
+}
+
+[data-toggle-content] {
+  height: 0;
+  overflow: hidden;
+  opacity: 1;
+  position: relative;
+}
+```
+
+JS
+```es6
+import { Toggler } from '@brandocms/jupiter'
+
+app.togglers = []
+
+const togglers = Dom.all('[data-toggle]')
+togglers.forEach(toggleEl => {
+  app.togglers.push(new Toggler(app, toggleEl))
+})
+```
+
+#### Options
+
 
 ## Links
 

package/package.json

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

package/src/index.js

@@ -31,6 +31,7 @@ import Popup from './modules/Popup'
 import ScrollSpy from './modules/ScrollSpy'
 import StackedBoxes from './modules/StackedBoxes'
 import StickyHeader from './modules/StickyHeader'
+import Toggler from './modules/Toggler'
 import Typography from './modules/Typography'
 
 import imageIsLoaded from './utils/imageIsLoaded'
@@ -63,6 +64,7 @@ export {
   ScrollSpy,
   StackedBoxes,
   StickyHeader,
+  Toggler,
   Typography,
 
   // Export utils

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/Dom/index.js

@@ -73,6 +73,10 @@ class DOM {
     return classes.map(className => element.classList.toggle(className))
   }
 
+  hasAttribute (element, attributeName) {
+    return element.hasAttribute(attributeName)
+  }
+
   overlapsVertically ($div1, $div2) {
     // Div 1 data
     const d1Offset = $div1.getBoundingClientRect()

package/src/modules/FixedHeader/index.js

@@ -223,9 +223,11 @@ export default class FixedHeader {
       window.addEventListener(Events.APPLICATION_FORCED_SCROLL_END, this.pin.bind(this), false)
     }
 
-    window.addEventListener(Events.APPLICATION_SCROLL, this.update.bind(this), {
-      capture: false,
-      passive: true
+    window.addEventListener(Events.APPLICATION_REVEALED, e => {
+      window.addEventListener(Events.APPLICATION_SCROLL, this.update.bind(this), {
+        capture: false,
+        passive: true
+      })
     })
 
     window.addEventListener(Events.APPLICATION_READY, this.unpinIfScrolled.bind(this))
@@ -249,9 +251,11 @@ export default class FixedHeader {
     this.checkBg(true)
     this.checkTop(true)
 
-    setTimeout(() => {
-      this.el.setAttribute('data-header-transitions', '')
-    }, 350)
+    window.addEventListener(Events.APPLICATION_REVEALED, e => {
+      setTimeout(() => {
+        this.el.setAttribute('data-header-transitions', '')
+      }, 350)
+    })
   }
 
   lock () {

package/src/modules/Lazyload/index.js

@@ -191,6 +191,14 @@ export default class Lazyload {
       img.removeAttribute('data-ll-blurred')
       img.removeAttribute('data-ll-loading')
       img.setAttribute('data-ll-loaded', '')
+
+      // 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.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,12 @@ const DEFAULT_OPTIONS = {
   speed: 100,
   extraHeight: 0,
   slowDownOnHover: true,
-  paddingLeft: 0
+  paddingLeft: 0, //DEPRECATED
+  startProgress: 0,
+
+  onReveal: marqueeEl => {
+    gsap.to(marqueeEl, { opacity: 1 })
+  }
 }
 
 export default class Marquee {
@@ -25,7 +30,9 @@ export default class Marquee {
   }
 
   initialize () {
+    gsap.set(this.elements.$marquee, { opacity: 0 })
     window.addEventListener('APPLICATION:RESIZE', this.updateMarquee.bind(this))
+    window.addEventListener('APPLICATION:REVEALED', this.revealMarquee.bind(this))
     this.updateMarquee()
     this.setupObserver()
     if (this.opts.slowDownOnHover) {
@@ -34,6 +41,11 @@ export default class Marquee {
     }
   }
 
+  revealMarquee (e) {
+    this.updateMarquee()
+    this.opts.onReveal(this.elements.$marquee)
+  }
+
   updateMarquee (e) {
     if (e) {
       // updating cause of a resize. we only care about width change
@@ -41,6 +53,7 @@ export default class Marquee {
         return
       }
     }
+
     this.killTweens()
     this.clearHolders()
     this.setHeight()
@@ -76,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
   }
@@ -160,14 +175,18 @@ export default class Marquee {
     this.elements.$holder.appendChild(Dom.new('<span>&nbsp;&mdash;&nbsp;</span>')[0])
 
     const textWidth = this.elements.$item.offsetWidth
-    const count = Math.ceil(this.app.size.width / textWidth) - 1
-
-    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 (textWidth) {
+      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])
+      }
+  
+      this.elements.$marquee.appendChild(this.elements.$holder.cloneNode(true))
+    } else {
+      console.error('no textWidth! probably image?', this.elements.$item)
     }
-
-    this.elements.$marquee.appendChild(this.elements.$holder.cloneNode(true))
   }
 
   setHeight () {

package/src/modules/Moonwalk/index.js

@@ -576,7 +576,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 +599,7 @@ export default class Moonwalk {
               section,
               entry.target,
               duration,
+              interval,
               transition,
               overlap,
               alphaTween
@@ -651,10 +652,14 @@ 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
 
+    if (Dom.hasAttribute(target, 'data-moonwalked')) {
+      return
+    }
+
     if (section.timeline.isActive() && section.timeline.recent()) {
       if (section.timeline.recent().time() > startingPoint) {
         /* We're late for this tween if it was supposed to be sequential,
@@ -662,10 +667,10 @@ 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'
+      tweenPosition = () => '>'
     }
 
     gsap.set(target, tweenTransition.from)
@@ -677,6 +682,7 @@ export default class Moonwalk {
       },
       tweenPosition()
     )
+    .call(() => { target.setAttribute('data-moonwalked', '') }, null, '<')
 
     if (alphaTween) {
       section.timeline.to(target, {
@@ -697,11 +703,11 @@ 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
-
-    if (Dom.hasClass(target, 'moonwalked')) {
+    const startingPoint = tweenDuration - (tweenOverlap * -1)
+    
+    if (Dom.hasAttribute(target, 'data-moonwalked')) {
       return
     }
 
@@ -712,10 +718,10 @@ 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'
+      tweenPosition = () => '>'
     }
 
     section.timeline.to(
@@ -726,6 +732,6 @@ export default class Moonwalk {
         duration: tweenDuration
       },
       tweenPosition()
-    )
+    ).call(() => target.setAttribute('data-moonwalked', ''), null, '>')
   }
 }

package/src/modules/Toggler/index.js

@@ -0,0 +1,46 @@
+import { gsap } from 'gsap'
+import Dom from '../Dom'
+
+const DEFAULT_OPTIONS = {}
+  
+export default class Toggler {
+  constructor(app, el) {
+    this.open = false
+    this.app = app
+    this.el = el
+    // this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
+    this.trigger = Dom.find(this.el, '[data-toggle-trigger]')
+    this.triggerIcon = Dom.find(this.trigger, 'span.icon')
+    this.content = Dom.find(this.el, '[data-toggle-content]')
+    this.trigger.addEventListener('click', this.onClick.bind(this))
+  }
+
+  onClick() {
+    this.toggleState()
+
+    if (this.open) {
+      this.triggerIcon.classList.toggle('active')
+      gsap.set(this.content, { height: 'auto' })
+      this.el.classList.toggle('open')
+      gsap.from(this.content, { height: 0, ease: 'power1.inOut' })
+    } else {
+      this.triggerIcon.classList.toggle('active')
+      gsap.to(this.content, {
+        duration: 0.25,
+        onComplete: () => {
+          this.el.classList.toggle('open')
+        }
+      })
+
+      gsap.to(this.content, { height: 0, ease: 'power3.out' })
+    }
+  }
+
+  toggleState() {
+    if (this.open) {
+      this.open = false
+    } else {
+      this.open = true
+    }
+  }
+}

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