@brandocms/jupiter 3.48.3 → 3.50.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@brandocms/jupiter",
-    "version": "3.48.3",
+    "version": "3.50.0",
     "description": "Frontend helpers.",
     "author": "Univers/Twined",
     "license": "UNLICENSED",
@@ -33,7 +33,7 @@
     "dependencies": {
         "@egjs/hammerjs": "^2.0.17",
         "body-scroll-lock": "^4.0.0-beta.0",
-        "gsap": "3.11.3",
+        "gsap": "3.12.2",
         "lodash.defaultsdeep": "^4.6.1"
     },
     "devDependencies": {

package/src/index.js

@@ -24,6 +24,7 @@ import Links from './modules/Links'
 import Marquee from './modules/Marquee'
 import MobileMenu from './modules/MobileMenu'
 import Moonwalk from './modules/Moonwalk'
+import Popover from './modules/Popover'
 import Popup from './modules/Popup'
 import ScrollSpy from './modules/ScrollSpy'
 import StackedBoxes from './modules/StackedBoxes'
@@ -60,6 +61,7 @@ export {
   Marquee,
   MobileMenu,
   Moonwalk,
+  Popover,
   Popup,
   ScrollSpy,
   StackedBoxes,

package/src/modules/Application/index.js

@@ -11,7 +11,9 @@ import Fontloader from '../Fontloader'
 import Dom from '../Dom'
 
 gsap.registerPlugin(ScrollToPlugin)
-gsap.defaults({ overwrite: 'auto', ease: 'sine.out' })
+gsap.defaults({
+  ease: 'sine.out'
+})
 
 window.onpageshow = event => {
   if (event.persisted) {
@@ -107,6 +109,10 @@ export default class Application {
       left: 0
     }
 
+    this.state = {
+      revealed: false
+    }
+
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
     this.focusableSelectors = this.opts.focusableSelectors
 
@@ -323,14 +329,14 @@ export default class Application {
     document.addEventListener('touchmove', this.scrollVoid, false)
   }
 
-  scrollRelease() {
+  scrollRelease(defaultOverflow = 'scroll') {
     if (!this.SCROLL_LOCKED) {
       return
     }
     const ev = new window.CustomEvent(Events.APPLICATION_SCROLL_RELEASED, this)
     window.dispatchEvent(ev)
     this.SCROLL_LOCKED = false
-    gsap.set(document.body, { clearProps: 'overflow' })
+    gsap.set(document.body, { overflow: defaultOverflow })
     gsap.set(this._scrollPaddedElements, { clearProps: 'paddingRight' })
     document.removeEventListener('touchmove', this.scrollVoid, false)
   }
@@ -487,6 +493,7 @@ export default class Application {
 
   _emitRevealedEvent() {
     if (!document.body.hasAttribute('data-app-revealed')) {
+      this.state.revealed = true
       document.body.dataset.appRevealed = true
       window.dispatchEvent(this.revealedEvent)
       this.executeCallbacks(Events.APPLICATION_REVEALED)

package/src/modules/Breakpoints/index.js

@@ -21,10 +21,15 @@ export default class Breakpoints {
     this.app = app
     this.mediaQueries = {}
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
-    window.addEventListener(Events.APPLICATION_PRELUDIUM, this.initialize.bind(this))
+    window.addEventListener(Events.APPLICATION_PRELUDIUM, () => {
+      this.initialize(false)
+    })
+    window.addEventListener(Events.APPLICATION_REVEALED, () => {
+      this.initialize(true)
+    })
   }
 
-  initialize() {
+  initialize(reveal = false) {
     this.opts.breakpoints.forEach(size => {
       this.mediaQueries[size] = this._getVal(`--breakpoint-${size}`)
     })
@@ -52,7 +57,7 @@ export default class Breakpoints {
       }
     })
 
-    if (this.opts.runListenerOnInit) {
+    if (reveal && this.opts.runListenerOnInit) {
       const { key, mq } = this.getCurrentBreakpoint()
       if (Object.prototype.hasOwnProperty.call(this.opts.listeners, key)) {
         this.opts.listeners[key](mq)

package/src/modules/Dataloader/index.js

@@ -26,11 +26,21 @@ import _defaultsDeep from 'lodash.defaultsdeep'
  *    </div>
  *  </div>
  *
+ * You can set a custom key for each param:
+ *
+ * <a class="noanim" href="{{ category.url }}" data-loader-param-key="category" data-loader-param="all" data-loader-param-selected>All</a>
+ *
+ *
+ * You can also set a target for the canvas if the category selector and canvas are in different modules:
+ *
+ * <div data-loader="/api/posts" data-loader-id="news" data-loader-canvas-target="#news-canvas">
+ *
+ * <div data-loader-canvas id="#news-canvas">
  */
 
 const DEFAULT_OPTIONS = {
   page: 0,
-  loaderParam: 'all',
+  loaderParam: {},
   filter: '',
   onFetch: dataloader => {
     /**
@@ -51,7 +61,11 @@ export default class Dataloader {
     this.status = 'available'
     this.app = app
     this.$el = $el
-    this.$canvasEl = Dom.find($el, '[data-loader-canvas]')
+    if ($el.hasAttribute('data-loader-canvas-target')) {
+      this.$canvasEl = Dom.find($el.getAttribute('data-loader-canvas-target'))
+    } else {
+      this.$canvasEl = Dom.find($el, '[data-loader-canvas]')
+    }
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
     this.initialize()
   }
@@ -114,15 +128,20 @@ export default class Dataloader {
     this.opts.page = 0
     this.$paramEls.forEach($paramEl => $paramEl.removeAttribute('data-loader-param-selected'))
     e.currentTarget.setAttribute('data-loader-param-selected', '')
-    this.opts.loaderParam = e.currentTarget.dataset.loaderParam
+    const key = e.currentTarget.dataset.loaderParamKey || 'defaultParam'
+    this.opts.loaderParam[key] = e.currentTarget.dataset.loaderParam
+
     this.fetch()
   }
 
   fetch(addEntries = false) {
-    const param = this.opts.loaderParam
+    const { defaultParam, ...otherParams } = this.opts.loaderParam
     const filter = this.opts.filter
 
-    fetch(`${this.baseURL}/${param}/${this.opts.page}?` + new URLSearchParams({ filter }))
+    fetch(
+      `${this.baseURL}/${defaultParam ? defaultParam + '/' : ''}${this.opts.page}?` +
+        new URLSearchParams({ filter, ...otherParams })
+    )
       .then(res => {
         this.status = res.headers.get('jpt-dataloader') || 'available'
         this.updateButton()

package/src/modules/Dom/index.js

@@ -115,12 +115,16 @@ class DOM {
     return width
   }
 
-  getCSSVar(key) {
-    return getComputedStyle(document.documentElement).getPropertyValue(key).trim()
+  getCSSVar(key, element = document.documentElement) {
+    return getComputedStyle(element).getPropertyValue(key).trim()
   }
 
-  setCSSVar(key, val) {
-    document.documentElement.style.setProperty(`--${key}`, val)
+  setCSSVar(key, val, element = document.documentElement) {
+    element.style.setProperty(`--${key}`, val)
+  }
+
+  removeCSSVar(key, element = document.documentElement) {
+    element.style.removeProperty(`--${key}`)
   }
 
   offset(el) {

package/src/modules/Dropdown/index.js

@@ -10,6 +10,14 @@ import Dom from '../Dom'
  *     <li>Item</li>
  *   </ul>
  * </ul>
+ *
+ * If you need to trigger a dropdown menu outside of the data-dropdown element, you can target it
+ * with
+ *
+ *    <li data-dropdown-trigger data-dropdown-target="#mydropdown">Trigger</li>
+ *
+ * This is useful if you run into clipping bugs/problems. Move your dropdown
+ * menu outside of the clipping container.
  */
 
 const DEFAULT_OPTIONS = {
@@ -37,29 +45,54 @@ export default class Dropdown {
     this.element = opts.el
     this.timeline = gsap.timeline({ paused: true, reversed: true })
     this.elements.trigger = Dom.find(this.element, this.opts.selectors.trigger)
-    this.elements.menu = Dom.find(this.element, this.opts.selectors.menu)
-    this.elements.menuItems = Dom.all(this.element, this.opts.selectors.menuItems)
+    if (this.elements.trigger.hasAttribute('data-dropdown-target')) {
+      const dropdownTarget = this.elements.trigger.getAttribute('data-dropdown-target')
+      this.elements.menu = Dom.find(dropdownTarget)
+    } else {
+      this.elements.menu = Dom.find(this.element, this.opts.selectors.menu)
+    }
+    this.elements.menuItems = Dom.all(this.elements.menu, this.opts.selectors.menuItems)
     this.initialize()
   }
 
   initialize() {
-    this.timeline.from(
-      this.elements.menu,
-      {
-        duration: 0.3,
-        className: `${this.elements.menu.className} zero-height`
-      },
-      'open'
-    )
-    this.timeline.to(
-      this.elements.menu,
-      {
-        height: 'auto'
-      },
-      'open'
-    )
+    this.timeline
+      .set(this.elements.menu, { display: 'none', clearProps: 'height' })
+      .set(this.elements.menu, { display: 'flex', opacity: 0 })
+      .from(
+        this.elements.menu,
+        {
+          duration: 0.1,
+          className: `${this.elements.menu.className} zero-height`
+        },
+        'open'
+      )
+      .to(
+        this.elements.menu,
+        {
+          height: 'auto',
+          duration: 0.1
+        },
+        'open'
+      )
+      .call(() => {
+        // check if we have space
+        const subMenuBound = this.elements.menu.getBoundingClientRect()
+        const windowHeight = window.innerHeight
+
+        const subMenuY = subMenuBound.y
+        const subMenuHeight = subMenuBound.height
+
+        Dom.setCSSVar('dropdown-menu-height', `${subMenuHeight}px`, this.elements.menu)
 
-    this.timeline.from(this.elements.menuItems, this.opts.tweens.items, 'open+=.1')
+        if (subMenuHeight + subMenuY > windowHeight) {
+          this.elements.menu.setAttribute('data-dropdown-placement', 'top')
+        } else {
+          this.elements.menu.setAttribute('data-dropdown-placement', 'bottom')
+        }
+      })
+      .to(this.elements.menu, { opacity: 1 })
+      .from(this.elements.menuItems, this.opts.tweens.items, 'open+=.1')
 
     if (!this.elements.trigger) {
       return
@@ -72,10 +105,8 @@ export default class Dropdown {
     event.stopPropagation()
 
     if (this.open) {
-      delete this.elements.trigger.dataset.dropdownActive
       this.closeMenu()
     } else {
-      this.elements.trigger.dataset.dropdownActive = ''
       this.openMenu()
     }
   }
@@ -88,6 +119,7 @@ export default class Dropdown {
       this.app.currentMenu = this
     }
     this.open = true
+    this.elements.trigger.dataset.dropdownActive = ''
 
     if (this.timeline.reversed()) {
       this.timeline.play()
@@ -99,6 +131,7 @@ export default class Dropdown {
   closeMenu() {
     this.app.currentMenu = null
     this.open = false
+    delete this.elements.trigger.dataset.dropdownActive
 
     if (this.timeline.reversed()) {
       this.timeline.play()

package/src/modules/EqualHeightImages/index.js

@@ -1,9 +1,12 @@
 import { gsap } from 'gsap'
 import Dom from '../Dom'
+import * as Events from '../../events'
 import imagesAreLoaded from '../../utils/imagesAreLoaded'
 import _defaultsDeep from 'lodash.defaultsdeep'
 
-const DEFAULT_OPTIONS = {}
+const DEFAULT_OPTIONS = {
+  listenForResize: true
+}
 
 export default class EqualHeightImages {
   constructor(app, opts = {}, container = document.body) {
@@ -11,6 +14,12 @@ export default class EqualHeightImages {
     this.container = container
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
     this.initialize()
+
+    if (opts.listenForResize) {
+      window.addEventListener(Events.APPLICATION_RESIZE, () => {
+        this.initialize()
+      })
+    }
   }
 
   initialize() {

package/src/modules/Lazyload/index.js

@@ -27,9 +27,13 @@ export default class Lazyload {
     this.initialize()
 
     if (this.opts.registerCallback) {
-      this.app.registerCallback(Events.APPLICATION_REVEALED, () => {
+      if (this.app.state.revealed) {
         this.watch()
-      })
+      } else {
+        this.app.registerCallback(Events.APPLICATION_REVEALED, () => {
+          this.watch()
+        })
+      }
     }
   }
 
@@ -73,7 +77,6 @@ export default class Lazyload {
       this.opts.revealIntersectionObserverConfig
     )
 
-    this.lazyPictures = document.querySelectorAll('[data-ll-srcset]')
     this.initObserver(this.loadObserver)
 
     // Deprecate data-ll-image sometime
@@ -94,6 +97,7 @@ export default class Lazyload {
   initObserver(observer, setAttrs = true) {
     this.lazyPictures.forEach((picture, idx) => {
       if (setAttrs) {
+        picture.setAttribute('data-ll-srcset-initialized', '')
         picture.querySelectorAll('img:not([data-ll-loaded])').forEach(img => {
           img.setAttribute('data-ll-blurred', '')
           img.setAttribute('data-ll-idx', idx)
@@ -181,11 +185,27 @@ export default class Lazyload {
 
   // we reveal the picture when it enters the viewport
   handleRevealEntries(elements) {
+    const srcsetReadyObserver = new MutationObserver(mutations => {
+      mutations.forEach(record => {
+        if (record.type === 'attributes' && record.attributeName === 'data-ll-srcset-ready') {
+          this.revealPicture(record.target)
+          this.revealObserver.unobserve(record.target)
+        }
+      })
+    })
+
     elements.forEach(item => {
       if (item.isIntersecting || item.intersectionRatio > 0) {
         const picture = item.target
-        this.revealPicture(picture)
-        this.revealObserver.unobserve(item.target)
+        const ready = item.target.hasAttribute('data-ll-srcset-ready')
+        if (!ready) {
+          // element is not loaded, observe the picture and wait for
+          // `data-ll-srcset-ready` before revealing
+          srcsetReadyObserver.observe(picture, { attributes: true })
+        } else {
+          this.revealPicture(picture)
+          this.revealObserver.unobserve(item.target)
+        }
       }
     })
   }

package/src/modules/Marquee/index.js

@@ -63,8 +63,7 @@ export default class Marquee {
     const holderWidth = this.elements.$holder.offsetWidth
     const $allHolders = Dom.all(this.elements.$el, '[data-marquee-holder]')
     const marqueeWidth = holderWidth * $allHolders.length
-
-    this.duration = holderWidth / this.opts.speed
+    this.duration = (holderWidth + marqueeWidth) / this.opts.speed
 
     gsap.set(this.elements.$marquee, { width: marqueeWidth })
     this.initializeTween()

package/src/modules/Moonwalk/index.js

@@ -224,10 +224,17 @@ export default class Moonwalk {
     return Array.from(runs).map(run => {
       const foundRun = this.opts.runs[run.getAttribute('data-moonwalk-run')]
       if (foundRun) {
+        if (foundRun.initialize) {
+          foundRun.initialize(run)
+        }
         return {
           el: run,
           threshold: foundRun.threshold || 0,
-          callback: foundRun.callback
+          initialize: foundRun.initialize,
+          callback: foundRun.callback,
+          onExit: foundRun.onExit,
+          repeated: foundRun.repeated,
+          rootMargin: foundRun.rootMargin
         }
       }
 
@@ -531,7 +538,11 @@ export default class Moonwalk {
       if (idx === this.sections.length - 1) {
         rootMargin = '0px'
       } else {
-        rootMargin = opts.rootMargin
+        if (run.rootMargin) {
+          rootMargin = run.rootMargin
+        } else {
+          rootMargin = opts.rootMargin
+        }
       }
 
       const runObserver = this.runObserver(run, rootMargin)
@@ -571,9 +582,23 @@ export default class Moonwalk {
       (entries, self) => {
         for (let i = 0; i < entries.length; i += 1) {
           const entry = entries[i]
-          if (entry.isIntersecting) {
-            run.callback(entry.target)
-            self.unobserve(entry.target)
+          if (entry.isIntersecting && run.callback) {
+            const runRepeated = entry.target.hasAttribute('data-moonwalk-run-triggered')
+            run.callback(entry.target, runRepeated)
+            entry.target.setAttribute('data-moonwalk-run-triggered', '')
+            if (!run.onExit && !run.repeated) {
+              self.unobserve(entry.target)
+            }
+          } else {
+            if (run.onExit && entry.target.hasAttribute('data-moonwalk-run-triggered')) {
+              const runExited = entry.target.hasAttribute('data-moonwalk-run-exit-triggered')
+              // entry.target.removeAttribute('data-moonwalk-run-triggered')
+              entry.target.setAttribute('data-moonwalk-run-exit-triggered', '')
+              run.onExit(entry.target, runExited)
+              if (!run.repeated) {
+                self.unobserve(entry.target)
+              }
+            }
           }
         }
       },

package/src/modules/Popover/index.js

@@ -0,0 +1,111 @@
+import { gsap } from 'gsap'
+import Dom from '../Dom'
+import _defaultsDeep from 'lodash.defaultsdeep'
+
+const DEFAULT_OPTIONS = {}
+
+export default class Popover {
+  constructor(app, trigger, opts = {}) {
+    this.app = app
+    this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
+
+    this.trigger = trigger
+    this.position = this.trigger.getAttribute('data-popover-position') || 'top'
+    this.className = 'popover'
+    this.orderedPositions = ['top', 'right', 'bottom', 'left']
+
+    const popoverTemplate = document.querySelector(
+      `[data-popover-template=${trigger.dataset.popoverTarget}]`
+    )
+    this.popover = document.createElement('div')
+    this.popover.innerHTML = popoverTemplate.innerHTML
+
+    Object.assign(this.popover.style, {
+      position: 'fixed'
+    })
+
+    this.popover.classList.add(this.className)
+
+    this.trigger.addEventListener('mouseenter', this.handleMouseEnter.bind(this))
+    this.trigger.addEventListener('mouseleave', this.handleMouseLeave.bind(this))
+  }
+
+  handleMouseEnter(e) {
+    this.show()
+  }
+
+  handleMouseLeave(e) {
+    this.hide()
+  }
+
+  get isVisible() {
+    return document.body.contains(this.popover)
+  }
+
+  show() {
+    document.body.appendChild(this.popover)
+
+    const { top: triggerTop, left: triggerLeft } = this.trigger.getBoundingClientRect()
+    const { offsetHeight: triggerHeight, offsetWidth: triggerWidth } = this.trigger
+    const { offsetHeight: popoverHeight, offsetWidth: popoverWidth } = this.popover
+
+    const positionIndex = this.orderedPositions.indexOf(this.position)
+
+    const positions = {
+      top: {
+        name: 'top',
+        top: triggerTop - popoverHeight,
+        left: triggerLeft - (popoverWidth - triggerWidth) / 2
+      },
+      right: {
+        name: 'right',
+        top: triggerTop - (popoverHeight - triggerHeight) / 2,
+        left: triggerLeft + triggerWidth
+      },
+      bottom: {
+        name: 'bottom',
+        top: triggerTop + triggerHeight,
+        left: triggerLeft - (popoverWidth - triggerWidth) / 2
+      },
+      left: {
+        name: 'left',
+        top: triggerTop - (popoverHeight - triggerHeight) / 2,
+        left: triggerLeft - popoverWidth
+      }
+    }
+
+    const position = this.orderedPositions
+      .slice(positionIndex)
+      .concat(this.orderedPositions.slice(0, positionIndex))
+      .map(pos => positions[pos])
+      .find(pos => {
+        this.popover.style.top = `${pos.top}px`
+        this.popover.style.left = `${pos.left}px`
+        return Dom.inViewport(this.popover)
+      })
+
+    this.orderedPositions.forEach(pos => {
+      this.popover.classList.remove(`${this.className}--${pos}`)
+    })
+
+    if (position) {
+      this.popover.classList.add(`${this.className}--${position.name}`)
+    } else {
+      this.popover.style.top = positions.bottom.top
+      this.popover.style.left = positions.bottom.left
+      this.popover.classList.add(`${this.className}--bottom`)
+    }
+  }
+
+  hide() {
+    this.popover.remove()
+  }
+
+  toggle() {
+    if (this.isVisible) {
+      this.hide()
+    } else {
+      this.show()
+    }
+  }
+}

package/src/modules/StickyHeader/index.js

@@ -63,7 +63,8 @@ const DEFAULT_EVENTS = {
         h._hiding = false
       }
     })
-  }
+  },
+  onSmall: () => {}
 }
 
 const DEFAULT_OPTIONS = {