refactor(esx_progressbar): remove jquery (#867)

[core]/esx_progressbar/Progress.lua

@@ -1,50 +1,50 @@
 local CurrentProgress = nil
 local function Progressbar(message,length,Options)
-    local Canceled = false
-    if not CurrentProgress then
-        CurrentProgress = Options or {}
-        if CurrentProgress.animation then 
-            if CurrentProgress.animation.type == "anim" then
-                ESX.Streaming.RequestAnimDict(CurrentProgress.animation.dict, function()
-                    TaskPlayAnim(ESX.PlayerData.ped, CurrentProgress.animation.dict, CurrentProgress.animation.lib, 1.0, 1.0, length, 1, 1.0, false,false,false)
-                    RemoveAnimDict(CurrentProgress.animation.dict)
-                end)
-            elseif CurrentProgress.animation.type == "Scenario" then
-                TaskStartScenarioInPlace(ESX.PlayerData.ped, CurrentProgress.animation.Scenario, 0, true)
-            end
+    if CurrentProgress then
+        return false
+    end
+    CurrentProgress = Options or {}
+    if CurrentProgress.animation then 
+        if CurrentProgress.animation.type == "anim" then
+            ESX.Streaming.RequestAnimDict(CurrentProgress.animation.dict, function()
+                TaskPlayAnim(ESX.PlayerData.ped, CurrentProgress.animation.dict, CurrentProgress.animation.lib, 1.0, 1.0, length, 1, 1.0, false,false,false)
+                RemoveAnimDict(CurrentProgress.animation.dict)
+            end)
+        elseif CurrentProgress.animation.type == "Scenario" then
+            TaskStartScenarioInPlace(ESX.PlayerData.ped, CurrentProgress.animation.Scenario, 0, true)
         end
-        if CurrentProgress.FreezePlayer then FreezeEntityPosition(PlayerPedId(),CurrentProgress.FreezePlayer) end
-        SendNuiMessage(json.encode({
-            type = "Progressbar",
-            length = length or 3000,
-            message = message or "ESX-Framework"
-        }))
-        CurrentProgress.length = length or 3000
-        while CurrentProgress ~= nil do
-            if CurrentProgress.length > 0 then 
-                CurrentProgress.length -= 1000
-            else
-                ClearPedTasks(ESX.PlayerData.ped)
-                if CurrentProgress.FreezePlayer then FreezeEntityPosition(PlayerPedId(), false) end
-                if CurrentProgress.onFinish then CurrentProgress.onFinish() end
-                CurrentProgress = nil
-            end
-            Wait(1000)
+    end
+    if CurrentProgress.FreezePlayer then FreezeEntityPosition(PlayerPedId(), CurrentProgress.FreezePlayer) end
+    SendNUIMessage({
+        type = "Progressbar",
+        length = length or 3000,
+        message = message or "ESX-Framework"
+    })
+    CurrentProgress.length = length or 3000
+    while CurrentProgress ~= nil do
+        if CurrentProgress.length > 0 then 
+            CurrentProgress.length -= 1000
+        else
+            ClearPedTasks(ESX.PlayerData.ped)
+            if CurrentProgress.FreezePlayer then FreezeEntityPosition(PlayerPedId(), false) end
+            if CurrentProgress.onFinish then CurrentProgress.onFinish() end
+            CurrentProgress = nil
         end
+        Wait(1000)
     end
 end
 
 ESX.RegisterInput("cancelprog", "[ProgressBar] Cancel Progressbar", "keyboard", "BACK", function()
     if not CurrentProgress then return end
     if not CurrentProgress.onCancel then return end
-    SendNuiMessage(json.encode({
+    SendNUIMessage({
         type = "Close"
-    }))
-        ClearPedTasks(ESX.PlayerData.ped)
-        if CurrentProgress.FreezePlayer then FreezeEntityPosition(PlayerPedId(), false) end
-        CurrentProgress.canceled = true
-        CurrentProgress.length = 0
-        CurrentProgress.onCancel()
-        CurrentProgress = nil
+    })
+    ClearPedTasks(ESX.PlayerData.ped)
+    if CurrentProgress.FreezePlayer then FreezeEntityPosition(PlayerPedId(), false) end
+    CurrentProgress.canceled = true
+    CurrentProgress.length = 0
+    CurrentProgress.onCancel()
+    CurrentProgress = nil
 end)
-exports('Progressbar', Progressbar)
+exports('Progressbar', Progressbar)

[core]/esx_progressbar/nui/index.html

@@ -1,10 +1,8 @@
 <!DOCTYPE html>
 <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="css/style.css">
-    <script src="js/script.js"></script>
 </head>
 <body>
     <div id="notifyInfo" class="notify">
@@ -13,8 +11,10 @@
             <p class="text" id="infoMessage"></p>
         </div>
         <div id="progline" class="progline">
+        </div>
     </div>
 </body>
+<script src="js/script.js"></script>
 </html>
 
 <style>

[core]/esx_progressbar/nui/js/script.js

@@ -1,6 +1,3 @@
-const w = window
-const doc = document
-
 const codes = {
     "~r~": "red",
     "~b~": "#378cbf",
@@ -13,57 +10,60 @@ const codes = {
     "~o~": "orange"
 }
 
-$(function () {
-    w.addEventListener('message', function(e) {
-        if (e.data.type === "Progressbar") {
-            var message = e.data.message
-            const replaceColors = (str, obj) => {
-                let strToReplace = str;
-            
-                for (let id in obj) {
-                    strToReplace = strToReplace.replace(new RegExp(id, "g"), obj[id]);
-                }
-            
-                return strToReplace
-            }
-            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
-                }
-            }
-            $(".text").html(`<p class="text">${message}</p>`)
-            doc.getElementById("notifyInfo").style.display = "block";
-            const start = new Date();
-            const maxTime = e.data.length;
-            const timeoutValue = Math.floor(maxTime/100);
-            animUpdate();
+const elems = {
+    infoMessage: document.getElementById('infoMessage'),
+    notifyInfo: document.getElementById("notifyInfo"),
+    progline: document.getElementById('progline')
+}
 
-            function updateProg(prc) {
-                $("#progline").css("width", prc + "%");
-            }
-            
-            function animUpdate() {
-                const now = new Date();
-                const timeoutDiff = now.getTime() - start.getTime();
-                const prc = Math.round((timeoutDiff/maxTime)*100);
-                if (prc <= 100) {
-                    updateProg(prc);
-                    this.timeoutID = setTimeout(animUpdate, timeoutValue);
-                } else {
-                   doc.getElementById('notifyInfo').style.display = "none";
-                }
-            }
-        } else {
-            doc.getElementById("notifyInfo").style.display = "none"
-            clearTimeout(this.timeoutID);
-            timeoutValue = 0;
+const replaceColors = (str, obj) => {
+    let strToReplace = str;
 
+    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
+            }
         }
-    })
+
+        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;
+    }
 })