Fipamo/src/com/ui/Notifications.js

import anime from 'animejs/lib/anime.es.js';
const notifcation = document.querySelector('[role="notify-message"]');
const notify = document.getElementById('notify-message');
const responseText = document.querySelector('[role="response-text"]');
const notifyText = document.querySelector('[role="notify-text"]');
const notifyIcons = document.querySelector('[role="notify-icons"]');
//const notifyProgress = document.getElementById('notify-progress');
const iconGood = document.querySelector('[role="notify-good"]');
const iconNotGood = document.querySelector('[role="notify-notgood"]');
const iconWorking = document.querySelector('[role="notify-working"]');

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

	alert(text, status) {
		iconWorking.style.display = 'none';
		iconGood.style.display = 'none';
		iconNotGood.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';
				iconNotGood.style.display = 'block';
			}
		} else {
			color = '#200317';
			iconWorking.style.display = 'block';
		}
		responseText.innerHTML = text;

		anime({
			targets: notifyIcons,
			width: 39,
			opacity: 1,
			easing: 'easeInQuint',
			duration: 300
		});

		anime({
			targets: notifyText,
			backgroundColor: color,
			opacity: 1,
			easing: 'easeInOutQuad',
			duration: 400,
			complete: () => {
				setTimeout(() => {
					anime({
						targets: notifyText,
						backgroundColor: color,
						opacity: 0,
						easing: 'easeInOutQuad',
						duration: 400
					});

					anime({
						targets: notifyIcons,
						width: 0,
						opacity: 0,
						easing: 'easeOutQuint',
						duration: 350
					});
				}, 2000);
			}
		});
	}

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