axentix
Version:
Axentix is a framework mixing fully customizable components & utility-first classes, leaving the design choice to the developer.
207 lines (206 loc) • 8.25 kB
JavaScript
var F = Object.defineProperty;
var k = (s) => {
throw TypeError(s);
};
var M = (s, e, t) => e in s ? F(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
var O = (s, e, t) => M(s, typeof e != "symbol" ? e + "" : e, t), w = (s, e, t) => e.has(s) || k("Cannot " + t);
var n = (s, e, t) => (w(s, e, "read from private field"), t ? t.call(s) : e.get(s)), h = (s, e, t) => e.has(s) ? k("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(s) : e.set(s, t), o = (s, e, t, i) => (w(s, e, "write to private field"), i ? i.call(s, t) : e.set(s, t), t), d = (s, e, t) => (w(s, e, "access private method"), t);
const A = [], E = {
components: [],
plugins: [],
prefix: "ax",
mode: ""
}, b = (s) => E.components.find((e) => e.name === s).class, S = () => {
const s = E.components.filter((t) => t.dataDetection), e = E.plugins.filter((t) => t.dataDetection);
return [...s, ...e].map((t) => t.name);
}, B = (s, e) => {
if (!s.name || !s.class) {
console.error(`[Axentix] Error registering ${e} : Missing required parameters.`);
return;
}
if (E[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)"), E[e].push(s);
}, P = (s) => {
B(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, l = "") => {
const a = e[0].toUpperCase() + e.slice(1).toLowerCase();
S().includes(a) && t !== "Collapsible" && a !== "Sidenav" && (s[e] = b(a).getDefaultOptions());
const f = l ? l + "-" + e : e, y = q(s[e], t, i, f);
if (!(Object.keys(y).length === 0 && s.constructor === Object)) return y;
}, q = (s, e, t, i = "") => Object.keys(s).reduce((l, a) => {
if (typeof s[a] == "object" && s[a] !== null) {
const f = J(s, a, e, t, i);
f && (l[a] = f);
} else if (s[a] !== null) {
const f = "data-" + e.toLowerCase() + "-" + G(a, i);
if (t.hasAttribute(f)) {
const y = t.getAttribute(f);
l[a] = typeof s[a] == "number" ? Number(y) : y, typeof s[a] == "boolean" && (l[a] = y === "true");
}
}
return l;
}, {}), K = (s, e) => {
const t = Object.assign({}, b(s).getDefaultOptions());
return q(t, s, e);
}, Q = () => {
document.querySelectorAll("[data-ax]").forEach((e) => {
let t = e.dataset.ax;
if (t = t[0].toUpperCase() + t.slice(1).toLowerCase(), !S().includes(t)) {
console.error(
`[Axentix] Error: ${t} component doesn't exist.
Did you forget to register him ?`,
e
);
return;
}
try {
const i = b(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 H = (...s) => s.reduce((e, t) => {
for (let i in t)
e[i] = typeof t[i] == "object" && t[i] !== null ? H(e[i], t[i]) : t[i];
return e;
}, {}), X = (s, e, t) => H(b(s).getDefaultOptions(), K(s, t), e), C = (s, e, t) => {
const i = new CustomEvent("ax." + e, {
detail: {},
bubbles: !0
});
s.dispatchEvent(i);
}, Y = (s) => A.filter((e) => e.type === s).map((e) => e.instance), _ = (s) => {
const e = A.find((t) => t.type !== "Toast" && "#" + t.instance.el.id === s);
return e ? e.instance : !1;
}, j = (s, e = '[data-target="{ID}"]') => Array.from(document.querySelectorAll(e.replace("{ID}", s)));
class tt {
constructor() {
O(this, "el");
}
removeListeners() {
}
setupListeners() {
}
setup() {
}
preventDbInstance(e) {
if (e && _(e)) throw new Error(`Instance already exist on ${e}`);
}
sync() {
C(this.el, "component.sync"), this.removeListeners(), this.setupListeners();
}
reset() {
C(this.el, "component.reset"), this.removeListeners(), this.setup();
}
destroy() {
C(this.el, "component.destroy"), this.removeListeners();
const e = A.findIndex((t) => t.instance.el.id === this.el.id);
A.splice(e, 1);
}
}
const et = {
animationDuration: 300,
sidenav: {
activeClass: !0,
activeWhenOpen: !0,
autoClose: !0
}
};
var v, D, g, c, p, L, m, x, u, r, z, U, N, I, R, T, W;
class $ extends tt {
constructor(t, i) {
super();
h(this, r);
O(this, "options");
h(this, v);
h(this, D);
h(this, g, !0);
h(this, c, !1);
h(this, p, !1);
h(this, L, !1);
h(this, m);
h(this, x);
h(this, u);
try {
this.preventDbInstance(t), A.push({ type: "Collapsible", instance: this }), this.el = document.querySelector(t), this.options = X("Collapsible", i, this.el), this.setup();
} catch (l) {
console.error("[Axentix] Collapsible init error", l);
}
}
setup() {
C(this.el, "collapsible.setup"), o(this, v, j(this.el.id)), o(this, g, !0), o(this, c, !!this.el.classList.contains("active")), o(this, p, !1), o(this, u, ""), o(this, L, !1), this.setupListeners(), this.el.style.transitionDuration = this.options.animationDuration + "ms", d(this, r, U).call(this), o(this, L, !!this.el.querySelector(".active")), this.options.sidenav.activeClass && d(this, r, N).call(this), n(this, c) && this.open(), o(this, g, !1);
}
setupListeners() {
o(this, m, d(this, r, W).bind(this)), n(this, v).forEach((t) => t.addEventListener("click", n(this, m))), o(this, x, d(this, r, z).bind(this)), window.addEventListener("resize", n(this, x));
}
removeListeners() {
n(this, v).forEach((t) => t.removeEventListener("click", n(this, m))), o(this, m, void 0), window.removeEventListener("resize", n(this, x)), o(this, x, void 0);
}
/** Open collapsible */
open() {
n(this, c) && !n(this, g) || (C(this.el, "collapsible.open"), o(this, c, !0), o(this, p, !0), this.el.style.display = "block", d(this, r, T).call(this), this.el.style.maxHeight = this.el.scrollHeight + "px", this.options.sidenav.activeWhenOpen && d(this, r, I).call(this, !0), this.options.sidenav.autoClose && d(this, r, R).call(this), setTimeout(() => {
o(this, p, !1);
}, this.options.animationDuration));
}
/** Close collapsible */
close() {
n(this, c) && (C(this.el, "collapsible.close"), o(this, p, !0), this.el.style.maxHeight = "", d(this, r, T).call(this), this.options.sidenav.activeWhenOpen && d(this, r, I).call(this, !1), setTimeout(() => {
this.el.style.display = "", o(this, p, !1), o(this, c, !1);
}, this.options.animationDuration));
}
}
v = new WeakMap(), D = new WeakMap(), g = new WeakMap(), c = new WeakMap(), p = new WeakMap(), L = new WeakMap(), m = new WeakMap(), x = new WeakMap(), u = new WeakMap(), r = new WeakSet(), z = function() {
n(this, c) && !n(this, u) && (this.el.style.maxHeight = this.el.scrollHeight + "px");
}, U = function() {
const t = this.el.closest(".sidenav");
t && (o(this, u, t.id), o(this, D, n(this, v).filter((i) => {
var l;
return ((l = i.closest(".sidenav")) == null ? void 0 : l.id) === t.id;
})));
}, N = function() {
!n(this, L) || !n(this, u) || (n(this, D).forEach((t) => t.classList.add("active")), this.el.classList.add("active"), this.open(), o(this, c, !0));
}, /** Enable / disable active state to trigger when collapsible is in sidenav */
I = function(t) {
n(this, u) && n(this, D).forEach((i) => {
t ? i.classList.add("active") : i.classList.remove("active");
});
}, R = function() {
!n(this, g) && n(this, u) && Y("Collapsible").forEach((t) => {
n(t, u) === n(this, u) && t.el.id !== this.el.id && t.close();
});
}, T = function() {
this.el.style.overflow = "hidden", setTimeout(() => {
this.el.style.overflow = "";
}, this.options.animationDuration);
}, W = function(t) {
t.preventDefault(), !n(this, p) && (n(this, c) ? this.close() : this.open());
}, O($, "getDefaultOptions", () => et);
P({
class: $,
name: "Collapsible",
dataDetection: !0,
autoInit: {
enabled: !0,
selector: ".collapsible"
}
});
export {
$ as default
};