axentix
Version:
Axentix is a framework mixing fully customizable components & utility-first classes, leaving the design choice to the developer.
206 lines (205 loc) • 9.16 kB
JavaScript
var V = Object.defineProperty;
var T = (e) => {
throw TypeError(e);
};
var z = (e, s, t) => s in e ? V(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
var E = (e, s, t) => z(e, typeof s != "symbol" ? s + "" : s, t), A = (e, s, t) => s.has(e) || T("Cannot " + t);
var i = (e, s, t) => (A(e, s, "read from private field"), t ? t.call(e) : s.get(e)), c = (e, s, t) => s.has(e) ? T("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), p = (e, s, t, o) => (A(e, s, "write to private field"), o ? o.call(e, t) : s.set(e, t), t), f = (e, s, t) => (A(e, s, "access private method"), t);
const C = [], D = {
components: [],
plugins: [],
prefix: "ax",
mode: ""
}, O = (e) => D.components.find((s) => s.name === e).class, R = () => {
const e = D.components.filter((t) => t.dataDetection), s = D.plugins.filter((t) => t.dataDetection);
return [...e, ...s].map((t) => t.name);
}, B = (e, s) => {
if (!e.name || !e.class) {
console.error(`[Axentix] Error registering ${s} : Missing required parameters.`);
return;
}
if (D[s].some((t) => t.name === e.name)) {
console.error(`[Axentix] Error registering ${s} : Already exist.`);
return;
}
e.autoInit && (e.autoInit.selector = e.autoInit.selector += ":not(.no-axentix-init)"), D[s].push(e);
}, F = (e) => {
B(e, "components");
}, H = (e) => e.replace(/[\w]([A-Z])/g, (s) => s[0] + "-" + s[1]).toLowerCase(), M = (e, s = "") => {
const t = H(e);
return s ? s + "-" + t : t;
}, Y = (e, s, t, o, a = "") => {
const r = s[0].toUpperCase() + s.slice(1).toLowerCase();
R().includes(r) && t !== "Collapsible" && r !== "Sidenav" && (e[s] = O(r).getDefaultOptions());
const u = a ? a + "-" + s : s, v = $(e[s], t, o, u);
if (!(Object.keys(v).length === 0 && e.constructor === Object)) return v;
}, $ = (e, s, t, o = "") => Object.keys(e).reduce((a, r) => {
if (typeof e[r] == "object" && e[r] !== null) {
const u = Y(e, r, s, t, o);
u && (a[r] = u);
} else if (e[r] !== null) {
const u = "data-" + s.toLowerCase() + "-" + M(r, o);
if (t.hasAttribute(u)) {
const v = t.getAttribute(u);
a[r] = typeof e[r] == "number" ? Number(v) : v, typeof e[r] == "boolean" && (a[r] = v === "true");
}
}
return a;
}, {}), X = (e, s) => {
const t = Object.assign({}, O(e).getDefaultOptions());
return $(t, e, s);
}, Z = () => {
document.querySelectorAll("[data-ax]").forEach((s) => {
let t = s.dataset.ax;
if (t = t[0].toUpperCase() + t.slice(1).toLowerCase(), !R().includes(t)) {
console.error(
`[Axentix] Error: ${t} component doesn't exist.
Did you forget to register him ?`,
s
);
return;
}
try {
const o = O(t);
new o(`#${s.id}`);
} catch (o) {
console.error("[Axentix] Data: Unable to load " + t, o);
}
});
}, G = () => {
try {
new Axentix.Axentix("all");
} catch (e) {
console.error("[Axentix] Unable to auto init.", e);
}
};
document.addEventListener("DOMContentLoaded", () => {
document.documentElement.dataset.axentix && G(), Z();
});
const P = (...e) => e.reduce((s, t) => {
for (let o in t)
s[o] = typeof t[o] == "object" && t[o] !== null ? P(s[o], t[o]) : t[o];
return s;
}, {}), I = (e, s, t) => P(O(e).getDefaultOptions(), X(e, t), s), w = (e, s, t) => {
const o = new CustomEvent("ax." + s, {
detail: {},
bubbles: !0
});
e.dispatchEvent(o);
}, J = (e) => {
const s = C.find((t) => t.type !== "Toast" && "#" + t.instance.el.id === e);
return s ? s.instance : !1;
};
class K {
constructor() {
E(this, "el");
}
removeListeners() {
}
setupListeners() {
}
setup() {
}
preventDbInstance(s) {
if (s && J(s)) throw new Error(`Instance already exist on ${s}`);
}
sync() {
w(this.el, "component.sync"), this.removeListeners(), this.setupListeners();
}
reset() {
w(this.el, "component.reset"), this.removeListeners(), this.setup();
}
destroy() {
w(this.el, "component.destroy"), this.removeListeners();
const s = C.findIndex((t) => t.instance.el.id === this.el.id);
C.splice(s, 1);
}
}
const Q = {
content: "",
animationDelay: 0,
offset: "10px",
animationDuration: 200,
classes: "grey dark-4 light-shadow-2 p-2",
position: "top"
};
var n, L, m, y, x, g, h, d, l, b, k, q, N, U;
class S extends K {
constructor(t, o) {
super();
c(this, l);
E(this, "options");
c(this, n);
c(this, L);
c(this, m);
c(this, y);
c(this, x);
c(this, g);
c(this, h);
c(this, d);
try {
this.preventDbInstance(t), C.push({ type: "Tooltip", instance: this }), this.el = document.querySelector(t), this.options = I("Tooltip", o, this.el), this.setup();
} catch (a) {
console.error("[Axentix] Tooltip init error", a);
}
}
setup() {
if (!this.options.content) return console.error(`Tooltip #${this.el.id} : empty content.`);
w(this.el, "tooltip.setup"), this.options.position = this.options.position.toLowerCase(), document.querySelectorAll(".tooltip").forEach((o) => {
o.dataset.tooltipId && o.dataset.tooltipId === this.el.id && p(this, n, o);
}), i(this, n) || p(this, n, document.createElement("div")), i(this, n).dataset.tooltipId !== this.el.id && (i(this, n).dataset.tooltipId = this.el.id), f(this, l, b).call(this), document.body.appendChild(i(this, n)), p(this, L, ["right", "left", "top", "bottom"]), i(this, L).includes(this.options.position) || (this.options.position = "top"), this.setupListeners(), this.updatePosition(), i(this, n).style.display = "none";
}
setupListeners() {
p(this, m, f(this, l, N).bind(this)), p(this, y, f(this, l, U).bind(this)), p(this, x, this.updatePosition.bind(this)), this.el.addEventListener("mouseenter", i(this, m)), this.el.addEventListener("mouseleave", i(this, y)), window.addEventListener("resize", i(this, x));
}
removeListeners() {
this.el.removeEventListener("mouseenter", i(this, m)), this.el.removeEventListener("mouseleave", i(this, y)), window.removeEventListener("resize", i(this, x)), p(this, m, void 0), p(this, y, void 0), p(this, x, void 0);
}
/** Update current tooltip position */
updatePosition() {
p(this, h, this.el.getBoundingClientRect()), f(this, l, k).call(this), p(this, d, i(this, n).getBoundingClientRect()), f(this, l, q).call(this);
}
/** Show tooltip */
show() {
i(this, n).style.display = "block", this.updatePosition(), clearTimeout(i(this, g)), p(this, g, setTimeout(() => {
w(this.el, "tooltip.show");
const t = this.options.position == "top" || this.options.position == "left" ? "-" : "", o = this.options.position == "top" || this.options.position == "bottom" ? "Y" : "X";
i(this, n).style.transform = `translate${o}(${t}${this.options.offset})`, i(this, n).style.opacity = "1";
}, this.options.animationDelay));
}
/** Hide tooltip */
hide() {
w(this.el, "tooltip.hide"), clearTimeout(i(this, g)), i(this, n).style.transform = "translate(0)", i(this, n).style.opacity = "0", p(this, g, setTimeout(() => {
i(this, n).style.display = "none";
}, this.options.animationDuration));
}
/** Change current options */
change(t) {
this.options = I("Tooltip", t, this.el), i(this, L).includes(this.options.position) || (this.options.position = "top"), f(this, l, b).call(this), this.updatePosition();
}
}
n = new WeakMap(), L = new WeakMap(), m = new WeakMap(), y = new WeakMap(), x = new WeakMap(), g = new WeakMap(), h = new WeakMap(), d = new WeakMap(), l = new WeakSet(), b = function() {
i(this, n).style.transform = "translate(0)", i(this, n).style.opacity = "0", i(this, n).className = "tooltip " + this.options.classes, i(this, n).style.transitionDuration = this.options.animationDuration + "ms", i(this, n).innerHTML = this.options.content;
}, k = function() {
if (this.options.position == "top" || this.options.position == "bottom") {
const o = this.options.position === "top" ? i(this, h).top : i(this, h).top + i(this, h).height;
i(this, n).style.top = o + "px";
} else this.options.position == "right" && (i(this, n).style.left = i(this, h).left + i(this, h).width + "px");
}, /** Manually transform the tooltip location */
q = function() {
this.options.position == "top" || this.options.position == "bottom" ? i(this, n).style.left = i(this, h).left + i(this, h).width / 2 - i(this, d).width / 2 + "px" : i(this, n).style.top = i(this, h).top + i(this, h).height / 2 - i(this, d).height / 2 + "px", this.options.position == "top" ? i(this, n).style.top = i(this, d).top - i(this, d).height + "px" : this.options.position == "left" && (i(this, n).style.left = i(this, h).left - i(this, d).width + "px");
const o = window.scrollY, a = parseFloat(i(this, n).style.top);
this.options.position === "top" ? i(this, n).style.top = o * 2 + a + "px" : i(this, n).style.top = o + a + "px";
}, N = function(t) {
t.preventDefault(), this.show();
}, U = function(t) {
t.preventDefault(), this.hide();
}, E(S, "getDefaultOptions", () => Q);
F({
class: S,
name: "Tooltip",
dataDetection: !0
});
export {
S as default
};