toast-notification-js/dist/toast-notification.min.js

A simple notification with better customization

((e,t)=>{"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).ToastNotification=t()})(this,()=>{"use strict";let e={top:[],bottom:[]},t=Object.keys(e);return()=>(ToastNotification.create=(t={})=>{let o={classList:t.classList?t.classList:null,title:t.title?t.title:null,message:t.message||"This is Toast message!",icon:t.icon?t.icon:null,duration:t.duration?1e3*t.duration:!t.duration&&t.duration<=0?0:5e3,closeButton:!["false","0"].includes(String(t.closeButton).toLowerCase()),position:{x:t.position&&["left","center","right"].includes(t.position.x)?t.position.x:"right",y:t.position&&["bottom","top"].includes(t.position.y)?t.position.y:"bottom",z:t.position&&t.position.z?t.position.z:50},marginWidth:t.marginWidth,redirect:t.redirect&&"string"==typeof t.redirect?t.redirect:{url:t.redirect&&t.redirect.url?t.redirect.url:null,newWindow:!(t.redirect&&["false","0"].includes(String(t.redirect.newWindow).toLowerCase()))},progressBar:!["false","0"].includes(String(t.progressBar).toLowerCase())&&{show:!(t.progressBar&&["false","0"].includes(String(t.progressBar.show).toLowerCase())),classList:t.progressBar&&t.progressBar.classList?t.progressBar.classList:null},root:t.root instanceof HTMLElement?t.root:document.body};var s=null,i=null;let r=document.createElement("string"==typeof o.redirect||o.redirect.url?"a":"div"),n=document.createElement("div");var a=null,l=null;let c=document.createElement("div"),d=document.createElement("div");if(c.className+="toast ",o.classList?c.className+=o.classList:(c.style.backgroundColor=window.matchMedia("(prefers-color-scheme: dark)").matches?"#f43f5e":"#e11d48",c.style.color="#ffffff"),o.icon){s=document.createElement("div");var p=document.createElement("div");p.classList.add("toast-icon"),p.innerHTML=o.icon,s.append(p),c.append(s)}o.title&&((i=document.createElement("div")).classList.add("toast-title"),i.append(o.title),n.append(i)),"string"==typeof o.redirect?(r.href=o.redirect,r.style.color="currentColor",r.style.textDecorationLine="underline",r.style.textUnderlineOffset="2px",r.target="_blank",r.rel="noopener noreferrer"):o.redirect.url&&(r.href=o.redirect.url,r.style.color="currentColor",r.style.textDecorationLine="underline",r.style.textUnderlineOffset="2px",o.redirect.newWindow&&(r.target="_blank",r.rel="noopener noreferrer")),r.classList.add("toast-message"),r.append(o.message),n.classList.add("toast-content-wrapper"),n.append(r),c.append(n),o.closeButton&&((a=document.createElement("button")).type="button",a.classList.add("toast-close-button"),a.innerHTML="&#10006;",c.append(a)),o.progressBar.show&&o.duration>0&&(l=document.createElement("div"),l.className+="progress-bar ",o.progressBar.classList?l.className+=o.progressBar.classList:l.style.backgroundColor="currentColor",l.style.animationDuration=o.duration+"ms",c.append(l)),d.classList.add("toast-wrapper"),d.classList.add(o.position.x),d.style.position="BODY"!==o.root.tagName?"absolute":"fixed",d.style.zIndex=o.position.z,d.style.transitionProperty="all",d.style.transitionTimingFunction="cubic-bezier(0.4, 0, 0.2, 1)",d.style.transitionDuration="300ms",o.marginWidth&&(d.style.marginLeft=o.marginWidth,d.style.marginRight=o.marginWidth),d.appendChild(c);let y=()=>{"BODY"!==o.root.tagName&&(o.root.style.position="relative");let t=o.root.insertAdjacentElement("afterbegin",d);o.closeButton&&(a.onclick=e=>{e.stopPropagation(),u(t)});let s=void 0!==e[o.position.y][e[o.position.y].length-1]?parseFloat(e[o.position.y][e[o.position.y].length-1].style[o.position.y]):10;d.style[o.position.y]=s+"px",e[o.position.y].push(t),e[o.position.y].slice(0,e[o.position.y].length-1).forEach(e=>{let s=parseFloat(e.style[o.position.y]);e.style[o.position.y]=`${s+t.offsetHeight+10}px`}),f(t)},u=t=>{let s=e[o.position.y].indexOf(t),i=t.offsetHeight;t.style.opacity="0",e[o.position.y].splice(s,1),setTimeout(()=>{t.remove(),e[o.position.y].slice(0,s).forEach(e=>{let t=parseFloat(e.style[o.position.y]||0);e.style[o.position.y]=`${t-i-10}px`})},150)},f=e=>{o.duration>0&&!o.progressBar.show&&setTimeout(()=>{u(e)},o.duration),o.duration>0&&o.progressBar.show&&l.addEventListener("animationend",t=>{t.stopPropagation(),l.style.opacity=0,u(e)})};return y()},ToastNotification.clear=()=>{let o=e=>{e.style.transition="opacity 0.2s ease-out",e.style.opacity="0",e.addEventListener("transitionend",()=>{e.remove()})};t.forEach(t=>{e[t].forEach(e=>{o(e)}),e[t]=[]})},ToastNotification)});