@flexilla/modal
Advanced tools
Comparing version 2.0.0 to 2.0.1
@@ -15,2 +15,7 @@ export declare class Modal { | ||
constructor(modal: string | HTMLElement, options?: ModalOptions, triggerElement?: string | HTMLElement); | ||
/** | ||
* auto init Modals based on the selector provided | ||
* @param selector {string} default is [data-fx-modal] attribute | ||
*/ | ||
static autoInit: (selector?: string) => void; | ||
} | ||
@@ -17,0 +22,0 @@ |
@@ -1,5 +0,5 @@ | ||
var q = Object.defineProperty; | ||
var N = (t, e, o) => e in t ? q(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o; | ||
var r = (t, e, o) => (N(t, typeof e != "symbol" ? e + "" : e, o), o); | ||
const c = (t, e = document.body) => e.querySelector(t), L = (t, e = document.body) => Array.from(e.querySelectorAll(t)), W = ({ | ||
var Y = Object.defineProperty; | ||
var _ = (t, e, o) => e in t ? Y(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o; | ||
var d = (t, e, o) => (_(t, typeof e != "symbol" ? e + "" : e, o), o); | ||
const c = (t, e = document.body) => e.querySelector(t), A = (t, e = document.body) => Array.from(e.querySelectorAll(t)), $ = ({ | ||
newElement: t, | ||
@@ -15,3 +15,3 @@ existingElement: e | ||
throw new Error("Existing element must have a parent element."); | ||
}, Y = ({ | ||
}, D = ({ | ||
element: t, | ||
@@ -28,14 +28,14 @@ callback: e | ||
) : e(); | ||
}, $ = (t, e) => { | ||
}, K = (t, e) => { | ||
e.removeChild(t); | ||
}, I = (t, e) => { | ||
Y({ | ||
}, T = (t, e) => { | ||
D({ | ||
element: t, | ||
callback() { | ||
$(t, e); | ||
K(t, e); | ||
} | ||
}); | ||
}, D = ({ modalContent: t, overlayClassName: e }) => { | ||
}, R = ({ modalContent: t, overlayClassName: e }) => { | ||
const o = document.createElement("span"); | ||
return o.setAttribute("aria-hidden", "true"), o.setAttribute("data-state", "open"), W({ newElement: o, existingElement: t }), o.classList.add(...e), o.setAttribute("data-modal-overlay", "overlay-bg"), o; | ||
return o.setAttribute("aria-hidden", "true"), o.setAttribute("data-state", "open"), $({ newElement: o, existingElement: t }), o.classList.add(...e), o.setAttribute("data-modal-overlay", "overlay-bg"), o; | ||
}, v = (t, e, o) => { | ||
@@ -45,3 +45,3 @@ if (!(e instanceof HTMLElement)) | ||
t.setAttribute("aria-hidden", o === "open" ? "false" : "true"), t.setAttribute("data-state", o === "open" ? "open" : "close"), e.setAttribute("data-state", o === "open" ? "open" : "close"); | ||
}, T = (t, e, o) => { | ||
}, O = (t, e, o) => { | ||
if (!t) { | ||
@@ -51,47 +51,47 @@ e || (document.body.style.overflowY = "auto"); | ||
} | ||
L("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter((m) => m !== o).length === 0 && !e && (document.body.style.overflowY = "auto"); | ||
}, K = (t, e, o) => { | ||
A("[data-fx-modal][data-state=open]:not([data-allow-body-scroll=true]").filter((m) => m !== o).length === 0 && !e && (document.body.style.overflowY = "auto"); | ||
}, j = (t, e, o) => { | ||
var g; | ||
if (!(t instanceof HTMLElement)) | ||
throw new Error("Modal Element must be a valid element"); | ||
const { animateContent: n, allowBodyScroll: d, preventCloseModal: m, overlayClass: h, onShow: u, onHide: y, onToggle: i, enableStackedModals: A } = o, b = d || t.hasAttribute("data-allow-body-scroll") && t.getAttribute("data-allow-body-scroll") !== "false", H = m || t.hasAttribute("data-prevent-close-modal") && t.getAttribute("data-prevent-close-modal") !== "false", p = A || t.hasAttribute("data-enable-stacked") && t.getAttribute("data-enable-stacked") !== "false", O = (h == null ? void 0 : h.split(" ")) || ((g = t.dataset.modalOverlay) == null ? void 0 : g.split(" ")) || ""; | ||
const { animateContent: n, allowBodyScroll: l, preventCloseModal: m, overlayClass: h, onShow: u, onHide: y, onToggle: i, enableStackedModals: E } = o, b = l || t.hasAttribute("data-allow-body-scroll") && t.getAttribute("data-allow-body-scroll") !== "false", H = m || t.hasAttribute("data-prevent-close-modal") && t.getAttribute("data-prevent-close-modal") !== "false", L = E || t.hasAttribute("data-enable-stacked") && t.getAttribute("data-enable-stacked") !== "false", P = (h == null ? void 0 : h.split(" ")) || ((g = t.dataset.modalOverlay) == null ? void 0 : g.split(" ")) || ""; | ||
let w = !1; | ||
t.setAttribute("data-allow-body-scroll", `${b}`); | ||
const a = c("[data-modal-content]", t), x = L("[data-close-modal]", t); | ||
const a = c("[data-modal-content]", t), k = A("[data-close-modal]", t); | ||
if (!(a instanceof HTMLElement)) | ||
throw new Error("Modal content element not found"); | ||
const k = a.dataset.enterAnimation || "", S = a.dataset.exitAnimation || ""; | ||
const S = a.dataset.enterAnimation || "", B = a.dataset.exitAnimation || ""; | ||
a.setAttribute("data-state", "close"); | ||
const E = (s) => { | ||
document.removeEventListener("keydown", E), s.key === "Escape" && !H && M(); | ||
}, C = (s) => { | ||
if (p) | ||
const x = (s) => { | ||
document.removeEventListener("keydown", x), s.key === "Escape" && !H && M(); | ||
}, q = (s) => { | ||
if (L) | ||
return; | ||
const f = L("[data-fx-modal][data-state=open]"); | ||
for (const l of f) | ||
if (l !== s) { | ||
const _ = c("[data-modal-content]", l); | ||
v(l, _, "close"); | ||
const P = c("[data-modal-overlay]", l); | ||
I(P, l); | ||
const f = A("[data-fx-modal][data-state=open]"); | ||
for (const r of f) | ||
if (r !== s) { | ||
const N = c("[data-modal-content]", r); | ||
v(r, N, "close"); | ||
const W = c("[data-modal-overlay]", r); | ||
T(W, r); | ||
} | ||
}, B = () => { | ||
C(t); | ||
const s = D({ | ||
}, I = () => { | ||
q(t); | ||
const s = R({ | ||
modalContent: a, | ||
overlayClassName: O | ||
overlayClassName: P | ||
}); | ||
if (n || k !== "") { | ||
const f = n ? n.enterAnimation : k; | ||
if (n || S !== "") { | ||
const f = n ? n.enterAnimation : S; | ||
f !== "" && a.style.setProperty("--un-modal-animation", f), v(t, a, "open"); | ||
} else | ||
v(t, a, "open"); | ||
b || (document.body.style.overflow = "hidden"), w || (document.addEventListener("keydown", E), w = !0), !H && s.addEventListener("click", M), u == null || u(), i == null || i({ isHidden: !1 }); | ||
b || (document.body.style.overflow = "hidden"), w || (document.addEventListener("keydown", x), w = !0), !H && s.addEventListener("click", M), u == null || u(), i == null || i({ isHidden: !1 }); | ||
}, M = () => { | ||
if (n != null && n.exitAnimation && n.exitAnimation !== "" || S !== "") { | ||
const f = n ? n.exitAnimation || "" : S; | ||
if (n != null && n.exitAnimation && n.exitAnimation !== "" || B !== "") { | ||
const f = n ? n.exitAnimation || "" : B; | ||
a.setAttribute("data-state", "close"), a.style.setProperty("--un-modal-animation", f), a.addEventListener( | ||
"animationend", | ||
function l() { | ||
a.removeEventListener("animationend", l), v(t, a, "close"), a.style.removeProperty("--un-modal-animation"), T(p, b, t); | ||
function r() { | ||
a.removeEventListener("animationend", r), v(t, a, "close"), a.style.removeProperty("--un-modal-animation"), O(L, b, t); | ||
}, | ||
@@ -101,14 +101,13 @@ { once: !0 } | ||
} else | ||
v(t, a, "close"), T(p, b, t); | ||
w && (document.removeEventListener("keydown", E), w = !1); | ||
v(t, a, "close"), O(L, b, t); | ||
w && (document.removeEventListener("keydown", x), w = !1); | ||
const s = c("[data-modal-overlay]", t); | ||
I(s, t), y == null || y(), i == null || i({ isHidden: !0 }); | ||
T(s, t), y == null || y(), i == null || i({ isHidden: !0 }); | ||
}; | ||
return { autoInitModal: () => { | ||
if (e instanceof HTMLElement && e.addEventListener("click", B), x.length > 0) | ||
for (const s of x) | ||
if (e instanceof HTMLElement && e.addEventListener("click", I), k.length > 0) | ||
for (const s of k) | ||
s.addEventListener("click", M); | ||
}, showModal: B, hideModal: M, isHidden: () => t.dataset.state === "close" }; | ||
}; | ||
class F { | ||
}, showModal: I, hideModal: M, isHidden: () => t.dataset.state === "close" }; | ||
}, p = class p { | ||
/** | ||
@@ -121,18 +120,28 @@ * Modal Component | ||
constructor(e, o = {}, n) { | ||
r(this, "modalElement"); | ||
r(this, "showModal"); | ||
r(this, "hideModal"); | ||
r(this, "isHidden"); | ||
r(this, "options"); | ||
r(this, "state"); | ||
const d = typeof e == "string" ? c(e) : e; | ||
if (!(d instanceof HTMLElement)) | ||
d(this, "modalElement"); | ||
d(this, "showModal"); | ||
d(this, "hideModal"); | ||
d(this, "isHidden"); | ||
d(this, "options"); | ||
d(this, "state"); | ||
const l = typeof e == "string" ? c(e) : e; | ||
if (!(l instanceof HTMLElement)) | ||
throw new Error("Invalid provided HTMLElement"); | ||
this.modalElement = d, this.options = o, this.state = (o == null ? void 0 : o.defaultState) || this.modalElement.dataset.state || "close", this.modalElement.hasAttribute("data-fx-modal") || this.modalElement.setAttribute("data-fx-modal", ""); | ||
const m = d.dataset.modalId, h = (typeof n == "string" ? c(n) : n) || c(`[data-modal-target='${m}']`), { showModal: u, hideModal: y, autoInitModal: i, isHidden: A } = K(d, h, this.options); | ||
this.state === "open" && u(), i(), this.showModal = u, this.hideModal = y, this.isHidden = A; | ||
this.modalElement = l, this.options = o, this.state = (o == null ? void 0 : o.defaultState) || this.modalElement.dataset.state || "close", this.modalElement.hasAttribute("data-fx-modal") || this.modalElement.setAttribute("data-fx-modal", ""); | ||
const m = l.dataset.modalId, h = (typeof n == "string" ? c(n) : n) || c(`[data-modal-target='${m}']`), { showModal: u, hideModal: y, autoInitModal: i, isHidden: E } = j(l, h, this.options); | ||
this.state === "open" && u(), i(), this.showModal = u, this.hideModal = y, this.isHidden = E; | ||
} | ||
} | ||
}; | ||
/** | ||
* auto init Modals based on the selector provided | ||
* @param selector {string} default is [data-fx-modal] attribute | ||
*/ | ||
d(p, "autoInit", (e = "[data-fx-modal]") => { | ||
const o = A(e); | ||
for (const n of o) | ||
new p(n); | ||
}); | ||
let C = p; | ||
export { | ||
F as Modal | ||
C as Modal | ||
}; |
{ | ||
"name": "@flexilla/modal", | ||
"private": false, | ||
"version": "2.0.0", | ||
"version": "2.0.1", | ||
"type": "module", | ||
@@ -70,3 +70,3 @@ "description": "A customizable modal component for creating interactive pop-up dialogs in web applications.", | ||
"author": "johnkat-mj", | ||
"gitHead": "b182c7035953bc34e8f350b834df9862bec8acb5" | ||
"gitHead": "8435693ee1ff8e2f9d279b5d4026949530d7d05d" | ||
} |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
18764
208