forked from ScoDoc/ScoDoc
134 lines
3.6 KiB
Django/Jinja
134 lines
3.6 KiB
Django/Jinja
<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;
|
|
transition: all 0.3s ease-in-out;
|
|
pointer-events: none;
|
|
z-index: 999;
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.toast {
|
|
margin: 0.5vh 0;
|
|
display: flex;
|
|
width: fit-content;
|
|
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');
|
|
|
|
// 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);
|
|
|
|
// Définit la couleur de fond de la notification
|
|
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;
|
|
}
|
|
|
|
/**
|
|
* 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;
|
|
}
|
|
|
|
|
|
</script> |