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