corbz/PYRSS-Website
corbz/PYRSS-Website
1
0
Fork 0
Code Issues 21 Pull Requests Actions Releases 1 Wiki Activity

cleaner toast progress animation and fadeout

Browse Source
This commit is contained in:
Corban-Lee Jones 2024-03-26 09:49:40 +00:00
parent 621aee3f8d
commit 34890c4cf2
2 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/static/css/index.css
View File

@ -242,4 +242,12 @@ body {
.toast .progress-bar {
border-radius: 0;
}
}
/* Progress Bar */
@keyframes decreaseProgressWidth {
from { width: 100%; }
to { width: 0%; }
}

32
apps/static/js/toasts.js
View File

@ -1,5 +1,5 @@
const toastTemplate = `
<div class="toast mt-3" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast mt-3" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
<div class="toast-header">
<i class="toast-icon bi me-2"></i>
<strong class="toast-title me-auto">Bootstrap</strong>
@ -22,24 +22,28 @@ const toastTypes = {
"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) {
var toast = makeToast(typeName, title, message)
$(".toasts-container").prepend(toast);
$(".toasts-container").append(toast);
toast.toast("show", {autohide: false});
toast.toast("show");
// var progressPercent = 100;
// var progressBar = toast.find(".progress-bar");
var progressBar = toast.find(".progress-bar");
progressBar.on("animationend", function() {
toast.toast("hide");
setTimeout(function() {toast.remove()}, 1500);
});
// const toastProgressInterval = setInterval(function() {
// progressPercent -= 1;
// progressBar.css("width", progressPercent + "%");
// if (progressPercent < 0) {
// // toast.toast("hide");
// // setTimeout(function() {toast.remove(); }, 1500);
// clearInterval(toastProgressInterval);
// }
// }, (toastFadeDelayMs + 1500) / 100);
animateToastProgress(progressBar, toastFadeDelayMs);
}
function makeToast(typeName, title, message) {