@splendidlabz/utils 1.11.3 → 1.11.4

package/src/dom/actions/prefer-horizontal-scroll.js

@@ -1,121 +0,0 @@
-import { omitEmpty } from '../../lib/objects/omit-empty.js'
-import { getCSSVar, setCSSVar } from '../css-vars.js'
-import { addListeners, removeListeners } from '../events.js'
-
-const DEFAULT_OPTIONS = {
-  scrollSnapDelay: 1000,
-}
-
-export function preferHorizontalScroll(node, props = {}) {
-  if (!node.classList.contains('scrollable-prefer-horizontal')) return
-
-  const state = {
-    origSnapType: null,
-    currentSnapType: null,
-    snapTimeoutID: null,
-  }
-
-  const options = {
-    ...DEFAULT_OPTIONS,
-    ...omitEmpty({
-      scrollSnapDelay: getCSSVar(node, '--scroll-snap-delay'),
-    }),
-    ...omitEmpty(props),
-  }
-
-  const listeners = [
-    {
-      event: 'wheel',
-      node,
-      handler: handleWheel,
-    },
-
-    {
-      event: 'pointerenter',
-      node,
-      handler: handlePointerEnter,
-    },
-
-    {
-      event: 'pointerleave',
-      node,
-      handler: handlePointerLeave,
-    },
-  ]
-
-  addListeners(listeners)
-
-  function handleWheel(event) {
-    const direction = event.deltaY > 0 ? 'down' : 'up'
-    const updatedDelta = event.deltaY
-
-    // Only handle mouse wheel
-    // Trackpad users can scroll horizontally themselves
-    if (isTrackpad(event)) return false
-
-    setCSSVar(node, '--snap-type', 'none')
-
-    const scrolledAmount = node.scrollLeft
-    const scrollWidth = node.scrollWidth
-    const clientWidth = node.clientWidth
-    const scrollableAmount = scrollWidth - clientWidth // Maximum scrollable width to the right
-
-    // Hijack downwards scroll
-    if (direction === 'down' && scrolledAmount < scrollableAmount) {
-      node.scrollLeft += updatedDelta
-      event.preventDefault()
-    }
-
-    // Hijack upwards scroll
-    if (direction === 'up' && scrolledAmount > 0) {
-      node.scrollLeft += updatedDelta
-      event.preventDefault()
-    }
-
-    // Restore snap type after a delay
-    const { snapTimeoutID } = state
-    if (snapTimeoutID) clearTimeout(snapTimeoutID)
-    state.snapTimeoutID = setTimeout(_ => {
-      restoreHijackedState(node, state)
-    }, options.scrollSnapDelay)
-  }
-
-  function handlePointerEnter(event) {
-    state.origSnapType = getCSSVar(node, '--snap-type') || 'proximity'
-  }
-
-  function handlePointerLeave(event) {
-    restoreHijackedState(node, state)
-  }
-
-  return {
-    destroy() {
-      removeListeners(listeners)
-    },
-  }
-}
-
-function restoreHijackedState(node, state) {
-  const scrollLeft = node.scrollLeft
-
-  // Get the final scroll position
-  setCSSVar(node, '--snap-type', state.origSnapType)
-  const finalScrollLeft = node.scrollLeft
-
-  // Scroll back to original position before replacing snap
-  setCSSVar(node, '--snap-type', 'none')
-  node.scrollTo({ left: scrollLeft, behavior: 'instant' })
-
-  // Scroll back to the final position smoothly
-  node.scrollTo({ left: finalScrollLeft, behavior: 'smooth' })
-
-  setTimeout(_ => {
-    setCSSVar(node, '--snap-type', state.origSnapType)
-  }, 250)
-}
-
-// https://stackoverflow.com/questions/10744645/detect-touchpad-vs-mouse-in-javascript/62415754#62415754
-function isTrackpad(event) {
-  // if (event.deltaMode === 0) return true // Deltamode no longer works in Chrome
-  if (event.wheelDeltaY === event.deltaY * -3) return true
-}

package/src/dom/actions/sticky.js

