@splendidlabz/utils 1.3.0

package/dom/focusable.js

@@ -0,0 +1,56 @@
+export function Focusable(element = document) {
+  return {
+    get length() {
+      return this.keyboard.length
+    },
+
+    get all() {
+      return [
+        ...element.querySelectorAll(
+          `a, 
+            button, 
+            input, 
+            textarea, 
+            select, 
+            details, 
+            iframe, 
+            embed, 
+            object, 
+            summary, 
+            dialog, 
+            audio[controls], 
+            video[controls], 
+            [contenteditable], 
+            [tabindex]
+          `
+        ),
+      ].filter(el => {
+        if (el.hasAttribute('disabled')) return false
+        if (el.hasAttribute('hidden')) return false
+        if (window.getComputedStyle(el).display === 'none') return false
+
+        return true
+      })
+    },
+
+    get keyboard() {
+      return this.all.filter(el => el.tabIndex > -1)
+    },
+
+    get first() {
+      return this.keyboard[0]
+    },
+
+    get last() {
+      return this.keyboard[this.length - 1]
+    },
+
+    next(index) {
+      return this.keyboard[index + 1] || null
+    },
+
+    prev(index) {
+      return this.keyboard[index + 1] || null
+    },
+  }
+}

package/dom/font-size.js

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

package/dom/get-element.js

@@ -0,0 +1,69 @@
+// Returns the target HTMLElement.
+// If the selector is already an HTMLElement, it will return the selector itself.
+// Otherwise, it will return the first element that matches the selector.
+
+export function getElement(selector) {
+  if (!selector) return
+  if (selector instanceof HTMLElement) return selector
+  return document.querySelector(selector)
+}
+
+export function getChildrenElements(node) {
+  let children = node.children
+
+  // Compensate for Astro Slots
+  if (children[0]?.nodeName === 'ASTRO-SLOT') children = children[0].children
+  return Array.from(children)
+}
+
+export function getSiblingElements(element) {
+  return Array.from(element.parentElement.children).filter(
+    child => child !== element,
+  )
+}
+
+export function getSelfIndex(element) {
+  return Array.from(element.parentElement.children).indexOf(element)
+}
+
+export function isAncestor(ancestor, element, { searchLevels = 0 } = {}) {
+  if (ancestor === element) return true
+
+  let parent = element.parentElement
+  // Infinite Search
+  if (searchLevels === 0) {
+    while (parent) {
+      if (ancestor === parent) return true
+      parent = parent.parentElement
+    }
+  } else {
+    // Search X levels upwards
+    for (let i = 0; i < searchLevels; i++) {
+      if (ancestor === parent) return true
+      parent = parent.parentElement
+    }
+  }
+
+  return false
+}
+
+export function getAncestorWithSiblings(element, { limit = false } = {}) {
+  const ancestor = element.parentElement
+  const siblings = getSiblingElements(ancestor)
+
+  // Found
+  if (siblings.length) return siblings
+
+  // No more ancestors
+  if (!ancestor) return null
+
+  // Unlimited upwards search
+  if (limit === false) return getAncestorWithSiblings(ancestor)
+
+  // Limited search
+  if (limit > 0)
+    return getAncestorWithSiblings(ancestor, { searchLevels: limit - 1 })
+
+  // Limit reached, end search.
+  if (limit === 0) return null
+}

package/dom/hash.js

@@ -0,0 +1,9 @@
+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/dom/index.js

@@ -0,0 +1,18 @@
+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 './pkce.js'
+export * from './query-params.js'
+export * from './random-string.js'
+export * from './session-store.js'
+export * from './trap-focus.js'
+export * from './ui/index.js'

package/dom/keyboard.js

@@ -0,0 +1,39 @@
+/**
+ * Event is Tab (without shift)
+ * @param {Object} event - The event object
+ * @returns {Boolean}
+ */
+export function isTab(event) {
+  return !event.shiftKey && event.key === 'Tab'
+}
+
+/**
+ * Event is shift + Tab
+ * @param {Object} event - The event object
+ * @returns {Boolean}
+ */
+export function isShiftTab(event) {
+  return event.shiftKey && event.key === 'Tab'
+}
+
+/**
+ * Matches both Tab and Shift+Tab
+ * @param {Object} event - The event object
+ * @returns
+ */
+export function isTabKey(key) {
+  return key === 'Tab'
+}
+
+/**
+ * Event is an arrow key
+ * @param {Object} event - The event object
+ * @returns {Boolean}
+ */
+export function isArrowKey(key) {
+  return ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)
+}
+
+export function isEscapeKey(key) {
+  return key === 'Escape'
+}

