<template>
  <div v-ripple>點(diǎn)擊</div>
</template>

function mounted(el: RippleHTMLElement, binding: DirectiveBinding<RippleOptions>) {
  // 給元素上添加一個(gè)對(duì)象記錄一些數(shù)據(jù)
  el._ripple = {
    tasker: null,
    ...(binding.value ?? {}),
    touchmoveForbid: binding.value?.touchmoveForbid ?? context.touchmoveForbid,
    removeRipple: removeRipple.bind(el),
  }
  // 給元素綁定了一些事件
  el.addEventListener('touchstart', createRipple, { passive: true })
  el.addEventListener('touchmove', forbidRippleTask, { passive: true })
  el.addEventListener('dragstart', removeRipple, { passive: true })
  document.addEventListener('touchend', el._ripple.removeRipple, { passive: true })
  document.addEventListener('touchcancel', el._ripple.removeRipple, { passive: true })
}

function createRipple(this: RippleHTMLElement, event: TouchEvent) {
  // 首先獲取該元素上存儲(chǔ)的數(shù)據(jù)
  const _ripple = this._ripple as RippleOptions
  // 先移除上一個(gè)水波
  _ripple.removeRipple()
  // 如果禁用或者上一個(gè)水波任務(wù)還未執(zhí)行則返回
  if (_ripple.disabled || _ripple.tasker) {
    return
  }
  // 水波任務(wù)
  const task = () => {
    // ...
  }
  // 保存定時(shí)器
  _ripple.tasker = window.setTimeout(task, 60)
}

function forbidRippleTask(this: RippleHTMLElement) {
  const _ripple = this._ripple as RippleOptions
  // 是否需要在觸摸移動(dòng)時(shí)禁用水波效果
  if (!_ripple.touchmoveForbid) {
    return
  }
  // 如果在60ms內(nèi)觸摸移動(dòng)了就會(huì)取消定時(shí)器，自然水波效果就不會(huì)有了
  _ripple.tasker && window.clearTimeout(_ripple.tasker)
  _ripple.tasker = null
}

function createRipple(this: RippleHTMLElement, event: TouchEvent) {
  //...
  const task = () => {
    // 定時(shí)器任務(wù)執(zhí)行了則把保存的定時(shí)器id清空
    _ripple.tasker = null
    // 計(jì)算一些數(shù)據(jù)
    const { x, y, centerX, centerY, size }: RippleStyles = computeRippleStyles(this, event)
    // 創(chuàng)建一個(gè)div
    const ripple: RippleHTMLElement = document.createElement('div')
    // 添加一個(gè)var-ripple類(lèi)名
    ripple.classList.add(n())
    // 設(shè)置透明度為0，即全透明
    ripple.style.opacity = `0`
    // 設(shè)置位置及縮放
    ripple.style.transform = `translate(${x}px, ${y}px) scale3d(.3, .3, .3)`
    // 設(shè)置大小
    ripple.style.width = `${size}px`
    ripple.style.height = `${size}px`
    // 設(shè)置顏色
    _ripple.color && (ripple.style.backgroundColor = _ripple.color)
    // 記錄創(chuàng)建時(shí)間
    ripple.dataset.createdAt = String(performance.now())
    // 設(shè)置被點(diǎn)擊元素的樣式
    setStyles(this)
    // 將水波元素添加到被點(diǎn)擊元素內(nèi)
    this.appendChild(ripple)
    // 20ms后修改水波元素的樣式，達(dá)到水波的擴(kuò)散動(dòng)畫(huà)效果
    window.setTimeout(() => {
      ripple.style.transform = `translate(${centerX}px, ${centerY}px) scale3d(1, 1, 1)`
      ripple.style.opacity = `.25`
    }, 20)
  }
  //...
}

:root {
  --ripple-cubic-bezier: cubic-bezier(0.68, 0.01, 0.62, 0.6);
  --ripple-color: currentColor;
}
.var-ripple {
  position: absolute;// 設(shè)置為絕對(duì)定位
  transition: transform 0.2s var(--ripple-cubic-bezier), opacity 0.14s linear;// 設(shè)置過(guò)渡效果
  top: 0;
  left: 0;
  border-radius: 50%;// 設(shè)置為圓形
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;// 禁止響應(yīng)鼠標(biāo)事件
  z-index: 100;
  background-color: var(--ripple-color);// 背景顏色
}

function computeRippleStyles(element: RippleHTMLElement, event: TouchEvent): RippleStyles {
  // 被點(diǎn)擊元素距離屏幕頂部和左側(cè)的距離
  const { top, left }: DOMRect = element.getBoundingClientRect()
  // 被點(diǎn)擊元素的寬高
  const { clientWidth, clientHeight } = element
  // 計(jì)算水波圓的半徑
  const radius: number = Math.sqrt(clientWidth ** 2 + clientHeight ** 2) / 2
  // 直徑
  const size: number = radius * 2
  // ...
}

function computeRippleStyles(element: RippleHTMLElement, event: TouchEvent): RippleStyles {
  // ...
  // 手指點(diǎn)擊的位置相對(duì)于被點(diǎn)擊元素的坐標(biāo)
  const localX: number = event.touches[0].clientX - left
  const localY: number = event.touches[0].clientY - top
  // 水波元素初始位置
  const x: number = localX - radius
  const y: number = localY - radius
  // 水波元素最終位置
  const centerX: number = (clientWidth - radius * 2) / 2
  const centerY: number = (clientHeight - radius * 2) / 2
  return { x, y, centerX, centerY, size }
}

function setStyles(element: RippleHTMLElement) {
  const { zIndex, position } = window.getComputedStyle(element)
  element.style.overflow = 'hidden'
  element.style.overflowX = 'hidden'
  element.style.overflowY = 'hidden'
  position === 'static' && (element.style.position = 'relative')
  zIndex === 'auto' && (element.style.zIndex = '1')
}

const ANIMATION_DURATION = 250
function removeRipple(this: RippleHTMLElement) {
  const _ripple = this._ripple as RippleOptions
  const task = () => {
    // 獲取水波元素
    const ripples: NodeListOf<RippleHTMLElement> = this.querySelectorAll(`.${n()}`)
    if (!ripples.length) {
      return
    }
    // 最后一個(gè)水波
    const lastRipple: RippleHTMLElement = ripples[ripples.length - 1]
    // 計(jì)算延遲時(shí)間
    const delay: number = ANIMATION_DURATION - performance.now() + Number(lastRipple.dataset.createdAt)
    // 延遲后將水波的透明度設(shè)置為0
    setTimeout(() => {
      lastRipple.style.opacity = `0`
      // 再次延遲后移除水波元素
      setTimeout(() => lastRipple.parentNode?.removeChild(lastRipple), ANIMATION_DURATION)
    }, delay)
  }
  // 創(chuàng)建任務(wù)的定時(shí)器id存在則等待60ms
  _ripple.tasker ? setTimeout(task, 60) : task()
}

delay = ANIMATION_DURATION - (performance.now() - Number(lastRipple.dataset.createdAt))

function unmounted(el: RippleHTMLElement) {
  el.removeEventListener('touchstart', createRipple)
  el.removeEventListener('touchmove', forbidRippleTask)
  el.removeEventListener('dragstart', removeRipple)
  document.removeEventListener('touchend', el._ripple!.removeRipple)
  document.removeEventListener('touchcancel', el._ripple!.removeRipple)
}