axentix/dist/components/lightbox/lightbox.esm.js

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

var j = Object.defineProperty;
var P = (s) => {
  throw TypeError(s);
};
var tt = (s, e, t) => e in s ? j(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
var N = (s, e, t) => tt(s, typeof e != "symbol" ? e + "" : e, t), H = (s, e, t) => e.has(s) || P("Cannot " + t);
var i = (s, e, t) => (H(s, e, "read from private field"), t ? t.call(s) : e.get(s)), h = (s, e, t) => e.has(s) ? P("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(s) : e.set(s, t), o = (s, e, t, n) => (H(s, e, "write to private field"), n ? n.call(s, t) : e.set(s, t), t), d = (s, e, t) => (H(s, e, "access private method"), t);
const T = [], R = {
  components: [],
  plugins: [],
  prefix: "ax",
  mode: ""
}, U = (s) => R.components.find((e) => e.name === s).class, W = () => {
  const s = R.components.filter((t) => t.dataDetection), e = R.plugins.filter((t) => t.dataDetection);
  return [...s, ...e].map((t) => t.name);
}, et = (s, e) => {
  if (!s.name || !s.class) {
    console.error(`[Axentix] Error registering ${e} : Missing required parameters.`);
    return;
  }
  if (R[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)"), R[e].push(s);
}, st = (s) => {
  et(s, "components");
}, it = (s) => s.replace(/[\w]([A-Z])/g, (e) => e[0] + "-" + e[1]).toLowerCase(), nt = (s, e = "") => {
  const t = it(s);
  return e ? e + "-" + t : t;
}, ot = (s, e, t, n, p = "") => {
  const l = e[0].toUpperCase() + e.slice(1).toLowerCase();
  W().includes(l) && t !== "Collapsible" && l !== "Sidenav" && (s[e] = U(l).getDefaultOptions());
  const v = p ? p + "-" + e : e, w = X(s[e], t, n, v);
  if (!(Object.keys(w).length === 0 && s.constructor === Object)) return w;
}, X = (s, e, t, n = "") => Object.keys(s).reduce((p, l) => {
  if (typeof s[l] == "object" && s[l] !== null) {
    const v = ot(s, l, e, t, n);
    v && (p[l] = v);
  } else if (s[l] !== null) {
    const v = "data-" + e.toLowerCase() + "-" + nt(l, n);
    if (t.hasAttribute(v)) {
      const w = t.getAttribute(v);
      p[l] = typeof s[l] == "number" ? Number(w) : w, typeof s[l] == "boolean" && (p[l] = w === "true");
    }
  }
  return p;
}, {}), rt = (s, e) => {
  const t = Object.assign({}, U(s).getDefaultOptions());
  return X(t, s, e);
}, ht = () => {
  document.querySelectorAll("[data-ax]").forEach((e) => {
    let t = e.dataset.ax;
    if (t = t[0].toUpperCase() + t.slice(1).toLowerCase(), !W().includes(t)) {
      console.error(
        `[Axentix] Error: ${t} component doesn't exist. 
 Did you forget to register him ?`,
        e
      );
      return;
    }
    try {
      const n = U(t);
      new n(`#${e.id}`);
    } catch (n) {
      console.error("[Axentix] Data: Unable to load " + t, n);
    }
  });
}, lt = () => {
  try {
    new Axentix.Axentix("all");
  } catch (s) {
    console.error("[Axentix] Unable to auto init.", s);
  }
};
document.addEventListener("DOMContentLoaded", () => {
  document.documentElement.dataset.axentix && lt(), ht();
});
const $ = (...s) => s.reduce((e, t) => {
  for (let n in t)
    e[n] = typeof t[n] == "object" && t[n] !== null ? $(e[n], t[n]) : t[n];
  return e;
}, {}), at = (s, e, t) => $(U(s).getDefaultOptions(), rt(s, t), e), ct = (s, e = document.createElement("div")) => (s[0].parentElement.insertBefore(e, s[0]), s.forEach((n) => e.appendChild(n)), e), g = (s, e, t) => {
  const n = new CustomEvent("ax." + e, {
    detail: {},
    bubbles: !0
  });
  s.dispatchEvent(n);
}, dt = (s) => {
  const e = T.find((t) => t.type !== "Toast" && "#" + t.instance.el.id === s);
  return e ? e.instance : !1;
};
class pt {
  constructor() {
    N(this, "el");
  }
  removeListeners() {
  }
  setupListeners() {
  }
  setup() {
  }
  preventDbInstance(e) {
    if (e && dt(e)) throw new Error(`Instance already exist on ${e}`);
  }
  sync() {
    g(this.el, "component.sync"), this.removeListeners(), this.setupListeners();
  }
  reset() {
    g(this.el, "component.reset"), this.removeListeners(), this.setup();
  }
  destroy() {
    g(this.el, "component.destroy"), this.removeListeners();
    const e = T.findIndex((t) => t.instance.el.id === this.el.id);
    T.splice(e, 1);
  }
}
const ut = {
  animationDuration: 400,
  overlayClass: "grey dark-4",
  offset: 150,
  mobileOffset: 80,
  caption: ""
};
var b, E, C, O, D, c, k, A, a, m, x, u, I, f, L, y, r, q, B, M, Y, F, K, Z, G, J, Q, S, V, _;
class z extends pt {
  constructor(t, n) {
    super();
    h(this, r);
    N(this, "options");
    h(this, b);
    h(this, E);
    h(this, C);
    h(this, O);
    h(this, D);
    h(this, c);
    h(this, k);
    h(this, A);
    h(this, a);
    h(this, m, 0);
    h(this, x, 0);
    h(this, u, !1);
    h(this, I, !1);
    h(this, f);
    h(this, L, !1);
    h(this, y, !1);
    h(this, S, () => {
      i(this, u) && this.close();
    });
    try {
      this.preventDbInstance(t), T.push({ type: "Lightbox", instance: this }), this.el = document.querySelector(t), this.options = at("Lightbox", n, this.el), this.setup();
    } catch (p) {
      console.error("[Axentix] Lightbox init error", p);
    }
  }
  setup() {
    g(this.el, "lightbox.setup"), this.el.style.transitionDuration = this.options.animationDuration + "ms", o(this, f, ct([this.el])), this.setupListeners();
  }
  setupListeners() {
    o(this, b, d(this, r, _).bind(this)), this.el.addEventListener("click", i(this, b)), o(this, C, d(this, r, J).bind(this)), o(this, O, d(this, r, Q).bind(this)), o(this, D, i(this, S).bind(this)), o(this, E, d(this, r, G).bind(this)), window.addEventListener("keyup", i(this, C)), window.addEventListener("scroll", i(this, O)), window.addEventListener("resize", i(this, D)), this.el.addEventListener("transitionend", i(this, E));
  }
  removeListeners() {
    this.el.removeEventListener("click", i(this, b)), this.el.removeEventListener("transitionend", i(this, E)), window.removeEventListener("keyup", i(this, C)), window.removeEventListener("scroll", i(this, O)), window.removeEventListener("resize", i(this, D)), o(this, b, void 0), o(this, C, void 0), o(this, O, void 0), o(this, D, void 0), o(this, E, void 0);
  }
  /** Open lightbox */
  open() {
    o(this, y, !0);
    let t, n;
    i(this, L) ? t = n = i(this, f).getBoundingClientRect() : t = n = this.el.getBoundingClientRect(), o(this, L, !1), d(this, r, q).call(this), d(this, r, B).call(this);
    const p = window.innerHeight / 2, l = window.innerWidth / 2;
    o(this, a, t), this.el.style.width = i(this, a).width + "px", this.el.style.height = i(this, a).height + "px", this.el.style.top = "0", this.el.style.left = "0";
    const v = p + window.scrollY - (n.top + window.scrollY), w = l + window.scrollX - (n.left + window.scrollX);
    d(this, r, F).call(this), i(this, f).style.position = "relative", setTimeout(() => {
      g(this.el, "lightbox.open"), o(this, u, !0), this.el.classList.contains("responsive-media") && (o(this, I, !0), this.el.classList.remove("responsive-media")), this.el.classList.add("active"), i(this, f).style.width = i(this, a).width + "px", i(this, f).style.height = i(this, a).height + "px", this.el.style.width = i(this, x) + "px", this.el.style.height = i(this, m) + "px", this.el.style.top = v - i(this, m) / 2 + "px", this.el.style.left = w - i(this, x) / 2 + "px";
    }, 50);
  }
  /** Close lightbox */
  close(t) {
    t != null && t.key && t.key !== "Escape" || (o(this, u, !1), o(this, L, !0), o(this, y, !1), g(this.el, "lightbox.close"), d(this, r, M).call(this), this.el.style.position = "absolute", this.el.style.top = "0px", this.el.style.left = "0px", this.el.style.width = i(this, a).width + "px", this.el.style.height = i(this, a).height + "px");
  }
}
b = new WeakMap(), E = new WeakMap(), C = new WeakMap(), O = new WeakMap(), D = new WeakMap(), c = new WeakMap(), k = new WeakMap(), A = new WeakMap(), a = new WeakMap(), m = new WeakMap(), x = new WeakMap(), u = new WeakMap(), I = new WeakMap(), f = new WeakMap(), L = new WeakMap(), y = new WeakMap(), r = new WeakSet(), q = function() {
  if (!i(this, c)) {
    if (d(this, r, K).call(this), o(this, c, document.createElement("div")), i(this, c).style.transitionDuration = this.options.animationDuration + "ms", i(this, c).className = "lightbox-overlay " + this.options.overlayClass, i(this, f).appendChild(i(this, c)), this.options.caption) {
      const t = document.createElement("p");
      t.className = "lightbox-caption", t.innerHTML = this.options.caption, i(this, c).appendChild(t);
    }
    o(this, k, this.close.bind(this)), i(this, c).addEventListener("click", i(this, k));
  }
}, B = function() {
  setTimeout(() => {
    i(this, c).style.opacity = "1";
  }, 50);
}, M = function() {
  i(this, c).style.opacity = "0";
}, Y = function() {
  i(this, c).removeEventListener("click", i(this, k)), i(this, c).remove(), o(this, c, null);
}, F = function() {
  const t = window.innerWidth >= 960 ? this.options.offset : this.options.mobileOffset;
  window.innerWidth / window.innerHeight >= i(this, a).width / i(this, a).height ? (o(this, m, window.innerHeight - t), o(this, x, i(this, m) * i(this, a).width / i(this, a).height)) : (o(this, x, window.innerWidth - t), o(this, m, i(this, x) * i(this, a).height / i(this, a).width));
}, K = function() {
  o(this, A, []);
  for (let t = this.el; t && t !== document; t = t.parentNode) {
    const n = window.getComputedStyle(t);
    (n.overflow === "hidden" || n.overflowX === "hidden" || n.overflowY === "hidden") && (i(this, A).push(t), t !== document.body && t.style.setProperty("overflow", "visible", "important"), document.body.style.overflowX = "hidden");
  }
}, Z = function() {
  i(this, A).forEach((t) => t.style.overflow = ""), document.body.style.overflowX = "";
}, G = function(t) {
  !t.propertyName.includes("width") && !t.propertyName.includes("height") || (i(this, L) ? (d(this, r, V).call(this), o(this, L, !1), o(this, u, !1), g(this.el, "lightbox.closed")) : i(this, y) && (o(this, y, !1), g(this.el, "lightbox.opened")));
}, J = function(t) {
  t.key === "Escape" && (i(this, y) || i(this, u)) && this.close();
}, Q = function() {
  (i(this, u) || i(this, y)) && this.close();
}, S = new WeakMap(), V = function() {
  this.el.classList.remove("active"), d(this, r, Y).call(this), d(this, r, Z).call(this), i(this, I) && this.el.classList.add("responsive-media"), i(this, f).removeAttribute("style"), this.el.style.position = "", this.el.style.left = "", this.el.style.top = "", this.el.style.width = "", this.el.style.height = "", this.el.style.transform = "";
}, _ = function() {
  if (i(this, y) || i(this, u)) {
    this.close();
    return;
  }
  this.open();
}, N(z, "getDefaultOptions", () => ut);
st({
  class: z,
  name: "Lightbox",
  dataDetection: !0,
  autoInit: {
    enabled: !0,
    selector: ".lightbox"
  }
});
export {
  z as default
};