starred/esx_core-esx-framework
1
0
Fork 0
mirror of https://github.com/esx-framework/esx_core.git synced 2026-09-04 16:23:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

JS cleanup, performance improvements

Browse Source
This commit is contained in:
ElPumpo
2018-10-31 15:58:36 +01:00
parent 0f75f9182d
commit 922f0c17a7
4 changed files with 101 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/main.lua
+7 -6
View File
@@ -30,7 +30,7 @@ Citizen.CreateThread(function()
local closeMenu = function(namespace, name)
OpenedMenus[namespace .. '_' .. name] = nil
local OpenedMenuCount = 0
local OpenedMenuCount = 0
SendNUIMessage({
action = 'closeMenu',
@@ -53,23 +53,24 @@ Citizen.CreateThread(function()
ESX.UI.Menu.RegisterType(MenuType, openMenu, closeMenu)
AddEventHandler('esx_menu_list:message:menu_submit', function(data)
RegisterNUICallback('menu_submit', function(data, cb)
local menu = ESX.UI.Menu.GetOpened(MenuType, data._namespace, data._name)
if menu.submit ~= nil then
menu.submit(data, menu)
end
cb('OK')
end)
AddEventHandler('esx_menu_list:message:menu_cancel', function(data)
RegisterNUICallback('menu_cancel', function(data, cb)
local menu = ESX.UI.Menu.GetOpened(MenuType, data._namespace, data._name)
if menu.cancel ~= nil then
menu.cancel(data, menu)
end
cb('OK')
end)
end)
html/css/app.css
+29 -29
View File
@@ -1,52 +1,52 @@
@font-face {
font-family: bankgothic;
src: url('../fonts/bankgothic.ttf');
font-family: bankgothic;
src: url('../fonts/bankgothic.ttf');
}
@font-face {
font-family: pcdown;
src: url('../fonts/pdown.ttf');
font-family: pcdown;
src: url('../fonts/pdown.ttf');
}
.menu {
font-family: bankgothic;
position : absolute;
left : 50%;
top : 50%;
transform : translate(-50%, -50%);
box-shadow : 0px 0px 50px 0px #000;
overflow-y : auto;
max-height : 90%;
font-family: bankgothic;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 0px 50px 0px #000;
overflow-y: auto;
max-height: 90%;
}
.menu button {
font-family: bankgothic;
font-family: bankgothic;
}
.menu > table {
border : 1px transparent;
border-spacing : 0;
min-width : 400px;
background-color: #FFF;
.menu>table {
border: 1px transparent;
border-spacing: 0;
min-width: 400px;
background-color: #FFF;
}
.menu > table > thead {
background-color: #506be6;
text-align : center;
height : 40px;
line-height : 40px;
color : #fff;
.menu>table>thead {
background-color: #506be6;
text-align: center;
height: 40px;
line-height: 40px;
color: #fff;
}
.menu td {
text-align: center;
padding : 8px;
text-align: center;
padding: 8px;
}
.menu tbody tr:nth-child(even) {
background: #CCC
background: #CCC
}
.menu tbody tr:nth-child(odd) {
background: #FFF
}
background: #FFF
}
html/js/app.js
+52 -57
View File
@@ -23,15 +23,17 @@
ESX_MENU.ResourceName = 'esx_menu_list';
ESX_MENU.opened = {};
ESX_MENU.focus = [];
ESX_MENU.data = {}
ESX_MENU.data = {};
ESX_MENU.open = function(namespace, name, data){
ESX_MENU.open = function(namespace, name, data) {
if(typeof ESX_MENU.opened[namespace] == 'undefined')
if (typeof ESX_MENU.opened[namespace] == 'undefined') {
ESX_MENU.opened[namespace] = {};
}
if(typeof ESX_MENU.opened[namespace][name] != 'undefined')
if (typeof ESX_MENU.opened[namespace][name] != 'undefined') {
ESX_MENU.close(namespace, name);
}
data._namespace = namespace;
data._name = name;
@@ -44,24 +46,22 @@
});
ESX_MENU.render();
}
};
ESX_MENU.close = function(namespace, name){
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){
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(){
ESX_MENU.render = function() {
let menuContainer = document.getElementById('menus');
let focused = ESX_MENU.getFocused();
@@ -69,64 +69,64 @@
$(menuContainer).hide();
for(let namespace in ESX_MENU.opened){
for (let namespace in ESX_MENU.opened) {
if(typeof ESX_MENU.data[namespace] == 'undefined')
if (typeof ESX_MENU.data[namespace] == 'undefined') {
ESX_MENU.data[namespace] = {};
}
for(let name in ESX_MENU.opened[namespace]){
for (let name in ESX_MENU.opened[namespace]) {
ESX_MENU.data[namespace][name] = [];
let menuData = ESX_MENU.opened[namespace][name];
let view = {
let view = {
_namespace: menuData._namespace,
_name : menuData._name,
head : [],
rows : []
}
};
for(let i=0; i<menuData.head.length; i++){
for (let i=0; i<menuData.head.length; i++) {
let item = {content: menuData.head[i]};
view.head.push(item);
}
for(let i=0; i<menuData.rows.length; i++){
for (let i=0; i<menuData.rows.length; i++) {
let row = menuData.rows[i];
let data = row.data;
ESX_MENU.data[namespace][name].push(data)
ESX_MENU.data[namespace][name].push(data);
view.rows.push({cols: []});
for(let j=0; j<row.cols.length; j++){
for (let j=0; j<row.cols.length; j++) {
let col = menuData.rows[i].cols[j];
let regex = /\{\{(.*?)\|(.*?)\}\}/g;
let matches = [];
let match;
while ((match = regex.exec(col)) != null)
matches.push(match)
while ((match = regex.exec(col)) != null) {
matches.push(match);
}
for(let k=0; k<matches.length; k++)
for (let k=0; k<matches.length; k++) {
col = col.replace('{{' + matches[k][1] + '|' + matches[k][2] + '}}', '<button data-id="' + i + '" data-namespace="' + namespace + '" data-name="' + name + '" data-value="' + matches[k][2] +'">' + matches[k][1] + '</button>');
}
view.rows[i].cols.push({data: data, content: col})
view.rows[i].cols.push({data: data, content: col});
}
}
let menu = $(Mustache.render(MenuTpl, view))
let menu = $(Mustache.render(MenuTpl, view));
menu.find('button[data-namespace][data-name]').click(function(){
menu.find('button[data-namespace][data-name]').click(function() {
ESX_MENU.submit($(this).data('namespace'), $(this).data('name'), {
data : ESX_MENU.data[$(this).data('namespace')][$(this).data('name')][parseInt($(this).data('id'))],
value: $(this).data('value')
})
})
});
});
menu.hide();
@@ -134,37 +134,35 @@
}
}
if(typeof focused != 'undefined')
if (typeof focused != 'undefined') {
$('#menu_' + focused.namespace + '_' + focused.name).show();
}
$(menuContainer).show();
}
};
ESX_MENU.submit = function(namespace, name, data){
SendMessage(ESX_MENU.ResourceName, 'menu_submit', {
$.post('http://' + ESX_MENU.ResourceName + '/menu_submit', JSON.stringify({
_namespace: namespace,
_name : name,
data : data.data,
value : data.value
});
}
}));
};
ESX_MENU.cancel = function(namespace, name){
SendMessage(ESX_MENU.ResourceName, 'menu_cancel', {
$.post('http://' + ESX_MENU.ResourceName + '/menu_cancel', JSON.stringify({
_namespace: namespace,
_name : name
});
}
}));
};
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;
@@ -174,23 +172,20 @@
ESX_MENU.close(data.namespace, data.name);
break;
}
}
}
};
window.onload = function(e){
window.addEventListener('message', (event) => {
onData(event.data)
onData(event.data);
});
}
};
document.onkeyup = function(data) {
if(data.which == 27) {
let focused = ESX_MENU.getFocused();
ESX_MENU.cancel(focused.namespace, focused.name);
}
};
document.onkeyup = function(data) {
if(data.which == 27) {
let focused = ESX_MENU.getFocused();
ESX_MENU.cancel(focused.namespace, focused.name);
}
};
})()
})();
html/ui.html
+13 -10
View File
@@ -1,13 +1,16 @@
<html>
<head>
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<div id="menus"></div>
<script src="nui://game/ui/jquery.js"></script>
<script src="nui://es_extended/html/js/wrapper.js"></script>
<script src="js/mustache.min.js"></script>
<script src="js/app.js"></script>
</body>
<head>
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<div id="menus"></div>
<script src="nui://game/ui/jquery.js"></script>
<script src="nui://es_extended/html/js/wrapper.js"></script>
<script src="js/mustache.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>