ScoDoc/app/templates/assiduites/toast.j2

<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;

    }

    .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 = "#12d3a5", ttl = 5) {
        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
            );
    }




</script>