semantic-ui-toast/toast.min.js

Show toasts styled with Semantic UI CSS

const types={error:"error",warning:"warning",success:"success",info:"info"},icons={[types.error]:"exclamation triangle",[types.info]:"question",[types.success]:"check",[types.warning]:"exclamation triangle"},showToast=text=>{const toastKey=addToastToContainer(text);trackAndRemoveToast(toastKey)},trackAndRemoveToast=key=>{const container=document.body.querySelector(".toast-container"),toast=document.body.querySelector(`#toast${key}`);setTimeout(()=>{toast.matches(":hover")?trackAndRemoveToast(key):(toast.classList.toggle("active"),toast.style.opacity=0,setTimeout(()=>{container.removeChild(toast)},200))},2e3)},addToastToContainer=options=>{const container=getOrCreateContainer(),toastOptions={key:Date.now(),...options},toast=createToast(toastOptions);return container.appendChild(toast),setTimeout(()=>{toast.classList.toggle("active"),toast.style.opacity=1},1),toastOptions.key},createToast=options=>{const icon=options.showIcon&&icons[options.type]?icons[options.type]:"",toast=document.createElement("div");toast.className=`ui ${options.type} ${icon?"icon":""} message active toast`;const header=options.header?`<div class="header">${options.header}</div>`:"",body=options.text?`<p>${options.text}</p>`:"",toastIcon=icon?`<i aria-hidden="true" class="${icon} icon"></i>`:"",closeIcon=options.closeable?'<i class="close icon" ></i>':"",nestContent=!!icon||!!header;return toast.innerHTML=`${toastIcon} ${nestContent?'<div class="content">':""} ${closeIcon} ${header} ${body}${nestContent?"</div>":""}`,toast.setAttribute("id",`toast${options.key}`),toast.style.opacity=0,toast},getOrCreateContainer=()=>{let container=document.querySelector(".toast-container");return container||(container=document.createElement("div"),container.classList.add("toast-container")),document.body.appendChild(container),container},toastManager={showToast:(text,options={})=>{showToast({...options,type:"",text:text})},success:(text,options={})=>{showToast({...options,type:types.success,text:text})},warning:(text,options={})=>{showToast({...options,type:types.warning,text:text})},error:(text,options={})=>{showToast({...options,type:types.error,text:text})},info:(text,options={})=>{showToast({...options,type:types.info,text:text})}};export default toastManager;