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

88 lines
1.6 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;
}
.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
}
</script>