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

134 lines
3.6 KiB
Plaintext
Raw Permalink 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;
align-items: end;
2023-04-17 15:44:55 +02:00
transition: all 0.3s ease-in-out;
pointer-events: none;
z-index: 999;
overflow: hidden;
2023-04-17 15:44:55 +02:00
}
.toast {
margin: 0.5vh 0;
display: flex;
width: fit-content;
2023-04-17 15:44:55 +02:00
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>
/**
* Génère une notification (toast) avec les paramètres spécifiés.
* @param {HTMLElement} content - Le contenu de la notification.
* @param {string} [color="var(--color-present)"] - La couleur de fond de la notification (optionnelle).
* @param {number} [ttl=5] - Le temps de vie de la notification en secondes (optionnelle).
* @returns {HTMLElement} - L'élément toast créé.
*/
function generateToast(content, color = "var(--color-present)", ttl = 5) {
// Crée l'élément de notification et ajoute les classes de style
const toast = document.createElement('div');
toast.classList.add('toast', 'fadeIn');
2023-04-17 15:44:55 +02:00
// Crée le conteneur de contenu de la notification et y ajoute le contenu
const toastContent = document.createElement('div');
toastContent.classList.add('toast-content');
toastContent.appendChild(content);
2023-04-17 15:44:55 +02:00
// Définit la couleur de fond de la notification
2023-04-17 15:44:55 +02:00
toast.style.backgroundColor = color;
// Définit les temporisations pour les animations de disparition et la suppression de la notification
setTimeout(() => { toast.classList.replace('fadeIn', 'fadeOut') }, Math.max(0, ttl * 1000 - 500));
setTimeout(() => { toast.remove() }, Math.max(0, ttl * 1000));
// Ajoute le contenu à la notification
toast.appendChild(toastContent);
return toast;
2023-04-17 15:44:55 +02:00
}
/**
* Ajoute une notification (toast) à l'élément conteneur des toasts.
* @param {HTMLElement} toast - L'élément toast à ajouter.
*/
function pushToast(toast) {
document.querySelector(".toast-holder").appendChild(toast);
}
/**
* Obtient la couleur de fond de la notification en fonction de l'état spécifié.
* @param {string} etat - L'état de la notification (PRESENT, ABSENT, RETARD).
* @returns {string} - La couleur correspondant à l'état.
*/
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"; // Couleur par défaut si l'état est inconnu
break;
}
return color;
}
2023-04-17 15:44:55 +02:00
</script>