93 lines
2.6 KiB
JavaScript
93 lines
2.6 KiB
JavaScript
const w = window;
|
|
const doc = document;
|
|
let lastType = {};
|
|
|
|
// Gets the current icon it needs to use.
|
|
const types = {
|
|
["success"]: {
|
|
["message"]: "successMessage",
|
|
["id"]: "notifySuccess",
|
|
},
|
|
["error"]: {
|
|
["message"]: "errorMessage",
|
|
["id"]: "notifyError",
|
|
},
|
|
["info"]: {
|
|
["message"]: "infoMessage",
|
|
["id"]: "notifyInfo",
|
|
},
|
|
};
|
|
|
|
// the color codes example `i ~r~love~s~ donuts`
|
|
const codes = {
|
|
"~r~": "#c0392b",
|
|
"~b~": "#378cbf",
|
|
"~g~": "#2ecc71",
|
|
"~y~": "yellow",
|
|
"~p~": "purple",
|
|
"~c~": "grey",
|
|
"~m~": "#212121",
|
|
"~u~": "black",
|
|
"~o~": "#fb9b04",
|
|
};
|
|
|
|
w.addEventListener("message", (event) => {
|
|
if (event.data.action === "show") {
|
|
if (lastType.id !== undefined) {
|
|
doc.getElementById(lastType["id"]).style.display = "none";
|
|
notification({
|
|
type: event.data.type,
|
|
message: event.data.message,
|
|
});
|
|
} else {
|
|
notification({
|
|
type: event.data.type,
|
|
message: event.data.message,
|
|
});
|
|
}
|
|
} else if (event.data.action === "hide") {
|
|
if (lastType !== "") {
|
|
doc.getElementById(lastType["id"]).classList.add("fadeOut");
|
|
setTimeout(() => {
|
|
doc.getElementById(lastType["id"]).classList.remove("fadeOut");
|
|
doc.getElementById(lastType["id"]).style.display = "none";
|
|
doc.getElementById(lastType["message"]).innerHTML = "";
|
|
}, 300);
|
|
} else {
|
|
console.log("There isn't a textUI displaying!?");
|
|
}
|
|
}
|
|
});
|
|
|
|
const replaceColors = (str, obj) => {
|
|
let strToReplace = str;
|
|
|
|
for (let id in obj) {
|
|
strToReplace = strToReplace.replace(new RegExp(id, "g"), obj[id]);
|
|
}
|
|
|
|
return strToReplace;
|
|
};
|
|
|
|
notification = (data) => {
|
|
for (color in codes) {
|
|
if (data["message"].includes(color)) {
|
|
let objArr = {};
|
|
objArr[color] = `<span style="color: ${codes[color]}">`;
|
|
objArr["~s~"] = "</span>";
|
|
|
|
let newStr = replaceColors(data["message"], objArr);
|
|
|
|
data["message"] = newStr;
|
|
}
|
|
}
|
|
|
|
doc.getElementById(types[data.type]["id"]).style.display = "block";
|
|
doc.getElementById(types[data.type]["id"]).classList.add("fadeIn");
|
|
setTimeout(() => {
|
|
doc.getElementById(types[data.type]["id"]).classList.remove("fadeIn");
|
|
lastType = types[data.type];
|
|
doc.getElementById(types[data.type]["message"]).innerHTML = data["message"];
|
|
}, 300);
|
|
};
|