modern-js-ripple/dist/index.cjs

A simple modern ripple effect in javascript

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const register = (element) => {
  element.classList.add("x-ripple-js__ripple-button");
  element.addEventListener("pointerdown", (e) => {
    element.setPointerCapture(e.pointerId);
    const spanElement = onElementClick({
      mainElement: element,
      posX: e.clientX,
      posY: e.clientY
    });
    let isFinished = false;
    const finishRipple = (ev) => {
      if (!isFinished) {
        element.releasePointerCapture(ev.pointerId);
        spanElement.classList.add("x-ripple-release");
        setTimeout(() => {
          if (spanElement) {
            spanElement.remove();
          }
        }, 400);
        isFinished = true;
      }
      ev.preventDefault();
    };
    element.addEventListener("pointerup", finishRipple);
    element.addEventListener("pointercancel", finishRipple);
    element.addEventListener("pointerleave", finishRipple);
    e.preventDefault();
  });
};
const onElementClick = ({ posX, posY, mainElement }) => {
  const circleElement = document.createElement("span");
  const { height, width, left, top } = mainElement.getBoundingClientRect();
  const circleDiameter = Math.max(height, width);
  const circleRadius = circleDiameter / 2;
  applyStyleProperties(circleElement, {
    width: `${circleDiameter}px`,
    height: `${circleDiameter}px`,
    left: `${posX - (left + circleRadius)}px`,
    top: `${posY - (top + circleRadius)}px`
  });
  circleElement.classList.add("x-ripple");
  mainElement.appendChild(circleElement);
  return circleElement;
};
const applyStyleProperties = (element, styleProperties) => Object.entries(styleProperties).forEach(([styleProperty, styleValue]) => element.style[styleProperty] = styleValue);

const vueDirective = {
  mounted: (element) => {
    register(element);
  }
};

exports.register = register;
exports.vueDirective = vueDirective;