! Refactor: Progressbar - Colour Support, onClose support, Scenario support

[esx]/esx_progressbar/Progress.lua

@@ -5,6 +5,8 @@ local function Progressbar(message,length,Options)
                 TaskPlayAnim(ESX.PlayerData.ped, Options.animation.dict, Options.animation.lib, 1.0, 1.0, length, 1, 1.0, false,false,false)
                 RemoveAnimDict(Options.animation.dict)
             end)
+        elseif Options.animation.type == "Scenario" then
+            TaskStartScenarioInPlace(ESX.PlayerData.ped, Options.animation.Scenario, 0, true)
         end
     end
     if Options.FreezePlayer then FreezeEntityPosition(PlayerPedId(),Options.FreezePlayer) end
@@ -13,10 +15,28 @@ local function Progressbar(message,length,Options)
         length = length or 3000,
         message = message or "ESX-Framework"
     }))
-    Wait(length)
-    if Options.FreezePlayer then FreezeEntityPosition(PlayerPedId(),not Options.FreezePlayer) end
-    if Options.onFinish then Options.onFinish() end
+    if Options.onCancel then
+        SendNuiMessage(json.encode({
+            type = "Close"
+        }))
+        local le = length or 3000
+        while le > 0 do
+            Wait(0)
+            le -= 1
+            if IsControlJustPressed(0, 178) then
+                Options.onCancel()
+                break
+            end
+        end
+    else 
+        SetTimeout(length, function()
+            if Options.FreezePlayer then FreezeEntityPosition(PlayerPedId(), false) end
+            if Options.onFinish then Options.onFinish() end
+        end)
+    end
+
+
+   
 end
 
 exports('Progressbar', Progressbar)
-

[esx]/esx_progressbar/fxmanifest.lua

@@ -1,6 +1,7 @@
 fx_version 'adamant'
 game 'gta5'
 author 'ESX-Framework'
+lua54 'yes'
 description 'ESX Progressbar'
 
 client_scripts { 'Progress.lua' }

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

@@ -1,9 +1,43 @@
 const w = window
 const doc = document
 
+const codes = {
+    "~r~": "red",
+    "~b~": "#378cbf",
+    "~g~": "green",
+    "~y~": "yellow",
+    "~p~": "purple",
+    "~c~": "grey",
+    "~m~": "#212121",
+    "~u~": "black",
+    "~o~": "orange"
+}
+
+
 $(function () {
     w.addEventListener('message', function(e) {
-        $(".text").text(e.data.message)
+        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").text(message)
         if (e.data.type === "Progressbar") {
             doc.getElementById("notifyInfo").style.display = "block";
             const start = new Date();