@brandocms/jupiter 3.50.1 → 3.51.0

package/README.md

@@ -321,6 +321,12 @@ togglers.forEach(toggleEl => {
   This affects the fixed header amongst other things.
 - `scrollDuration` - `number` - `0.8` - how long the scroll lasts
 
+By default anchor links get added to the browser history. You can skip this by setting
+`data-skip-history` on the link **target**:
+
+```html
+<a id="content" name="content" data-skip-history></a>
+```
 
 
 ## Moonwalk

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@brandocms/jupiter",
-    "version": "3.50.1",
+    "version": "3.51.0",
     "description": "Frontend helpers.",
     "author": "Univers/Twined",
     "license": "UNLICENSED",
@@ -20,7 +20,6 @@
     "homepage": "https://github.com/brandocms/jupiter#readme",
     "sideEffects": false,
     "scripts": {
-        "lint": "eslint src/*.js",
         "test": "jest __tests__ --passWithNoTests",
         "coverage": "jest __tests__ --coverage"
     },
@@ -33,19 +32,15 @@
     "dependencies": {
         "@egjs/hammerjs": "^2.0.17",
         "body-scroll-lock": "^4.0.0-beta.0",
-        "gsap": "3.12.2",
+        "gsap": "3.12.5",
         "lodash.defaultsdeep": "^4.6.1"
     },
     "devDependencies": {
-        "@babel/core": "^7.19.6",
-        "@babel/preset-env": "^7.19.4",
-        "babel-jest": "^29.2.1",
-        "eslint": "8.25.0",
-        "eslint-config-airbnb-base": "^15.0.0",
-        "eslint-plugin-import": "^2.26.0",
-        "eslint-plugin-node": "^11.1.0",
-        "eslint-plugin-promise": "^6.1.1",
-        "jest": "^29.2.1",
-        "jest-environment-jsdom": "^29.2.1"
-    }
+        "@babel/core": "^7.25.2",
+        "@babel/preset-env": "^7.25.3",
+        "babel-jest": "^29.7.0",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0"
+    },
+    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package/src/modules/Cookies/index.js

@@ -8,7 +8,8 @@ const DEFAULT_OPTIONS = {
     oneYearFromNow.setFullYear(oneYearFromNow.getFullYear() + 1)
 
     const timeline = gsap.timeline()
-    c.setCookie('cookielaw_accepted', 1, oneYearFromNow, '/')
+    c.setCookie('COOKIES_CONSENT_STATUS', 1, oneYearFromNow, '/')
+    c.opts.setCookies(c)
 
     timeline
       .to(c.cc, { duration: 0.35, y: '120%', ease: 'power3.in' }, '0')
@@ -16,8 +17,36 @@ const DEFAULT_OPTIONS = {
       .set(c.cc, { display: 'none' })
   },
 
+  onRefuse: c => {
+    const oneYearFromNow = new Date()
+    oneYearFromNow.setFullYear(oneYearFromNow.getFullYear() + 1)
+
+    const timeline = gsap.timeline()
+    c.setCookie('COOKIES_CONSENT_STATUS', 0, oneYearFromNow, '/')
+
+    timeline
+      .to(c.cc, { duration: 0.35, y: '120%', ease: 'power3.in' }, '0')
+      .to(c.inner, { duration: 0.3, opacity: 0, ease: 'power3.in' }, '0')
+      .set(c.cc, { display: 'none' })
+  },
+
+  alreadyConsented: c => {
+    // user has already consented to cookies. Can be used to update/load gtm etc.
+  },
+
+  alreadyRefused: c => {
+    // user has already refused cookies.
+  },
+
+  setCookies: c => {},
+
   showCC: c => {
-    if (c.hasCookie('cookielaw_accepted')) {
+    if (c.hasCookie('COOKIES_CONSENT_STATUS')) {
+      if (c.getCookie('COOKIES_CONSENT_STATUS') === '1') {
+        c.opts.alreadyConsented(c)
+      } else {
+        c.opts.alreadyRefused(c)
+      }
       return
     }
 
@@ -78,6 +107,7 @@ export default class Cookies {
     this.text = document.querySelector('.cookie-law-text')
     this.btns = document.querySelector('.cookie-law-buttons')
     this.btn = document.querySelector('.dismiss-cookielaw')
+    this.btnRefuse = document.querySelector('.refuse-cookielaw')
 
     if (!this.btn) {
       return
@@ -90,6 +120,9 @@ export default class Cookies {
     this.btn.addEventListener('click', () => {
       this.opts.onAccept(this)
     })
+    this.btnRefuse.addEventListener('click', () => {
+      this.opts.onRefuse(this)
+    })
   }
 
   getCookie(sKey) {

package/src/modules/Dataloader/index.js

@@ -48,9 +48,9 @@ const DEFAULT_OPTIONS = {
      *
      * Example:
      *
-     *    const mw = new Moonwalk(dataloader.app, configureMoonwalk(dataloader.app), dataloader.$el)
-     *    new Lazyload(dataloader.app, { useNativeLazyloadIfAvailable: false }, dataloader.$el)
-     *    new EqualHeightImages(dataloader.app, {}, dataloader.$el)
+     *    const mw = new Moonwalk(dataloader.app, configureMoonwalk(dataloader.app), dataloader.$canvasEl)
+     *    new Lazyload(dataloader.app, { useNativeLazyloadIfAvailable: false }, dataloader.$canvasEl)
+     *    new EqualHeightImages(dataloader.app, {}, dataloader.$canvasEl)
      *    mw.ready()
      */
   }
@@ -70,6 +70,19 @@ export default class Dataloader {
     this.initialize()
   }
 
+  static replaceInnerHTML(el, url) {
+    return new Promise(resolve => {
+      fetch(url)
+        .then(res => {
+          return res.text()
+        })
+        .then(html => {
+          el.innerHTML = html
+          return resolve(el)
+        })
+    })
+  }
+
   debounce(func, delay = 650) {
     let timerId
     return (...args) => {
@@ -80,6 +93,10 @@ export default class Dataloader {
     }
   }
 
+  updateBaseURL(url) {
+    this.baseURL = url
+  }
+
   initialize() {
     this.baseURL = this.$el.dataset.loader
     this.$paramEls = Dom.all(this.$el, '[data-loader-param]')
@@ -122,14 +139,56 @@ export default class Dataloader {
   }
 
   onParam(e) {
-    e.preventDefault()
     this.loading()
     // reset page when switching param!
     this.opts.page = 0
-    this.$paramEls.forEach($paramEl => $paramEl.removeAttribute('data-loader-param-selected'))
-    e.currentTarget.setAttribute('data-loader-param-selected', '')
-    const key = e.currentTarget.dataset.loaderParamKey || 'defaultParam'
-    this.opts.loaderParam[key] = e.currentTarget.dataset.loaderParam
+
+    // param can have multiple values
+    const multiVals = e.currentTarget.hasAttribute('data-loader-param-multi')
+
+    // special case if it's a checkbox!
+    if (e.currentTarget.getAttribute('type') === 'checkbox') {
+      const key = e.currentTarget.dataset.loaderParamKey || 'defaultParam'
+      this.opts.loaderParam[key] = e.currentTarget.checked
+    } else {
+      e.preventDefault()
+      if (e.currentTarget.hasAttribute('data-loader-param-selected')) {
+        // if already selected, clear it
+        const key = e.currentTarget.dataset.loaderParamKey || 'defaultParam'
+        if (multiVals) {
+          this.opts.loaderParam[key] = this.opts.loaderParam[key].filter(val => {
+            return val !== e.currentTarget.dataset.loaderParam
+          })
+        } else {
+          delete this.opts.loaderParam[key]
+        }
+        e.currentTarget.removeAttribute('data-loader-param-selected')
+        console.log(this.opts.loaderParam[key])
+      } else {
+        if (multiVals) {
+          const key = e.currentTarget.dataset.loaderParamKey || 'defaultParam'
+          if (!this.opts.loaderParam.hasOwnProperty(key)) {
+            this.opts.loaderParam[key] = []
+          }
+          this.opts.loaderParam[key].push(e.currentTarget.dataset.loaderParam)
+          e.currentTarget.setAttribute('data-loader-param-selected', '')
+        } else {
+          const paramKey = e.currentTarget.dataset.loaderParamKey
+          this.$paramEls.forEach($paramEl => {
+            if (paramKey) {
+              if ($paramEl.dataset.loaderParamKey === paramKey) {
+                $paramEl.removeAttribute('data-loader-param-selected')
+              }
+            } else {
+              $paramEl.removeAttribute('data-loader-param-selected')
+            }
+          })
+          e.currentTarget.setAttribute('data-loader-param-selected', '')
+          const key = e.currentTarget.dataset.loaderParamKey || 'defaultParam'
+          this.opts.loaderParam[key] = e.currentTarget.dataset.loaderParam
+        }
+      }
+    }
 
     this.fetch()
   }

package/src/modules/Dropdown/index.js

@@ -53,6 +53,7 @@ export default class Dropdown {
     }
     this.elements.menuItems = Dom.all(this.elements.menu, this.opts.selectors.menuItems)
     this.initialize()
+    this.checkForInitialOpen()
   }
 
   initialize() {
@@ -62,9 +63,10 @@ export default class Dropdown {
       .from(
         this.elements.menu,
         {
-          duration: 0.1,
-          className: `${this.elements.menu.className} zero-height`
+          className: `${this.elements.menu.className} zero-height`,
+          duration: 0.1
         },
+
         'open'
       )
       .to(
@@ -92,7 +94,9 @@ export default class Dropdown {
         }
       })
       .to(this.elements.menu, { opacity: 1 })
-      .from(this.elements.menuItems, this.opts.tweens.items, 'open+=.1')
+    if (this.elements.menuItems.length) {
+      this.timeline.from(this.elements.menuItems, this.opts.tweens.items, 'open+=.1')
+    }
 
     if (!this.elements.trigger) {
       return
@@ -139,4 +143,10 @@ export default class Dropdown {
       this.timeline.reverse()
     }
   }
+
+  checkForInitialOpen() {
+    if (this.elements.trigger.hasAttribute('data-dropdown-active')) {
+      this.openMenu()
+    }
+  }
 }

package/src/modules/EqualHeightImages/index.js

@@ -22,9 +22,8 @@ export default class EqualHeightImages {
     }
   }
 
-  initialize() {
-    const canvases = Dom.all(this.container, '[data-eq-height-images]')
-    Array.from(canvases).forEach(canvas => {
+  run() {
+    Array.from(this.canvases).forEach(canvas => {
       let lastTop = null
       const actionables = []
       let elements = []
@@ -71,6 +70,11 @@ export default class EqualHeightImages {
     })
   }
 
+  initialize() {
+    this.canvases = Dom.all(this.container, '[data-eq-height-images]')
+    this.run()
+  }
+
   getRenderedSize(contains, cWidth, cHeight, width, height, pos) {
     const oRatio = width / height
     const cRatio = cWidth / cHeight

package/src/modules/FeatureTests/index.js

@@ -74,6 +74,31 @@ export default class FeatureTests {
    * listen for events as well
    */
   testTouchMouseEvents() {
+    if (window.PointerEvent && 'maxTouchPoints' in navigator) {
+      // if Pointer Events are supported, just check maxTouchPoints
+      if (navigator.maxTouchPoints > 0) {
+        this.results.touch = true
+        this.results.mouse = false
+        this.testFor('touch', true)
+        this.testFor('mouse', false)
+      }
+    } else {
+      // no Pointer Events...
+      if (window.matchMedia && window.matchMedia('(any-pointer:coarse)').matches) {
+        // check for any-pointer:coarse which mostly means touchscreen
+        this.results.touch = true
+        this.results.mouse = false
+        this.testFor('touch', true)
+        this.testFor('mouse', false)
+      } else if (window.TouchEvent || 'ontouchstart' in window) {
+        // last resort - check for exposed touch events API / event handler
+        this.results.touch = true
+        this.results.mouse = false
+        this.testFor('touch', true)
+        this.testFor('mouse', false)
+      }
+    }
+
     const onTouchStart = () => {
       if (!this.results.touch) {
         this.results.touch = true

package/src/modules/FixedHeader/index.js

@@ -98,6 +98,7 @@ const DEFAULT_OPTIONS = {
   on: Events.APPLICATION_REVEALED,
   unpinOnForcedScrollStart: true,
   pinOnForcedScrollEnd: true,
+  rafScroll: true,
 
   default: {
     unPinOnResize: true,
@@ -226,7 +227,12 @@ export default class FixedHeader {
     }
 
     this.app.registerCallback(Events.APPLICATION_REVEALED, () => {
-      window.addEventListener(Events.APPLICATION_SCROLL, this.update.bind(this), {
+      let SCROLL_EVENT = Events.APPLICATION_SCROLL
+      if (!this.mainOpts.rafScroll) {
+        SCROLL_EVENT = 'scroll'
+      }
+
+      window.addEventListener(SCROLL_EVENT, this.redraw.bind(this), {
         capture: false,
         passive: true
       })
@@ -249,9 +255,11 @@ export default class FixedHeader {
   }
 
   preflight() {
-    this.checkSize(true)
-    this.checkBg(true)
-    this.checkTop(true)
+    if (!this.opts.enter) {
+      this.checkSize(true)
+      this.checkBg(true)
+      this.checkTop(true)
+    }
 
     this.app.registerCallback(Events.APPLICATION_REVEALED, () => {
       setTimeout(() => {

package/src/modules/Links/index.js

@@ -120,6 +120,9 @@ export default class Links {
 
           if (dataTarget) {
             this.opts.onAnchor(dataTarget, this)
+            if (!dataTarget.hasAttribute('data-skip-history')) {
+              history.pushState({}, '', href)
+            }
 
             if (this.app.header && dataTarget.id !== 'top') {
               setTimeout(() => {
@@ -141,6 +144,9 @@ export default class Links {
   bindLinks(links) {
     Array.from(links).forEach(link => {
       const href = link.getAttribute('href')
+      if (!href) {
+        return
+      }
       const internalLink = href.indexOf(document.location.hostname) > -1 || href.startsWith('/')
       if (this.opts.openExternalInWindow && !internalLink) {
         link.setAttribute('target', '_blank')

package/src/modules/Popover/index.js

@@ -26,8 +26,12 @@ export default class Popover {
 
     this.popover.classList.add(this.className)
 
-    this.trigger.addEventListener('mouseenter', this.handleMouseEnter.bind(this))
-    this.trigger.addEventListener('mouseleave', this.handleMouseLeave.bind(this))
+    if (!app.featureTests.results.touch) {
+      this.trigger.addEventListener('mouseenter', this.handleMouseEnter.bind(this))
+      this.trigger.addEventListener('mouseleave', this.handleMouseLeave.bind(this))
+    } else {
+      this.trigger.addEventListener('touchstart', this.handleTouchStart.bind(this))
+    }
   }
 
   handleMouseEnter(e) {
@@ -38,6 +42,10 @@ export default class Popover {
     this.hide()
   }
 
+  handleTouchStart(e) {
+    this.toggle()
+  }
+
   get isVisible() {
     return document.body.contains(this.popover)
   }

package/src/modules/Toggler/index.js

@@ -1,14 +1,11 @@
 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]')
@@ -19,12 +16,16 @@ export default class Toggler {
     this.toggleState()
 
     if (this.open) {
-      this.triggerIcon.classList.toggle('active')
-      gsap.set(this.content, { height: 'auto' })
+      if (this.triggerIcon) {
+        this.triggerIcon.classList.toggle('active')
+      }
+      gsap.set(this.content, { height: 'auto', display: 'block' })
       this.el.classList.toggle('open')
       gsap.from(this.content, { height: 0, ease: 'power1.inOut' })
     } else {
-      this.triggerIcon.classList.toggle('active')
+      if (this.triggerIcon) {
+        this.triggerIcon.classList.toggle('active')
+      }
       gsap.to(this.content, {
         duration: 0.25,
         onComplete: () => {