axentix
Version:
Axentix is a framework mixing fully customizable components & utility-first classes, leaving the design choice to the developer.
283 lines (282 loc) • 11.9 kB
JavaScript
var tt = Object.defineProperty;
var P = (e) => {
throw TypeError(e);
};
var et = (e, i, t) => i in e ? tt(e, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[i] = t;
var S = (e, i, t) => et(e, typeof i != "symbol" ? i + "" : i, t), M = (e, i, t) => i.has(e) || P("Cannot " + t);
var s = (e, i, t) => (M(e, i, "read from private field"), t ? t.call(e) : i.get(e)), h = (e, i, t) => i.has(e) ? P("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, t), o = (e, i, t, n) => (M(e, i, "write to private field"), n ? n.call(e, t) : i.set(e, t), t), d = (e, i, t) => (M(e, i, "access private method"), t);
const q = [], k = {
components: [],
plugins: [],
prefix: "ax",
mode: ""
}, W = (e) => `--${k.prefix}-${e}`, R = (e) => k.components.find((i) => i.name === e).class, B = () => {
const e = k.components.filter((t) => t.dataDetection), i = k.plugins.filter((t) => t.dataDetection);
return [...e, ...i].map((t) => t.name);
}, it = (e, i) => {
if (!e.name || !e.class) {
console.error(`[Axentix] Error registering ${i} : Missing required parameters.`);
return;
}
if (k[i].some((t) => t.name === e.name)) {
console.error(`[Axentix] Error registering ${i} : Already exist.`);
return;
}
e.autoInit && (e.autoInit.selector = e.autoInit.selector += ":not(.no-axentix-init)"), k[i].push(e);
}, st = (e) => {
it(e, "components");
}, nt = (e) => e.replace(/[\w]([A-Z])/g, (i) => i[0] + "-" + i[1]).toLowerCase(), rt = (e, i = "") => {
const t = nt(e);
return i ? i + "-" + t : t;
}, ot = (e, i, t, n, r = "") => {
const a = i[0].toUpperCase() + i.slice(1).toLowerCase();
B().includes(a) && t !== "Collapsible" && a !== "Sidenav" && (e[i] = R(a).getDefaultOptions());
const m = r ? r + "-" + i : i, b = N(e[i], t, n, m);
if (!(Object.keys(b).length === 0 && e.constructor === Object)) return b;
}, N = (e, i, t, n = "") => Object.keys(e).reduce((r, a) => {
if (typeof e[a] == "object" && e[a] !== null) {
const m = ot(e, a, i, t, n);
m && (r[a] = m);
} else if (e[a] !== null) {
const m = "data-" + i.toLowerCase() + "-" + rt(a, n);
if (t.hasAttribute(m)) {
const b = t.getAttribute(m);
r[a] = typeof e[a] == "number" ? Number(b) : b, typeof e[a] == "boolean" && (r[a] = b === "true");
}
}
return r;
}, {}), at = (e, i) => {
const t = Object.assign({}, R(e).getDefaultOptions());
return N(t, e, i);
}, lt = () => {
document.querySelectorAll("[data-ax]").forEach((i) => {
let t = i.dataset.ax;
if (t = t[0].toUpperCase() + t.slice(1).toLowerCase(), !B().includes(t)) {
console.error(
`[Axentix] Error: ${t} component doesn't exist.
Did you forget to register him ?`,
i
);
return;
}
try {
const n = R(t);
new n(`#${i.id}`);
} catch (n) {
console.error("[Axentix] Data: Unable to load " + t, n);
}
});
}, ht = () => {
try {
new Axentix.Axentix("all");
} catch (e) {
console.error("[Axentix] Unable to auto init.", e);
}
};
document.addEventListener("DOMContentLoaded", () => {
document.documentElement.dataset.axentix && ht(), lt();
});
const U = (...e) => e.reduce((i, t) => {
for (let n in t)
i[n] = typeof t[n] == "object" && t[n] !== null ? U(i[n], t[n]) : t[n];
return i;
}, {}), ct = (e, i, t) => U(R(e).getDefaultOptions(), at(e, t), i), dt = (e, i = document.createElement("div")) => (e[0].parentElement.insertBefore(i, e[0]), e.forEach((n) => i.appendChild(n)), i), L = (e, i, t) => {
const n = new CustomEvent("ax." + i, {
detail: t || {},
bubbles: !0
});
e.dispatchEvent(n);
}, ut = (e) => {
const i = q.find((t) => t.type !== "Toast" && "#" + t.instance.el.id === e);
return i ? i.instance : !1;
};
class ft {
constructor() {
S(this, "el");
}
removeListeners() {
}
setupListeners() {
}
setup() {
}
preventDbInstance(i) {
if (i && ut(i)) throw new Error(`Instance already exist on ${i}`);
}
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 i = q.findIndex((t) => t.instance.el.id === this.el.id);
q.splice(i, 1);
}
}
const pt = {
animationDuration: 300,
animationType: "none",
disableActiveBar: !1,
caroulix: {
animationDuration: 300,
backToOpposite: !1,
enableTouch: !1,
autoplay: {
enabled: !1
}
}
};
var f, c, p, u, D, O, y, E, A, g, w, v, I, T, C, x, l, V, Z, G, H, J, $, z, K, Q, X, Y, _;
class F extends ft {
constructor(t, n) {
super();
h(this, l);
S(this, "options");
h(this, f);
h(this, c);
h(this, p);
h(this, u, 0);
h(this, D);
h(this, O);
h(this, y);
h(this, E);
h(this, A);
h(this, g);
h(this, w);
h(this, v);
h(this, I);
h(this, T, !1);
h(this, C);
h(this, x, !1);
try {
this.preventDbInstance(t), q.push({ type: "Tab", instance: this }), this.el = document.querySelector(t), this.options = ct("Tab", n, this.el), this.setup();
} catch (r) {
console.error("[Axentix] Tab init error", r);
}
}
setup() {
L(this.el, "tab.setup"), ["none", "slide"].includes(this.options.animationType) || (this.options.animationType = "none"), o(this, x, !1), o(this, f, this.el.querySelector(".tab-arrow")), o(this, c, this.el.querySelectorAll(".tab-menu .tab-link")), o(this, p, this.el.querySelector(".tab-menu")), o(this, u, 0), o(this, v, d(this, l, G).call(this)), s(this, f) && (d(this, l, z).call(this), o(this, D, this.el.querySelector(".tab-arrow .tab-prev")), o(this, O, this.el.querySelector(".tab-arrow .tab-next"))), this.setupListeners(), s(this, p).style.transitionDuration = this.options.animationDuration + "ms", this.options.animationType === "slide" ? d(this, l, J).call(this) : this.updateActiveElement();
}
setupListeners() {
s(this, c).forEach((t) => {
t.listenerRef = d(this, l, X).bind(this, t), t.addEventListener("click", t.listenerRef);
}), o(this, w, d(this, l, V).bind(this)), window.addEventListener("resize", s(this, w)), s(this, f) && (o(this, A, d(this, l, z).bind(this)), window.addEventListener("resize", s(this, A)), o(this, y, d(this, l, K).bind(this)), o(this, E, d(this, l, Q).bind(this)), s(this, D).addEventListener("click", s(this, y)), s(this, O).addEventListener("click", s(this, E)));
}
removeListeners() {
s(this, c).forEach((t) => {
t.removeEventListener("click", t.listenerRef), t.listenerRef = void 0;
}), window.removeEventListener("resize", s(this, w)), o(this, w, void 0), s(this, f) && (window.removeEventListener("resize", s(this, A)), o(this, A, void 0), s(this, D).removeEventListener("click", s(this, y)), s(this, O).removeEventListener("click", s(this, E)), o(this, y, void 0), o(this, E, void 0)), s(this, g) && (this.el.removeEventListener("ax.caroulix.slide", s(this, g)), o(this, g, void 0));
}
/** Select tab */
select(t) {
if (s(this, x)) return;
o(this, x, !0);
const n = this.el.querySelector('.tab-menu a[href="#' + t + '"]');
if (o(this, u, Array.from(s(this, c)).findIndex((r) => r.children[0] === n)), L(n, "tab.select", { currentIndex: s(this, u) }), d(this, l, $).call(this, n.parentElement), s(this, T)) {
s(this, v).forEach((a) => a.id === t ? a.classList.add("active") : "");
const r = R("Caroulix");
o(this, C, new r(
"#" + s(this, I).id,
this.options.caroulix,
this.el,
!0
)), o(this, g, d(this, l, Z).bind(this)), this.el.addEventListener("ax.caroulix.slide", s(this, g)), o(this, T, !1), o(this, x, !1);
return;
}
if (this.options.animationType === "slide") {
const r = s(this, v).findIndex((a) => a.id === t);
s(this, C).goTo(r), setTimeout(() => {
o(this, x, !1);
}, this.options.animationDuration);
} else
d(this, l, H).call(this), s(this, v).forEach((r) => {
r.id === t && (r.style.display = "block");
}), o(this, x, !1);
}
/** Detect active element & update component */
updateActiveElement() {
let t;
s(this, c).forEach((r, a) => {
r.classList.contains("active") && (t = r, o(this, u, a));
}), t || (t = s(this, c).item(0), o(this, u, 0));
const n = t.children[0].getAttribute("href");
this.select(n.split("#")[1]);
}
/** Go to previous tab */
prev(t = 1) {
if (s(this, x)) return;
const n = d(this, l, Y).call(this, t);
o(this, u, n), L(this.el, "tab.prev", { step: t });
const r = s(this, c)[n].children[0].getAttribute("href");
this.select(r.split("#")[1]);
}
/** Go to next tab */
next(t = 1) {
if (s(this, x)) return;
const n = d(this, l, _).call(this, t);
o(this, u, n), L(this.el, "tab.next", { step: t });
const r = s(this, c)[n].children[0].getAttribute("href");
this.select(r.split("#")[1]);
}
}
f = new WeakMap(), c = new WeakMap(), p = new WeakMap(), u = new WeakMap(), D = new WeakMap(), O = new WeakMap(), y = new WeakMap(), E = new WeakMap(), A = new WeakMap(), g = new WeakMap(), w = new WeakMap(), v = new WeakMap(), I = new WeakMap(), T = new WeakMap(), C = new WeakMap(), x = new WeakMap(), l = new WeakSet(), V = function() {
this.updateActiveElement();
for (let t = 100; t < 500; t += 100)
setTimeout(() => {
this.updateActiveElement();
}, t);
}, Z = function() {
s(this, u) !== s(this, C).activeIndex && (o(this, u, s(this, C).activeIndex), d(this, l, $).call(this, s(this, c)[s(this, u)]));
}, G = function() {
return Array.from(s(this, c)).map((t) => {
const n = t.children[0].getAttribute("href");
return this.el.querySelector(n);
});
}, H = function() {
s(this, v).forEach((t) => t.style.display = "none");
}, J = function() {
s(this, v).forEach((n) => n.classList.add("caroulix-item")), o(this, I, dt(s(this, v))), s(this, I).classList.add("caroulix");
const t = Math.random().toString().split(".")[1];
s(this, I).id = "tab-caroulix-" + t, o(this, T, !0), this.options.animationDuration !== 300 && (this.options.caroulix.animationDuration = this.options.animationDuration), this.updateActiveElement();
}, $ = function(t) {
if (s(this, c).forEach((n) => n.classList.remove("active")), !this.options.disableActiveBar) {
const n = t.getBoundingClientRect(), r = n.left, a = s(this, p).getBoundingClientRect().left, m = r - a + s(this, p).scrollLeft, b = n.width, j = s(this, p).clientWidth - m - b;
s(this, p).style.setProperty(W("tab-bar-left-offset"), Math.floor(m) + "px"), s(this, p).style.setProperty(W("tab-bar-right-offset"), Math.ceil(j) + "px");
}
t.classList.add("active");
}, z = function() {
const t = Array.from(s(this, c)).reduce((r, a) => (r += a.clientWidth, r), 0), n = s(this, f).clientWidth;
t > n ? s(this, f).classList.contains("tab-arrow-show") || s(this, f).classList.add("tab-arrow-show") : s(this, f).classList.contains("tab-arrow-show") && s(this, f).classList.remove("tab-arrow-show");
}, K = function(t) {
t.preventDefault(), s(this, p).scrollLeft -= 40;
}, Q = function(t) {
t.preventDefault(), s(this, p).scrollLeft += 40;
}, X = function(t, n) {
if (n.preventDefault(), s(this, x) || t.classList.contains("active")) return;
const r = t.children[0].getAttribute("href");
this.select(r.split("#")[1]);
}, Y = function(t) {
let n = 0, r = s(this, u);
for (let a = 0; a < t; a++)
r > 0 ? (n = r - 1, r--) : (r = s(this, c).length - 1, n = r);
return n;
}, _ = function(t) {
let n = 0, r = s(this, u);
for (let a = 0; a < t; a++)
r < s(this, c).length - 1 ? (n = r + 1, r++) : (r = 0, n = r);
return n;
}, S(F, "getDefaultOptions", () => pt);
st({
class: F,
name: "Tab",
dataDetection: !0,
autoInit: {
enabled: !0,
selector: ".tab"
}
});
export {
F as default
};