package/dom/local-store.js

@@ -0,0 +1,29 @@
+// ========================
+// Local Storage
+// ========================
+export const localStore = {
+  get(key) {
+    const value = localStorage.getItem(key)
+    if (!value) return
+
+    try {
+      // Returns an object if stored value is JSON
+      return JSON.parse(value)
+    } catch (error) {
+      // Returns plain string if stored value is not JSON
+      return value
+    }
+  },
+
+  set(key, value) {
+    if (typeof value === 'string') {
+      localStorage.setItem(key, value)
+    } else {
+      localStorage.setItem(key, JSON.stringify(value))
+    }
+  },
+
+  remove(key) {
+    localStorage.removeItem(key)
+  },
+}

package/dom/media.js

@@ -0,0 +1,27 @@
+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 = reject
+    })
+  })
+  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/dom/pkce.js

@@ -0,0 +1,34 @@
+// 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(/=+$/, '')
+}

package/dom/query-params.js

@@ -0,0 +1,14 @@
+// ========================
+// Query Params
+// ========================
+export const queryParams = {
+  get(key) {
+    const searchParams = new URLSearchParams(location.search)
+    return searchParams.get(key)
+  },
+
+  stringify(params) {
+    const searchParams = new URLSearchParams(location.search)
+    return searchParams.toString()
+  },
+}

package/dom/random-string.js

@@ -0,0 +1,18 @@
+/**
+ * Generates a random string.
+ * Ensures first character is a letter so it can be used in HTML ids and classes
+ * This can actually be used everywhere, not just in the browser.
+ */
+export function randomString(length) {
+  const firstLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26))
+  const others = Math.random()
+    .toString(36)
+    .substring(2, 2 + length - 1)
+
+  return firstLetter + others
+}
+
+// For browsers only
+export function uuid() {
+  return crypto.randomUUID()
+}

package/dom/session-store.js

@@ -0,0 +1,29 @@
+// ========================
+// Session Storage
+// ========================
+export const sessionStore = {
+  get(key) {
+    const value = sessionStorage.getItem(key)
+    if (!value) return
+
+    try {
+      // Returns an object if stored value is JSON
+      return JSON.parse(value)
+    } catch (error) {
+      // Returns plain string if stored value is not JSON
+      return value
+    }
+  },
+
+  set(key, value) {
+    if (typeof value === 'string') {
+      sessionStorage.setItem(key, value)
+    } else {
+      sessionStorage.setItem(key, JSON.stringify(value))
+    }
+  },
+
+  remove(key) {
+    sessionStorage.removeItem(key)
+  },
+}

package/dom/trap-focus.js

@@ -0,0 +1,55 @@
+import { Focusable } from './focusable.js'
+import { isShiftTab, isTab } from './keyboard.js'
+
+export function trapFocus({ event, focusables }) {
+  if (event.key !== 'Tab') return
+  if (isTab(event) && document.activeElement === focusables.last) {
+    event.preventDefault()
+    focusables.first.focus()
+  }
+
+  // User presses shift + tab from the first focusable element.
+  // Redirects to the last focusable element.
+  if (isShiftTab(event) && document.activeElement === focusables.first) {
+    event.preventDefault()
+    focusables.last.focus()
+  }
+}
+
+/* Returns focus back to trigger node when user is done tabbing through the content */
+export function manageFocus({
+  event,
+  triggerNode,
+  contentNode,
+  focusables,
+  tabOutFocus = 'next', // 'trigger'
+  onLeave = function () {},
+}) {
+  const activeEl = document.activeElement
+
+  if (activeEl === contentNode && isShiftTab(event)) return backFocus()
+  if (activeEl === contentNode && focusables.length === 0 && isTab(event))
+    return nextFocus()
+
+  if (activeEl === focusables.last && isTab(event)) return nextFocus()
+  if (activeEl === focusables.first && isShiftTab(event)) return backFocus()
+
+  function backFocus() {
+    event.preventDefault()
+    triggerNode.focus()
+    onLeave('back')
+  }
+
+  function nextFocus() {
+    if (tabOutFocus === 'trigger') triggerNode.focus()
+    if (tabOutFocus === 'next') {
+      event.preventDefault()
+      const DOMFocusables = Focusable().keyboard
+      const index = DOMFocusables.findIndex(e => e === triggerNode)
+      const next = DOMFocusables[index + 1]
+      if (next) next.focus()
+      else triggerNode.focus()
+    }
+    onLeave('forward')
+  }
+}

