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 //-------------------------- }