|
|
|
@ -16,10 +16,10 @@ export default class Notfications {
|
|
|
|
|
//--------------------------
|
|
|
|
|
|
|
|
|
|
alert(text, status) {
|
|
|
|
|
notifcation.style.display = 'block';
|
|
|
|
|
iconWorking.style.display = 'none';
|
|
|
|
|
iconGood.style.display = 'none';
|
|
|
|
|
iconLame.style.display = 'none';
|
|
|
|
|
|
|
|
|
|
var color = '';
|
|
|
|
|
if (status !== null) {
|
|
|
|
|
if (status) {
|
|
|
|
@ -35,50 +35,50 @@ export default class Notfications {
|
|
|
|
|
color = '#200317';
|
|
|
|
|
iconWorking.style.display = 'block';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
notify.classList.remove('notify-close');
|
|
|
|
|
notify.classList.add('notify-open');
|
|
|
|
|
messageText.innerHTML = text;
|
|
|
|
|
|
|
|
|
|
anime({
|
|
|
|
|
targets: messageText,
|
|
|
|
|
backgroundColor: color,
|
|
|
|
|
easing: 'easeInOutQuint',
|
|
|
|
|
duration: 700,
|
|
|
|
|
complete: () => {
|
|
|
|
|
if (status !== null) {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
notify.addEventListener('transitionend', () => {
|
|
|
|
|
notifcation.style.display = 'none';
|
|
|
|
|
});
|
|
|
|
|
notify.classList.add('notify-close');
|
|
|
|
|
notify.classList.remove('notify-open');
|
|
|
|
|
}, 1000);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
/*
|
|
|
|
|
anime({
|
|
|
|
|
targets: message,
|
|
|
|
|
marginTop: '-20px',
|
|
|
|
|
targets: notifcation,
|
|
|
|
|
marginTop: '0',
|
|
|
|
|
easing: 'easeInOutQuint',
|
|
|
|
|
duration: 500,
|
|
|
|
|
opacity: 1,
|
|
|
|
|
duration: 10,
|
|
|
|
|
complete: () => {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
anime({
|
|
|
|
|
targets: message,
|
|
|
|
|
marginTop: '-125px',
|
|
|
|
|
easing: 'easeOutQuint',
|
|
|
|
|
duration: 500,
|
|
|
|
|
opacity: 0,
|
|
|
|
|
complete: () => {
|
|
|
|
|
notifcation.style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}, 1000);
|
|
|
|
|
anime({
|
|
|
|
|
targets: notify,
|
|
|
|
|
rotateX: '0',
|
|
|
|
|
easing: 'easeInOutQuint',
|
|
|
|
|
duration: 700
|
|
|
|
|
});
|
|
|
|
|
anime({
|
|
|
|
|
targets: messageText,
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
*/
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
//--------------------------
|
|
|
|
|