axentix/dist/components/waves/waves.esm.js

Axentix is a framework mixing fully customizable components & utility-first classes, leaving the design choice to the developer.

var p = Math.pow;
const h = {
  components: [],
  plugins: [],
  prefix: "ax",
  mode: ""
}, f = (t) => `--${h.prefix}-${t}`, b = (t) => h.components.find((n) => n.name === t).class, C = () => {
  const t = h.components.filter((e) => e.dataDetection), n = h.plugins.filter((e) => e.dataDetection);
  return [...t, ...n].map((e) => e.name);
}, A = () => {
  document.querySelectorAll("[data-ax]").forEach((n) => {
    let e = n.dataset.ax;
    if (e = e[0].toUpperCase() + e.slice(1).toLowerCase(), !C().includes(e)) {
      console.error(
        `[Axentix] Error: ${e} component doesn't exist. 
 Did you forget to register him ?`,
        n
      );
      return;
    }
    try {
      const o = b(e);
      new o(`#${n.id}`);
    } catch (o) {
      console.error("[Axentix] Data: Unable to load " + e, o);
    }
  });
}, $ = () => {
  try {
    new Axentix.Axentix("all");
  } catch (t) {
    console.error("[Axentix] Unable to auto init.", t);
  }
};
document.addEventListener("DOMContentLoaded", () => {
  document.documentElement.dataset.axentix && $(), A();
});
const E = () => (
  // @ts-ignore
  "ontouchstart" in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0
), y = () => !!window.PointerEvent && "maxTouchPoints" in window.navigator && window.navigator.maxTouchPoints >= 0, L = () => E() ? "touch" : y() ? "pointer" : "mouse", x = () => Math.random().toString().split(".")[1];
let m = "";
const g = {}, w = {}, T = (t) => {
  const n = x(), e = document.createElement("div"), o = document.createElement("div"), s = t.tagName.toLowerCase();
  return t.setAttribute("data-waves-id", n), o.classList.add("data-waves-item-inner"), o.setAttribute("data-waves-id", n), e.classList.add("data-waves-box"), e.setAttribute("data-waves-id", n), e.appendChild(o), g[n] = t, w[n] = e, ["img", "video"].includes(s) ? t.parentNode.appendChild(e) : t.appendChild(e), e;
}, P = ({ id: t, size: n, x: e, y: o, container: s, item: a, target: c }, r) => {
  const i = document.createElement("span");
  let d = `height:${n}px;
           width:${n}px;
           left:${e}px;
           top:${o}px;`;
  return r && (d += `${f("waves-color")}: ${r}`), i.setAttribute("data-waves-id", t), i.classList.add("data-waves-item"), i.setAttribute("style", d), i.addEventListener(
    "animationend",
    () => {
      s.removeChild(i), !s.children.length && a && (a.parentNode && a.parentNode.removeChild(a), c.removeAttribute("data-waves-id"), delete w[t], delete g[t]);
    },
    { once: !0 }
  ), i;
}, D = (t, n, e, o) => {
  const { top: s, left: a, width: c, height: r } = o.getBoundingClientRect(), i = t - a, d = n - s;
  let l = w[e];
  l || (l = T(o)), e = l.getAttribute("data-waves-id") || x();
  const u = l.children[0], v = p(p(Math.max(a + c - t, t - a), 2) + p(Math.max(s + r - n, n - s), 2), 0.5) * 2;
  return { id: e, size: v, x: i, y: d, container: u, item: l, target: o };
}, M = (t, n) => {
  const { left: e, top: o, width: s, height: a } = t.getBoundingClientRect(), { left: c, top: r } = n.getBoundingClientRect(), { borderRadius: i, zIndex: d } = window.getComputedStyle(t);
  return `left:${e - c}px;
          top:${o - r}px;
          height:${a}px;
          width:${s}px;
          border-radius:${i || "0"};
          z-index:${d};`;
}, N = (t, n) => {
  const e = g[n];
  return e || (t.getAttribute("data-waves") !== null ? t : t.closest("[data-waves]") || null);
}, R = (t) => {
  const n = t.target, e = n.getAttribute("data-waves-id") || "", o = N(n, e);
  if (!o || o.getAttribute("disabled")) return;
  const s = o.getAttribute("data-waves");
  let { clientX: a, clientY: c } = t;
  if (m === "touch") {
    const u = t.touches[0];
    a = u.clientX, c = u.clientY;
  }
  const r = D(a, c, e, o), i = P(r, s), { container: d, item: l } = r;
  d.setAttribute("style", M(o, l)), d.appendChild(i);
}, S = () => {
  m = L();
  const t = `${m}${m === "touch" ? "start" : "down"}`;
  window.addEventListener(t, R);
};
document.addEventListener("DOMContentLoaded", () => S());
export {
  S as default
};