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.
102 lines
2.8 KiB
JavaScript
102 lines
2.8 KiB
JavaScript
import anime from "animejs/lib/anime.es.js";
|
|
const notifcation = document.getElementById("notifications");
|
|
const notify = document.getElementById("notifyMessage");
|
|
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
|
|
//--------------------------
|
|
}
|