-
-
-
-
+
+
diff --git a/[esx]/esx_notify/nui/js/script.js b/[esx]/esx_notify/nui/js/script.js
index eb734ef5..947909fd 100644
--- a/[esx]/esx_notify/nui/js/script.js
+++ b/[esx]/esx_notify/nui/js/script.js
@@ -1,399 +1,74 @@
const w = window
-const doc = document
+// Gets the current icon it needs to use.
+const types = {
+ ["success"]: {
+ ["icon"]: "check_circle",
+ },
+ ["error"]: {
+ ["icon"]: "error",
+ },
+ ["info"]: {
+ ["icon"]: "info",
+ }
+}
-$(function () {
- w.addEventListener('message', function(e) {
- $(".text").text('')
- const start = new Date()
- const max = e.data.length
- const val = Math.floor(max/100)
- let current = ""
- let blackc = {'color': '#000'};
- let redc = {'color': '#F00'};
- let greenc = {'color': '#0F0'};
- let bluec = {'color': '#00F'};
- let yellowc = {'color': '#ff0'};
- let greyc = {'color': '#808080'};
- let darkgreyc = {'color': '#a9a9a9'};
- let orangec = {'color': '#FFA500'};
- let purplec = {'color': '#800080'};
- let whitec = {'color': '#FFF'};
+// the color codes example `i ~r~love~s~ donuts`
+const codes = {
+ "~r~": "red",
+ "~b~": "blue",
+ "~g~": "green",
+ "~y~": "yellow",
+ "~p~": "purple",
+ "~c~": "grey",
+ "~m~": "#212121",
+ "~u~": "black",
+ "~o~": "orange"
+}
- if (e.data.type === "info") {
- doc.getElementById("notifyInfo").style.display = "block";
- let finalarr = []
-
+w.addEventListener("message", (event) => {
+ notification({
+ type: event.data.type,
+ message: event.data.message,
+ length: event.data.length,
+ });
+});
+const replaceColors = (str, obj) => {
+ let strToReplace = str;
+ for (let id in obj) {
+ strToReplace = strToReplace.replace(new RegExp(id, "g"), obj[id]);
+ }
- var arr = e.data.message.split("~")
- for (let i = 0; i < arr.length; i++) {
- let arr1 = arr[i]
-
- let redTrue = arr1.startsWith("r")
- let greenTrue = arr1.startsWith("g")
- let whiteTrue = arr1.startsWith("w")
- let blackTrue = arr1.startsWith("u")
- let blueTrue = arr1.startsWith("b")
- let yellowTrue = arr1.startsWith("y")
- let greyTrue = arr1.startsWith("c")
- let darkgreyTrue = arr1.startsWith("m")
- let orangeTrue = arr1.startsWith("o")
- let purpleTrue = arr1.startsWith("p")
+ return strToReplace
+}
- if (i == 0) {
- if (arr1.startsWith("~")) {
+notification = (data) => {
+ for (color in codes) {
+ if (data["message"].includes(color)) {
+ let objArr = {};
+ objArr[color] = ``;
+ objArr["~s~"] = "";
- } else {
- let arr3 = $('' + arr[i] + '');
- arr3.css(whitec)
-
- finalarr.push(arr3)
- }
- }
+ let newStr = replaceColors(data["message"], objArr);
- if (redTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(redc)
-
- finalarr.push(arr3)
- } else if (greenTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(greenc)
-
- finalarr.push(arr3)
- } else if (whiteTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(whitec)
-
- finalarr.push(arr3)
- } else if (blackTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(blackc)
-
- finalarr.push(arr3)
- } else if (blueTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(bluec)
-
- finalarr.push(arr3)
- } else if (yellowTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(yellowc)
-
- finalarr.push(arr3)
- } else if (greyTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(greyc)
-
- finalarr.push(arr3)
- } else if (darkgreyTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(darkgreyc)
-
- finalarr.push(arr3)
- } else if (orangeTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(orangec)
-
- finalarr.push(arr3)
- } else if (purpleTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(purplec)
- finalarr.push(arr3)
- }
-
-
- }
- $(".text").append(finalarr);
- finalarr = []
- RequestAnimUpdate()
- current = "notifyInfo"
- } else if (e.data.type === "error") {
- doc.getElementById("notifyError").style.display = "block";
- let finalarr = []
-
-
-
-
- var arr = e.data.message.split("~")
- for (let i = 0; i < arr.length; i++) {
- let arr1 = arr[i]
-
- let redTrue = arr1.startsWith("r")
- let greenTrue = arr1.startsWith("g")
- let whiteTrue = arr1.startsWith("w")
- let blackTrue = arr1.startsWith("u")
- let blueTrue = arr1.startsWith("b")
- let yellowTrue = arr1.startsWith("y")
- let greyTrue = arr1.startsWith("c")
- let darkgreyTrue = arr1.startsWith("m")
- let orangeTrue = arr1.startsWith("o")
- let purpleTrue = arr1.startsWith("p")
-
- if (i == 0) {
- if (arr1.startsWith("~")) {
-
- } else {
- let arr3 = $('' + arr[i] + '');
- arr3.css(whitec)
-
- finalarr.push(arr3)
- }
- }
-
- if (redTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(redc)
-
- finalarr.push(arr3)
- } else if (greenTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(greenc)
-
- finalarr.push(arr3)
- } else if (whiteTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(whitec)
-
- finalarr.push(arr3)
- } else if (blackTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(blackc)
-
- finalarr.push(arr3)
- } else if (blueTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(bluec)
-
- finalarr.push(arr3)
- } else if (yellowTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(yellowc)
-
- finalarr.push(arr3)
- } else if (greyTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(greyc)
-
- finalarr.push(arr3)
- } else if (darkgreyTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(darkgreyc)
-
- finalarr.push(arr3)
- } else if (orangeTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(orangec)
-
- finalarr.push(arr3)
- } else if (purpleTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(purplec)
- finalarr.push(arr3)
- }
-
-
- }
- $(".text").append(finalarr);
- RequestAnimUpdate()
- current = "notifyError"
- } else if (e.data.type === "success") {
- doc.getElementById("notifySuccess").style.display = "block";
- let finalarr = []
-
-
-
-
- var arr = e.data.message.split("~")
- for (let i = 0; i < arr.length; i++) {
- let arr1 = arr[i]
-
- let redTrue = arr1.startsWith("r")
- let greenTrue = arr1.startsWith("g")
- let whiteTrue = arr1.startsWith("w")
- let blackTrue = arr1.startsWith("u")
- let blueTrue = arr1.startsWith("b")
- let yellowTrue = arr1.startsWith("y")
- let greyTrue = arr1.startsWith("c")
- let darkgreyTrue = arr1.startsWith("m")
- let orangeTrue = arr1.startsWith("o")
- let purpleTrue = arr1.startsWith("p")
-
- if (i == 0) {
- if (arr1.startsWith("~")) {
-
- } else {
- let arr3 = $('' + arr[i] + '');
- arr3.css(whitec)
-
- finalarr.push(arr3)
- }
- }
-
- if (redTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(redc)
-
- finalarr.push(arr3)
- } else if (greenTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(greenc)
-
- finalarr.push(arr3)
- } else if (whiteTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(whitec)
-
- finalarr.push(arr3)
- } else if (blackTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(blackc)
-
- finalarr.push(arr3)
- } else if (blueTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(bluec)
-
- finalarr.push(arr3)
- } else if (yellowTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(yellowc)
-
- finalarr.push(arr3)
- } else if (greyTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(greyc)
-
- finalarr.push(arr3)
- } else if (darkgreyTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(darkgreyc)
-
- finalarr.push(arr3)
- } else if (orangeTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(orangec)
-
- finalarr.push(arr3)
- } else if (purpleTrue) {
- x = i + 1
-
-
- let arr3 = $('' + arr[x] + '');
- arr3.css(purplec)
- finalarr.push(arr3)
- }
-
-
- }
- $(".text").append(finalarr);
- RequestAnimUpdate()
- current = "notifySuccess"
+ data["message"] = newStr
}
+ }
- function RequestAnimUpdate() {
- const now = new Date()
- const diff = now.getTime() - start.getTime();
- const prc = Math.round((diff/max)*100)
- if (prc <= 100) {
- RequestUpdateProgress(prc)
- setTimeout(RequestAnimUpdate, val)
- } else {
- doc.getElementById(current).style.display = "none"
- }
- }
+ const notification = $(`
+
+
+ `).appendTo(`#root`);
- function RequestUpdateProgress(prc) {
- $(".prog").css("width", prc + "%")
- }
- })
-})
+ setTimeout(() => {
+ notification.fadeOut(700);
+ }, data.length);
+
+ return notification;
+}
diff --git a/[esx]/esx_notify/readme.md b/[esx]/esx_notify/readme.md
index 18ed3765..87236f6d 100644
--- a/[esx]/esx_notify/readme.md
+++ b/[esx]/esx_notify/readme.md
@@ -1,13 +1,42 @@
-## How to change style and time
-
-* ESX.ShowNotification("Text Here", "error", 3000) -- Error Notification
-* ESX.ShowNotification("Text Here", "success", 3000) -- Success Notification
-* ESX.ShowNotification("Text Here", "info", 3000) -- Info
+
+ ${types[data.type]["icon"]}
+
+ ${data["message"]}
+ESX Notify
-* By doing ESX.ShowNotification("Text Here") it will be default/info +Change style and time
-# Exports -* exports["esx_notify"]:Notify("info", 3000, "Text Here") +```lua +---usage: message/type/length +ESX.ShowNotification("message here", "error", 3000) +ESX.ShowNotification("message here", "success", 3000) +ESX.ShowNotification("message here", "info", 3000) -# Events -* TriggerEvent("ESX:Notify", "info", 3000, "Text Here") +ESX.ShowNotification("text here") -- Default will time and type will be info/3000 +``` + +Export Usage
+ +```lua +exports["esx_notify"]:Notify("info", 3000, "message here") +``` + +Event Usage
+ +```lua +TriggerEvent("ESX:Notify", "info", 3000, "message here") +``` + +Color Code Usage
+ +```lua +~r~ = Red +~b~ = Blue +~g~ = Green +~y~ = Yellow +~p~ = Purple +~c~ = Grey +~m~ = Dark Grey +~u~ = Black +~o~ = Orange + +ESX.ShowNotification("I i ~r~love~s~ donuts", "success", 3000) +``` + +