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

Use NUI chunking (it has performance issues)

Browse Source
This commit is contained in:
ElPumpo
2020-04-14 16:36:50 +02:00
parent 67aa4df065
commit 1f53d642aa
7 changed files with 59 additions and 446 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/main.lua
+23 -51
View File
@@ -1,11 +1,6 @@
Citizen.CreateThread(function()
-- internal variables
ESX = nil
local Timeouts = {}
local GUI = {}
GUI.Time = 0
local MenuType = 'dialog'
local OpenedMenus = {}
ESX = nil
local Timeouts, OpenedMenus, MenuType = {}, {}, 'dialog'
while ESX == nil do
TriggerEvent('esx:getSharedObject', function(obj) ESX = obj end)
@@ -20,10 +15,10 @@ Citizen.CreateThread(function()
OpenedMenus[namespace .. '_' .. name] = true
SendNUIMessage({
action = 'openMenu',
action = 'openMenu',
namespace = namespace,
name = name,
data = data
name = name,
data = data
})
local timeoutId = ESX.SetTimeout(200, function()
@@ -35,22 +30,15 @@ Citizen.CreateThread(function()
local closeMenu = function(namespace, name)
OpenedMenus[namespace .. '_' .. name] = nil
local OpenedMenuCount = 0
SendNUIMessage({
action = 'closeMenu',
action = 'closeMenu',
namespace = namespace,
name = name,
data = data
name = name,
data = data
})
for k,v in pairs(OpenedMenus) do
if v == true then
OpenedMenuCount = OpenedMenuCount + 1
end
end
if OpenedMenuCount == 0 then
if ESX.Table.SizeOf(OpenedMenus) == 0 then
SetNuiFocus(false)
end
@@ -58,69 +46,53 @@ Citizen.CreateThread(function()
ESX.UI.Menu.RegisterType(MenuType, openMenu, closeMenu)
RegisterNUICallback('menu_submit', function(data, cb)
AddEventHandler('esx_menu_dialog:message:menu_submit', function(data)
local menu = ESX.UI.Menu.GetOpened(MenuType, data._namespace, data._name)
local post = true
local cancel = false
if menu.submit ~= nil then
-- Is the submitted data a number?
if tonumber(data.value) ~= nil then
-- Round float values
if menu.submit then
-- is the submitted data a number?
if tonumber(data.value) then
data.value = ESX.Math.Round(tonumber(data.value))
-- Check for negative value
-- check for negative value
if tonumber(data.value) <= 0 then
post = false
cancel = true
end
end
data.value = ESX.Math.Trim(data.value)
-- Don't post if the value is negative or if it's 0
if post then
menu.submit(data, menu)
-- don't submit if the value is negative or if it's 0
if cancel then
ESX.ShowNotification('That input is not allowed!')
else
ESX.ShowNotification('That input is invalid!')
menu.submit(data, menu)
end
end
cb('OK')
end)
RegisterNUICallback('menu_cancel', function(data, cb)
AddEventHandler('esx_menu_dialog:message:menu_cancel', function(data)
local menu = ESX.UI.Menu.GetOpened(MenuType, data._namespace, data._name)
if menu.cancel ~= nil then
menu.cancel(data, menu)
end
cb('OK')
end)
RegisterNUICallback('menu_change', function(data, cb)
AddEventHandler('esx_menu_dialog:message:menu_change', function(data)
local menu = ESX.UI.Menu.GetOpened(MenuType, data._namespace, data._name)
if menu.change ~= nil then
menu.change(data, menu)
end
cb('OK')
end)
Citizen.CreateThread(function()
while true do
Citizen.Wait(10)
local OpenedMenuCount = 0
for k,v in pairs(OpenedMenus) do
if v == true then
OpenedMenuCount = OpenedMenuCount + 1
end
end
if OpenedMenuCount > 0 then
if ESX.Table.SizeOf(OpenedMenus) > 0 then
DisableControlAction(0, 1, true) -- LookLeftRight
DisableControlAction(0, 2, true) -- LookUpDown
DisableControlAction(0, 142, true) -- MeleeAttackAlternate
fxmanifest.lua
+4 -1
View File
@@ -6,7 +6,10 @@ description 'ESX Menu Dialog'
version '1.1.0'
client_script 'client/main.lua'
client_scripts {
'@es_extended/client/wrapper.lua',
'client/main.lua'
}
ui_page 'html/ui.html'
html/css/app.css
+1 -1
View File
@@ -71,4 +71,4 @@
.dialog button[name="cancel"] {
width: 25%;
height: 32px;
}
}
html/js/app.js
+16 -25
View File
@@ -1,24 +1,22 @@
(function () {
let MenuTpl =
'<div id="menu_{{_namespace}}_{{_name}}" class="dialog {{#isBig}}big{{/isBig}}">' +
'<div class="head"><span>{{title}}</span></div>' +
'{{#isDefault}}<input type="text" name="value" id="inputText"/>{{/isDefault}}' +
'{{#isBig}}<textarea name="value"/>{{/isBig}}' +
'<button type="button" name="submit">Envoyer</button>' +
'<button type="button" name="cancel">Annuler</button>' +
'<button type="button" name="submit">Submit</button>' +
'<button type="button" name="cancel">Cancel</button>' +
'</div>' +
'</div>'
;
window.ESX_MENU = {};
window.ESX_MENU = {};
ESX_MENU.ResourceName = 'esx_menu_dialog';
ESX_MENU.opened = {};
ESX_MENU.focus = [];
ESX_MENU.pos = {};
ESX_MENU.opened = {};
ESX_MENU.focus = [];
ESX_MENU.pos = {};
ESX_MENU.open = function (namespace, name, data) {
if (typeof ESX_MENU.opened[namespace] == 'undefined') {
ESX_MENU.opened[namespace] = {};
}
@@ -53,18 +51,16 @@
document.onkeyup = function (key) {
if (key.which == 27) { // Escape key
$.post('http://' + ESX_MENU.ResourceName + '/menu_cancel', JSON.stringify(data));
SendMessage(ESX_MENU.ResourceName, 'menu_cancel', data);
} else if (key.which == 13) { // Enter key
$.post('http://' + ESX_MENU.ResourceName + '/menu_submit', JSON.stringify(data));
SendMessage(ESX_MENU.ResourceName, 'menu_submit', data);
}
};
ESX_MENU.render();
};
ESX_MENU.close = function (namespace, name) {
delete ESX_MENU.opened[namespace][name];
for (let i = 0; i < ESX_MENU.focus.length; i++) {
@@ -75,28 +71,23 @@
}
ESX_MENU.render();
};
ESX_MENU.render = function () {
let menuContainer = $('#menus')[0];
$(menuContainer).find('button[name="submit"]').unbind('click');
$(menuContainer).find('button[name="cancel"]').unbind('click');
$(menuContainer).find('[name="value"]').unbind('input propertychange');
menuContainer.innerHTML = '';
$(menuContainer).hide();
for (let namespace in ESX_MENU.opened) {
for (let name in ESX_MENU.opened[namespace]) {
let menuData = ESX_MENU.opened[namespace][name];
let view = JSON.parse(JSON.stringify(menuData));
switch (menuData.type) {
case 'default': {
view.isDefault = true;
break;
@@ -127,8 +118,9 @@
ESX_MENU.change(this.namespace, this.name, this.data);
}.bind({ namespace: namespace, name: name, data: menuData }));
if (typeof menuData.value != 'undefined')
if (typeof menuData.value != 'undefined') {
$(menu).find('[name="value"]').val(menuData.value);
}
menuContainer.appendChild(menu);
}
@@ -139,15 +131,15 @@
};
ESX_MENU.submit = function (namespace, name, data) {
$.post('http://' + ESX_MENU.ResourceName + '/menu_submit', JSON.stringify(data));
SendMessage(ESX_MENU.ResourceName, 'menu_submit', data);
};
ESX_MENU.cancel = function (namespace, name, data) {
$.post('http://' + ESX_MENU.ResourceName + '/menu_cancel', JSON.stringify(data));
SendMessage(ESX_MENU.ResourceName, 'menu_cancel', data);
};
ESX_MENU.change = function (namespace, name, data) {
$.post('http://' + ESX_MENU.ResourceName + '/menu_change', JSON.stringify(data));
SendMessage(ESX_MENU.ResourceName, 'menu_change', data);
};
ESX_MENU.getFocused = function () {
@@ -155,8 +147,8 @@
};
window.onData = (data) => {
switch (data.action) {
case 'openMenu': {
ESX_MENU.open(data.namespace, data.name, data.data);
break;
@@ -167,7 +159,6 @@
break;
}
}
};
window.onload = function (e) {
@@ -176,4 +167,4 @@
});
};
})();
})();
html/js/app_en.js
-179
View File
@@ -1,179 +0,0 @@
(function () {
let MenuTpl =
'<div id="menu_{{_namespace}}_{{_name}}" class="dialog {{#isBig}}big{{/isBig}}">' +
'<div class="head"><span>{{title}}</span></div>' +
'{{#isDefault}}<input type="text" name="value" id="inputText"/>{{/isDefault}}' +
'{{#isBig}}<textarea name="value"/>{{/isBig}}' +
'<button type="button" name="submit">Submit</button>' +
'<button type="button" name="cancel">Cancel</button>' +
'</div>' +
'</div>'
;
window.ESX_MENU = {};
ESX_MENU.ResourceName = 'esx_menu_dialog';
ESX_MENU.opened = {};
ESX_MENU.focus = [];
ESX_MENU.pos = {};
ESX_MENU.open = function (namespace, name, data) {
if (typeof ESX_MENU.opened[namespace] == 'undefined') {
ESX_MENU.opened[namespace] = {};
}
if (typeof ESX_MENU.opened[namespace][name] != 'undefined') {
ESX_MENU.close(namespace, name);
}
if (typeof ESX_MENU.pos[namespace] == 'undefined') {
ESX_MENU.pos[namespace] = {};
}
if (typeof data.type == 'undefined') {
data.type = 'default';
}
if (typeof data.align == 'undefined') {
data.align = 'top-left';
}
data._index = ESX_MENU.focus.length;
data._namespace = namespace;
data._name = name;
ESX_MENU.opened[namespace][name] = data;
ESX_MENU.pos[namespace][name] = 0;
ESX_MENU.focus.push({
namespace: namespace,
name: name
});
document.onkeyup = function (key) {
if (key.which == 27) { // Escape key
$.post('http://' + ESX_MENU.ResourceName + '/menu_cancel', JSON.stringify(data));
} else if (key.which == 13) { // Enter key
$.post('http://' + ESX_MENU.ResourceName + '/menu_submit', JSON.stringify(data));
}
};
ESX_MENU.render();
};
ESX_MENU.close = function (namespace, name) {
delete ESX_MENU.opened[namespace][name];
for (let i = 0; i < ESX_MENU.focus.length; i++) {
if (ESX_MENU.focus[i].namespace == namespace && ESX_MENU.focus[i].name == name) {
ESX_MENU.focus.splice(i, 1);
break;
}
}
ESX_MENU.render();
};
ESX_MENU.render = function () {
let menuContainer = $('#menus')[0];
$(menuContainer).find('button[name="submit"]').unbind('click');
$(menuContainer).find('button[name="cancel"]').unbind('click');
$(menuContainer).find('[name="value"]').unbind('input propertychange');
menuContainer.innerHTML = '';
$(menuContainer).hide();
for (let namespace in ESX_MENU.opened) {
for (let name in ESX_MENU.opened[namespace]) {
let menuData = ESX_MENU.opened[namespace][name];
let view = JSON.parse(JSON.stringify(menuData));
switch (menuData.type) {
case 'default': {
view.isDefault = true;
break;
}
case 'big': {
view.isBig = true;
break;
}
default: break;
}
let menu = $(Mustache.render(MenuTpl, view))[0];
$(menu).css('z-index', 1000 + view._index);
$(menu).find('button[name="submit"]').click(function () {
ESX_MENU.submit(this.namespace, this.name, this.data);
}.bind({ namespace: namespace, name: name, data: menuData }));
$(menu).find('button[name="cancel"]').click(function () {
ESX_MENU.cancel(this.namespace, this.name, this.data);
}.bind({ namespace: namespace, name: name, data: menuData }));
$(menu).find('[name="value"]').bind('input propertychange', function () {
this.data.value = $(menu).find('[name="value"]').val();
ESX_MENU.change(this.namespace, this.name, this.data);
}.bind({ namespace: namespace, name: name, data: menuData }));
if (typeof menuData.value != 'undefined')
$(menu).find('[name="value"]').val(menuData.value);
menuContainer.appendChild(menu);
}
}
$(menuContainer).show();
$("#inputText").focus();
};
ESX_MENU.submit = function (namespace, name, data) {
$.post('http://' + ESX_MENU.ResourceName + '/menu_submit', JSON.stringify(data));
};
ESX_MENU.cancel = function (namespace, name, data) {
$.post('http://' + ESX_MENU.ResourceName + '/menu_cancel', JSON.stringify(data));
};
ESX_MENU.change = function (namespace, name, data) {
$.post('http://' + ESX_MENU.ResourceName + '/menu_change', JSON.stringify(data));
};
ESX_MENU.getFocused = function () {
return ESX_MENU.focus[ESX_MENU.focus.length - 1];
};
window.onData = (data) => {
switch (data.action) {
case 'openMenu': {
ESX_MENU.open(data.namespace, data.name, data.data);
break;
}
case 'closeMenu': {
ESX_MENU.close(data.namespace, data.name);
break;
}
}
};
window.onload = function (e) {
window.addEventListener('message', (event) => {
onData(event.data);
});
};
})();
html/js/app_pl.js
-179
View File
@@ -1,179 +0,0 @@
(function () {
let MenuTpl =
'<div id="menu_{{_namespace}}_{{_name}}" class="dialog {{#isBig}}big{{/isBig}}">' +
'<div class="head"><span>{{title}}</span></div>' +
'{{#isDefault}}<input type="text" name="value" id="inputText"/>{{/isDefault}}' +
'{{#isBig}}<textarea name="value"/>{{/isBig}}' +
'<button type="button" name="submit">Zapisz</button>' +
'<button type="button" name="cancel">Zamknij</button>' +
'</div>' +
'</div>'
;
window.ESX_MENU = {};
ESX_MENU.ResourceName = 'esx_menu_dialog';
ESX_MENU.opened = {};
ESX_MENU.focus = [];
ESX_MENU.pos = {};
ESX_MENU.open = function (namespace, name, data) {
if (typeof ESX_MENU.opened[namespace] == 'undefined') {
ESX_MENU.opened[namespace] = {};
}
if (typeof ESX_MENU.opened[namespace][name] != 'undefined') {
ESX_MENU.close(namespace, name);
}
if (typeof ESX_MENU.pos[namespace] == 'undefined') {
ESX_MENU.pos[namespace] = {};
}
if (typeof data.type == 'undefined') {
data.type = 'default';
}
if (typeof data.align == 'undefined') {
data.align = 'top-left';
}
data._index = ESX_MENU.focus.length;
data._namespace = namespace;
data._name = name;
ESX_MENU.opened[namespace][name] = data;
ESX_MENU.pos[namespace][name] = 0;
ESX_MENU.focus.push({
namespace: namespace,
name: name
});
document.onkeyup = function (key) {
if (key.which == 27) { // Escape key
$.post('http://' + ESX_MENU.ResourceName + '/menu_cancel', JSON.stringify(data));
} else if (key.which == 13) { // Enter key
$.post('http://' + ESX_MENU.ResourceName + '/menu_submit', JSON.stringify(data));
}
};
ESX_MENU.render();
};
ESX_MENU.close = function (namespace, name) {
delete ESX_MENU.opened[namespace][name];
for (let i = 0; i < ESX_MENU.focus.length; i++) {
if (ESX_MENU.focus[i].namespace == namespace && ESX_MENU.focus[i].name == name) {
ESX_MENU.focus.splice(i, 1);
break;
}
}
ESX_MENU.render();
};
ESX_MENU.render = function () {
let menuContainer = $('#menus')[0];
$(menuContainer).find('button[name="submit"]').unbind('click');
$(menuContainer).find('button[name="cancel"]').unbind('click');
$(menuContainer).find('[name="value"]').unbind('input propertychange');
menuContainer.innerHTML = '';
$(menuContainer).hide();
for (let namespace in ESX_MENU.opened) {
for (let name in ESX_MENU.opened[namespace]) {
let menuData = ESX_MENU.opened[namespace][name];
let view = JSON.parse(JSON.stringify(menuData));
switch (menuData.type) {
case 'default': {
view.isDefault = true;
break;
}
case 'big': {
view.isBig = true;
break;
}
default: break;
}
let menu = $(Mustache.render(MenuTpl, view))[0];
$(menu).css('z-index', 1000 + view._index);
$(menu).find('button[name="submit"]').click(function () {
ESX_MENU.submit(this.namespace, this.name, this.data);
}.bind({ namespace: namespace, name: name, data: menuData }));
$(menu).find('button[name="cancel"]').click(function () {
ESX_MENU.cancel(this.namespace, this.name, this.data);
}.bind({ namespace: namespace, name: name, data: menuData }));
$(menu).find('[name="value"]').bind('input propertychange', function () {
this.data.value = $(menu).find('[name="value"]').val();
ESX_MENU.change(this.namespace, this.name, this.data);
}.bind({ namespace: namespace, name: name, data: menuData }));
if (typeof menuData.value != 'undefined')
$(menu).find('[name="value"]').val(menuData.value);
menuContainer.appendChild(menu);
}
}
$(menuContainer).show();
$("#inputText").focus();
};
ESX_MENU.submit = function (namespace, name, data) {
$.post('http://' + ESX_MENU.ResourceName + '/menu_submit', JSON.stringify(data));
};
ESX_MENU.cancel = function (namespace, name, data) {
$.post('http://' + ESX_MENU.ResourceName + '/menu_cancel', JSON.stringify(data));
};
ESX_MENU.change = function (namespace, name, data) {
$.post('http://' + ESX_MENU.ResourceName + '/menu_change', JSON.stringify(data));
};
ESX_MENU.getFocused = function () {
return ESX_MENU.focus[ESX_MENU.focus.length - 1];
};
window.onData = (data) => {
switch (data.action) {
case 'openMenu': {
ESX_MENU.open(data.namespace, data.name, data.data);
break;
}
case 'closeMenu': {
ESX_MENU.close(data.namespace, data.name);
break;
}
}
};
window.onload = function (e) {
window.addEventListener('message', (event) => {
onData(event.data);
});
};
})();
html/ui.html
+15 -10
View File
@@ -1,12 +1,17 @@
<html>
<head>
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<div id="menus"></div>
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<script src="js/mustache.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="nui://esx_menu_dialog/html/css/app.css">
</head>
<body>
<div id="menus"></div>
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<script src="nui://es_extended/html/js/wrapper.js"></script>
<script src="nui://esx_menu_dialog/html/js/mustache.min.js" type="text/javascript"></script>
<script src="nui://esx_menu_dialog/html/js/app.js" type="text/javascript"></script>
</body>
</html>