toast.js (939B)
1 function makeToast(type, body) { 2 const isError = type === "error"; 3 4 const container = document.createElement("div"); 5 container.classList.add("toast-box", `toast-${type}`); 6 container.setAttribute("role", isError ? "alert" : "status"); 7 8 const message = document.createElement("span"); 9 message.textContent = body; 10 11 const dismiss = document.createElement("button"); 12 dismiss.classList.add("dismiss-button"); 13 dismiss.setAttribute("type", "button"); 14 dismiss.setAttribute("aria-label", "Dismiss"); 15 dismiss.textContent = "x"; 16 dismiss.addEventListener("click", () => container.remove()); 17 18 container.appendChild(message); 19 container.appendChild(dismiss); 20 21 return container; 22 } 23 24 function showToast(type, body) { 25 const toastContainer = document.querySelector(".toast-container"); 26 toastContainer.appendChild(makeToast(type, body)); 27 } 28 29 document.body.addEventListener("HXToast", (evt) => { 30 showToast(evt.detail.type, evt.detail.body); 31 });