starred/esx_core
1
0
Fork 0
mirror of https://github.com/esx-framework/esx_core.git synced 2026-08-31 02:08:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #332 from xorzo1/main

Browse Source 
refactor(esx_textui)
This commit is contained in:
Benzo
2022-07-06 17:50:17 +02:00
committed by GitHub
parent 0f37070078 0e2c230916
commit 4301f8b4c4
4 changed files with 180 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files
[esx]/esx_textui/TextUI.lua
+23 -1
View File
@@ -1,3 +1,7 @@
Debug = false
---@param message any
---@param type string
local function TextUI(message, type)
SendNUIMessage({
action = 'show',
@@ -15,4 +19,22 @@ end
exports('TextUI', TextUI)
exports('HideUI', HideUI)
RegisterNetEvent('ESX:TextUI', TextUI)
RegisterNetEvent('ESX:HideUI', HideUI)
RegisterNetEvent('ESX:HideUI', HideUI)
if Debug then
RegisterCommand("textui:error", function()
TriggerEvent("ESX:TextUI", "i ~r~love~s~ donuts", "error")
end)
RegisterCommand("textui:success", function()
TriggerEvent("ESX:TextUI", "i ~r~love~s~ donuts", "success")
end)
RegisterCommand("textui:info", function()
TriggerEvent("ESX:TextUI", "i ~r~love~s~ donuts", "info")
end)
RegisterCommand("textui:hide", function()
TriggerEvent("ESX:HideUI")
end)
end
[esx]/esx_textui/nui/css/style.css
+69 -1
View File
@@ -6,9 +6,77 @@
* {
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
}
body {
color: var(--color);
font-family: sans-serif;
}
}
.notify {
display: none;
position: absolute;
right: 2%;
bottom: 50%;
flex: auto;
min-width: 15%;
width: fit-content;
height: 50px;
background: rgba(5,5,5,.9);
border-radius: .5rem;
animation: growDown 300ms ease-in-out;
align-items: center;
}
.error {
border-left: 5px solid #c0392b;
}
.success {
border-left: 5px solid #2ecc71;
}
.info {
border-left: 5px solid #2980b9;
}
.innerText {
padding-left: .4rem;
padding-right: .4rem;
padding-top: 12.5px;
width: 100%;
height: 100%;
}
.innerText .icon {
float: left;
}
.innerText .text {
display: inline-block;
margin-left: .5rem;
margin-top: 4px;
}
@keyframes growDown {
0% {
transform: scaleY(0);
}
80% {
transform: scaleY(1.1)
}
100% {
transform: scaleY(1)
}
}
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 48
}
[esx]/esx_textui/nui/index.html
+5 -69
View File
@@ -1,94 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
</head>
<body>
<div id="notifyInfo" class="notify">
<div id="notifyInfo" class="notify info">
<div class="innerText">
<i class="fas fa-info-circle icon info"></i>
<span class="material-symbols-outlined icon">info</span>
<p class="text" id="infoMessage"></p>
</div>
</div>
<div id="notifySuccess" class="notify success">
<div class="innerText">
<i class="fas fa-check-circle icon info"></i>
<span class="material-symbols-outlined icon">check_circle</span>
<p class="text" id="successMessage"></p>
</div>
</div>
<div id="notifyError" class="notify error">
<div class="innerText">
<i class="fas fa-exclamation-circle icon info"></i>
<span class="material-symbols-outlined icon">error</span>
<p class="text" id="errorMessage"></p>
</div>
</div>
</body>
</html>
<style>
.notify {
flex: auto;
display: none;
border-left: 5px solid rgb(34, 132, 189);
position:absolute;
margin: 0 auto;
right: 2%;
bottom: 50%;
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;
}
.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)
}
}
</style>
[esx]/esx_textui/nui/js/script.js
+83 -124
View File
@@ -1,126 +1,85 @@
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'};
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~": "red",
"~b~": "blue",
"~g~": "green",
"~y~": "yellow",
"~p~": "purple",
"~c~": "grey",
"~m~": "#212121",
"~u~": "black",
"~o~": "orange"
}
w.addEventListener('message', (event) => {
if (event.data.action === "show") {
if (lastType) {
doc.getElementById(lastType).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).style.display = "none"
} 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";
lastType = types[data.type]["id"]
doc.getElementById(types[data.type]["message"]).innerHTML = data["message"]
$(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 = $('<span>' + arr[i] + '</span>');
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 = $('<span>' + data + '</span>');
arr3.css(color)
return arr3
}