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