2501a19685
There were some inconsistencies in the UI due to all the changes that were made to the styleshets, so I fixed the obvious ones that were show stoppers. There's more in there to be smoothed out, so this is just the start.
101 lines
2.4 KiB
JavaScript
101 lines
2.4 KiB
JavaScript
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
|
|
//--------------------------
|
|
}
|