hongluan-ui/lib/components/ripple/src/directive.js

Hongluan Component Library for Vue 3

'use strict';

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

require('../../../utils/index.js');
require('../../../hooks/index.js');
var index = require('../../../hooks/use-namespace/index.js');
var index$1 = require('../../../hooks/use-global-config/index.js');
var browser = require('../../../utils/browser.js');

const { namespace } = index.useNamespace("ripple");
const config = index$1.useGlobalConfig();
const ANIMATION_DURATION = 250;
function setStyles(element) {
  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");
}
function computeRippleStyles(element, event) {
  const { top, left } = element.getBoundingClientRect();
  const { clientWidth, clientHeight } = element;
  const radius = Math.sqrt(clientWidth ** 2 + clientHeight ** 2) / 2;
  const size = radius * 2;
  const localX = event.touches ? event.touches[0].clientX : event.clientX - left;
  const localY = event.touches ? event.touches[0].clientY : event.clientY - top;
  const centerX = (clientWidth - radius * 2) / 2;
  const centerY = (clientHeight - radius * 2) / 2;
  const x = localX - radius;
  const y = localY - radius;
  return { x, y, centerX, centerY, size };
}
function createRipple(event) {
  const _ripple = this._ripple;
  _ripple.removeRipple();
  if (_ripple.disabled || _ripple.tasker) {
    return;
  }
  const task = () => {
    _ripple.tasker = null;
    const { x, y, centerX, centerY, size } = computeRippleStyles(this, event);
    const ripple = document.createElement("div");
    ripple.classList.add(namespace.value);
    ripple.style.opacity = `0`;
    ripple.style.transform = `translate(${x}px, ${y}px) scale3d(.3, .3, .3)`;
    ripple.style.width = `${size}px`;
    ripple.style.height = `${size}px`;
    _ripple.color && (ripple.style.backgroundColor = _ripple.color);
    ripple.dataset.createdAt = String(performance.now());
    setStyles(this);
    this.appendChild(ripple);
    window.setTimeout(() => {
      ripple.style.transform = `translate(${centerX}px, ${centerY}px) scale3d(1, 1, 1)`;
      ripple.style.opacity = `.25`;
    }, 20);
  };
  _ripple.tasker = window.setTimeout(task, 60);
}
function removeRipple() {
  const _ripple = this._ripple;
  const task = () => {
    const ripples = this.querySelectorAll(`.${namespace.value}`);
    if (!ripples.length) {
      return;
    }
    const lastRipple = ripples[ripples.length - 1];
    const delay = ANIMATION_DURATION - performance.now() + Number(lastRipple.dataset.createdAt);
    setTimeout(() => {
      lastRipple.style.opacity = `0`;
      setTimeout(() => {
        var _a;
        return (_a = lastRipple.parentNode) == null ? void 0 : _a.removeChild(lastRipple);
      }, ANIMATION_DURATION);
    }, delay);
  };
  _ripple.tasker ? setTimeout(task, 60) : task();
}
function forbidRippleTask() {
  const _ripple = this._ripple;
  if (!browser.supportTouch()) {
    return;
  }
  if (!_ripple.touchmoveForbid) {
    return;
  }
  _ripple.tasker && window.clearTimeout(_ripple.tasker);
  _ripple.tasker = null;
}
function mounted(el, binding) {
  var _a, _b, _c;
  el._ripple = {
    tasker: null,
    ...(_a = binding.value) != null ? _a : {},
    touchmoveForbid: (_c = (_b = binding.value) == null ? void 0 : _b.touchmoveForbid) != null ? _c : config.value.touchmoveForbid,
    removeRipple: removeRipple.bind(el)
  };
  if (browser.supportTouch()) {
    el.addEventListener("touchstart", createRipple, { passive: true });
    el.addEventListener("touchmove", forbidRippleTask, { passive: true });
    document.addEventListener("touchend", el._ripple.removeRipple, { passive: true });
    document.addEventListener("touchcancel", el._ripple.removeRipple, { passive: true });
  } else {
    el.addEventListener("mousedown", createRipple, { passive: true });
    document.addEventListener("mouseup", el._ripple.removeRipple, { passive: true });
  }
  el.addEventListener("dragstart", removeRipple, { passive: true });
}
function unmounted(el) {
  var _a, _b, _c;
  if (browser.supportTouch()) {
    el.removeEventListener("touchstart", createRipple);
    el.removeEventListener("touchmove", forbidRippleTask);
    document.removeEventListener("touchend", (_a = el._ripple) == null ? void 0 : _a.removeRipple);
    document.removeEventListener("touchcancel", (_b = el._ripple) == null ? void 0 : _b.removeRipple);
  } else {
    el.removeEventListener("mousedown", createRipple);
    document.removeEventListener("mouseup", (_c = el._ripple) == null ? void 0 : _c.removeRipple);
  }
  el.removeEventListener("dragstart", removeRipple);
}
function updated(el, binding) {
  var _a, _b, _c;
  el._ripple = {
    ...el._ripple,
    ...(_a = binding.value) != null ? _a : {},
    touchmoveForbid: (_c = (_b = binding.value) == null ? void 0 : _b.touchmoveForbid) != null ? _c : config.value.touchmoveForbid,
    tasker: null
  };
}
const vRipple = {
  mounted,
  updated,
  unmounted
};

exports.vRipple = vRipple;
//# sourceMappingURL=directive.js.map