@madhusha_99/notification-center
Version:
Notification Center is a lightweight JavaScript library for displaying beautiful, customizable notifications powered by **Tailwind CSS**.
87 lines (86 loc) • 5.15 kB
JavaScript
var f = Object.defineProperty;
var g = (r, t, e) => t in r ? f(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
var i = (r, t, e) => g(r, typeof t != "symbol" ? t + "" : t, e);
class w {
constructor() {
i(this, "alertContainer");
i(this, "icons");
i(this, "colors");
this.alertContainer = document.createElement("div"), this.alertContainer.className = "fixed inset-0 flex justify-center bg-zinc-950/15 dark:bg-zinc-950/50 px-2 sm:px-6 lg:px-8 py-2 sm:py-8 lg:py-16 w-screen overflow-y-auto transition duration-100 hidden", document.body.appendChild(this.alertContainer), this.icons = {
success: `<svg class="size-5 text-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
clip-rule="evenodd" />
</svg>`,
warning: `<svg class="size-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 5a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 5Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
clip-rule="evenodd" />
</svg>`,
error: `<svg class="size-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd"
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z"
clip-rule="evenodd" />
</svg>`
}, this.colors = {
success: "green",
warning: "yellow",
error: "red"
};
}
showPopup(t, e) {
var c, o, s;
const n = (t.alertColor ?? this.colors[t.type]) || "gray", d = (t.titleColor ?? n) || "gray", u = (t.textColor ?? n) || "gray", h = (t.confirmButtonColor ?? n) || "gray", a = (t.cancelButtonColor ?? n) || "gray", m = t.icon && t.icon.length > 7 ? t.icon : (this.icons[t.type] ?? this.icons[t.icon]) || "", l = document.createElement("div");
l.className = "fixed inset-0 pt-6 sm:pt-0 w-screen overflow-y-auto flex justify-center items-center transition duration-100", l.innerHTML = `
<div class="fixed flex flex-col justify-center items-center ${t.position} bg-${t.alertColor ? t.alertColor + "-50" : "white"} dark:bg-${t.alertColor ?? "zinc"}-900 !border-${t.alertColor ?? "zinc"}-400 shadow-lg p-8 sm:p-6 rounded-xl ring-1 ring-${t.alertColor ?? "zinc"}-950/10 dark:ring-${t.alertColor ?? "white"}/10 ${t.alertWidth ?? "w-full sm:max-w-md"} ${t.alertHeight ?? "h-fit"}">
<div class="flex justify-center">${m}</div>
<h2 class="px-4 py-2 font-semibold text-${d}-800 dark:text-white sm:text-sm text-base text-center">${t.title}</h2>
<p class="mt-2 text-${u}-700 dark:text-white text-center">${t.text}</p>
<div class="flex justify-center mt-5 ${t.showConfirmButton ? "block" : "hidden"}">
${t.showCancelButton ? `
<div class="flex justify-center items-center p-2 w-full gap-3">
<button class="bg-${a === "gray" ? "red" : a}-600 px-4 py-2 rounded-md text-white cursor-pointer" id="btnCancel">${t.cancelButtonText ?? "Cancel"}</button>
<button class="bg-${h}-600 px-4 py-2 rounded-md text-white cursor-pointer" id="btnOK">${t.confirmButtonText ?? "OK"}</button>
</div>
` : `<button class="bg-${n}-600 px-4 py-2 rounded-md text-white cursor-pointer" id="btnDefaultOK">${t.confirmButtonText ?? "OK"}</button>`}
</div>
</div>
`, this.alertContainer.innerHTML = "", this.alertContainer.appendChild(l), this.alertContainer.classList.remove("hidden"), (c = document.getElementById("btnCancel")) == null || c.addEventListener("click", () => {
this.closeNotification(this.alertContainer), e == null || e(!1);
}), (o = document.getElementById("btnOK")) == null || o.addEventListener("click", () => {
this.closeNotification(this.alertContainer), e == null || e(!0);
}), (s = document.getElementById("btnDefaultOK")) == null || s.addEventListener("click", () => {
this.closeNotification(this.alertContainer), e == null || e(!0);
});
const x = this.alertContainer;
setTimeout(() => {
this.closeNotification(x);
}, t.duration);
}
closeNotification(t) {
t.classList.add("hidden");
}
success(t) {
return new Promise((e) => {
t.type = "success", this.showPopup(t, e);
});
}
error(t) {
return new Promise((e) => {
t.type = "error", this.showPopup(t, e);
});
}
warning(t) {
return new Promise((e) => {
t.type = "warning", this.showPopup(t, e);
});
}
show(t) {
return new Promise((e) => {
t.type = void 0, this.showPopup(t, e);
});
}
}
export {
w as default
};