2023-09-20 17:19:10 +00:00
|
|
|
const { v4: uuidv4 } = require("uuid");
|
2023-10-03 13:15:17 +00:00
|
|
|
import * as bootstrap from "bootstrap";
|
2023-09-20 17:19:10 +00:00
|
|
|
|
2023-10-03 13:15:17 +00:00
|
|
|
export function displayToast(type, icon, content, duration) {
|
2023-09-20 17:19:10 +00:00
|
|
|
let mainToastContainer = document.getElementById("mainToastContainer");
|
|
|
|
|
|
|
|
let randomID = uuidv4();
|
|
|
|
let toastCode = `
|
|
|
|
<div class="toast align-items-center bg-outline-${type} border-1" id="${randomID}" role="alert" aria-live="assertive" aria-atomic="true">
|
|
|
|
<div class="d-flex">
|
|
|
|
<div class="toast-body p-0 m-0 bg-white rounded-2 w-100">
|
|
|
|
<div class="row p-1 m-0">
|
|
|
|
<div class="col-auto bg-${type} rounded-start rounded-2 d-flex align-items-center">
|
|
|
|
<i class="bi ${icon}" style="font-size: 1rem; color: white"></i>
|
|
|
|
</div>
|
|
|
|
<div class="col p-2">
|
|
|
|
${content}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
`;
|
|
|
|
|
|
|
|
// insert toast to toast container
|
|
|
|
mainToastContainer.insertAdjacentHTML("beforeend", toastCode);
|
|
|
|
|
|
|
|
// register toast
|
|
|
|
let toastHTMLElement = document.getElementById(randomID);
|
|
|
|
let toast = bootstrap.Toast.getOrCreateInstance(toastHTMLElement); // Returns a Bootstrap toast instance
|
|
|
|
toast._config.delay = duration;
|
|
|
|
|
|
|
|
// show toast
|
|
|
|
toast.show();
|
|
|
|
|
|
|
|
//register event listener if toast is hidden
|
|
|
|
toastHTMLElement.addEventListener("hidden.bs.toast", () => {
|
|
|
|
// remove eventListener
|
|
|
|
toastHTMLElement.removeEventListener("hidden.bs.toast", this);
|
|
|
|
// remove toast
|
|
|
|
toastHTMLElement.remove();
|
|
|
|
});
|
|
|
|
}
|