@brandocms/jupiter 3.45.0 → 3.46.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+#### 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`

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.0",
     "description": "Frontend helpers.",
     "author": "Univers/Twined",
     "license": "UNLICENSED",

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

@@ -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,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

@@ -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,7 +652,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,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)
@@ -702,10 +703,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,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(
@@ -731,6 +732,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