@@ -1,85 +0,0 @@
-import { boundingBoxRelativeToAncestor } from '../bounding-box.js'
-import { resizeObserver } from '../observers/resize-observer.js'
-import { findScrollContainer } from '../ui/scroll-container.js'
-
-export function sticky(node, props = {}) {
-  const scrollContainer = findScrollContainer(node)
-  let stickyTBLR = getComputedTBLR(node)
-
-  const obs = resizeObserver(node, {
-    callback: ({ entry }) => {
-      stickyTBLR = getComputedTBLR(node)
-      isSticking()
-
-      // Arguably, one can use a single container to check for all Sticky elements, but that is unnecessarily complicated to code. This adds more listeners to the scroll containers (assuming many), but it shouldn't be have enough listeners to break performance in any way.
-      scrollContainer === document.documentElement
-        ? window.addEventListener('scroll', scrollEventListener)
-        : scrollContainer.addEventListener('scroll', scrollEventListener)
-    },
-  })
-
-  function scrollEventListener(event) {
-    isSticking()
-  }
-
-  function isSticking() {
-    const { top, bottom, left, right } = stickyTBLR
-    const relativeRect = boundingBoxRelativeToAncestor({
-      element: node,
-      ancestorElement: scrollContainer,
-    })
-
-    // Sticky Top
-    if (!isNaN(top)) {
-      if (relativeRect.top - top <= 1) {
-        node.classList.add('sticking')
-      } else {
-        node.classList.remove('sticking')
-      }
-    }
-
-    // Sticky Bottom
-    if (!isNaN(bottom)) {
-      if (relativeRect.bottom + bottom >= -1) {
-        node.classList.add('sticking')
-      } else {
-        node.classList.remove('sticking')
-      }
-    }
-
-    // Sticky Left
-    if (!isNaN(left)) {
-      if (relativeRect.left - left <= 1) {
-        node.classList.add('sticking')
-      } else {
-        node.classList.remove('sticking')
-      }
-    }
-
-    // Sticky Right
-    if (!isNaN(right)) {
-      if (relativeRect.right + right >= -1) {
-        node.classList.add('sticking')
-      } else {
-        node.classList.remove('sticking')
-      }
-    }
-  }
-
-  return {
-    destroy() {
-      obs.disconnect()
-      scrollContainer.removeEventListener('scroll', scrollEventListener)
-    },
-  }
-}
-
-function getComputedTBLR(element) {
-  const style = getComputedStyle(element)
-  return {
-    top: parseFloat(style.top),
-    bottom: parseFloat(style.bottom),
-    left: parseFloat(style.left),
-    right: parseFloat(style.right),
-  }
-}

package/src/dom/clipboard.js

@@ -1,14 +0,0 @@
-/**
- * Copies rich text from an element to the clipboard
- * @param HTMLElement element - Element to copy
- */
-export function copyRichText(element) {
-  const range = document.createRange()
-  range.selectNode(element)
-
-  const selection = window.getSelection()
-  selection.removeAllRanges()
-  selection.addRange(range)
-  document.execCommand('copy')
-  selection.removeAllRanges()
-}

package/src/dom/cookie.js

@@ -1,32 +0,0 @@
-export const cookies = {
-  get(name) {
-    return getCookie(name)
-  },
-
-  set(name, value, days) {
-    setCookie(name, value, days)
-  },
-}
-
-export function getCookie(name) {
-  const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'))
-  if (!match) return null
-  const decoded = decodeURIComponent(match[2])
-
-  try {
-    return JSON.parse(decoded)
-  } catch (e) {
-    return decoded
-  }
-}
-
-// By Copilot. Needs testing before confirmation.
-function setCookie(name, value, days) {
-  let expires = ''
-  if (days) {
-    const date = new Date()
-    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000)
-    expires = '; expires=' + date.toUTCString()
-  }
-  document.cookie = name + '=' + (value || '') + expires + '; path=/'
-}

package/src/dom/css-vars.js

@@ -1,19 +0,0 @@
-import { getElement } from './get-element.js'
-
-export function getCSSValue(element, prop) {
-  return getCSSVar(element, prop)
-}
-
-export function setCSSValue(element, prop, value) {
-  setCSSVar(element, prop, value)
-}
-
-export function getCSSVar(element, prop) {
-  element = getElement(element)
-  return getComputedStyle(element).getPropertyValue(prop)
-}
-
-export function setCSSVar(element, prop, value) {
-  element = getElement(element)
-  element.style.setProperty(prop, value)
-}

package/src/dom/font-size.js