package/dom/ui/aria-current.js

@@ -0,0 +1,20 @@
+export function markActiveAnchorIn(container, anchorType = 'page') {
+  if (!container) return
+
+  const { pathname } = window.location
+  const element = container.querySelector(`[href="${pathname}"]`)
+  if (!element) return
+
+  // Mark the active element
+  element.setAttribute('aria-current', 'page')
+  return element
+}
+
+export function goToElement(
+  element,
+  { scrollBehaviour = 'instant', scrollMargin = '3rem' } = {},
+) {
+  if (!element) return
+  element.style.scrollMarginTop = scrollMargin
+  element.scrollIntoView({ behavior: scrollBehaviour })
+}

package/dom/ui/inconsistent-button-fix.js

@@ -0,0 +1,8 @@
+export function inconsistentButtonFix() {
+  // https://zellwk.com/blog/inconsistent-button-behavior/
+  document.addEventListener('click', function (event) {
+    if (event.target.matches('button')) {
+      event.target.focus()
+    }
+  })
+}

package/dom/ui/index.js

@@ -0,0 +1,4 @@
+export * from './aria-current.js'
+export * from './inconsistent-button-fix.js'
+export * from './scroll-container.js'
+export * from './traverse-and-scramble.js'

package/dom/ui/scroll-container.js

@@ -0,0 +1,25 @@
+export function findScrollContainer(element, direction = 'both') {
+  if (!element) return
+
+  let parent = element.parentElement
+  while (parent) {
+    const { overflow, overflowX, overflowY } = getComputedStyle(parent)
+
+    if (direction === 'both') {
+      if (overflow.includes('auto') || overflow.includes('scroll'))
+        return parent
+    }
+
+    if (direction === 'horizontal') {
+      if (overflowX === 'auto' || overflowX === 'scroll') return parent
+    }
+
+    if (direction === 'vertical') {
+      if (overflowY === 'auto' || overflowY === 'scroll') return parent
+    }
+
+    parent = parent.parentElement
+  }
+
+  return document.documentElement
+}

package/dom/ui/traverse-and-scramble.js

@@ -0,0 +1,40 @@
+// Adjusted function to take excludes as an argument
+export function traverseAndScramble(node, { excludes } = {}) {
+  // Check if the current node matches any of the exclude selectors
+  if (
+    excludes &&
+    excludes.some(selector => node.matches && node.matches(selector))
+  ) {
+    return // Skip this node and its children
+  }
+
+  node.childNodes.forEach(child => {
+    if (child.nodeType === 3) {
+      // Node.TEXT_NODE
+      child.nodeValue = scrambleText(child.nodeValue)
+    } else if (child.nodeType === 1) {
+      // Node.ELEMENT_NODE
+      traverseAndScramble(child, { excludes }) // Recurse into child elements with excludes
+    }
+  })
+}
+
+// Function to scramble text remains unchanged
+function scrambleText(text) {
+  return text
+    .split('')
+    .map(char => {
+      if (/^[A-Za-z0-9]$/.test(char)) {
+        const randomCharCode =
+          Math.random() < 26 / 36
+            ? Math.floor(Math.random() * 26) +
+              (char === char.toUpperCase() ? 65 : 97) // A-Z
+            : Math.floor(Math.random() * 10) + 48 // 0-9
+        return String.fromCharCode(randomCharCode)
+      } else {
+        // Keep punctuations and other symbols intact
+        return char
+      }
+    })
+    .join('')
+}

package/lib/arrays/index.js

