mirror of
https://github.com/esx-framework/esx_core.git
synced 2026-08-30 17:58:54 +00:00
style(esx_menu_list): run prettier
This commit is contained in:
MoskalykA
@@ -1,56 +1,55 @@
|
||||
@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: 40%;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow-y: auto;
|
||||
max-height: 90%;
|
||||
font-family: bankgothic;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 40%;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow-y: auto;
|
||||
max-height: 90%;
|
||||
}
|
||||
|
||||
.menu button {
|
||||
font-family: bankgothic;
|
||||
font-family: bankgothic;
|
||||
}
|
||||
|
||||
.menu>table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0 5px;
|
||||
min-width: 400px;
|
||||
background: rgba(33, 33, 33, 0.0);
|
||||
.menu > table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0 5px;
|
||||
min-width: 400px;
|
||||
background: rgba(33, 33, 33, 0);
|
||||
}
|
||||
|
||||
.menu>table>thead {
|
||||
background: rgba(10, 10, 10, 0.9);
|
||||
text-align: center;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 20px;
|
||||
color: #fff;
|
||||
.menu > table > thead {
|
||||
background: rgba(10, 10, 10, 0.9);
|
||||
text-align: center;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.menu td {
|
||||
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
margin: 20px;
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.menu tbody tr:nth-child(even) {
|
||||
color: #fff;
|
||||
background: rgba(40, 40, 40, 0.8);
|
||||
color: #fff;
|
||||
background: rgba(40, 40, 40, 0.8);
|
||||
}
|
||||
|
||||
.menu tbody tr:nth-child(odd) {
|
||||
color: #fff;
|
||||
background: rgba(40, 40, 40, 0.8);
|
||||
}
|
||||
color: #fff;
|
||||
background: rgba(40, 40, 40, 0.8);
|
||||
}
|
||||
|
||||
+174
-157
@@ -1,192 +1,209 @@
|
||||
(function(){
|
||||
(function () {
|
||||
let MenuTpl =
|
||||
'<div id="menu_{{_namespace}}_{{_name}}" class="menu">' +
|
||||
"<table>" +
|
||||
"<thead>" +
|
||||
"<tr>" +
|
||||
"{{#head}}<td>{{content}}</td>{{/head}}" +
|
||||
"</tr>" +
|
||||
"</thead>" +
|
||||
"<tbody>" +
|
||||
"{{#rows}}" +
|
||||
"<tr>" +
|
||||
"{{#cols}}<td>{{{content}}}</td>{{/cols}}" +
|
||||
"</tr>" +
|
||||
"{{/rows}}" +
|
||||
"</tbody>" +
|
||||
"</table>" +
|
||||
"</div>";
|
||||
window.ESX_MENU = {};
|
||||
ESX_MENU.ResourceName = "esx_menu_list";
|
||||
ESX_MENU.opened = {};
|
||||
ESX_MENU.focus = [];
|
||||
ESX_MENU.data = {};
|
||||
|
||||
let MenuTpl =
|
||||
'<div id="menu_{{_namespace}}_{{_name}}" class="menu">' +
|
||||
'<table>' +
|
||||
'<thead>' +
|
||||
'<tr>' +
|
||||
'{{#head}}<td>{{content}}</td>{{/head}}' +
|
||||
'</tr>' +
|
||||
'</thead>'+
|
||||
'<tbody>' +
|
||||
'{{#rows}}' +
|
||||
'<tr>' +
|
||||
'{{#cols}}<td>{{{content}}}</td>{{/cols}}' +
|
||||
'</tr>' +
|
||||
'{{/rows}}' +
|
||||
'</tbody>' +
|
||||
'</table>' +
|
||||
'</div>'
|
||||
;
|
||||
ESX_MENU.open = function (namespace, name, data) {
|
||||
if (typeof ESX_MENU.opened[namespace] == "undefined") {
|
||||
ESX_MENU.opened[namespace] = {};
|
||||
}
|
||||
|
||||
window.ESX_MENU = {};
|
||||
ESX_MENU.ResourceName = 'esx_menu_list';
|
||||
ESX_MENU.opened = {};
|
||||
ESX_MENU.focus = [];
|
||||
ESX_MENU.data = {};
|
||||
if (typeof ESX_MENU.opened[namespace][name] != "undefined") {
|
||||
ESX_MENU.close(namespace, name);
|
||||
}
|
||||
|
||||
ESX_MENU.open = function(namespace, name, data) {
|
||||
data._namespace = namespace;
|
||||
data._name = name;
|
||||
|
||||
if (typeof ESX_MENU.opened[namespace] == 'undefined') {
|
||||
ESX_MENU.opened[namespace] = {};
|
||||
}
|
||||
ESX_MENU.opened[namespace][name] = data;
|
||||
|
||||
if (typeof ESX_MENU.opened[namespace][name] != 'undefined') {
|
||||
ESX_MENU.close(namespace, name);
|
||||
}
|
||||
ESX_MENU.focus.push({
|
||||
namespace: namespace,
|
||||
name: name,
|
||||
});
|
||||
|
||||
data._namespace = namespace;
|
||||
data._name = name;
|
||||
ESX_MENU.render();
|
||||
};
|
||||
|
||||
ESX_MENU.opened[namespace][name] = data;
|
||||
ESX_MENU.close = function (namespace, name) {
|
||||
delete ESX_MENU.opened[namespace][name];
|
||||
|
||||
ESX_MENU.focus.push({
|
||||
namespace: namespace,
|
||||
name : name
|
||||
});
|
||||
|
||||
ESX_MENU.render();
|
||||
};
|
||||
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.close = function(namespace, name) {
|
||||
delete ESX_MENU.opened[namespace][name];
|
||||
ESX_MENU.render();
|
||||
};
|
||||
|
||||
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 = function () {
|
||||
let menuContainer = document.getElementById("menus");
|
||||
let focused = ESX_MENU.getFocused();
|
||||
menuContainer.innerHTML = "";
|
||||
|
||||
ESX_MENU.render();
|
||||
};
|
||||
$(menuContainer).hide();
|
||||
|
||||
ESX_MENU.render = function() {
|
||||
for (let namespace in ESX_MENU.opened) {
|
||||
if (typeof ESX_MENU.data[namespace] == "undefined") {
|
||||
ESX_MENU.data[namespace] = {};
|
||||
}
|
||||
|
||||
let menuContainer = document.getElementById('menus');
|
||||
let focused = ESX_MENU.getFocused();
|
||||
menuContainer.innerHTML = '';
|
||||
for (let name in ESX_MENU.opened[namespace]) {
|
||||
ESX_MENU.data[namespace][name] = [];
|
||||
|
||||
$(menuContainer).hide();
|
||||
let menuData = ESX_MENU.opened[namespace][name];
|
||||
let view = {
|
||||
_namespace: menuData._namespace,
|
||||
_name: menuData._name,
|
||||
head: [],
|
||||
rows: [],
|
||||
};
|
||||
|
||||
for (let namespace in ESX_MENU.opened) {
|
||||
|
||||
if (typeof ESX_MENU.data[namespace] == 'undefined') {
|
||||
ESX_MENU.data[namespace] = {};
|
||||
}
|
||||
for (let i = 0; i < menuData.head.length; i++) {
|
||||
let item = { content: menuData.head[i] };
|
||||
view.head.push(item);
|
||||
}
|
||||
|
||||
for (let name in ESX_MENU.opened[namespace]) {
|
||||
for (let i = 0; i < menuData.rows.length; i++) {
|
||||
let row = menuData.rows[i];
|
||||
let data = row.data;
|
||||
|
||||
ESX_MENU.data[namespace][name] = [];
|
||||
ESX_MENU.data[namespace][name].push(data);
|
||||
|
||||
let menuData = ESX_MENU.opened[namespace][name];
|
||||
let view = {
|
||||
_namespace: menuData._namespace,
|
||||
_name : menuData._name,
|
||||
head : [],
|
||||
rows : []
|
||||
};
|
||||
view.rows.push({ cols: [] });
|
||||
|
||||
for (let i=0; i<menuData.head.length; i++) {
|
||||
let item = {content: menuData.head[i]};
|
||||
view.head.push(item);
|
||||
}
|
||||
for (let j = 0; j < row.cols.length; j++) {
|
||||
let col = menuData.rows[i].cols[j];
|
||||
let regex = /\{\{(.*?)\|(.*?)\}\}/g;
|
||||
let matches = [];
|
||||
let match;
|
||||
|
||||
for (let i=0; i<menuData.rows.length; i++) {
|
||||
let row = menuData.rows[i];
|
||||
let data = row.data;
|
||||
while ((match = regex.exec(col)) != null) {
|
||||
matches.push(match);
|
||||
}
|
||||
|
||||
ESX_MENU.data[namespace][name].push(data);
|
||||
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.push({cols: []});
|
||||
view.rows[i].cols.push({ data: data, content: col });
|
||||
}
|
||||
}
|
||||
|
||||
for (let j=0; j<row.cols.length; j++) {
|
||||
let menu = $(Mustache.render(MenuTpl, view));
|
||||
|
||||
let col = menuData.rows[i].cols[j];
|
||||
let regex = /\{\{(.*?)\|(.*?)\}\}/g;
|
||||
let matches = [];
|
||||
let match;
|
||||
menu.find("button[data-namespace][data-name]").click(function () {
|
||||
ESX_MENU.data[$(this).data("namespace")][$(this).data("name")][
|
||||
parseInt($(this).data("id"))
|
||||
].currentRow = parseInt($(this).data("id")) + 1;
|
||||
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"),
|
||||
});
|
||||
});
|
||||
|
||||
while ((match = regex.exec(col)) != null) {
|
||||
matches.push(match);
|
||||
}
|
||||
menu.hide();
|
||||
|
||||
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>');
|
||||
}
|
||||
menuContainer.appendChild(menu[0]);
|
||||
}
|
||||
}
|
||||
|
||||
view.rows[i].cols.push({data: data, content: col});
|
||||
}
|
||||
}
|
||||
if (typeof focused != "undefined") {
|
||||
$("#menu_" + focused.namespace + "_" + focused.name).show();
|
||||
}
|
||||
|
||||
let menu = $(Mustache.render(MenuTpl, view));
|
||||
$(menuContainer).show();
|
||||
};
|
||||
|
||||
menu.find('button[data-namespace][data-name]').click(function() {
|
||||
ESX_MENU.data[$(this).data('namespace')][$(this).data('name')][parseInt($(this).data('id'))].currentRow = parseInt($(this).data('id')) + 1;
|
||||
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')
|
||||
});
|
||||
});
|
||||
ESX_MENU.submit = function (namespace, name, data) {
|
||||
$.post(
|
||||
"http://" + ESX_MENU.ResourceName + "/menu_submit",
|
||||
JSON.stringify({
|
||||
_namespace: namespace,
|
||||
_name: name,
|
||||
data: data.data,
|
||||
value: data.value,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
menu.hide();
|
||||
ESX_MENU.cancel = function (namespace, name) {
|
||||
$.post(
|
||||
"http://" + ESX_MENU.ResourceName + "/menu_cancel",
|
||||
JSON.stringify({
|
||||
_namespace: namespace,
|
||||
_name: name,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
menuContainer.appendChild(menu[0]);
|
||||
}
|
||||
}
|
||||
ESX_MENU.getFocused = function () {
|
||||
return ESX_MENU.focus[ESX_MENU.focus.length - 1];
|
||||
};
|
||||
|
||||
if (typeof focused != 'undefined') {
|
||||
$('#menu_' + focused.namespace + '_' + focused.name).show();
|
||||
}
|
||||
window.onData = (data) => {
|
||||
switch (data.action) {
|
||||
case "openMenu": {
|
||||
ESX_MENU.open(data.namespace, data.name, data.data);
|
||||
break;
|
||||
}
|
||||
|
||||
$(menuContainer).show();
|
||||
};
|
||||
case "closeMenu": {
|
||||
ESX_MENU.close(data.namespace, data.name);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ESX_MENU.submit = function(namespace, name, data){
|
||||
$.post('http://' + ESX_MENU.ResourceName + '/menu_submit', JSON.stringify({
|
||||
_namespace: namespace,
|
||||
_name : name,
|
||||
data : data.data,
|
||||
value : data.value
|
||||
}));
|
||||
};
|
||||
window.onload = function (e) {
|
||||
window.addEventListener("message", (event) => {
|
||||
onData(event.data);
|
||||
});
|
||||
};
|
||||
|
||||
ESX_MENU.cancel = function(namespace, name){
|
||||
$.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;
|
||||
}
|
||||
|
||||
case 'closeMenu' : {
|
||||
ESX_MENU.close(data.namespace, data.name);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function(e){
|
||||
window.addEventListener('message', (event) => {
|
||||
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);
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
@@ -1,16 +1,14 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/app.css" />
|
||||
</head>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/app.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="menus"></div>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user