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

style(esx_menu_dialog): run prettier

Browse Source
This commit is contained in:
MoskalykA
2023-02-06 13:41:31 +01:00
parent aa92104550
commit 5b81c1b737
3 changed files with 221 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
[core]/esx_menu_dialog/html/css/app.css
+50 -50
View File
@@ -1,89 +1,89 @@
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
#controls {
font-family: montserrat;
font-size: 3em;
color: #FFF;
position: absolute;
bottom: 40;
right: 40;
font-family: montserrat;
font-size: 3em;
color: #fff;
position: absolute;
bottom: 40;
right: 40;
}
.controls {
display: none;
display: none;
}
.dialog {
font-family: montserrat;
background: rgba(33, 33, 33, 0.8);
font-family: montserrat;
background: rgba(33, 33, 33, 0.8);
color: #fff;
position: absolute;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
overflow: hidden;
top: 50%;
left: 50%;
width: 600px;
height: 152px;
transform: translate(-50%, -50%);
position: absolute;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
overflow: hidden;
top: 50%;
left: 50%;
width: 600px;
height: 152px;
transform: translate(-50%, -50%);
}
.head {
display: flex;
flex-basis: 100%;
align-items: center;
color: #fff;
display: flex;
flex-basis: 100%;
align-items: center;
color: #fff;
}
.dialog.big {
height: 200px;
height: 200px;
}
.dialog .head {
background: rgba(25, 25, 25, 0.9);
text-align: center;
height: 40px;
background: rgba(25, 25, 25, 0.9);
text-align: center;
height: 40px;
}
.dialog .head span::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.dialog input[type="text"] {
width: 60%;
height: 32px;
width: 60%;
height: 32px;
outline: 0;
background: none;
text-align: center;
margin-top: 26px;
margin-left: 125px;
font-size: large;
font-size: large;
transition: all 0.2s ease-in-out;
color: white;
border: 0.5px solid #ffffff3b;
border-radius: 0px;
}
.dialog input[type="text"]:active, .dialog input[type="text"]:hover {
.dialog input[type="text"]:active,
.dialog input[type="text"]:hover {
color: white;
}
.dialog textarea {
width: 100%;
height: 128px;
width: 100%;
height: 128px;
}
.dialog button[name="submit"] {
width: 17.6%;
height: 32px;
width: 17.6%;
height: 32px;
margin-left: 160px;
font-weight: 300;
color: rgb(37, 34, 53);
border-radius: 10px;
border-radius: 10px;
text-transform: uppercase;
background: rgb(50, 79, 208);
outline: 0;
@@ -93,17 +93,17 @@
.dialog button {
z-index: 9999;
transform: translate(-0%, 50%);
transform: translate(-0%, 50%);
}
.dialog button[name="cancel"] {
width: 17.6%;
height: 32px;
width: 17.6%;
height: 32px;
margin-left: 60px;
border: none;
text-transform: uppercase;
font-weight: 200;
border-radius: 10px;
border-radius: 10px;
color: rgb(53, 34, 34);
outline: 0;
background: #c74545;
@@ -124,9 +124,9 @@
.head::before,
.head::after {
content: "";
flex-grow: 1;
background: #00e1ff;
height: 2px;
margin: 0px 3px;
content: "";
flex-grow: 1;
background: #00e1ff;
height: 2px;
margin: 0px 3px;
}
[core]/esx_menu_dialog/html/js/app.js
+149 -135
View File
@@ -1,170 +1,184 @@
(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>'
;
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 = {};
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] = {};
}
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.opened[namespace][name] != 'undefined') {
ESX_MENU.close(namespace, name);
}
if (typeof ESX_MENU.pos[namespace] == "undefined") {
ESX_MENU.pos[namespace] = {};
}
if (typeof ESX_MENU.pos[namespace] == 'undefined') {
ESX_MENU.pos[namespace] = {};
}
if (typeof data.type == "undefined") {
data.type = "default";
}
if (typeof data.type == 'undefined') {
data.type = 'default';
}
if (typeof data.align == "undefined") {
data.align = "top-left";
}
if (typeof data.align == 'undefined') {
data.align = 'top-left';
}
data._index = ESX_MENU.focus.length;
data._namespace = namespace;
data._name = name;
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.opened[namespace][name] = data;
ESX_MENU.pos[namespace][name] = 0;
ESX_MENU.focus.push({
namespace: namespace,
name: name,
});
ESX_MENU.focus.push({
namespace: namespace,
name: name
});
document.onkeyup = function (key) {
if (key.which == 27) {
// Escape key
SendMessage(ESX_MENU.ResourceName, "menu_cancel", data);
} else if (key.which == 13) {
// Enter key
SendMessage(ESX_MENU.ResourceName, "menu_submit", data);
}
};
document.onkeyup = function (key) {
if (key.which == 27) { // Escape key
SendMessage(ESX_MENU.ResourceName, 'menu_cancel', data);
} else if (key.which == 13) { // Enter key
SendMessage(ESX_MENU.ResourceName, 'menu_submit', data);
}
};
ESX_MENU.render();
};
ESX_MENU.render();
};
ESX_MENU.close = function (namespace, name) {
delete ESX_MENU.opened[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
) {
ESX_MENU.focus.splice(i, 1);
break;
}
}
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();
};
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();
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));
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;
}
switch (menuData.type) {
case "big": {
view.isBig = true;
break;
}
case 'default': {
view.isDefault = true;
break;
}
default:
break;
}
case 'big': {
view.isBig = true;
break;
}
let menu = $(Mustache.render(MenuTpl, view))[0];
default: break;
}
$(menu).css("z-index", 1000 + view._index);
let menu = $(Mustache.render(MenuTpl, view))[0];
$(menu)
.find('button[name="submit"]')
.click(
function () {
ESX_MENU.submit(this.namespace, this.name, this.data);
}.bind({ namespace: namespace, name: name, data: menuData })
);
$(menu).css('z-index', 1000 + view._index);
$(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('button[name="submit"]').click(function () {
ESX_MENU.submit(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 })
);
$(menu).find('button[name="cancel"]').click(function () {
ESX_MENU.cancel(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);
}
$(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 }));
menuContainer.appendChild(menu);
}
}
if (typeof menuData.value != 'undefined') {
$(menu).find('[name="value"]').val(menuData.value);
}
$(menuContainer).show();
$("#inputText").focus();
};
menuContainer.appendChild(menu);
}
}
ESX_MENU.submit = function (namespace, name, data) {
SendMessage(ESX_MENU.ResourceName, "menu_submit", data);
};
$(menuContainer).show();
$("#inputText").focus();
};
ESX_MENU.cancel = function (namespace, name, data) {
SendMessage(ESX_MENU.ResourceName, "menu_cancel", data);
};
ESX_MENU.submit = function (namespace, name, data) {
SendMessage(ESX_MENU.ResourceName, 'menu_submit', data);
};
ESX_MENU.change = function (namespace, name, data) {
SendMessage(ESX_MENU.ResourceName, "menu_change", data);
};
ESX_MENU.cancel = function (namespace, name, data) {
SendMessage(ESX_MENU.ResourceName, 'menu_cancel', data);
};
ESX_MENU.getFocused = function () {
return ESX_MENU.focus[ESX_MENU.focus.length - 1];
};
ESX_MENU.change = function (namespace, name, data) {
SendMessage(ESX_MENU.ResourceName, 'menu_change', data);
};
window.onData = (data) => {
switch (data.action) {
case "openMenu": {
ESX_MENU.open(data.namespace, data.name, data.data);
break;
}
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);
});
};
case "closeMenu": {
ESX_MENU.close(data.namespace, data.name);
break;
}
}
};
window.onload = function (e) {
window.addEventListener("message", (event) => {
onData(event.data);
});
};
})();
[core]/esx_menu_dialog/html/ui.html
+22 -15
View File
@@ -1,19 +1,26 @@
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="nui://esx_menu_dialog/html/css/app.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@1,300&family=PT+Sans+Narrow&display=swap"
rel="stylesheet"
/>
</head>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="nui://esx_menu_dialog/html/css/app.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@1,300&family=PT+Sans+Narrow&display=swap" rel="stylesheet">
</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>
<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>