ScoDoc-PE/app/templates/assiduites/widgets/toast.j2

117 lines
2.4 KiB
Plaintext
Raw Normal View History

2023-04-17 15:44:55 +02:00
<div class="toast-holder">
</div>
<style>
.toast-holder {
position: fixed;
right: 1vw;
top: 5vh;
height: 80vh;
width: 20vw;
display: flex;
flex-direction: column;
flex-wrap: wrap;
transition: all 0.3s ease-in-out;
pointer-events: none;
z-index: 999;
2023-04-17 15:44:55 +02:00
}
.toast {
margin: 0.5vh 0;
display: flex;
width: 100%;
height: fit-content;
justify-content: flex-start;
align-items: center;
border-radius: 10px;
padding: 7px;
z-index: 250;
transition: all 0.3s ease-in-out;
}
.fadeIn {
animation: fadeIn 0.5s ease-in;
}
.fadeOut {
animation: fadeOut 0.5s ease-in;
}
.toast-content {
color: whitesmoke;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
<script>
function generateToast(content, color = "var(--color-present)", ttl = 5) {
2023-04-17 15:44:55 +02:00
const toast = document.createElement('div')
toast.classList.add('toast', 'fadeIn')
const toastContent = document.createElement('div')
toastContent.classList.add('toast-content')
toastContent.appendChild(content)
toast.style.backgroundColor = color;
setTimeout(() => { toast.classList.replace('fadeIn', 'fadeOut') }, Math.max(0, ttl * 1000 - 500))
setTimeout(() => { toast.remove() }, Math.max(0, ttl * 1000))
toast.appendChild(toastContent)
return toast
}
function pushToast(toast) {
document
.querySelector(".toast-holder")
.appendChild(
toast
);
}
2023-04-17 15:44:55 +02:00
function getToastColorFromEtat(etat) {
let color;
switch (etat.toUpperCase()) {
case "PRESENT":
color = "var(--color-present)";
break;
case "ABSENT":
color = "var(--color-absent)";
break;
case "RETARD":
color = "var(--color-retard)";
break;
default:
color = "#AAA";
break;
}
return color;
}
2023-04-17 15:44:55 +02:00
</script>