Fipamo/src/com/ui/Notifications.js

import anime from 'animejs/lib/anime.es.js';
const notifcation = document.getElementById('notifications');
const messageText = document.getElementById('message-text');
const iconGood = document.getElementById('notify-good');
const iconLame = document.getElementById('notify-lame');
const iconWorking = document.getElementById('notify-working');

export default class Notfications {
	//--------------------------
	// constructor
	//--------------------------
	constructor() {}
	//--------------------------
	// methods
	//--------------------------

	alert(text, status) {
		//notifcation.style.display = 'flex';
		iconWorking.style.display = 'none';
		iconGood.style.display = 'none';
		iconLame.style.display = 'none';
		var color = '';
		if (status !== null) {
			if (status) {
				color = '#32cd32';
				iconWorking.style.display = 'none';
				iconGood.style.display = 'block';
			} else {
				color = '#F64747';
				iconWorking.style.display = 'none';
				iconLame.style.display = 'block';
			}
		} else {
			color = '#200317';
			iconWorking.style.display = 'block';
		}

		notifcation.classList.remove('notify-close');
		notifcation.classList.add('notify-open');
		messageText.innerHTML = text;
		anime({
			targets: messageText,
			backgroundColor: color,
			easing: 'easeInOutQuint',
			duration: 700,
			complete: () => {
				if (status !== null) {
					setTimeout(() => {
						notifcation.classList.add('notify-close');
						notifcation.classList.remove('notify-open');
					}, 1000);
				}
			}
		});
		/*
		anime({
			targets: message,
			marginTop: '-20px',
			easing: 'easeInOutQuint',
			duration: 500,
			opacity: 1,
			complete: () => {
				setTimeout(() => {
					anime({
						targets: message,
						marginTop: '-125px',
						easing: 'easeOutQuint',
						duration: 500,
						opacity: 0,
						complete: () => {
							notifcation.style.display = 'none';
						}
					});
				}, 1000);
			}
		});
		*/
	}

	//--------------------------
	// event handlers
	//--------------------------
}