Merge pull request #331 from xorzo1/main

refactor(esx_notify)
This commit is contained in:
Benzo
2022-07-05 14:24:02 +02:00
committed by GitHub
6 changed files with 170 additions and 488 deletions
+3 -3
View File
@@ -1,3 +1,6 @@
---@param type string the notification type
---@param length number the length of the notification
---@param message any the message :D
local function Notify(type, length, message)
SendNuiMessage(json.encode({
type = type or "info",
@@ -6,8 +9,5 @@ local function Notify(type, length, message)
}))
end
exports('Notify', Notify)
RegisterNetEvent("ESX:Notify", Notify)
+5 -1
View File
@@ -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' }
+58 -60
View File
@@ -1,73 +1,81 @@
@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;
overflow: hidden;
}
.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 +86,3 @@ p {
transform: scaleY(1)
}
}
.prog {
flex: auto;
position:absolute;
margin: 0 auto;
left: 0;
bottom: 0;
background: rgb(75, 75, 75);
height: 4px;
}
+4 -28
View File
@@ -2,38 +2,14 @@
<html lang="en">
<head>
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<script src="https://kit.fontawesome.com/a81368914c.js"></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" />
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
<title>dick head</title>
</head>
<body>
<div id="notifyCustom" class="notify custom">
<div class="innerText">
<i class="fas fa-info-circle icon info"></i>
<p class="text" id="infoMessage"></p>
</div>
<div class="prog" id="prog"></div>
</div>
<div id="notifyInfo" class="notify">
<div class="innerText">
<i class="fas fa-info-circle icon info"></i>
<p class="text" id="infoMessage"></p>
</div>
<div class="prog" id="prog"></div>
</div>
<div id="notifySuccess" class="notify success">
<div class="innerText">
<i class="fas fa-check-circle icon info"></i>
<p class="text" id="successMessage"></p>
</div>
<div class="prog" id="prog"></div>
</div>
<div id="notifyError" class="notify error">
<div class="innerText">
<i class="fas fa-exclamation-circle icon info"></i>
<p class="text" id="errorMessage"></p>
</div>
<div class="prog" id="prog"></div>
<div id="root">
<!-- this is just a template! No touchy touchy -->
</div>
</body>
</html>
+61 -386
View File
@@ -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] = `<span style="color: ${codes[color]}">`;
objArr["~s~"] = "</span>";
} else {
let arr3 = $('<span>' + arr[i] + '</span>');
arr3.css(whitec)
finalarr.push(arr3)
}
}
let newStr = replaceColors(data["message"], objArr);
if (redTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(redc)
finalarr.push(arr3)
} else if (greenTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(greenc)
finalarr.push(arr3)
} else if (whiteTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(whitec)
finalarr.push(arr3)
} else if (blackTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(blackc)
finalarr.push(arr3)
} else if (blueTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(bluec)
finalarr.push(arr3)
} else if (yellowTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(yellowc)
finalarr.push(arr3)
} else if (greyTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(greyc)
finalarr.push(arr3)
} else if (darkgreyTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(darkgreyc)
finalarr.push(arr3)
} else if (orangeTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(orangec)
finalarr.push(arr3)
} else if (purpleTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
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 = $('<span>' + arr[i] + '</span>');
arr3.css(whitec)
finalarr.push(arr3)
}
}
if (redTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(redc)
finalarr.push(arr3)
} else if (greenTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(greenc)
finalarr.push(arr3)
} else if (whiteTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(whitec)
finalarr.push(arr3)
} else if (blackTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(blackc)
finalarr.push(arr3)
} else if (blueTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(bluec)
finalarr.push(arr3)
} else if (yellowTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(yellowc)
finalarr.push(arr3)
} else if (greyTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(greyc)
finalarr.push(arr3)
} else if (darkgreyTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(darkgreyc)
finalarr.push(arr3)
} else if (orangeTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(orangec)
finalarr.push(arr3)
} else if (purpleTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
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 = $('<span>' + arr[i] + '</span>');
arr3.css(whitec)
finalarr.push(arr3)
}
}
if (redTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(redc)
finalarr.push(arr3)
} else if (greenTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(greenc)
finalarr.push(arr3)
} else if (whiteTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(whitec)
finalarr.push(arr3)
} else if (blackTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(blackc)
finalarr.push(arr3)
} else if (blueTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(bluec)
finalarr.push(arr3)
} else if (yellowTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(yellowc)
finalarr.push(arr3)
} else if (greyTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(greyc)
finalarr.push(arr3)
} else if (darkgreyTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(darkgreyc)
finalarr.push(arr3)
} else if (orangeTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
arr3.css(orangec)
finalarr.push(arr3)
} else if (purpleTrue) {
x = i + 1
let arr3 = $('<span>' + arr[x] + '</span>');
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 = $(`
<div class="notify ${data.type}">
<div class="innerText">
<span class="material-symbols-outlined icon">${types[data.type]["icon"]}</span>
<p class="text">${data["message"]}</p>
</div>
</div>
`).appendTo(`#root`);
function RequestUpdateProgress(prc) {
$(".prog").css("width", prc + "%")
}
})
})
setTimeout(() => {
notification.fadeOut(700);
}, data.length);
return notification;
}
+39 -10
View File
@@ -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
<h1 align="center">ESX Notify</h1>
* By doing ESX.ShowNotification("Text Here") it will be default/info
<h3>Change style and time</h3>
# 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
```
<h3>Export Usage</h3>
```lua
exports["esx_notify"]:Notify("info", 3000, "message here")
```
<h3>Event Usage</h3>
```lua
TriggerEvent("ESX:Notify", "info", 3000, "message here")
```
<h3>Color Code Usage</h3>
```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)
```
<img src="https://imgur.com/gsNwFO3.png" alt="image">