axentix/dist/components/sidenav/sidenav.esm.js

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

var M = Object.defineProperty;
var T = (s) => {
  throw TypeError(s);
};
var N = (s, e, t) => e in s ? M(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
var C = (s, e, t) => N(s, typeof e != "symbol" ? e + "" : e, t), b = (s, e, t) => e.has(s) || T("Cannot " + t);
var n = (s, e, t) => (b(s, e, "read from private field"), t ? t.call(s) : e.get(s)), d = (s, e, t) => e.has(s) ? T("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(s) : e.set(s, t), r = (s, e, t, i) => (b(s, e, "write to private field"), i ? i.call(s, t) : e.set(s, t), t), y = (s, e, t) => (b(s, e, "access private method"), t);
const L = [], O = {
  components: [],
  plugins: [],
  prefix: "ax",
  mode: ""
}, S = (s) => O.components.find((e) => e.name === s).class, $ = () => {
  const s = O.components.filter((t) => t.dataDetection), e = O.plugins.filter((t) => t.dataDetection);
  return [...s, ...e].map((t) => t.name);
}, H = (s, e) => {
  if (!s.name || !s.class) {
    console.error(`[Axentix] Error registering ${e} : Missing required parameters.`);
    return;
  }
  if (O[e].some((t) => t.name === s.name)) {
    console.error(`[Axentix] Error registering ${e} : Already exist.`);
    return;
  }
  s.autoInit && (s.autoInit.selector = s.autoInit.selector += ":not(.no-axentix-init)"), O[e].push(s);
}, P = (s) => {
  H(s, "components");
}, Z = (s) => s.replace(/[\w]([A-Z])/g, (e) => e[0] + "-" + e[1]).toLowerCase(), G = (s, e = "") => {
  const t = Z(s);
  return e ? e + "-" + t : t;
}, J = (s, e, t, i, o = "") => {
  const a = e[0].toUpperCase() + e.slice(1).toLowerCase();
  $().includes(a) && t !== "Collapsible" && a !== "Sidenav" && (s[e] = S(a).getDefaultOptions());
  const l = o ? o + "-" + e : e, h = R(s[e], t, i, l);
  if (!(Object.keys(h).length === 0 && s.constructor === Object)) return h;
}, R = (s, e, t, i = "") => Object.keys(s).reduce((o, a) => {
  if (typeof s[a] == "object" && s[a] !== null) {
    const l = J(s, a, e, t, i);
    l && (o[a] = l);
  } else if (s[a] !== null) {
    const l = "data-" + e.toLowerCase() + "-" + G(a, i);
    if (t.hasAttribute(l)) {
      const h = t.getAttribute(l);
      o[a] = typeof s[a] == "number" ? Number(h) : h, typeof s[a] == "boolean" && (o[a] = h === "true");
    }
  }
  return o;
}, {}), K = (s, e) => {
  const t = Object.assign({}, S(s).getDefaultOptions());
  return R(t, s, e);
}, Q = () => {
  document.querySelectorAll("[data-ax]").forEach((e) => {
    let t = e.dataset.ax;
    if (t = t[0].toUpperCase() + t.slice(1).toLowerCase(), !$().includes(t)) {
      console.error(
        `[Axentix] Error: ${t} component doesn't exist. 
 Did you forget to register him ?`,
        e
      );
      return;
    }
    try {
      const i = S(t);
      new i(`#${e.id}`);
    } catch (i) {
      console.error("[Axentix] Data: Unable to load " + t, i);
    }
  });
}, V = () => {
  try {
    new Axentix.Axentix("all");
  } catch (s) {
    console.error("[Axentix] Unable to auto init.", s);
  }
};
document.addEventListener("DOMContentLoaded", () => {
  document.documentElement.dataset.axentix && V(), Q();
});
const z = (...s) => s.reduce((e, t) => {
  for (let i in t)
    e[i] = typeof t[i] == "object" && t[i] !== null ? z(e[i], t[i]) : t[i];
  return e;
}, {}), X = (s, e, t) => z(S(s).getDefaultOptions(), K(s, t), e), v = (s, e, t) => {
  const i = new CustomEvent("ax." + e, {
    detail: {},
    bubbles: !0
  });
  s.dispatchEvent(i);
}, Y = (s) => L.filter((e) => e.type === s).map((e) => e.instance), _ = (s) => {
  const e = L.find((t) => t.type !== "Toast" && "#" + t.instance.el.id === s);
  return e ? e.instance : !1;
}, j = (s, e, t, i) => {
  const o = s && e ? document.querySelector(`.ax-overlay[data-target="${t}"]`) : document.createElement("div");
  return o.classList.add("ax-overlay"), o.style.transitionDuration = i + "ms", o.dataset.target = t, o;
}, q = (s, e, t, i, o) => {
  s && (i ? (e.addEventListener("click", t), document.body.appendChild(e), setTimeout(() => {
    e.classList.add("active");
  }, 50)) : (e.classList.remove("active"), setTimeout(() => {
    e.removeEventListener("click", t), document.body.removeChild(e);
  }, o)));
}, tt = (s, e = '[data-target="{ID}"]') => Array.from(document.querySelectorAll(e.replace("{ID}", s)));
class et {
  constructor() {
    C(this, "el");
  }
  removeListeners() {
  }
  setupListeners() {
  }
  setup() {
  }
  preventDbInstance(e) {
    if (e && _(e)) throw new Error(`Instance already exist on ${e}`);
  }
  sync() {
    v(this.el, "component.sync"), this.removeListeners(), this.setupListeners();
  }
  reset() {
    v(this.el, "component.reset"), this.removeListeners(), this.setup();
  }
  destroy() {
    v(this.el, "component.destroy"), this.removeListeners();
    const e = L.findIndex((t) => t.instance.el.id === this.el.id);
    L.splice(e, 1);
  }
}
const st = {
  overlay: !0,
  bodyScrolling: !1,
  animationDuration: 300
};
var D, u, p, m, w, f, A, g, x, E, c, U, I, W, k, B;
class F extends et {
  constructor(t, i) {
    super();
    d(this, c);
    C(this, "options");
    d(this, D);
    d(this, u, !1);
    d(this, p, !1);
    d(this, m, !1);
    d(this, w, !1);
    d(this, f);
    d(this, A);
    d(this, g);
    d(this, x);
    d(this, E);
    try {
      this.preventDbInstance(t), L.push({ type: "Sidenav", instance: this }), this.el = document.querySelector(t), this.options = X("Sidenav", i, this.el), this.setup();
    } catch (o) {
      console.error("[Axentix] Sidenav init error", o);
    }
  }
  setup() {
    v(this.el, "sidenav.setup"), r(this, D, tt(this.el.id)), r(this, u, !1), r(this, p, !1), r(this, E, window.innerWidth), r(this, m, this.el.classList.contains("sidenav-fixed"));
    const t = Y("Sidenav").find((i) => n(i, m));
    r(this, w, t && t.el === this.el), r(this, f, document.querySelector('.layout, [class*="layout-"]')), n(this, f) && n(this, w) && y(this, c, I).call(this), this.setupListeners(), this.options.overlay && r(this, A, j(
      n(this, u),
      this.options.overlay,
      this.el.id,
      this.options.animationDuration
    )), n(this, f) && n(this, m) && y(this, c, W).call(this), this.el.style.transitionDuration = this.options.animationDuration + "ms";
  }
  setupListeners() {
    r(this, g, y(this, c, B).bind(this)), n(this, D).forEach((t) => t.addEventListener("click", n(this, g))), r(this, x, y(this, c, U).bind(this)), window.addEventListener("resize", n(this, x));
  }
  removeListeners() {
    n(this, D).forEach((t) => t.removeEventListener("click", n(this, g))), r(this, g, void 0), window.removeEventListener("resize", n(this, x)), r(this, x, void 0);
  }
  destroy() {
    v(this.el, "component.destroy"), this.removeListeners(), n(this, f) && y(this, c, I).call(this);
    const t = L.findIndex((i) => i.instance.el.id === this.el.id);
    L.splice(t, 1);
  }
  /** Open Sidenav */
  open() {
    n(this, u) || n(this, p) || (v(this.el, "sidenav.open"), r(this, u, !0), r(this, p, !0), this.el.classList.add("active"), q(
      this.options.overlay,
      n(this, A),
      n(this, g),
      !0,
      this.options.animationDuration
    ), y(this, c, k).call(this, !1), setTimeout(() => {
      r(this, p, !1), v(this.el, "sidenav.opened");
    }, this.options.animationDuration));
  }
  /** Close Sidenav */
  close() {
    !n(this, u) || n(this, p) || (r(this, p, !0), v(this.el, "sidenav.close"), this.el.classList.remove("active"), q(
      this.options.overlay,
      n(this, A),
      n(this, g),
      !1,
      this.options.animationDuration
    ), setTimeout(() => {
      y(this, c, k).call(this, !0), r(this, u, !1), r(this, p, !1), v(this.el, "sidenav.closed");
    }, this.options.animationDuration));
  }
}
D = new WeakMap(), u = new WeakMap(), p = new WeakMap(), m = new WeakMap(), w = new WeakMap(), f = new WeakMap(), A = new WeakMap(), g = new WeakMap(), x = new WeakMap(), E = new WeakMap(), c = new WeakSet(), U = function(t) {
  const o = t.target.innerWidth;
  n(this, E) !== o && this.close(), r(this, E, o);
}, I = function() {
  ["layout-sidenav-right", "layout-sidenav-both"].forEach(
    (t) => n(this, f).classList.remove(t)
  );
}, W = function() {
  if (!n(this, w)) return;
  const t = Array.from(document.querySelectorAll(".sidenav")).filter(
    (l) => l.classList.contains("sidenav-fixed")
  ), { sidenavsRight: i, sidenavsLeft: o } = t.reduce(
    (l, h) => (h.classList.contains("sidenav-right") ? l.sidenavsRight.push(h) : l.sidenavsLeft.push(h), l),
    { sidenavsRight: [], sidenavsLeft: [] }
  ), a = o.length > 0 && i.length > 0;
  i.length > 0 && !a ? n(this, f).classList.add("layout-sidenav-right") : a && n(this, f).classList.add("layout-sidenav-both");
}, k = function(t) {
  this.options.bodyScrolling || (document.body.style.overflow = t ? "" : "hidden");
}, B = function(t) {
  t.preventDefault(), !(n(this, m) && window.innerWidth >= 960) && (n(this, u) ? this.close() : this.open());
}, C(F, "getDefaultOptions", () => st);
P({
  class: F,
  name: "Sidenav",
  dataDetection: !0,
  autoInit: {
    enabled: !0,
    selector: ".sidenav"
  }
});
export {
  F as default
};