diff --git a/[core]/esx_progressbar/nui/css/style.css b/[core]/esx_progressbar/nui/css/style.css
index 61d24738..87d0e135 100644
--- a/[core]/esx_progressbar/nui/css/style.css
+++ b/[core]/esx_progressbar/nui/css/style.css
@@ -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;
-}
\ No newline at end of file
+ color: var(--color);
+ font-family: sans-serif;
+}
diff --git a/[core]/esx_progressbar/nui/index.html b/[core]/esx_progressbar/nui/index.html
index 390c6c7c..c29ee5fd 100644
--- a/[core]/esx_progressbar/nui/index.html
+++ b/[core]/esx_progressbar/nui/index.html
@@ -1,88 +1,90 @@
-
+
-
-
-
+
+
+
-
-
+
+
diff --git a/[core]/esx_progressbar/nui/js/script.js b/[core]/esx_progressbar/nui/js/script.js
index ac2fb592..19152fa8 100644
--- a/[core]/esx_progressbar/nui/js/script.js
+++ b/[core]/esx_progressbar/nui/js/script.js
@@ -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] = ``;
+ objArr["~s~"] = "";
+
+ 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] = ``;
- objArr["~s~"] = "";
-
- 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;
+ }
+});