new Vue({
  el: "#button",
  directives: {
    ripple: {
      bind: updateRipple,
      unbind: removeRipple
    }
  }
});

// aligned with CSS animation duration
// 与CSS动画时长一致
const RIPPLE_ANIM_DURATION = 600;

function updateRipple(el) {
  "ontouchstart" in document.documentElement
    ? el.addEventListener("touchstart", rippleShow, { passive: true })
    : el.addEventListener("mousedown", rippleShow);
}

function rippleShow(e) {
  // get click/press position
  // 确定点击/触摸位置
  const posX = e.pageX - e.currentTarget.offsetLeft;
  const posY = e.pageY - e.currentTarget.offsetTop;

  // calculate ripple width and height
  // 计算ripple层宽高
  let buttonWidth = e.currentTarget.offsetWidth;
  let buttonHeight = e.currentTarget.offsetHeight;
  buttonWidth > buttonHeight
    ? (buttonHeight = buttonWidth)
    : (buttonWidth = buttonHeight);

  // calculate ripple absolute coordinates
  // 绝对定位添加ripple层
  let spanEl = document.createElement("span");
  spanEl.className = "ripple";
  spanEl.style.width = buttonWidth + "px";
  spanEl.style.height = buttonHeight + "px";
  spanEl.style.top = posY - buttonHeight / 2 + "px";
  spanEl.style.left = posX - buttonWidth / 2 + "px";
  spanEl.classList.add("ripple-effect");

  e.currentTarget.appendChild(spanEl);

  // remove DOM to increase performance
  // 移除DOM提升性能
  setTimeout(() => {
    spanEl.remove();
  }, RIPPLE_ANIM_DURATION);
}

function removeRipple(el) {
  el.removeEventListener("touchstart", rippleShow);
  el.removeEventListener("mousedown", rippleShow);
}