@brandocms/jupiter 4.0.0-beta.2 → 5.0.0-beta.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brandocms/jupiter",
-  "version": "4.0.0-beta.2",
+  "version": "5.0.0-beta.10",
   "description": "Frontend helpers.",
   "author": "Univers/Twined",
   "license": "UNLICENSED",
@@ -36,23 +36,21 @@
     "playwright:dataloader": "playwright test e2e/dataloader.spec.js --project=chromium  --reporter line",
     "playwright:dataloader-url-sync": "playwright test e2e/dataloader-url-sync.spec.js --project=chromium  --reporter line",
     "playwright:parallax": "playwright test e2e/parallax.spec.js --project=chromium  --reporter line",
+    "playwright:looper": "playwright test e2e/looper.spec.js --project=chromium  --reporter line",
     "vite": "vite",
     "vite:build": "vite build",
     "vite:preview": "vite preview"
   },
   "types": "types/index.d.ts",
   "dependencies": {
-    "body-scroll-lock": "^4.0.0-beta.0",
-    "gsap": "^3.13.0",
     "lodash.defaultsdeep": "^4.6.1",
-    "motion": "^12.23.24",
-    "virtual-scroll": "^2.2.1"
+    "motion": "^12.35.1"
   },
   "devDependencies": {
-    "@playwright/test": "^1.52.0",
-    "@types/node": "^22.15.16",
-    "typescript": "^5.8.3",
-    "vite": "^6.3.5"
+    "@playwright/test": "^1.57.0",
+    "@types/node": "^22.19.3",
+    "typescript": "^5.9.3",
+    "vite": "^6.4.1"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

package/src/modules/Cookies/index.js

@@ -3,6 +3,91 @@ import _defaultsDeep from 'lodash.defaultsdeep'
 import * as Events from '../../events'
 import { set } from '../../utils/motion-helpers'
 
+/**
+ * @module Cookies
+ *
+ * Cookie consent module with optional dialog and toggle button support.
+ *
+ * ## Consent dialog
+ *
+ * The traditional consent banner uses a fixed container at the bottom of the page:
+ *
+ * ```html
+ * <div class="cookie-container">
+ *   <div class="cookie-container-inner">
+ *     <div class="cookie-law-text">
+ *       <p>We use cookies...</p>
+ *     </div>
+ *     <div class="cookie-law-buttons">
+ *       <button class="dismiss-cookielaw">Accept</button>
+ *       <button class="refuse-cookielaw">Decline</button>
+ *     </div>
+ *   </div>
+ * </div>
+ * ```
+ *
+ * ## Consent toggle button
+ *
+ * A toggle button can be placed anywhere on the page to let users change their
+ * consent at any time. It can also serve as the sole consent mechanism (no
+ * dialog required).
+ *
+ * ```html
+ * <button data-cookie-consent
+ *         data-cookie-consent-accept="Accept cookies"
+ *         data-cookie-consent-refuse="Refuse cookies">
+ * </button>
+ * ```
+ *
+ * ### Data attributes
+ *
+ * | Attribute | Description |
+ * |---|---|
+ * | `data-cookie-consent` | Marks the element as a consent toggle |
+ * | `data-cookie-consent-accept` | Label shown when user can accept (currently refused/unset) |
+ * | `data-cookie-consent-refuse` | Label shown when user can retract (currently accepted) |
+ * | `data-cookie-consent-status` | Set by the module: `"accepted"` or `"refused"` |
+ * | `data-cookie-consent-icon` | Set on the injected icon `<span>` |
+ * | `data-cookie-consent-label` | Set on the injected label `<span>` |
+ *
+ * ### CSS styling
+ *
+ * ```css
+ * [data-cookie-consent-status="accepted"] [data-cookie-consent-icon] { color: green; }
+ * [data-cookie-consent-status="refused"] [data-cookie-consent-icon] { color: red; }
+ * ```
+ *
+ * ### Gettext / translation
+ *
+ * ```html
+ * <button data-cookie-consent
+ *         data-cookie-consent-accept="{{ _('Accept cookies') }}"
+ *         data-cookie-consent-refuse="{{ _('Refuse cookies') }}">
+ * </button>
+ * ```
+ *
+ * ## Usage examples
+ *
+ * Dialog only (default):
+ * ```js
+ * new Cookies(app)
+ * ```
+ *
+ * Toggle only (no dialog HTML needed):
+ * ```js
+ * new Cookies(app, { setCookies: (c) => { ... } })
+ * ```
+ *
+ * Both dialog and toggle:
+ * ```js
+ * new Cookies(app, {
+ *   onConsentChanged: (c) => {
+ *     console.log(c.getCookie('COOKIES_CONSENT_STATUS'))
+ *   }
+ * })
+ * ```
+ */
+
 /**
  * @typedef {Object} CookiesOptions
  * @property {Function} [onAccept] - Called when cookies are accepted
@@ -11,6 +96,7 @@ import { set } from '../../utils/motion-helpers'
  * @property {Function} [alreadyRefused] - Called if user has already refused cookies
  * @property {Function} [setCookies] - Custom function to set cookies
  * @property {Function} [showCC] - Custom function to display cookie consent dialog
+ * @property {Function} [onConsentChanged] - Called after consent is toggled via the toggle button
  */
 
 /** @type {CookiesOptions} */
@@ -21,6 +107,7 @@ const DEFAULT_OPTIONS = {
 
     c.setCookie('COOKIES_CONSENT_STATUS', 1, oneYearFromNow, '/')
     c.opts.setCookies(c)
+    c.updateConsentToggles()
 
     const timeline = [
       [c.cc, { y: '120%' }, { duration: 0.35, ease: 'easeIn', at: 0 }],
@@ -37,6 +124,7 @@ const DEFAULT_OPTIONS = {
     oneYearFromNow.setFullYear(oneYearFromNow.getFullYear() + 1)
 
     c.setCookie('COOKIES_CONSENT_STATUS', 0, oneYearFromNow, '/')
+    c.updateConsentToggles()
 
     const timeline = [
       [c.cc, { y: '120%' }, { duration: 0.35, ease: 'easeIn', at: 0 }],
@@ -58,6 +146,8 @@ const DEFAULT_OPTIONS = {
 
   setCookies: (c) => {},
 
+  onConsentChanged: (c) => {},
+
   showCC: (c) => {
     if (c.hasCookie('COOKIES_CONSENT_STATUS')) {
       if (c.getCookie('COOKIES_CONSENT_STATUS') === '1') {
@@ -107,22 +197,114 @@ export default class Cookies {
     this.btn = document.querySelector('.dismiss-cookielaw')
     this.btnRefuse = document.querySelector('.refuse-cookielaw')
 
-    if (!this.btn) {
+    this.setupConsentToggles()
+
+    if (!this.btn && this.consentToggles.length === 0) {
       return
     }
 
-    this.app.registerCallback(Events.APPLICATION_REVEALED, () => {
-      this.opts.showCC(this)
+    if (this.btn) {
+      this.app.registerCallback(Events.APPLICATION_REVEALED, () => {
+        this.opts.showCC(this)
+      })
+
+      this.btn.addEventListener('click', () => {
+        this.opts.onAccept(this)
+      })
+      if (this.btnRefuse) {
+        this.btnRefuse.addEventListener('click', () => {
+          this.opts.onRefuse(this)
+        })
+      }
+    }
+  }
+
+  /**
+   * Find all `[data-cookie-consent]` elements and wire them up.
+   */
+  setupConsentToggles() {
+    this.consentToggles = [...document.querySelectorAll('[data-cookie-consent]')]
+
+    this.consentToggles.forEach(el => {
+      const icon = document.createElement('span')
+      icon.setAttribute('data-cookie-consent-icon', '')
+
+      const label = document.createElement('span')
+      label.setAttribute('data-cookie-consent-label', '')
+
+      el.appendChild(icon)
+      el.appendChild(label)
+
+      this.updateConsentToggle(el)
+
+      el.addEventListener('click', () => {
+        this.handleConsentToggle()
+      })
     })
+  }
 
-    this.btn.addEventListener('click', () => {
-      this.opts.onAccept(this)
+  /**
+   * Update a single consent toggle element to reflect current cookie state.
+   * @param {Element} el - The toggle element
+   */
+  updateConsentToggle(el) {
+    const accepted = this.getCookie('COOKIES_CONSENT_STATUS') === '1'
+    const acceptText = el.getAttribute('data-cookie-consent-accept') || 'Accept cookies'
+    const refuseText = el.getAttribute('data-cookie-consent-refuse') || 'Refuse cookies'
+
+    const icon = el.querySelector('[data-cookie-consent-icon]')
+    const label = el.querySelector('[data-cookie-consent-label]')
+
+    if (accepted) {
+      el.setAttribute('data-cookie-consent-status', 'accepted')
+      icon.textContent = '\u2713'
+      label.textContent = refuseText
+    } else {
+      el.setAttribute('data-cookie-consent-status', 'refused')
+      icon.textContent = '\u2715'
+      label.textContent = acceptText
+    }
+  }
+
+  /**
+   * Update all consent toggle elements.
+   */
+  updateConsentToggles() {
+    this.consentToggles.forEach(el => {
+      this.updateConsentToggle(el)
     })
-    if (this.btnRefuse) {
-      this.btnRefuse.addEventListener('click', () => {
-        this.opts.onRefuse(this)
+  }
+
+  /**
+   * Handle a click on a consent toggle button.
+   */
+  handleConsentToggle() {
+    const oneYearFromNow = new Date()
+    oneYearFromNow.setFullYear(oneYearFromNow.getFullYear() + 1)
+
+    const accepted = this.getCookie('COOKIES_CONSENT_STATUS') === '1'
+
+    if (accepted) {
+      this.setCookie('COOKIES_CONSENT_STATUS', 0, oneYearFromNow, '/')
+    } else {
+      this.setCookie('COOKIES_CONSENT_STATUS', 1, oneYearFromNow, '/')
+      this.opts.setCookies(this)
+    }
+
+    this.updateConsentToggles()
+
+    if (this.cc && this.cc.style.display !== 'none') {
+      const timeline = [
+        [this.cc, { y: '120%' }, { duration: 0.35, ease: 'easeIn', at: 0 }],
+        [this.inner, { opacity: 0 }, { duration: 0.3, ease: 'easeIn', at: 0 }]
+      ]
+
+      animate(timeline).finished.then(() => {
+        this.cc.style.display = 'none'
       })
     }
+
+    this.opts.onConsentChanged(this)
   }
 
   /**

package/src/modules/DoubleHeader/index.js

@@ -50,7 +50,7 @@ const DEFAULT_EVENTS = {
 
   onPin: (h) => {
     animate(h.auxEl, {
-      yPercent: '0'
+      y: '0%'
     }, {
       duration: 0.35,
       ease: 'easeOut'
@@ -60,7 +60,7 @@ const DEFAULT_EVENTS = {
   onUnpin: (h) => {
     h._hiding = true
     animate(h.auxEl, {
-      yPercent: '-100'
+      y: '-100%'
     }, {
       duration: 0.25,
       ease: 'easeIn'
@@ -86,12 +86,12 @@ const DEFAULT_OPTIONS = {
     },
     enter: (h) => {
       // Set initial states
-      set(h.auxEl, { yPercent: -100 })
+      set(h.auxEl, { y: '-100%' })
       set(h.lis, { opacity: 0 })
 
       // Auxiliary header slides down
       animate(h.auxEl, {
-        yPercent: 0
+        y: '0%'
       }, {
         duration: 1,
         delay: h.opts.enterDelay,

package/src/modules/FixedHeader/index.js

@@ -79,7 +79,7 @@ import { set } from '../../utils/motion-helpers'
 const DEFAULT_EVENTS = {
   onPin: (h) => {
     animate(h.el, {
-      yPercent: '0'
+      y: '0%'
     }, {
       duration: 0.35,
       ease: 'easeOut'
@@ -89,7 +89,7 @@ const DEFAULT_EVENTS = {
   onUnpin: (h) => {
     h._hiding = true
     animate(h.el, {
-      yPercent: '-100'
+      y: '-100%'
     }, {
       duration: 0.25,
       ease: 'easeIn'
@@ -156,14 +156,14 @@ const DEFAULT_OPTIONS = {
     canvas: window,
     intersects: null,
     beforeEnter: (h) => {
-      set(h.el, { yPercent: -100 })
+      set(h.el, { y: '-100%' })
       set(h.lis, { opacity: 0 })
     },
 
     enter: (h) => {
       // Header slides down
       animate(h.el, {
-        yPercent: 0
+        y: '0%'
       }, {
         duration: 1,
         delay: h.opts.enterDelay,

package/src/modules/HeroSlider/index.js

@@ -306,20 +306,30 @@ export default class HeroSlider {
           this._currentAnimation = animate(sequence)
 
           this._currentAnimation.finished.then(() => {
-            // Cleanup and shuffle z-indexes
-            set(this._nextSlide, { zIndex: this.opts.zIndex.next, opacity: 1 })
-            set(this._currentSlide, {
-              zIndex: this.opts.zIndex.visible,
-              width: '100%',
-              opacity: 1,
+            // Reset ALL slides using instant animations to ensure Motion.js state is clean
+            Array.from(this.slides).forEach((slide) => {
+              if (slide === this._currentSlide) return
+              const img = slide.querySelector('.hero-slide-img')
+              if (img) {
+                // Use animate with duration 0 to reset Motion.js internal state
+                animate(img, { scale: 1 }, { duration: 0 })
+              }
+              const isNext = slide === this._nextSlide
+              // Reset slide using animate with duration 0
+              animate(slide, {
+                width: '100%',
+                opacity: isNext ? 1 : 0,
+              }, { duration: 0 })
+              slide.style.overflow = ''
+              slide.style.zIndex = isNext ? this.opts.zIndex.next : this.opts.zIndex.regular
             })
-            set(this._previousSlide, {
-              zIndex: this.opts.zIndex.regular,
+
+            animate(this._currentSlide, {
               width: '100%',
-              opacity: 0, // Hide previous slide
-            })
-            // Reset previous slide image scale for next time
-            set(previousSlideImg, { scale: 1.0 })
+              opacity: 1,
+            }, { duration: 0 })
+            this._currentSlide.style.zIndex = this.opts.zIndex.visible
+
             this.next()
           })
         }

package/src/modules/Lazyload/index.js

@@ -83,6 +83,65 @@ export default class Lazyload {
     this.initObserver(this.revealObserver, false)
   }
 
+  /**
+   * Observe new lazyload elements within a container
+   * Handles both [data-ll-image] and [data-ll-srcset] elements
+   * Useful for dynamically added content (e.g., Looper clones)
+   * @param {HTMLElement|HTMLElement[]|NodeList} elements - Container element(s) or lazyload element(s) to observe
+   */
+  observe(elements) {
+    // Handle NodeList, array, or single element
+    const els = elements instanceof NodeList ? Array.from(elements) :
+                Array.isArray(elements) ? elements : [elements]
+
+    let imgIdx = this.lazyImages?.length || 0
+    let picIdx = this.lazyPictures?.length || 0
+
+    els.forEach(el => {
+      // Handle [data-ll-image] elements
+      if (this.imageObserver) {
+        const images = el.matches?.('[data-ll-image]')
+          ? [el]
+          : el.querySelectorAll?.('[data-ll-image]') || []
+
+        images.forEach(img => {
+          // Skip if already observed or loaded
+          if (img.hasAttribute('data-ll-idx') || img.hasAttribute('data-ll-loaded')) return
+
+          img.setAttribute('data-ll-blurred', '')
+          img.setAttribute('data-ll-idx', imgIdx)
+          img.style.setProperty('--ll-idx', imgIdx)
+          this.imageObserver.observe(img)
+          imgIdx++
+        })
+      }
+
+      // Handle [data-ll-srcset] picture elements
+      if (this.loadObserver) {
+        const pictures = el.matches?.('[data-ll-srcset]')
+          ? [el]
+          : el.querySelectorAll?.('[data-ll-srcset]') || []
+
+        pictures.forEach(picture => {
+          // Skip if already loaded
+          if (picture.hasAttribute('data-ll-srcset-ready')) return
+
+          picture.setAttribute('data-ll-srcset-initialized', '')
+          picture.querySelectorAll('img:not([data-ll-loaded])').forEach(img => {
+            img.removeAttribute('data-ll-idx') // Clear cloned idx
+            img.setAttribute('data-ll-blurred', '')
+            img.setAttribute('data-ll-idx', picIdx)
+            img.style.setProperty('--ll-idx', picIdx)
+          })
+          // Add to both observers like initObserver does
+          this.loadObserver.observe(picture)
+          this.revealObserver?.observe(picture)
+          picIdx++
+        })
+      }
+    })
+  }
+
   initialize() {
     // initialize ResizeObserver for images with data-sizes="auto"
     this.initializeResizeObserver()
@@ -128,12 +187,7 @@ export default class Lazyload {
     )
 
     this.lazyImages = this.target.querySelectorAll('[data-ll-image]')
-    this.lazyImages.forEach((img, idx) => {
-      img.setAttribute('data-ll-blurred', '')
-      img.setAttribute('data-ll-idx', idx)
-      img.style.setProperty('--ll-idx', idx)
-      this.imageObserver.observe(img)
-    })
+    this.observe(this.lazyImages)
   }
 
   initObserver(observer, setAttrs = true) {
@@ -150,12 +204,17 @@ export default class Lazyload {
     })
   }
 
-  forceLoad($container = document.body) {
+  forceLoad($container = document.body, { reveal = true } = {}) {
     const images = Dom.all($container, '[data-ll-image]')
     images.forEach(img => this.swapImage(img))
 
     const pictures = Dom.all($container, '[data-ll-srcset]')
-    pictures.forEach(picture => this.revealPicture(picture))
+    pictures.forEach(picture => {
+      this.loadPicture(picture)
+      if (reveal) {
+        this.revealPicture(picture)
+      }
+    })
   }
 
   initializeResizeObserver() {