fipamo/public/assets/scripts/dash/app/ui/Notifications.js

import anime from '../vendor/anime.es.js';
const notifcation = document.querySelector('.notify-message');
const notify = document.getElementById('notify-message');
const responseText = document.querySelector('.response-text');
const notifyText = document.querySelector('.notify-text');
const notifyIcons = document.querySelector('.notify-icons');
//const notifyProgress = document.getElementById('notify-progress');
const iconGood = document.querySelector('.notify-good');
const iconNotGood = document.querySelector('.notify-notgood');
const iconWorking = document.querySelector('.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 = '';
		responseText.innerHTML = text;
		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';
		}

		new anime({
			targets: document.querySelector('.top-nav'),
			rotateX: '180deg',
			easing: 'easeOutQuint'
		});

		new anime({
			targets: document.querySelector('.notify'),
			rotateX: '10deg',
			easing: 'easeOutQuint',
			complete: () => {
				new anime({
					targets: notifyIcons,
					width: 39,
					opacity: 1,
					easing: 'easeInQuint',
					duration: 300
				});

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

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

								new anime({
									targets: document.querySelector('.top-nav'),
									rotateX: '0deg',
									easing: 'easeOutQuint'
								});

								new anime({
									targets: document.querySelector('.notify'),
									rotateX: '180deg',
									easing: 'easeOutQuint'
								});
							}
						}, 2500);
					}
				});
			}
		});
	}

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