@@ -1,40 +0,0 @@
-import { splitUnit } from '../lib/numbers/index.js'
-
-export function getUnit(value) {
-  const [, unit] = splitUnit(value)
-  return unit
-}
-
-export function rem(multiple = 1) {
-  const value = parseFloat(getComputedStyle(document.body)['font-size'])
-  return Math.round(value * multiple)
-}
-
-export function em(element = document.body, multiple = 1) {
-  const value = parseFloat(getComputedStyle(element)['font-size'])
-  return Math.round(value * multiple)
-}
-
-export function rlh(multiple = 1) {
-  const lineHeight = parseFloat(getComputedStyle(document.body)['line-height'])
-  return Math.round(lineHeight * multiple)
-}
-
-export function lh(element = document.body, multiple = 1) {
-  const lineHeight = getComputedStyle(element)['line-height']
-  const value = parseFloat(lineHeight)
-  return Math.round(value * multiple)
-}
-
-export function toPx(value, element = null) {
-  const [numeric, unit] = splitUnit(value)
-  let finalValue = 0
-
-  if (unit === 'rem') finalValue = rem(numeric)
-  if (unit === 'em') finalValue = em(element, numeric)
-  if (unit === 'lh') finalValue = lh(element, numeric)
-  if (unit === 'px') finalValue = numeric
-  if (!unit) finalValue = numeric // Default to px offsets
-
-  return finalValue
-}

package/src/dom/hash.js

@@ -1,9 +0,0 @@
-export async function sha256Hash(string) {
-  const utf8 = new TextEncoder().encode(string)
-  const hashBuffer = await crypto.subtle.digest('SHA-256', utf8)
-  const hashArray = Array.from(new Uint8Array(hashBuffer))
-  const hashHex = hashArray
-    .map(bytes => bytes.toString(16).padStart(2, '0'))
-    .join('')
-  return hashHex
-}

package/src/dom/index.js

@@ -1,23 +0,0 @@
-export * from './accessibility.js'
-export * from './actions/index.js'
-export * from './bounding-box.js'
-export * from './clipboard.js'
-export * from './cookie.js'
-export * from './css-vars.js'
-export * from './events.js'
-export * from './focusable.js'
-export * from './font-size.js'
-export * from './get-element.js'
-export * from './hash.js'
-export * from './keyboard.js'
-export * from './local-store.js'
-export * from './media.js'
-export * from './observers/index.js'
-export * from './pkce.js'
-export * from './query-params.js'
-export * from './random-string.js'
-export * from './sanitize.js'
-export * from './session-store.js'
-export * from './spam-prevention.js'
-export * from './trap-focus.js'
-export * from './ui/index.js'

package/src/dom/media.js

@@ -1,30 +0,0 @@
-export async function imagesLoaded(node) {
-  const images = Array.from(node.querySelectorAll('img'))
-  const promises = images.map(img => {
-    return new Promise((resolve, reject) => {
-      if (img.complete) return resolve()
-      img.onload = resolve
-      img.onerror = e => {
-        // eslint-disable-next-line prefer-promise-reject-errors
-        reject('Image failed to load')
-      }
-    })
-  })
-  return Promise.all(promises)
-}
-
-export async function videosLoaded(node) {
-  const videos = Array.from(node.querySelectorAll('video'))
-  const promises = videos.map(video => {
-    return new Promise((resolve, reject) => {
-      if (video.readyState === 4) return resolve() // HAVE_ENOUGH_DATA
-      video.onloadedmetadata = resolve
-      video.onerror = reject
-    })
-  })
-  return Promise.all(promises)
-}
-
-export async function mediaLoaded(node) {
-  return Promise.all([imagesLoaded(node), videosLoaded(node)])
-}

package/src/dom/observers/index.js

@@ -1,4 +0,0 @@
-export * from './intersection-observer.js'
-export * from './mutation-observer.js'
-export * from './resize-observer.js'
-export * from './scroll-observer.js'

package/src/dom/observers/intersection-observer.js

@@ -1,43 +0,0 @@
-import { dispatchEvent } from '../events.js'
-import { useObserverMethodOnTarget } from './observer.js'
-
-// See https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options for options
-export function intersectionObserver(target, options = {}) {
-  const { callback, ...opts } = options
-  const observer = new IntersectionObserver(observerFn, opts)
-
-  useObserverMethodOnTarget(target, observer, 'observe')
-
-  function observerFn(entries) {
-    for (const entry of entries) {
-      if (callback) callback({ entry, entries, observer })
-      else dispatchEvent(target, 'intersect', { entry, entries, observer })
-    }
-  }
-
-  return {
-    observer,
-    observe(target) {
-      useObserverMethodOnTarget(target, observer, 'observe', options)
-    },
-
-    unobserve(target) {
-      useObserverMethodOnTarget(target, observer, 'unobserve')
-    },
-
-    takeRecords() {
-      return observer.takeRecords()
-    },
-
-    disconnect() {
-      // Take records before disconnecting.
-      const records = observer.takeRecords()
-      observer.disconnect()
-      if (records.length > 0) observerFn(records)
-    },
-
-    destroy() {
-      observer.disconnect()
-    },
-  }
-}