@@ -0,0 +1,62 @@
+export function last(array, index) {
+  return index === array.length - 1
+}
+
+// Fisher Yates Shuffle without mutating the original array
+export function shuffle(array) {
+  const clone = array.slice()
+  let currentIndex = array.length
+  let temporaryValue
+  let randomIndex
+
+  // While there remain elements to shuffle...
+  while (currentIndex !== 0) {
+    // Pick a remaining element...
+    randomIndex = Math.floor(Math.random() * currentIndex)
+    currentIndex -= 1
+
+    // And swap it with the current element.
+    temporaryValue = clone[currentIndex]
+    clone[currentIndex] = clone[randomIndex]
+    clone[randomIndex] = temporaryValue
+  }
+
+  return clone
+}
+
+/**
+ * Sorts an array of objects or strings without mutating the array
+ */
+export function sort(
+  array,
+  {
+    property, // Property to sort by. Used when sorting array of objects.
+    order = 'asc', // 'asc' or 'desc'
+  },
+) {
+  const clone = array.slice()
+  const sorted = clone.sort((a, b) => {
+    let one = a
+    let two = b
+
+    // Use the `sortBy` property if sorting by objects
+    if (property) {
+      one = a[property]
+      two = b[property]
+    }
+
+    if (order === 'asc') {
+      if (one < two) return -1
+      if (one > two) return 1
+    }
+
+    if (order === 'desc') {
+      if (one < two) return 1
+      if (one > two) return -1
+    }
+
+    return 0
+  })
+
+  return sorted
+}

package/lib/auth/index.js

@@ -0,0 +1 @@
+export * from './route-manager.js'

package/lib/auth/route-manager.js

@@ -0,0 +1,44 @@
+/**
+  // Usage ... Probably should use either protected or bypass, not both.
+  @example 
+  const config = {
+    routeConfig: {
+      startsWith: ['/dashboard']
+    }
+    bypassRoutes: {
+      is: ['/'],
+      startsWith: ['/fonts', '/auth', '/favicon', '/images'],
+      includes: ['/meh'],
+    }
+  }
+  const {isProtectedRoute, isBypassRoute} = AuthManager(config)
+  if (!isProtectedRoute(context.url.pathname)) return next() // Handle only protected routes
+  if (isBypassRoute(context.url.pathname)) return next() // Bypass all non protected routes
+ */
+
+export function RouteManager(config) {
+  const { protectedRoutes, bypassRoutes } = config
+  return {
+    isProtectedRoute(pathname) {
+      return isMatch(protectedRoutes, pathname)
+    },
+    isBypassRoute(pathname) {
+      return isMatch(bypassRoutes, pathname)
+    },
+  }
+}
+
+// Alias for RouteManager
+export function AuthManager(config) {
+  return RouteManager(config)
+}
+
+function isMatch(routeConfig, pathname) {
+  const { is, startsWith, includes } = routeConfig
+  const isExactMatch = is && is.some(u => pathname === u)
+  const startsWithMatch =
+    startsWith && startsWith.some(u => pathname.startsWith(u))
+  const includesMatch = includes && includes.some(u => pathname.includes(u))
+
+  return isExactMatch || startsWithMatch || includesMatch
+}

package/lib/checks.js

@@ -0,0 +1,11 @@
+export function isObject(x) {
+  return typeof x === 'object' && !Array.isArray(x) && x !== null
+}
+
+export function isArray(x) {
+  return Array.isArray(x)
+}
+
+export function notObject(x) {
+  return !isObject(x)
+}

package/lib/date/days.js

@@ -0,0 +1,9 @@
+export const DAYS = [
+  { short: 'Sun', long: 'Sunday', numeric: 1 },
+  { short: 'Mon', long: 'Monday', numeric: 2 },
+  { short: 'Tue', long: 'Tuesday', numeric: 3 },
+  { short: 'Wed', long: 'Wednesday', numeric: 4 },
+  { short: 'Thu', long: 'Thursday', numeric: 5 },
+  { short: 'Fri', long: 'Friday', numeric: 6 },
+  { short: 'Sat', long: 'Saturday', numeric: 7 },
+]

package/lib/date/index.js

@@ -0,0 +1,2 @@
+export * from './months.js'
+export * from './days.js'