98 lines
2.6 KiB
JavaScript
98 lines
2.6 KiB
JavaScript
if (location.pathname.match(/fullcpgrid/i) ? true : false) {
|
|
document.documentElement.style.fontSize = "32px";
|
|
document.querySelector(".notifications").style.transform =
|
|
"translate(0.5rem, calc(-50% + 3rem))";
|
|
}
|
|
|
|
class Notifications {
|
|
constructor(el) {
|
|
this.el = el;
|
|
}
|
|
|
|
createDiv(className = "") {
|
|
const el = document.createElement("div");
|
|
el.classList.add(className);
|
|
return el;
|
|
}
|
|
addText(el, text) {
|
|
el.appendChild(document.createTextNode(text));
|
|
}
|
|
|
|
create(
|
|
title = "Untitled notification",
|
|
description = "",
|
|
duration = 2,
|
|
destroyOnClick = false,
|
|
clickFunction = undefined
|
|
) {
|
|
function destroy(animate) {
|
|
if (animate) {
|
|
notiEl.classList.add("out");
|
|
notiEl.addEventListener("animationend", () => {
|
|
notiEl.remove();
|
|
});
|
|
} else {
|
|
notiEl.remove();
|
|
}
|
|
}
|
|
|
|
const notiEl = this.createDiv("noti");
|
|
const notiCardEl = this.createDiv("noticard");
|
|
const glowEl = this.createDiv("notiglow");
|
|
const borderEl = this.createDiv("notiborderglow");
|
|
|
|
const titleEl = this.createDiv("notititle");
|
|
this.addText(titleEl, title);
|
|
|
|
const descriptionEl = this.createDiv("notidesc");
|
|
this.addText(descriptionEl, description);
|
|
|
|
notiEl.appendChild(notiCardEl);
|
|
notiCardEl.appendChild(glowEl);
|
|
notiCardEl.appendChild(borderEl);
|
|
notiCardEl.appendChild(titleEl);
|
|
notiCardEl.appendChild(descriptionEl);
|
|
|
|
this.el.appendChild(notiEl);
|
|
|
|
console.log("height", notiCardEl.scrollHeight);
|
|
requestAnimationFrame(function () {
|
|
notiEl.style.height =
|
|
"calc(0.25rem + " + notiCardEl.getBoundingClientRect().height + "px)";
|
|
});
|
|
|
|
notiEl.addEventListener("mousemove", (event) => {
|
|
const rect = notiCardEl.getBoundingClientRect();
|
|
const localX = (event.clientX - rect.left) / rect.width;
|
|
const localY = (event.clientY - rect.top) / rect.height;
|
|
|
|
console.log(localX, localY);
|
|
glowEl.style.left = localX * 100 + "%";
|
|
glowEl.style.top = localY * 100 + "%";
|
|
|
|
borderEl.style.left = localX * 100 + "%";
|
|
borderEl.style.top = localY * 100 + "%";
|
|
});
|
|
|
|
if (clickFunction != undefined) {
|
|
notiEl.addEventListener("click", clickFunction);
|
|
}
|
|
|
|
if (destroyOnClick) {
|
|
notiEl.addEventListener("click", () => destroy(true));
|
|
}
|
|
|
|
if (duration != 0) {
|
|
setTimeout(() => {
|
|
notiEl.classList.add("out");
|
|
notiEl.addEventListener("animationend", () => {
|
|
notiEl.remove();
|
|
});
|
|
}, duration * 1000);
|
|
}
|
|
return notiEl;
|
|
}
|
|
}
|
|
|
|
notis = new Notifications(document.querySelector(".notifications"));
|