You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
2.0 KiB
JavaScript
83 lines
2.0 KiB
JavaScript
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
|
|
//--------------------------
|
|
}
|