From 2063bab6de9ba33a963e0a2b6ef40650bd0a6a86 Mon Sep 17 00:00:00 2001 From: Benzo <102178921+Benzo00@users.noreply.github.com> Date: Thu, 9 Jun 2022 01:58:39 +0200 Subject: [PATCH] fix(textui) support color codes --- [esx]/esx_notify/TextUI.lua | 18 + [esx]/esx_notify/fxmanifest.lua | 29 +- [esx]/esx_notify/nui/css/style.css | 102 +----- [esx]/esx_notify/nui/index.html | 133 +++++--- [esx]/esx_notify/nui/js/script.js | 525 +++++++---------------------- 5 files changed, 265 insertions(+), 542 deletions(-) create mode 100644 [esx]/esx_notify/TextUI.lua diff --git a/[esx]/esx_notify/TextUI.lua b/[esx]/esx_notify/TextUI.lua new file mode 100644 index 00000000..5753cd74 --- /dev/null +++ b/[esx]/esx_notify/TextUI.lua @@ -0,0 +1,18 @@ +local function TextUI(message, type) + SendNUIMessage({ + action = 'show', + message = message or 'ESX-TextUI', + type = type or 'info' + }) +end + +local function HideUI() + SendNUIMessage({ + action = 'hide' + }) +end + +exports('TextUI', TextUI) +exports('HideUI', HideUI) +RegisterNetEvent('ESX:TextUI', TextUI) +RegisterNetEvent('ESX:HideUI', HideUI) \ No newline at end of file diff --git a/[esx]/esx_notify/fxmanifest.lua b/[esx]/esx_notify/fxmanifest.lua index cbf467ef..d852702d 100644 --- a/[esx]/esx_notify/fxmanifest.lua +++ b/[esx]/esx_notify/fxmanifest.lua @@ -1,15 +1,14 @@ -fx_version 'adamant' -game 'gta5' -author 'ESX-Framework' -description 'ESX Notification' - -client_scripts { 'Notify.lua' } - -ui_page 'nui/index.html' - -files { - 'nui/index.html', - 'nui/js/*.js', - 'nui/css/*.css', - 'nui/img/*.png', -} +fx_version 'adamant' +game 'gta5' +author 'ESX-Framework' +description 'ESX TextUI' + +client_scripts { 'TextUI.lua' } +shared_script '@es_extended/imports.lua' +ui_page 'nui/index.html' + +files { + 'nui/index.html', + 'nui/js/*.js', + 'nui/css/*.css' +} diff --git a/[esx]/esx_notify/nui/css/style.css b/[esx]/esx_notify/nui/css/style.css index 05469ab9..61d24738 100644 --- a/[esx]/esx_notify/nui/css/style.css +++ b/[esx]/esx_notify/nui/css/style.css @@ -1,90 +1,14 @@ -:root { - --color: white; - --bgColor: #212121; -} - -* { - padding: 0; - margin: 0; -} - -body { - color: var(--color); - font-family: sans-serif; -} - -.notify { - display: none; - 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; - 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; -} - -.icon { - border: 0; -} - -.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 { - float: left; - margin-left: 5px; - font-size: 20px; -} - -@keyframes growDown { - 0% { - transform: scaleY(0); - } - 80% { - transform: scaleY(1.1) - } - 100% { - transform: scaleY(1) - } -} - -.prog { - flex: auto; - position:absolute; - margin: 0 auto; - left: 0; - bottom: 0; - background: rgb(75, 75, 75); - height: 4px; +:root { + --color: white; + --bgColor: #212121; +} + +* { + padding: 0; + margin: 0; +} + +body { + color: var(--color); + font-family: sans-serif; } \ No newline at end of file diff --git a/[esx]/esx_notify/nui/index.html b/[esx]/esx_notify/nui/index.html index 65579325..b1f1e739 100644 --- a/[esx]/esx_notify/nui/index.html +++ b/[esx]/esx_notify/nui/index.html @@ -1,39 +1,94 @@ - - - - - - - - - -
-
- -

-
-
-
-
-
- -

-
-
-
-
-
- -

-
-
-
-
-
- -

-
-
-
- - + + + + + + + + + + +
+
+ +

+
+
+
+
+ +

+
+
+
+
+ +

+
+
+ + + + \ No newline at end of file diff --git a/[esx]/esx_notify/nui/js/script.js b/[esx]/esx_notify/nui/js/script.js index eb734ef5..816f2cbe 100644 --- a/[esx]/esx_notify/nui/js/script.js +++ b/[esx]/esx_notify/nui/js/script.js @@ -1,399 +1,126 @@ -const w = window -const doc = document - - -$(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'}; - - if (e.data.type === "info") { - doc.getElementById("notifyInfo").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); - 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" - } - - 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" - } - } - - function RequestUpdateProgress(prc) { - $(".prog").css("width", prc + "%") - } - }) -}) +const w = window +const doc = document +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'}; + +$(function () { + w.addEventListener('message', function(e) { + $(".text").text('') + if (e.data.action === "show") { + if (e.data.type === "info") { + + finalarr = conv(e.data.message) + + $(".text").append(finalarr); + finalarr = [] + doc.getElementById("notifyInfo").style.display = "block"; + } else if (e.data.type === "error") { + finalarr = conv(e.data.message) + + $(".text").append(finalarr); + finalarr = [] + doc.getElementById("notifyError").style.display = "block"; + } else if (e.data.type === "success") { + finalarr = conv(e.data.message) + + $(".text").append(finalarr); + finalarr = [] + doc.getElementById("notifySuccess").style.display = "block"; + } + } else if (e.data.action === "hide") { + doc.getElementById("notifyInfo").style.display = "none"; + doc.getElementById("notifyError").style.display = "none"; + doc.getElementById("notifySuccess").style.display = "none"; + } + }) +}) + +function conv(spoop) { + let finalarr = [] + var arr = spoop.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") + x = i + 1 + if (i == 0) { + if (arr1.startsWith("~")) { + + } else { + let arr3 = $('' + arr[i] + ''); + arr3.css(whitec) + + finalarr.push(arr3) + } + } + + if (redTrue) { + arr3 = PushData(arr[x], redc) + + finalarr.push(arr3) + } else if (greenTrue) { + arr3 = PushData(arr[x], greenc) + + finalarr.push(arr3) + } else if (whiteTrue) { + arr3 = PushData(arr[x], whitec) + + finalarr.push(arr3) + } else if (blackTrue) { + arr3 = PushData(arr[x], blackc) + + finalarr.push(arr3) + } else if (blueTrue) { + arr3 = PushData(arr[x], bluec) + + finalarr.push(arr3) + } else if (yellowTrue) { + arr3 = PushData(arr[x], yellowc) + + finalarr.push(arr3) + } else if (greyTrue) { + arr3 = PushData(arr[x], greyc) + + finalarr.push(arr3) + } else if (darkgreyTrue) { + arr3 = PushData(arr[x], darkgreyc) + + finalarr.push(arr3) + } else if (orangeTrue) { + arr3 = PushData(arr[x], orangec) + + finalarr.push(arr3) + } else if (purpleTrue) { + arr3 = PushData(arr[x], purplec) + finalarr.push(arr3) + } + + + } + return finalarr +} +function PushData(data, color) { + + + let arr3 = $('' + data + ''); + arr3.css(color) + + return arr3 +} \ No newline at end of file