package/src/dom/observers/mutation-observer.js

@@ -1,51 +0,0 @@
-/* eslint-env browser */
-import { dispatchEvent } from '../events.js'
-import { useObserverMethodOnTarget } from './observer.js'
-
-// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe
-
-// These are simply options that will often be used. Check the docs for other options. Adding them here simply because it's easier to refer them here than reading the docs.
-const defaultOptions = {
-  attributes: false,
-  childList: false,
-  subtree: false,
-}
-
-export function mutationObserver(target, options) {
-  options = { ...defaultOptions, ...options }
-  const { callback, ...opts } = options
-  const observer = new MutationObserver(observerFn)
-
-  if (target === window) target = document.body
-  useObserverMethodOnTarget(target, observer, 'observe', opts)
-
-  function observerFn(entries) {
-    for (const entry of entries) {
-      if (callback) callback({ entry, entries, observer })
-      else dispatchEvent(target, 'mutate', { entry, entries, observer })
-    }
-  }
-
-  return {
-    observer,
-    observe(target) {
-      useObserverMethodOnTarget(target, observer, 'observe', options)
-    },
-
-    takeRecords() {
-      return observer.takeRecords()
-    },
-
-    disconnect() {
-      // Take records before disconnecting.
-      // https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/takeRecords
-      const records = observer.takeRecords()
-      observer.disconnect()
-      if (records.length > 0) observerFn(records)
-    },
-
-    destroy() {
-      observer.disconnect()
-    },
-  }
-}

package/src/dom/observers/observer.js

@@ -1,18 +0,0 @@
-import { getNodeType } from '../get-element.js'
-
-export function useObserverMethodOnTarget(
-  target,
-  observer,
-  method = 'observe',
-  options = undefined
-) {
-  const targetType = getNodeType(target)
-  if (targetType === 'element') observer[method](target, options)
-  if (targetType === 'nodelist') {
-    const elements = Array.from(target)
-    elements.forEach(element => observer[method](element, options))
-  }
-  if (targetType === 'array') {
-    target.forEach(element => observer[method](element, options))
-  }
-}

package/src/dom/observers/scroll-observer.js

