path: root/src/utils.mjs

/**
 * Do callback when HTMLElement in removed
 *
 * @param {HTMLElement} element observing
 * @param {Function} callback
 */
export const onRemove = (element, callback) => {
  const parent = element.parentElement
  if (!parent) throw new Error('The node must already be attached')

  const obs = new window.MutationObserver(mutations => {
    for (const mutation of mutations) {
      for (const el of mutation.removedNodes) {
        if (el === element) {
          obs.disconnect()
          callback()
        }
      }
    }
  })
  obs.observe(parent, { childList: true })
}

/**
 * Animate transition of DOMRect, with Web Animation API
 *
 * @param {HTMLElement} element                 Element which animation applies
 * @param {DOMRect}     rect                    DOMRect for transition
 * @param {Object}      options
 * @param {Boolean}     options.resume          If true, transition starts from rect to DOMRect of element
 * @param {Number}      options.duration        Duration of animation in milliseconds
 * @returns {Animation} https://developer.mozilla.org/en-US/docs/Web/API/Animation
 */
export const animateRectTransition = (element, rect, options = {}) => {
  if (!element.parentElement) { throw new Error('The node must already be attached') }

  const { width: w1, height: h1, left: x1, top: y1 } = rect
  const {
    width: w2,
    height: h2,
    left: x2,
    top: y2,
  } = element.getBoundingClientRect()

  const rw = (w1 ?? w2) / w2
  const rh = (h1 ?? h2) / h2
  const dx = x1 - x2
  const dy = y1 - y2

  if ((dx === 0 && dy === 0) || !isFinite(rw) || !isFinite(rh)) {
    return element.animate([], { duration: 0 })
  }

  const transform1 = 'translate(0, 0) scale(1, 1)'
  const transform2 = `translate(${dx}px, ${dy}px) scale(${rw}, ${rh})`
  const keyframes = [
    { transform: transform1, opacity: 1 },
    { transform: transform2, opacity: 0.3 },
  ]
  if (options.resume === true) keyframes.reverse()

  return element.animate(keyframes, {
    duration: options.duration ?? 500,
    easing: 'ease-in-out',
  })
}

/**
 * Throttle for function call
 *
 * @param {Function} func
 * @param {Number} delay milliseconds
 * @returns {Any} return value of function call, or null if throttled
 */
export function throttle (func, delay) {
  let timerFlag = null

  return function (...args) {
    const context = this
    if (timerFlag !== null) return null

    timerFlag = setTimeout(
      () => (timerFlag = null),
      typeof delay === 'function' ? delay.call(context) : delay,
    )

    return func.call(context, ...args)
  }
}

/**
 * debounce.
 *
 * @param {Function} func
 * @param {Number} delay - milliseconds
 */
export function debounce (func, delay = 1000) {
  let timer = null

  return function (...args) {
    const context = this

    clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(context, args)
    }, delay)
  }
}

/**
 * shiftByWindow. make sure HTMLElement inside viewport
 *
 * @param {HTMLElement} element
 */
export const shiftByWindow = element => {
  delete element.style.transform
  const rect = element.getBoundingClientRect()
  const offsetX = window.innerWidth - rect.left - rect.width
  const offsetY = window.innerHeight - rect.top - rect.height
  element.style.transform = `translate(${offsetX < 0 ? offsetX : 0}px, ${offsetY < 0 ? offsetY : 0}px)`
}

/**
 * insideWindow. check DOMRect is inside window
 *
 * @param {HTMLElement} element
 */
export const insideWindow = element => {
  const rect = element.getBoundingClientRect()
  return (
    rect.left > 0 &&
    rect.right < window.innerWidth + rect.width &&
    rect.top > 0 &&
    rect.bottom < window.innerHeight + rect.height
  )
}

/**
 * insideParent. check children element is inside DOMRect of parent element
 *
 * @param {HTMLElement} childElement
 * @param {HTMLElement} parentElement
 */
export const insideParent = (childElement, parentElement) => {
  const childRect = childElement.getBoundingClientRect()
  const parentRect = parentElement.getBoundingClientRect()
  const offset = 10

  return (
    childRect.left < parentRect.right - offset &&
    childRect.right > parentRect.left + offset &&
    childRect.top < parentRect.bottom - offset &&
    childRect.bottom > parentRect.top + offset
  )
}

/**
 * replaceTextNodes.
 * @description Search current nodes by pattern, and replace them by new node
 * @todo refactor to smaller methods
 * @param {HTMLElement} rootNode
 * @param {RegExp} pattern
 * @param {Function} newNode - Create new node by each result of String.prototype.matchAll
 */
export const replaceTextNodes = (
  rootNode,
  pattern,
  addNewNode = (match) => {
    const link = document.createElement('a')
    link.textContent(match.at(0))
    return link
  },
) => {
  const nodeIterator = document.createNodeIterator(
    rootNode,
    window.NodeFilter.SHOW_TEXT,
    node => node.textContent.match(pattern) && node.parentElement && !node.parentElement.closest('pre,code,a')
      ? window.NodeFilter.FILTER_ACCEPT
      : window.NodeFilter.FILTER_REJECT,
  )

  let node = nodeIterator.nextNode()
  const nodeArray = []
  while (node) {
    let index = 0
    for (const match of node.textContent.matchAll(pattern)) {
      const text = node.textContent.slice(index, match.index)
      const newNode = addNewNode(match)
      if (!newNode) continue

      index = match.index + match.at(0).length
      node.parentElement.insertBefore(document.createTextNode(text), node)
      node.parentElement.insertBefore(newNode, node)
      nodeArray.push(newNode)
    }
    if (index < node.textContent.length) {
      const text = node.textContent.slice(index)
      node.parentElement.insertBefore(document.createTextNode(text), node)
    }

    node.parentElement.removeChild(node)
    node = nodeIterator.nextNode()
  }

  return nodeArray
}

/**
 * Get the common ancestor of two or more elements
 * {@link https://gist.github.com/kieranbarker/cd86310d0782b7c52ce90cd7f45bb3eb}
 * @param {String} selector A valid CSS selector
 * @returns {Element} The common ancestor
 */
export function getCommonAncestor (selector) {
  // Get the elements matching the selector
  const elems = document.querySelectorAll(selector)

  // If there are no elements, return null
  if (elems.length < 1) return null

  // If there's only one element, return it
  if (elems.length < 2) return elems[0]

  // Otherwise, create a new Range
  const range = document.createRange()

  // Start at the beginning of the first element
  range.setStart(elems[0], 0)

  // Stop at the end of the last element
  range.setEnd(
    elems[elems.length - 1],
    elems[elems.length - 1].childNodes.length,
  )

  // Return the common ancestor
  return range.commonAncestorContainer
}

/**
 * full2Half: full-Width Digits To Half-Width.
 *
 * @param {String} str
 */
export const full2Half = (str) => {
  // Create a regular expression to match full-width digits (U+FF10 to U+FF19)
  const fullWidthDigitsRegex = /[\uFF0E\uFF10-\uFF19]/g

  // Replace full-width digits with their half-width equivalents
  return str.replace(fullWidthDigitsRegex, (match) => {
    const fullWidthDigit = match.charCodeAt(0)
    const halfWidthDigit = fullWidthDigit - 65248 // Offset to convert full-width to half-width
    return String.fromCharCode(halfWidthDigit)
  })
}