-
-
+
+
From 1f2f1e409eb5d2bc2fbee22a3d6ac663ad9a5054 Mon Sep 17 00:00:00 2001
From: xorzo <80540494+xorzo1@users.noreply.github.com>
Date: Tue, 5 Jul 2022 13:59:37 +0200
Subject: [PATCH 09/12] Update script.js
---
[esx]/esx_notify/nui/js/script.js | 447 ++++--------------------------
1 file changed, 61 insertions(+), 386 deletions(-)
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 = $(`
+
+
+
${types[data.type]["icon"]}
+
${data["message"]}
+
+
+ `).appendTo(`#root`);
- function RequestUpdateProgress(prc) {
- $(".prog").css("width", prc + "%")
- }
- })
-})
+ setTimeout(() => {
+ notification.fadeOut(700);
+ }, data.length);
+
+ return notification;
+}
From d34bf5b4a459b9e2a20e928428ca08fef156b450 Mon Sep 17 00:00:00 2001
From: xorzo <80540494+xorzo1@users.noreply.github.com>
Date: Tue, 5 Jul 2022 14:00:01 +0200
Subject: [PATCH 10/12] Update style.css
---
[esx]/esx_notify/nui/css/style.css | 117 ++++++++++++++---------------
1 file changed, 57 insertions(+), 60 deletions(-)
diff --git a/[esx]/esx_notify/nui/css/style.css b/[esx]/esx_notify/nui/css/style.css
index 05469ab9..9944ed69 100644
--- a/[esx]/esx_notify/nui/css/style.css
+++ b/[esx]/esx_notify/nui/css/style.css
@@ -1,73 +1,80 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Poppins:wght@300;400;500;600;800&display=swap');
+
:root {
- --color: white;
- --bgColor: #212121;
+ --color: #919191;
}
* {
- padding: 0;
+ border: 0;
margin: 0;
+ padding: 0;
+ box-sizing: border-box;
}
body {
+ width: 100vw;
+ height: 100vh;
color: var(--color);
- font-family: sans-serif;
+ font-weight: 100;
+ font-family: 'Poppins', sans-serif;
}
-.notify {
- display: none;
+#root {
+ display: grid;
+ justify-content: center;
+}
+
+#root .notify {
+ display: flex;
+ position: relative;
flex: auto;
- border-left: 5px solid rgb(34, 132, 189);
- position:absolute;
- margin: 0 auto;
- left: 0;
- right: 0;
- top: 5%;
- min-width:15%;
- width:fit-content;
- height:50px;
+ min-width: 20rem;
+ width: fit-content;
+ height: 3.5rem;
background: rgba(5,5, 5, 0.9);
- border-radius: 5px;
- animation: growDown 300ms ease-in-out;
- padding-right: 10px;
-}
-.success {
- border-left: 5px solid rgb(33, 223, 15) !important;
-}
-.custom {
-
-}
-.error {
- border-left: 5px solid rgb(231, 35, 28) !important;
+ border-radius: .5rem;
+ margin-top: .5rem;
+ animation: anim 300ms ease-in-out;
+ align-items: center;
}
-.icon {
- border: 0;
+#root .innerText {
+ padding-left: .4rem;
+ padding-right: .4rem;
+ width: 100%;
}
-.innerText {
- flex: auto;
- margin-top: 15px;
- width:100%;
-}
-
-.innerText{
- margin-left: 10px;
-}
-
-p {
- flex: auto;
- word-wrap: break-word;
- margin-left: 40px;
- margin-top: 17px;
-}
-
-.innerText .icon {
+#root .icon {
float: left;
- margin-left: 5px;
- font-size: 20px;
+ color: #fff;
}
-@keyframes growDown {
+#root .text {
+ display: inline-block;
+ margin-left: .5rem;
+}
+
+#root .error {
+ border-bottom: 3px solid #c0392b;
+}
+
+#root .success {
+ border-bottom: 3px solid #2ecc71;
+}
+
+#root .info {
+ border-bottom: 3px solid #2980b9;
+}
+
+.material-symbols-outlined {
+ font-variation-settings:
+ 'FILL' 0,
+ 'wght' 400,
+ 'GRAD' 0,
+ 'opsz' 48
+}
+
+@keyframes anim {
0% {
transform: scaleY(0);
}
@@ -78,13 +85,3 @@ p {
transform: scaleY(1)
}
}
-
-.prog {
- flex: auto;
- position:absolute;
- margin: 0 auto;
- left: 0;
- bottom: 0;
- background: rgb(75, 75, 75);
- height: 4px;
-}
\ No newline at end of file
From 8e0fd42d1e096991ffd4e7742170449a457aa2f2 Mon Sep 17 00:00:00 2001
From: xorzo <80540494+xorzo1@users.noreply.github.com>
Date: Tue, 5 Jul 2022 14:01:01 +0200
Subject: [PATCH 11/12] Update fxmanifest.lua
---
[esx]/esx_notify/fxmanifest.lua | 6 +++++-
1 file changed, 5 insertions(+), 1 deletion(-)
diff --git a/[esx]/esx_notify/fxmanifest.lua b/[esx]/esx_notify/fxmanifest.lua
index cbf467ef..ae7e5847 100644
--- a/[esx]/esx_notify/fxmanifest.lua
+++ b/[esx]/esx_notify/fxmanifest.lua
@@ -1,7 +1,11 @@
fx_version 'adamant'
+lua54 'yes'
game 'gta5'
+
author 'ESX-Framework'
-description 'ESX Notification'
+description 'ESX Notification system for esx_legacy'
+
+shared_script '@es_extended/imports.lua'
client_scripts { 'Notify.lua' }
From 129a1b17483658f77c86743d60316ba9fdf54b21 Mon Sep 17 00:00:00 2001
From: xorzo <80540494+xorzo1@users.noreply.github.com>
Date: Tue, 5 Jul 2022 14:04:52 +0200
Subject: [PATCH 12/12] Update style.css
---
[esx]/esx_notify/nui/css/style.css | 1 +
1 file changed, 1 insertion(+)
diff --git a/[esx]/esx_notify/nui/css/style.css b/[esx]/esx_notify/nui/css/style.css
index 9944ed69..334ae6c5 100644
--- a/[esx]/esx_notify/nui/css/style.css
+++ b/[esx]/esx_notify/nui/css/style.css
@@ -17,6 +17,7 @@ body {
color: var(--color);
font-weight: 100;
font-family: 'Poppins', sans-serif;
+ overflow: hidden;
}
#root {
From 562e12326f6395bb784ade203680282ae634ad4b Mon Sep 17 00:00:00 2001
From: xorzo <80540494+xorzo1@users.noreply.github.com>
Date: Tue, 5 Jul 2022 13:51:35 +0200
Subject: [PATCH 02/12] Update readme.md
---
[esx]/esx_notify/readme.md | 2 ++
1 file changed, 2 insertions(+)
diff --git a/[esx]/esx_notify/readme.md b/[esx]/esx_notify/readme.md
index ec9aaea9..a59f22b6 100644
--- a/[esx]/esx_notify/readme.md
+++ b/[esx]/esx_notify/readme.md
@@ -2,12 +2,14 @@