56 lines
2.0 KiB
JavaScript
56 lines
2.0 KiB
JavaScript
const toastTemplate = `
|
|
<div class="toast mt-3 overflow-hidden" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" style="pointer-events: auto">
|
|
<div class="toast-header">
|
|
<i class="toast-icon bi me-2"></i>
|
|
<strong class="toast-title me-auto"></strong>
|
|
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
<div class="toast-body"></div>
|
|
<div class="progress mb-0 rounded-0" role="progressbar" aria-label="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="max-height: .5rem">
|
|
<div class="progress-bar" style="width: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
`
|
|
|
|
const toastTypes = {
|
|
"primary": "bi-bell-fill",
|
|
"info": "bi-info-circle-fill",
|
|
"warning": "bi-exclamation-triangle-fill",
|
|
"danger": "bi-exclamation-circle-fill",
|
|
"success": "bi-check-circle-fill"
|
|
}
|
|
|
|
function animateToastProgress(progressBar, durationMs) {
|
|
progressBar.css({
|
|
"animation-duration": (durationMs / 1000) + "s",
|
|
"animation-name": "decreaseProgressWidth",
|
|
"animation-fill-mode": "forwards",
|
|
"animation-timing-function": "linear"
|
|
});
|
|
}
|
|
|
|
function showToast(typeName, title, message, duration=5000) {
|
|
var toast = makeToast(typeName, title, message)
|
|
$(".toasts-container").append(toast);
|
|
|
|
toast.toast("show");
|
|
|
|
var progressBar = toast.find(".progress-bar");
|
|
progressBar.on("animationend", function() {
|
|
toast.toast("hide");
|
|
setTimeout(function() {toast.remove()}, 1500);
|
|
});
|
|
|
|
animateToastProgress(progressBar, duration);
|
|
}
|
|
|
|
function makeToast(typeName, title, message) {
|
|
const iconClass = toastTypes[typeName];
|
|
var template = $(toastTemplate);
|
|
template.find(".toast-icon").addClass(`text-${typeName}`).addClass(iconClass);
|
|
template.find(".progress-bar").addClass(`bg-${typeName}`);
|
|
template.find(".toast-body").html(message);
|
|
template.find(".toast-title").text(title);
|
|
|
|
return template;
|
|
} |