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

snackbar.ts

1	import { delay } from "../utils/delay";
2
3	export 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 };
24	await div.animate([invisibleKeyframe, visibleKeyframe], options).finished;
25	await delay(showDurationMs);
26	await div.animate([visibleKeyframe, {
27	opacity: 0,
28	bottom: '30px'
29	}], options).finished;
30	div.parentNode.removeChild(div);
31	}