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

Merge pull request #731 from Dev-OMG/develop

Browse Source 
Added progressbar
This commit is contained in:
Jérémie N'gadi
2020-05-13 16:51:38 +02:00
committed by GitHub
parent 0d80662880 d5cad4a911
commit 9e89451503
4 changed files with 50 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/functions.lua
+9
View File
@@ -186,6 +186,15 @@ ESX.ShowFloatingHelpNotification = function(msg, coords, timeout)
end
ESX.ShowProgressBar = function(time, text)
SendNUIMessage({
type = "progressbar",
display = true,
time = time,
text = text
})
end
ESX.TriggerServerCallback = function(name, cb, ...)
ESX.ServerCallbacks[ESX.CurrentRequestId] = cb
hud/app.css
+5
View File
@@ -12,3 +12,8 @@ html, body, #frames, #frames > div, #frames > div > iframe {
left: 0;
top: 0;
}
#pb {
display: none;
overflow: hidden;
}
hud/index.html
+1
View File
@@ -6,6 +6,7 @@
<body>
<div id="frames"></div>
<div id="ui"></div>
<script src="nui://game/ui/jquery.js"></script>
<script src="app.js"></script>
hud/progressbars.js
+35
View File
@@ -0,0 +1,35 @@
document.getElementById('ui').innerHTML = "<div id='pb'><div id='pbar_outerdiv' style='margin-top: 45.5%; left: 42.5%; background-color: rgba(0,0,0,0.25); width: 15%; height: 30px; z-index: 1; position: relative; border-style: solid; border-radius: 3px; border-width: 2px;'><div id='pbar_innerdiv' style='background-color: rgba(0, 83, 236, 0.95); z-index: 2; height: 100%; width: 0%; border-radius: 3px;'></div><div id='pbar_innertext' style='color: white; z-index: 3; position: absolute; top: 3px; left: 0; width: 100%; height: 100%; font-weight: bold; text-align: center; font-family: Bebas Neue, cursive; margin-top: 2px; letter-spacing: 2px;'>0%</div></div></div>";
$(function(){
window.onload = (e) => {
window.addEventListener('message', (event) => {
var item = event.data;
if (item !== undefined && item.type === "progressbar") {
if (item.display === true) {
$("#pb").show();
var start = new Date();
var maxTime = item.time;
var text = item.text;
var timeoutVal = Math.floor(maxTime/100);
animateUpdate();
$('#pbar_innertext').text(text);
function updateProgress(percentage) {
$('#pbar_innerdiv').css("width", percentage + "%");
}
function animateUpdate() {
var now = new Date();
var timeDiff = now.getTime() - start.getTime();
var perc = Math.round((timeDiff/maxTime)*100);
if (perc <= 100) {
updateProgress(perc);
setTimeout(animateUpdate, timeoutVal);
} else {
$("#pb").hide();
}
}
} else {
$("#pb").hide();
}
}
});
};
});