/**
 * ldesign v0.2.14
 * (c) 2022/11/2 16:16 built by swimly
 * @license MIT
 */

'use strict';

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

var setStyle = require('../chunks/set-style.js');
var config = require('../config.js');

const Ripple = {
  startTimeId: null,
  finishTimeId: null,
  inserted(el, binding) {
    if (binding.value === false) return;
    let period = 200;
    const defaultBg = "rgba(0, 0, 0, 0.35)";
    let bg = binding.value === true || binding.value == null ? defaultBg : binding.value;
    const rippleContainer = document.createElement("div");
    let hasCreateContainer = false;
    let count = 0;
    el.addEventListener("pointerdown", e => {
      if (el.classList.contains(`${config.PREFIX}-is-active`) || el.classList.contains(`${config.PREFIX}-is-disabled`) || el.classList.contains(`${config.PREFIX}-is-checked`)) return;
      const {
        left: offsetLeft,
        top: offsetTop,
        width: rectWidth,
        height: rectHeight
      } = e.target.getBoundingClientRect();
      const {
        x: posX,
        y: posY
      } = e;
      const left = posX - offsetLeft;
      const top = posY - offsetTop;
      const right = rectWidth - left;
      const bottom = rectHeight - top;
      const max = Math.max(...[top, right, bottom, left]);
      if (e.button !== 0) return;
      if (bg === defaultBg && el !== null && el !== void 0 && el.dataset.ripple) bg = el.dataset.ripple;
      const cssVariable = getComputedStyle(el).getPropertyValue("--ripple-color");
      if (cssVariable) bg = cssVariable;
      const elBorder = parseInt(getComputedStyle(el).borderWidth.replace("px", ""), 10);
      const border = elBorder > 0 ? elBorder : 0;
      const width = el.offsetWidth;
      const height = el.offsetHeight;
      const style = getComputedStyle(el);
      if (!hasCreateContainer) {
        hasCreateContainer = true;
        setStyle.setStyle(rippleContainer, {
          position: "absolute",
          left: `${0 - border}px`,
          top: `${0 - border}px`,
          width: `${width}px`,
          height: `${height}px`,
          borderRadius: style.borderRadius,
          pointerEvents: "none",
          overflow: "hidden"
        });
        el.appendChild(rippleContainer);
      }
      const ripple = document.createElement("div");
      period = max > 140 ? max * 1.5 : period;
      setStyle.setStyle(ripple, {
        marginTop: "0",
        marginLeft: "0",
        top: `${top}px`,
        left: `${left}px`,
        width: "0",
        height: "0",
        transition: `width ${period}ms cubic-bezier(.38, 0, .24, 1),height ${period}ms cubic-bezier(.38, 0, .24, 1), background ${period * 2}ms linear`,
        pointerEvents: "none",
        transform: "translate3d(-50%, -50%, 0)",
        borderRadius: "50%",
        position: "absolute",
        zIndex: "0",
        backgroundColor: bg,
        opacity: "0.9"
      });
      const elMap = /* @__PURE__ */new WeakMap();
      for (let n = el.children.length, i = 0; i < n; ++i) {
        const child = el.children[i];
        if (child.style.zIndex === "" && child !== rippleContainer) {
          child.style.zIndex = "1";
          elMap.set(child, true);
        }
      }
      const initPosition = el.style.position ? el.style.position : getComputedStyle(el).position;
      if (initPosition === "" || initPosition === "static") el.style.position = "relative";
      rippleContainer.insertBefore(ripple, rippleContainer.firstChild);
      count += 1;
      clearTimeout(Ripple.startTimeId);
      Ripple.startTimeId = setTimeout(() => {
        setStyle.setStyle(ripple, {
          width: `${max * 2}px`,
          height: `${max * 2}px`
        });
      }, 0);
      const handleClearRipple = () => {
        ripple.style.backgroundColor = "rgba(0, 0, 0, 0)";
        el.removeEventListener("pointerup", handleClearRipple, false);
        el.removeEventListener("pointerleave", handleClearRipple, false);
        setTimeout(() => {
          rippleContainer.removeChild(ripple);
          count -= 1;
          if (count > 0) return;
          el.style.position = initPosition !== "static" ? initPosition : "";
          for (let n = el.children.length, i = 0; i < n; ++i) {
            const child = el.children[i];
            if (elMap.has(child)) {
              child.style.zIndex = "";
              elMap.delete(child);
            }
          }
          el.removeChild(rippleContainer);
          hasCreateContainer = false;
        }, period * 2 + 100);
      };
      el.addEventListener("pointerup", handleClearRipple, false);
      el.addEventListener("pointerleave", handleClearRipple, false);
    });
  }
};

exports["default"] = Ripple;
//# sourceMappingURL=ripple.js.map
