fuzzyworld

dao-game / react / files / src / utils / snackbar.ts

Branch react · default branch · all branches

snackbar.ts

Blame: the commit that last changed each line · file · history

38c7e27c 2022-03-22 Pavel Safronov1import { delay } from "../utils/delay";
5648264d 2022-03-22 Pavel Safronov2
3export async function showSnackbar(
4 text: string,
5 fadeDurationMs: number = 500,
6 showDurationMs: number = 3000) {
7
8 const div = document.createElement('div');
9 div.id = 'snackbar';
10 div.classList.add('info');
11 div.classList.add('show');
12 div.innerText = text;
13 document.body.appendChild(div);
14
15 const invisibleKeyframe = {
16 opacity: 0,
17 bottom: '0px'
18 };
19 const visibleKeyframe = {
20 opacity: 1,
21 bottom: '30px'
22 };
23 const options = { duration: fadeDurationMs, iterations: 1 };
38c7e27c 2022-03-22 Pavel Safronov24 await div.animate([invisibleKeyframe, visibleKeyframe], options).finished;
5648264d 2022-03-22 Pavel Safronov25 await delay(showDurationMs);
38c7e27c 2022-03-22 Pavel Safronov26 await div.animate([visibleKeyframe, {
27 opacity: 0,
28 bottom: '30px'
29 }], options).finished;
5648264d 2022-03-22 Pavel Safronov30 div.parentNode.removeChild(div);
31}