Fipamo/src/com/ui/Notifications.js

import anime from 'animejs/lib/anime.es.js';
const notifcation = document.getElementById('notifications');
const notify = document.getElementById('notify-message');
const messageText = document.getElementById('message-text');
const notifyText = document.getElementById('notify-text');
const notifyProgress = document.getElementById('notify-progress');
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) {
		iconWorking.style.display = 'none';
		iconGood.style.display = 'none';
		iconLame.style.display = 'none';

		var color = '';
		if (status !== null) {
			anime({
				targets: notifyProgress,
				opacity: 0,
				easing: 'easeInOutQuint',
				duration: 500
			});
			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';
			anime({
				targets: notifyProgress,
				opacity: 1,
				easing: 'easeInOutQuint',
				duration: 500
			});
		}
		messageText.innerHTML = text;

		anime({
			targets: notifcation,
			marginTop: '-10',
			easing: 'easeInOutQuint',
			duration: 10,
			complete: () => {
				anime({
					targets: notify,
					rotateX: '0',
					easing: 'easeInOutQuint',
					duration: 700
				});
				anime({
					targets: notifyText,
					backgroundColor: color,
					easing: 'easeInOutQuint',
					duration: 700,
					complete: () => {
						setTimeout(() => {
							if (status !== null) {
								anime({
									targets: notify,
									rotateX: '-120',
									easing: 'easeInOutQuint',
									duration: 700,
									complete: () => {
										anime({
											targets: notifcation,
											marginTop: '-55',
											easing: 'easeInOutQuint',
											delay: 700,
											duration: 50
										});
										//notifcation.style.display = 'none';
									}
								});
							}
						}, 1000);
					}
				});
			}
		});
	}

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