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

style(esx_progressbar): run prettier

Browse Source
This commit is contained in:
MoskalykA
2023-02-06 13:44:45 +01:00
parent 2b981fd7d1
commit 65adc9d873
3 changed files with 137 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
[core]/esx_progressbar/nui/css/style.css
+7 -7
View File
@@ -1,14 +1,14 @@
:root {
--color: white;
--bgColor: #212121;
--color: white;
--bgColor: #212121;
}
* {
padding: 0;
margin: 0;
padding: 0;
margin: 0;
}
body {
color: var(--color);
font-family: sans-serif;
}
color: var(--color);
font-family: sans-serif;
}
[core]/esx_progressbar/nui/index.html
+72 -70
View File
@@ -1,88 +1,90 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<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 id="progline" class="progline">
</div>
<div class="innerText">
<i class="fas fa-info-circle icon info"></i>
<p class="text" id="infoMessage"></p>
</div>
<div id="progline" class="progline"></div>
</div>
</body>
<script src="js/script.js"></script>
</body>
<script src="js/script.js"></script>
</html>
<style>
.notify {
flex: auto;
display: none;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
bottom: 100px;
min-width: 15%;
width: fit-content;
height: 45px;
background-color: rgba(5, 5, 5, 0.8);
border-radius: 5px;
animation: growDown 300ms ease-in-out;
padding-right: 10px;
}
.progline {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
width: 100%;
border-radius: 20px;
background: linear-gradient(
to right,
#0052d4,
#4364f7,
#6fb1fc
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.notify {
flex: auto;
display: none;
position:absolute;
margin: 0 auto;
left: 0;
right: 0;
bottom: 100px;
min-width:15%;
width:fit-content;
height:45px;
background-color:rgba(5, 5, 5, 0.800);
border-radius: 5px;
animation: growDown 300ms ease-in-out;
padding-right: 10px;
}
.icon {
border: 0;
}
.progline {
position:absolute;
bottom:0;
left:0;
right:0;
height:2px;
width:100%;
border-radius: 20px;
background: linear-gradient(to right, #0052d4, #4364f7, #6fb1fc); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.innerText {
flex: auto;
margin-top: 15px;
width: 100%;
}
.icon {
border: 0;
}
.innerText {
margin-left: 10px;
}
p {
flex: auto;
word-wrap: break-word;
margin-left: 30px;
margin-top: 15px;
}
.innerText {
flex: auto;
margin-top: 15px;
width:100%;
}
.innerText .icon {
float: left;
margin-left: 5px;
font-size: 20px;
}
.innerText{
margin-left: 10px;
@keyframes growDown {
0% {
transform: scaleY(0);
}
p {
flex: auto;
word-wrap: break-word;
margin-left: 30px;
margin-top: 15px;
80% {
transform: scaleY(1.1);
}
.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)
}
100% {
transform: scaleY(1);
}
}
</style>
[core]/esx_progressbar/nui/js/script.js
+58 -58
View File
@@ -1,69 +1,69 @@
const codes = {
"~r~": "red",
"~b~": "#378cbf",
"~g~": "green",
"~y~": "yellow",
"~p~": "purple",
"~c~": "grey",
"~m~": "#212121",
"~u~": "black",
"~o~": "orange"
}
"~r~": "red",
"~b~": "#378cbf",
"~g~": "green",
"~y~": "yellow",
"~p~": "purple",
"~c~": "grey",
"~m~": "#212121",
"~u~": "black",
"~o~": "orange",
};
const elems = {
infoMessage: document.getElementById('infoMessage'),
notifyInfo: document.getElementById("notifyInfo"),
progline: document.getElementById('progline')
}
infoMessage: document.getElementById("infoMessage"),
notifyInfo: document.getElementById("notifyInfo"),
progline: document.getElementById("progline"),
};
const replaceColors = (str, obj) => {
let strToReplace = str;
let strToReplace = str;
for (let id in obj) {
strToReplace = strToReplace.replace(new RegExp(id, "g"), obj[id]);
for (let id in obj) {
strToReplace = strToReplace.replace(new RegExp(id, "g"), obj[id]);
}
return strToReplace;
};
window.addEventListener("message", function ({ data }) {
if (data.type === "Progressbar") {
let { message } = data;
for (color in codes) {
if (message.includes(color)) {
let objArr = {};
objArr[color] = `<span style="color: ${codes[color]}">`;
objArr["~s~"] = "</span>";
let newStr = replaceColors(message, objArr);
message = newStr;
}
}
return strToReplace
}
elems.infoMessage.innerHTML = message;
elems.notifyInfo.style.display = "block";
window.addEventListener('message', function({data}) {
if (data.type === "Progressbar") {
let { message } = data
const start = new Date();
const maxTime = data.length;
const timeoutValue = Math.floor(maxTime / 100);
animUpdate();
for (color in codes) {
if (message.includes(color)) {
let objArr = {};
objArr[color] = `<span style="color: ${codes[color]}">`;
objArr["~s~"] = "</span>";
let newStr = replaceColors(message, objArr);
message = newStr
}
}
elems.infoMessage.innerHTML = message
elems.notifyInfo.style.display = "block";
const start = new Date();
const maxTime = data.length;
const timeoutValue = Math.floor(maxTime / 100);
animUpdate();
function animUpdate() {
const now = new Date();
const timeoutDiff = now.getTime() - start.getTime();
const prc = Math.round((timeoutDiff/maxTime)*100);
if (prc <= 100) {
elems.progline.style.width = prc + "%"
this.timeoutID = setTimeout(animUpdate, timeoutValue);
} else {
elems.notifyInfo.style.display = "none";
}
}
} else {
elems.notifyInfo.style.display = 'none'
clearTimeout(this.timeoutID);
timeoutValue = 0;
function animUpdate() {
const now = new Date();
const timeoutDiff = now.getTime() - start.getTime();
const prc = Math.round((timeoutDiff / maxTime) * 100);
if (prc <= 100) {
elems.progline.style.width = prc + "%";
this.timeoutID = setTimeout(animUpdate, timeoutValue);
} else {
elems.notifyInfo.style.display = "none";
}
}
})
} else {
elems.notifyInfo.style.display = "none";
clearTimeout(this.timeoutID);
timeoutValue = 0;
}
});