@brandocms/jupiter 3.46.4 → 3.47.0

package/package.json

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

package/src/index.js

@@ -15,6 +15,7 @@ import Cookies from './modules/Cookies'
 import CoverOverlay from './modules/CoverOverlay'
 import Dom from './modules/Dom'
 import Dropdown from './modules/Dropdown'
+import EqualHeightImages from './modules/EqualHeightImages'
 import * as Events from './events'
 import FixedHeader from './modules/FixedHeader'
 import FooterReveal from './modules/FooterReveal'
@@ -48,6 +49,7 @@ export {
   Dom,
   Draggable,
   Dropdown,
+  EqualHeightImages,
   Events,
   FixedHeader,
   FooterReveal,

package/src/modules/Application/index.js

@@ -25,9 +25,15 @@ window.onpageshow = event => {
       gsap.to(dataFaders, { duration: 0.35, autoAlpha: 0 })
     }
 
-    gsap.set(document.body, {
-      clearProps: 'opacity'
-    })
+    gsap.set(document.body, { clearProps: 'opacity' })
+
+    // check that navigation is visible
+    const $nav = Dom.find('header[data-nav]')
+    gsap.set($nav, { clearProps: 'opacity' })
+
+    // check that footer is visible
+    const $footer = Dom.find('footer')
+    gsap.set($footer, { clearProps: 'opacity' })
   }
 }
 

package/src/modules/EqualHeightImages/index.js

@@ -0,0 +1,96 @@
+import { gsap } from 'gsap'
+import Dom from '../Dom'
+import imagesAreLoaded from '../../utils/imagesAreLoaded'
+
+export default class EqualHeightImages {
+  constructor (app) {
+    this.app = app
+    this.initialize()
+  }
+
+  initialize () {
+    const canvases = Dom.all('[data-eq-height-images]')
+    Array.from(canvases).forEach(canvas => {
+      // if (app.breakpoints.mediaQueries.iphone.matches || app.breakpoints.mediaQueries.mobile.matches) {
+      //   return
+      // }
+      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)
+
+          console.log('go')
+
+          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/Marquee/index.js

@@ -8,6 +8,7 @@ const DEFAULT_OPTIONS = {
   slowDownOnHover: true,
   paddingLeft: 0, //DEPRECATED
   startProgress: 0,
+  spacer: '<span>&nbsp;&mdash;&nbsp;</span>',
 
   onReveal: marqueeEl => {
     gsap.to(marqueeEl, { opacity: 1 })
@@ -172,20 +173,23 @@ export default class Marquee {
     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)      
     }
   }