@@ -1,146 +0,0 @@
-/* eslint-env browser */
-import { resizeObserver } from './resize-observer.js'
-
-const defaultOptions = {
-  threshold: 0, // Float between 0 to 1.
-  tolerance: 0.1, // Float between 0 to 1. Tolerance for event firing
-  once: false, // Only fire threshold callback once
-}
-
-/**
- * @typedef {Object} ScrollObserverOptions
- * @property {number} [threshold] - Float between 0 to 1. When to trigger callback (0.75 = 75% down page)
- * @property {number} [tolerance] - Float between 0 to 1. Tolerance zone around threshold
- * @property {boolean} [once] - Only fire threshold callback once (default: false)
- * @property {Function} [callback] - Called on every scroll with scrollPercent
- * @property {Function} [onScrollDown] - Called when scrolling down
- * @property {Function} [onScrollUp] - Called when scrolling up
- * @property {Function} [onEnterThreshold] - Called when entering threshold zone
- */
-
-/**
- * @param {Element | Document | Window} node
- * @returns {Element}
- */
-function getScrollElement(node) {
-  if (
-    node === document ||
-    node === window ||
-    node === document.documentElement
-  ) {
-    return document.documentElement
-  }
-  return /** @type {Element} */ (node)
-}
-
-/**
- * Scroll Observer - Optimized for performance
- * @param {Element | Document | Window} node - The element to observe scroll events on
- * @param {ScrollObserverOptions} [options] - Configuration options
- */
-export function scrollObserver(node, options = {}) {
-  const { callback, onScrollDown, onScrollUp, onEnterThreshold, ...userOpts } =
-    options
-  const opts = { ...defaultOptions, ...userOpts }
-  const { threshold, tolerance, once } = opts
-
-  let prevScrollDirection = null
-  let prevScrollTop = 0
-  let prevScrollPercent = 0
-  let thresholdFired = false
-  let rafId = null
-
-  // Determine scroll context once at initialization
-  const isDocumentScroll =
-    node === document || node === window || node === document.documentElement
-  const scrollElement = getScrollElement(node)
-  const eventTarget = isDocumentScroll ? window : node
-
-  // Cache DOM references and expensive calculations
-  let cachedScrollHeight = 0
-  let cachedClientHeight = 0
-
-  // Initialize cache and start observing for changes
-  updateCache()
-  const cacheObserver = resizeObserver(scrollElement, {
-    callback: updateCache,
-  })
-
-  eventTarget.addEventListener('scroll', throttledObserve, { passive: true })
-
-  function throttledObserve() {
-    rafId = requestAnimationFrame(observe)
-  }
-
-  function updateCache() {
-    cachedScrollHeight = scrollElement.scrollHeight
-    cachedClientHeight = scrollElement.clientHeight
-  }
-
-  function observe() {
-    const scrollTop = scrollElement.scrollTop
-
-    // Skip if scroll position hasn't changed meaningfully
-    if (Math.abs(scrollTop - prevScrollTop) < 1) return
-
-    const scrollDirection = scrollTop > prevScrollTop ? 'down' : 'up'
-    const maxScroll = Math.max(1, cachedScrollHeight - cachedClientHeight)
-    const scrollPercent = Math.min(1, Math.max(0, scrollTop / maxScroll))
-
-    // Check threshold crossing (e.g., 75% ± tolerance)
-    const thresholdMin = threshold - tolerance / 2
-    const thresholdMax = threshold + tolerance / 2
-    const wasInThreshold =
-      prevScrollPercent >= thresholdMin && prevScrollPercent <= thresholdMax
-    const isInThreshold =
-      scrollPercent >= thresholdMin && scrollPercent <= thresholdMax
-    const hasEnteredThreshold =
-      !wasInThreshold && isInThreshold && (!once || !thresholdFired)
-
-    if (hasEnteredThreshold && once) {
-      thresholdFired = true
-    }
-
-    // Prepare common data for all callbacks
-    const callbackData = {
-      scrollTop,
-      scrollDirection,
-      scrollPercent,
-      directionChanged: scrollDirection !== prevScrollDirection,
-      hasEnteredThreshold,
-      isInThreshold,
-    }
-
-    // Call specific callbacks
-    if (typeof callback === 'function') {
-      callback(callbackData)
-    }
-
-    // Only fire direction callbacks when direction actually changes
-    if (scrollDirection !== prevScrollDirection) {
-      if (scrollDirection === 'down' && typeof onScrollDown === 'function') {
-        onScrollDown(callbackData)
-      }
-      if (scrollDirection === 'up' && typeof onScrollUp === 'function') {
-        onScrollUp(callbackData)
-      }
-    }
-
-    // Fire threshold callback when entering threshold zone
-    if (hasEnteredThreshold && typeof onEnterThreshold === 'function') {
-      onEnterThreshold(callbackData)
-    }
-
-    prevScrollTop = scrollTop
-    prevScrollPercent = scrollPercent
-    prevScrollDirection = scrollDirection
-  }
-
-  return {
-    destroy() {
-      eventTarget.removeEventListener('scroll', throttledObserve)
-      if (rafId) cancelAnimationFrame(rafId)
-      cacheObserver.destroy()
-    },
-  }
-}

package/src/dom/pkce.js

@@ -1,34 +0,0 @@
-// Browser only
-// Check the node version for usage in servers
-import { randomString } from './random-string.js'
-
-export async function PKCE() {
-  const codeVerifier = await randomString()
-  const codeChallenge = await getCodeChallenge(codeVerifier)
-
-  return {
-    state: await randomString(),
-    code_verifier: codeVerifier,
-    code_challenge: codeChallenge,
-    code_challenge_method: 'S256',
-  }
-}
-
-/**
- * Generates code challenge in browser
- * @param {string} verifier
- * @returns promise
- */
-async function getCodeChallenge(verifier) {
-  // Hash the code verifier with SHA-256
-  const encoder = new TextEncoder()
-  const data = encoder.encode(verifier)
-  const hashed = await window.crypto.subtle.digest('SHA-256', data)
-
-  // Base64url encode the hash
-  return window
-    .btoa(String.fromCharCode.apply(null, new Uint8Array(hashed)))
-    .replace(/\+/g, '-')
-    .replace(/\//g, '_')
-    .replace(/=+$/, '')
-}