@brandocms/jupiter 5.0.0-beta.12 → 5.0.0-beta.13

package/README.md

@@ -445,6 +445,7 @@ Components can be placed outside the main dataloader element:
 - `page` - `number` - Initial page number (default: 0)
 - `loaderParam` - `object` - Initial parameters
 - `filter` - `string` - Initial filter value
+- `filterDebounce` - `number` - Debounce delay in ms for filter input (default: 650)
 - `onFetch` - `function` - Called after content is fetched
 - `urlSync` - `object` - URL synchronization configuration:
   - `templates` - Language-specific URL templates with `:param` placeholders
@@ -472,6 +473,12 @@ Components can be placed outside the main dataloader element:
 - `data-loader-loading` - Added during loading
 - `data-loader-starved` - Added to load more button when no more content
 
+### Methods
+
+- `destroy()` - Remove all event listeners, abort pending fetches, and clean up URL sync
+- `updateBaseURL(url)` - Change the base API URL
+- `Dataloader.replaceInnerHTML(el, url)` - Static method to replace an element's innerHTML with fetched content
+
 ### API Response Headers
 
 - `jpt-dataloader: starved` - Set this header when there's no more content to load

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brandocms/jupiter",
-  "version": "5.0.0-beta.12",
+  "version": "5.0.0-beta.13",
   "description": "Frontend helpers.",
   "author": "Univers/Twined",
   "license": "UNLICENSED",

package/src/modules/Application/index.js

@@ -10,7 +10,7 @@ import Fontloader from '../Fontloader'
 import Dom from '../Dom'
 import { set, clearProps } from '../../utils/motion-helpers'
 
