wheel-duo/dist/index.es.js

Animated dual-wheel component with customizable spin, sway, and callback support

var B = (h) => {
  throw TypeError(h);
};
var C = (h, t, s) => t.has(h) || B("Cannot " + s);
var e = (h, t, s) => (C(h, t, "read from private field"), s ? s.call(h) : t.get(h)), a = (h, t, s) => t.has(h) ? B("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(h) : t.set(h, s), n = (h, t, s, o) => (C(h, t, "write to private field"), o ? o.call(h, s) : t.set(h, s), s), r = (h, t, s) => (C(h, t, "access private method"), s);
var c, f, u, d, m, p, y, k, v, E, x, w, S, g, $, b, M, i, O, I, j, D, z, L, W, P, R;
class N {
  constructor(t) {
    a(this, i);
    a(this, c);
    a(this, f);
    a(this, u);
    a(this, d);
    a(this, m, null);
    a(this, p, null);
    a(this, y, /* @__PURE__ */ new WeakMap());
    a(this, k);
    a(this, v);
    a(this, E);
    a(this, x);
    a(this, w);
    a(this, S);
    a(this, g);
    a(this, $, !1);
    a(this, b, () => {
      r(this, i, I).call(this);
    });
    a(this, M, () => {
      r(this, i, j).call(this);
    });
    var o, l;
    this.options = t, n(this, k, t.rotations ?? 6), n(this, v, t.duration ?? 5e3), n(this, E, t.overshootDeg ?? 15), n(this, x, t.returnDuration ?? 750), n(this, w, ((o = t.swayOptions) == null ? void 0 : o.amplitude) ?? 6), n(this, S, ((l = t.swayOptions) == null ? void 0 : l.period) ?? 1500);
    const s = t.rootSelector.trim();
    n(this, g, s.startsWith(".") ? s.slice(1) : s);
  }
  init() {
    const t = document.querySelector(this.options.rootSelector), s = t == null ? void 0 : t.querySelector(this.options.firstWheelSelector), o = t == null ? void 0 : t.querySelector(this.options.secondWheelSelector), l = t == null ? void 0 : t.querySelector(this.options.triggerSelector);
    t && s && o && l && (n(this, c, t), n(this, f, s), n(this, u, o), n(this, d, l), r(this, i, O).call(this, e(this, f)), r(this, i, O).call(this, e(this, u)), r(this, i, z).call(this, e(this, f)), e(this, d).addEventListener("click", e(this, b)));
  }
  destroy() {
    r(this, i, L).call(this), r(this, i, R).call(this, e(this, f)), r(this, i, R).call(this, e(this, u)), e(this, d).removeEventListener("click", e(this, b)), e(this, d).removeEventListener("click", e(this, M)), n(this, y, /* @__PURE__ */ new WeakMap());
  }
  reset() {
    this.destroy(), e(this, f).style.transform = "", e(this, u).style.transform = "";
    const t = e(this, g);
    e(this, c).classList.remove(`${t}--state-one-active`, `${t}--state-one-complete`, `${t}--state-two-active`, `${t}--state-two-complete`), n(this, $, !1), this.init();
  }
}
c = new WeakMap(), f = new WeakMap(), u = new WeakMap(), d = new WeakMap(), m = new WeakMap(), p = new WeakMap(), y = new WeakMap(), k = new WeakMap(), v = new WeakMap(), E = new WeakMap(), x = new WeakMap(), w = new WeakMap(), S = new WeakMap(), g = new WeakMap(), $ = new WeakMap(), b = new WeakMap(), M = new WeakMap(), i = new WeakSet(), O = function(t) {
  if (e(this, $)) return;
  const s = t.animate([{ filter: "blur(0)" }, { filter: "blur(0.4px)", offset: 0.5 }, { filter: "blur(0)" }], { duration: 64, fill: "forwards" });
  t.getBoundingClientRect(), s.onfinish = () => {
    var o;
    (o = s.commitStyles) == null || o.call(s), s.cancel();
  }, t.querySelectorAll("img").forEach((o) => {
    var l;
    (l = o.decode) == null || l.call(o).catch(() => {
    });
  }), n(this, $, !0);
}, I = async function() {
  const [t] = this.options.targetAngles, s = e(this, g);
  e(this, c).classList.add(`${s}--state-one-active`), r(this, i, L).call(this), await r(this, i, D).call(this, e(this, f), t), e(this, c).classList.replace(`${s}--state-one-active`, `${s}--state-one-complete`), r(this, i, z).call(this, e(this, u)), e(this, d).removeEventListener("click", e(this, b)), e(this, d).addEventListener("click", e(this, M), { once: !0 });
}, j = async function() {
  var o, l;
  const [, t] = this.options.targetAngles, s = e(this, g);
  e(this, c).classList.add(`${s}--state-two-active`), r(this, i, L).call(this), await r(this, i, D).call(this, e(this, u), t), e(this, c).classList.replace(`${s}--state-two-active`, `${s}--state-two-complete`), (l = (o = this.options).callback) == null || l.call(o);
}, D = async function(t, s) {
  const o = r(this, i, P).call(this, t), l = (r(this, i, W).call(this, s) - r(this, i, W).call(this, o) + 360) % 360, q = o + 360 * e(this, k) + l, F = q + e(this, E), A = e(this, v) + e(this, x), G = e(this, v) / A, H = t.animate([{ transform: `rotate(${o}deg)`, easing: "cubic-bezier(0.86,0,0.07,1)" }, { offset: G, transform: `rotate(${F}deg)`, easing: "cubic-bezier(0.77,0,0.175,1)" }, { transform: `rotate(${q}deg)` }], { duration: A, fill: "forwards" }), J = t.animate([{ filter: "blur(0)" }, { offset: 0.2, filter: "blur(1px)" }, { offset: 0.4, filter: "blur(2px)" }, { offset: 0.65, filter: "blur(1px)" }, { offset: 1, filter: "blur(0)" }], { duration: A, fill: "forwards", easing: "ease-in-out" });
  await Promise.all([H.finished, J.finished]), e(this, y).set(t, r(this, i, W).call(this, q));
}, z = function(t) {
  r(this, i, L).call(this), n(this, p, t);
  const s = e(this, y).get(t) ?? r(this, i, P).call(this, t);
  n(this, m, t.animate([{ transform: `rotate(${s - e(this, w)}deg)` }, { transform: `rotate(${s + e(this, w)}deg)` }], { duration: e(this, S), direction: "alternate", iterations: 1 / 0, easing: "ease-in-out", delay: -e(this, S) / 2 }));
}, L = function() {
  var o, l;
  if (!e(this, m) || !e(this, p)) return;
  const t = e(this, p), s = getComputedStyle(t).transform;
  (l = (o = e(this, m)).commitStyles) == null || l.call(o), e(this, m).cancel(), t.style.transform = s !== "none" ? s : "", n(this, m, null), n(this, p, null);
}, W = function(t) {
  return (t % 360 + 360) % 360;
}, P = function(t) {
  const s = getComputedStyle(t).transform;
  if (!s || s === "none") return 0;
  const { a: o, b: l } = new DOMMatrixReadOnly(s);
  return 180 * Math.atan2(l, o) / Math.PI;
}, R = function(t) {
  t.getAnimations().forEach((s) => s.cancel());
};
export {
  N as default
};