-window.onpageshow = event => {
+window.addEventListener('pageshow', event => {
   // Fix for hash anchor navigation issues
   // When navigating to a page with #anchor, ensure overlay is removed and content is visible
   const hasHash = window.location.hash
@@ -60,7 +60,7 @@ window.onpageshow = event => {
       setTimeout(fixVisibility, 500)
     }
   }
-}
+})
 
 const DEFAULT_OPTIONS = {
   respectReducedMotion: false,
@@ -123,8 +123,8 @@ export default class Application {
     this.debugType = 1
     this.debugOverlay = null
     this.userAgent = navigator.userAgent
-    this._lastWindowHeight = 0
     this.breakpoint = null
+    this.root = document.documentElement
     this.language = document.documentElement.lang
 
     this.size = {
@@ -160,6 +160,7 @@ export default class Application {
     this.opts.breakpointConfig = breakpointConfig || DEFAULT_OPTIONS.breakpointConfig
 
     this.focusableSelectors = this.opts.focusableSelectors
+    this.browser = null
     this.featureTests = new FeatureTests(this, this.opts.featureTests)
 
     if (typeof this.opts.breakpointConfig === 'object') {
@@ -174,7 +175,6 @@ export default class Application {
     this.setDims()
     this.fontLoader = new Fontloader(this)
 
-    this.fader = null
     this.callbacks = {}
 
     this.SCROLL_LOCKED = false
@@ -190,10 +190,10 @@ export default class Application {
     }
     window.addEventListener(Events.BREAKPOINT_CHANGE, this.onBreakpointChanged.bind(this))
 
-    this.beforeInitializedEvent = new window.CustomEvent(Events.APPLICATION_PRELUDIUM, this)
-    this.initializedEvent = new window.CustomEvent(Events.APPLICATION_INITIALIZED, this)
-    this.readyEvent = new window.CustomEvent(Events.APPLICATION_READY, this)
-    this.revealedEvent = new window.CustomEvent(Events.APPLICATION_REVEALED, this)
+    this.beforeInitializedEvent = new window.CustomEvent(Events.APPLICATION_PRELUDIUM, { detail: this })
+    this.initializedEvent = new window.CustomEvent(Events.APPLICATION_INITIALIZED, { detail: this })
+    this.readyEvent = new window.CustomEvent(Events.APPLICATION_READY, { detail: this })
+    this.revealedEvent = new window.CustomEvent(Events.APPLICATION_REVEALED, { detail: this })
 
     /**
      * Grab common events and defer
@@ -204,14 +204,14 @@ export default class Application {
       passive: true,
     })
 
-    if (opts.bindScroll) {
+    if (this.opts.bindScroll) {
       window.addEventListener('scroll', rafCallback(this.onScroll.bind(this)), {
         capture: false,
         passive: true,
       })
     }
 
-    if (opts.bindResize) {
+    if (this.opts.bindResize) {
       window.addEventListener('resize', rafCallback(this.onResize.bind(this)), {
         capture: false,
         passive: true,
@@ -364,7 +364,7 @@ export default class Application {
       return
     }
     const currentScrollbarWidth = this.getCurrentScrollBarWidth()
-    const ev = new window.CustomEvent(Events.APPLICATION_SCROLL_LOCKED, this)
+    const ev = new window.CustomEvent(Events.APPLICATION_SCROLL_LOCKED, { detail: this })
     this._scrollPaddedElements = [document.body, ...extraPaddedElements]
     window.dispatchEvent(ev)
     this.SCROLL_LOCKED = true
@@ -379,7 +379,7 @@ export default class Application {
     if (!this.SCROLL_LOCKED) {
       return
     }
-    const ev = new window.CustomEvent(Events.APPLICATION_SCROLL_RELEASED, this)
+    const ev = new window.CustomEvent(Events.APPLICATION_SCROLL_RELEASED, { detail: this })
     window.dispatchEvent(ev)
     this.SCROLL_LOCKED = false
     set(document.body, { overflow: defaultOverflow })
@@ -440,12 +440,18 @@ export default class Application {
     const duration = time * 1000 // convert to milliseconds
     const startTime = performance.now()
 
-    const easeInOut = t => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t)
+    const easingFns = {
+      linear: t => t,
+      easeIn: t => t * t,
+      easeOut: t => t * (2 - t),
+      easeInOut: t => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t),
+    }
+    const easeFn = easingFns[ease] || easingFns.easeInOut
 
     const animateScroll = currentTime => {
       const elapsed = currentTime - startTime
       const progress = Math.min(elapsed / duration, 1)
-      const eased = easeInOut(progress)
+      const eased = easeFn(progress)
       const currentY = startY + distance * eased
 
       window.scrollTo(0, currentY)
@@ -525,10 +531,6 @@ export default class Application {
     }
   }
 
-  getIOSCurrentInnerHeight() {
-    return window.innerHeight
-  }
-
   getIOSInnerHeightMax() {
     if (!navigator.userAgent.match(/iphone|ipod|ipad/i)) {
       return window.innerHeight
@@ -597,7 +599,7 @@ export default class Application {
   }
 
   setDims() {
-    const root = document.querySelector(':root')
+    const root = this.root
 
     this.size.initialInnerHeight = window.innerHeight
     this.size.initialOuterHeight = window.outerHeight
@@ -625,13 +627,13 @@ export default class Application {
   }
 
   setFontBaseVw() {
-    const root = document.querySelector(':root')
+    const root = this.root
     this.size.baseVW = this._getBaseVW()
     root.style.setProperty('--font-base-vw', `${this.size.baseVW}`)
   }
 
   setZoom() {
-    const root = document.querySelector(':root')
+    const root = this.root
     root.style.setProperty('--ec-zoom', `${this.size.zoom}`)
   }
 
@@ -639,14 +641,14 @@ export default class Application {
    * Inner height of mobiles may change when showing hiding bottom bar.
    */
   setvh100() {
-    const root = document.querySelector(':root')
+    const root = this.root
     const height = this.featureTests.results.ios ? screen.height : window.innerHeight
     root.style.setProperty('--vp-100vh', `${height}px`)
     root.style.setProperty('--vp-1vh', `${height * 0.01}px`)
   }
 
   setvw100() {
-    const root = document.querySelector(':root')
+    const root = this.root
     root.style.setProperty('--vp-100vw', `${window.innerWidth}px`)
     root.style.setProperty('--vp-1vw', `${window.innerWidth * 0.01}px`)
   }
@@ -655,7 +657,7 @@ export default class Application {
    * Get the max 100vh for iOS
    */
   setvh100Max() {
-    const root = document.querySelector(':root')
+    const root = this.root
     const vh100 = this.featureTests.results.ios
       ? this.getIOSInnerHeightMax()
       : this.size.initialInnerHeight
@@ -664,7 +666,7 @@ export default class Application {
   }
 
   setScrollHeight() {
-    const root = document.querySelector(':root')
+    const root = this.root
     root.style.setProperty('--scroll-h', `${document.body.scrollHeight}px`)
   }
 
@@ -702,7 +704,6 @@ export default class Application {
    */
   onScroll(e) {
     if (this.SCROLL_LOCKED) {
-      e.preventDefault()
       return
     }
 
@@ -737,14 +738,14 @@ export default class Application {
   }
 
   onVisibilityChange(e) {
-    let evt = new CustomEvent(Events.APPLICATION_VISIBILITY_CHANGE, e)
+    let evt = new CustomEvent(Events.APPLICATION_VISIBILITY_CHANGE, { detail: e })
     window.dispatchEvent(evt)
 
     if (document.visibilityState === 'hidden') {
-      evt = new CustomEvent(Events.APPLICATION_HIDDEN, e)
+      evt = new CustomEvent(Events.APPLICATION_HIDDEN, { detail: e })
       window.dispatchEvent(evt)
     } else if (document.visibilityState === 'visible') {
-      evt = new CustomEvent(Events.APPLICATION_VISIBLE, e)
+      evt = new CustomEvent(Events.APPLICATION_VISIBLE, { detail: e })
       window.dispatchEvent(evt)
     }
   }
@@ -760,12 +761,13 @@ export default class Application {
     }
   }
 
-  pollForVar(variable, time = 500, callback = () => {}) {
-    if (variable !== null) {
-      callback(variable)
+  pollForVar(getter, time = 500, callback = () => {}) {
+    const value = getter()
+    if (value !== null && value !== undefined) {
+      callback(value)
     } else {
       setTimeout(() => {
-        this.pollForVar(variable, time, callback)
+        this.pollForVar(getter, time, callback)
       }, time)
     }
   }
@@ -790,8 +792,7 @@ export default class Application {
 
     span.addEventListener('click', () => {
       const copyText = userAgent.querySelector('b')
-      const textArea = document.createElement('textarea')
-      textArea.value = `
+      const text = `
 ${copyText.textContent}
 SCREEN >> ${window.screen.width}x${window.screen.height}
 WINDOW >> ${windowWidth}x${windowHeight}
@@ -799,10 +800,21 @@ WINDOW >> ${windowWidth}x${windowHeight}
 FEATURES >>
 ${JSON.stringify(this.featureTests.results, undefined, 2)}
       `
-      document.body.appendChild(textArea)
-      textArea.select()
-      document.execCommand('Copy')
-      textArea.remove()
+
+      const copyWithFallback = str => {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          return navigator.clipboard.writeText(str)
+        }
+        const textArea = document.createElement('textarea')
+        textArea.value = str
+        document.body.appendChild(textArea)
+        textArea.select()
+        document.execCommand('Copy')
+        textArea.remove()
+        return Promise.resolve()
+      }
+
+      copyWithFallback(text)
       span.innerHTML = 'OK!'
       setTimeout(() => {
         span.innerHTML = 'KOPIER'
@@ -905,7 +917,7 @@ ${JSON.stringify(this.featureTests.results, undefined, 2)}
         }
       }
     }
-    document.onkeydown = gridKeyPressed
+    document.addEventListener('keydown', gridKeyPressed)
   }
 
   /**

package/src/modules/Dataloader/index.js

@@ -46,10 +46,20 @@ import DataloaderUrlSync from './url-sync'
  * <button data-loader-more-for="news">Load more</button>
  */
 
+/**
+ * @typedef {Object} DataloaderOptions
+ * @property {number} page - Starting page index for pagination
+ * @property {Object} loaderParam - Initial parameter key/value pairs for API requests
+ * @property {string} filter - Initial search filter string
+ * @property {number} filterDebounce - Debounce delay in ms for filter input
+ * @property {Object|null} urlSync - URL sync config keyed by loader ID
+ * @property {function} onFetch - Callback after fetch completes, receives dataloader instance
+ */
 const DEFAULT_OPTIONS = {
   page: 0,
   loaderParam: {},
   filter: '',
+  filterDebounce: 650,
   urlSync: null,
   onFetch: dataloader => {
     /**
@@ -91,20 +101,23 @@ export default class Dataloader {
     this.initialize()
   }
 
+  /**
+   * Replace an element's innerHTML with content fetched from a URL
+   *
+   * @param {HTMLElement} el - Target element
+   * @param {string} url - URL to fetch HTML from
+   * @returns {Promise<HTMLElement>} The element with updated content
+   */
   static replaceInnerHTML(el, url) {
-    return new Promise(resolve => {
-      fetch(url)
-        .then(res => {
-          return res.text()
-        })
-        .then(html => {
-          el.innerHTML = html
-          return resolve(el)
-        })
-    })
+    return fetch(url)
+      .then(res => res.text())
+      .then(html => {
+        el.innerHTML = html
+        return el
+      })
   }
 
-  debounce(func, delay = 650) {
+  debounce(func, delay) {
     let timerId
     return (...args) => {
       clearTimeout(timerId)
@@ -136,17 +149,22 @@ export default class Dataloader {
   initialize() {
     this.baseURL = this.$el.dataset.loader
     this.$paramEls = Dom.all(this.$el, '[data-loader-param]')
-    
+
+    // Store bound handlers for cleanup in destroy()
+    this._boundOnParam = this.onParam.bind(this)
+    this._boundOnMore = this.onMore.bind(this)
+    this._boundOnFilter = this.debounce(this.onFilterInput.bind(this), this.opts.filterDebounce)
+
     // Initialize URL sync if config exists for this dataloader ID
     if (this.opts.urlSync?.[this.id]) {
       this.urlSync = new DataloaderUrlSync(this, this.opts.urlSync[this.id])
     }
-    
+
     // Set initial parameters from pre-selected elements
     this.setInitialParams()
 
     this.$paramEls.forEach($paramEl => {
-      $paramEl.addEventListener('click', this.onParam.bind(this))
+      $paramEl.addEventListener('click', this._boundOnParam)
     })
 
     this.$moreBtn = Dom.find(this.$el, '[data-loader-more]')
@@ -156,7 +174,7 @@ export default class Dataloader {
     }
 
     if (this.$moreBtn) {
-      this.$moreBtn.addEventListener('click', this.onMore.bind(this))
+      this.$moreBtn.addEventListener('click', this._boundOnMore)
     }
 
     this.$filterInput = Dom.find(this.$el, '[data-loader-filter]')
@@ -166,7 +184,7 @@ export default class Dataloader {
     }
 
     if (this.$filterInput) {
-      this.$filterInput.addEventListener('input', this.debounce(this.onFilterInput.bind(this)))
+      this.$filterInput.addEventListener('input', this._boundOnFilter)
     }
   }
 
@@ -185,54 +203,69 @@ export default class Dataloader {
     this.fetch(true)
   }
 
+  getParamKey(el) {
+    return el.dataset.loaderParamKey || 'defaultParam'
+  }
+
+  handleCheckboxParam(el) {
+    const key = this.getParamKey(el)
+    this.opts.loaderParam[key] = el.checked
+  }
+
+  handleDeselectParam(el, multiVals) {
+    const key = this.getParamKey(el)
+    if (multiVals) {
+      this.opts.loaderParam[key] = this.opts.loaderParam[key].filter(val => {
+        return val !== el.dataset.loaderParam
+      })
+    } else {
+      delete this.opts.loaderParam[key]
+    }
+    el.removeAttribute('data-loader-param-selected')
+  }
+
+  handleMultiSelectParam(el) {
+    const key = this.getParamKey(el)
+    if (!Object.hasOwn(this.opts.loaderParam, key)) {
+      this.opts.loaderParam[key] = []
+    }
+    this.opts.loaderParam[key].push(el.dataset.loaderParam)
+    el.setAttribute('data-loader-param-selected', '')
+  }
+
+  handleSingleSelectParam(el) {
+    const paramKey = el.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')
+      }
+    })
+    el.setAttribute('data-loader-param-selected', '')
+    const key = this.getParamKey(el)
+    this.opts.loaderParam[key] = el.dataset.loaderParam
+  }
+
   onParam(e) {
     this.loading()
-    // reset page when switching param!
     this.opts.page = 0
 
-    // param can have multiple values
-    const multiVals = e.currentTarget.hasAttribute('data-loader-param-multi')
+    const el = e.currentTarget
+    const multiVals = el.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
+    if (el.getAttribute('type') === 'checkbox') {
+      this.handleCheckboxParam(el)
     } 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')
+      if (el.hasAttribute('data-loader-param-selected')) {
+        this.handleDeselectParam(el, multiVals)
+      } else if (multiVals) {
+        this.handleMultiSelectParam(el)
       } 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.handleSingleSelectParam(el)
       }
     }
 
@@ -245,13 +278,19 @@ export default class Dataloader {
   }
 
   fetch(addEntries = false) {
+    // Cancel any in-flight request to prevent race conditions
+    if (this._abortController) {
+      this._abortController.abort()
+    }
+    this._abortController = new AbortController()
+
     const { defaultParam, ...otherParams } = this.opts.loaderParam
     const filter = this.opts.filter
-    
+
     const fetchUrl = `${this.baseURL}/${defaultParam ? defaultParam + '/' : ''}${this.opts.page}?` +
         new URLSearchParams({ filter, ...otherParams })
 
-    fetch(fetchUrl)
+    fetch(fetchUrl, { signal: this._abortController.signal })
       .then(res => {
         this.status = res.headers.get('jpt-dataloader') || 'available'
         this.updateButton()
@@ -259,13 +298,18 @@ export default class Dataloader {
       })
       .then(html => {
         if (addEntries) {
-          this.$canvasEl.innerHTML += html
+          this.$canvasEl.insertAdjacentHTML('beforeend', html)
         } else {
           this.$canvasEl.innerHTML = html
         }
         this.opts.onFetch(this)
         this.complete()
       })
+      .catch(err => {
+        if (err.name === 'AbortError') return
+        console.error(`Dataloader[${this.id}] fetch error:`, err)
+        this.complete()
+      })
   }
 
   /**
@@ -300,4 +344,37 @@ export default class Dataloader {
       this.$moreBtn.removeAttribute('data-loader-starved')
     }
   }
+
+  /**
+   * Remove all event listeners and clean up resources
+   */
+  destroy() {
+    // Abort any in-flight fetch
+    if (this._abortController) {
+      this._abortController.abort()
+    }
+
+    // Remove param listeners
+    this.$paramEls.forEach($paramEl => {
+      $paramEl.removeEventListener('click', this._boundOnParam)
+    })
+
+    // Remove more button listener
+    if (this.$moreBtn) {
+      this.$moreBtn.removeEventListener('click', this._boundOnMore)
+    }
+
+    // Remove filter input listener
+    if (this.$filterInput) {
+      this.$filterInput.removeEventListener('input', this._boundOnFilter)
+    }
+
+    // Clean up URL sync
+    if (this.urlSync) {
+      this.urlSync.destroy()
+    }
+
+    // Remove loading state
+    this.complete()
+  }
 }

package/src/modules/FeatureTests/index.js

@@ -9,6 +9,7 @@ export default class FeatureTests {
     }
 
     this.results = {}
+    this.deviceLastTouched = 0
 
     if (this.testIE11()) {
       this.testFor('ie11', true)
@@ -118,7 +119,7 @@ export default class FeatureTests {
 
     const onMouseMove = () => {
       if (!this.results.mouse) {
-        if (Date.now() - this.devicelastTouched > 300) {
+        if (Date.now() - this.deviceLastTouched > 300) {
           this.results.touch = false
           this.results.mouse = true
           this.testFor('touch', false)