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

style(esx_context): run prettier

Browse Source
This commit is contained in:
MoskalykA
2023-02-06 13:39:56 +01:00
parent 0832bbe197
commit 7cf0ed00c6
1 changed files with 459 additions and 440 deletions
Download Patch File Download Diff File Expand all files Collapse all files
[core]/esx_context/index.html
+459 -440
View File
@@ -1,443 +1,462 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head> <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<script src="nui://game/ui/jquery.js" type="text/javascript"></script> <link
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"> rel="stylesheet"
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"> href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
/>
<meta charset="utf-8"> <link
<meta name="viewport" content="width=device-width, initial-scale=1"> rel="stylesheet"
<title>ESX Context HUD</title> href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
/>
<style type="text/css">
:root { <meta charset="utf-8" />
--item-main: #242424; <meta name="viewport" content="width=device-width, initial-scale=1" />
--item-unselectable: #161616; <title>ESX Context HUD</title>
--item-hover: #404040;
--item-disabled: #393939; <style type="text/css">
} :root {
--item-main: #242424;
html, --item-unselectable: #161616;
body { --item-hover: #404040;
margin: 0; --item-disabled: #393939;
padding: 0; }
outline: none;
border: none; html,
} body {
margin: 0;
body { padding: 0;
position: absolute; outline: none;
top: 0px; border: none;
left: 0px; }
width: 100%;
height: 100%; body {
position: absolute;
display: none; top: 0px;
} left: 0px;
width: 100%;
#container { height: 100%;
position: absolute;
width: 280px; display: none;
max-height: 50%; }
height: auto;
display: flex; #container {
flex-direction: column; position: absolute;
gap: 10px; width: 280px;
overflow-y: auto; max-height: 50%;
padding-right: 5px; height: auto;
} display: flex;
flex-direction: column;
.center { gap: 10px;
top: 50%; overflow-y: auto;
left: 50%; padding-right: 5px;
transform: translate(-50%, -50%); }
}
.center {
.left { top: 50%;
top: 50%; left: 50%;
left: 25%; transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
}
.left {
.right { top: 50%;
top: 50%; left: 25%;
left: 75%; transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
}
.right {
.item { top: 50%;
display: grid; left: 75%;
grid-template-columns: 30px calc(100% - 30px); transform: translate(-50%, -50%);
padding: 15px 10px; }
border-radius: 5px;
background: var(--item-main); .item {
} display: grid;
grid-template-columns: 30px calc(100% - 30px);
.item:hover { padding: 15px 10px;
background: var(--item-hover); border-radius: 5px;
} background: var(--item-main);
}
.item>i {
text-align: center; .item:hover {
} background: var(--item-hover);
}
.item>div {
display: flex; .item > i {
flex-direction: column; text-align: center;
gap: 5px; }
}
.item > div {
.item>div>i { display: flex;
opacity: 0.5; flex-direction: column;
} gap: 5px;
}
.input {
display: flex; .item > div > i {
flex-direction: column; opacity: 0.5;
gap: 5px; }
padding: 15px 10px;
border-radius: 5px; .input {
background: var(--item-main); display: flex;
} flex-direction: column;
gap: 5px;
.input:hover { padding: 15px 10px;
background: var(--item-hover); border-radius: 5px;
} background: var(--item-main);
}
input {
position: relative; .input:hover {
width: auto; background: var(--item-hover);
padding: 5px; }
margin: 0;
border: none; input {
border: none; position: relative;
background: transparent; width: auto;
} padding: 5px;
margin: 0;
.unselectable { border: none;
background: var(--item-unselectable); border: none;
pointer-events: none; background: transparent;
} }
.disabled { .unselectable {
pointer-events: none; background: var(--item-unselectable);
background: var(--item-disabled); pointer-events: none;
} }
* { .disabled {
color: white; pointer-events: none;
font-family: Arial; background: var(--item-disabled);
user-select: none; }
font-size: 14px;
} * {
color: white;
::-webkit-scrollbar { font-family: Arial;
width: 5px; user-select: none;
} font-size: 14px;
}
::-webkit-scrollbar-thumb {
background: rgb(20, 20, 20); ::-webkit-scrollbar {
border-radius: 5px; width: 5px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb {
background: rgb(30, 30, 30); background: rgb(20, 20, 20);
} border-radius: 5px;
}
.container {
display: flex; ::-webkit-scrollbar-thumb:hover {
position: relative; background: rgb(30, 30, 30);
cursor: pointer; }
font-size: 14px;
-webkit-user-select: none; .container {
-moz-user-select: none; display: flex;
-ms-user-select: none; position: relative;
user-select: none; cursor: pointer;
flex-direction: row-reverse; font-size: 14px;
align-items: center; -webkit-user-select: none;
justify-content: flex-end; -moz-user-select: none;
gap: 5px; -ms-user-select: none;
} user-select: none;
flex-direction: row-reverse;
/* Hide the browser's default checkbox */ align-items: center;
.container input { justify-content: flex-end;
position: relative; gap: 5px;
opacity: 0; }
cursor: pointer;
height: 0; /* Hide the browser's default checkbox */
width: 0; .container input {
} position: relative;
opacity: 0;
/* Create a custom checkbox */ cursor: pointer;
.checkmark { height: 0;
position: relative; width: 0;
height: 10px; }
width: 10px;
border-radius: 8px; /* Create a custom checkbox */
background-color: #eee; .checkmark {
} position: relative;
height: 10px;
/* On mouse-over, add a grey background color */ width: 10px;
.container:hover input~.checkmark { border-radius: 8px;
background-color: #ccc; background-color: #eee;
} }
/* When the checkbox is checked, add a blue background */ /* On mouse-over, add a grey background color */
.container input:checked~.checkmark { .container:hover input ~ .checkmark {
background-color: #2196F3; background-color: #ccc;
} }
/* Create the checkmark/indicator (hidden when not checked) */ /* When the checkbox is checked, add a blue background */
.checkmark:after { .container input:checked ~ .checkmark {
content: ""; background-color: #2196f3;
position: relative; }
display: none;
} /* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
/* Show the checkmark when checked */ content: "";
.container input:checked~.checkmark:after { position: relative;
display: block; display: none;
} }
</style>
</head> /* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
<body> display: block;
}
<div id="container" class="right"> </style>
<div class="item unselectable"> </head>
<i class="fas fa-info-circle"></i>
<div> <body>
<b>Unselectable Item</b> <div id="container" class="right">
<i>Testing, testing a description here.</i> <div class="item unselectable">
</div> <i class="fas fa-info-circle"></i>
</div> <div>
<div class="item disabled"> <b>Unselectable Item</b>
<i class="fas fa-times"></i> <i>Testing, testing a description here.</i>
<div> </div>
<b>Disabled Item</b> </div>
<i>Testing, testing a description here.</i> <div class="item disabled">
</div> <i class="fas fa-times"></i>
</div> <div>
<div class="item"> <b>Disabled Item</b>
<i class="fas fa-check"></i> <i>Testing, testing a description here.</i>
<div> </div>
<b>Item</b> </div>
<i>Testing, testing a description here. Generic words to force overflow.</i> <div class="item">
</div> <i class="fas fa-check"></i>
</div> <div>
</div> <b>Item</b>
<i
<script type="text/javascript"> >Testing, testing a description here. Generic words to force
const container = document.getElementById("container") overflow.</i
>
const CreateElement = (tag = "div", className = "", parent) => { </div>
const e = document.createElement(tag) </div>
e.className = className </div>
if (parent) { <script type="text/javascript">
parent.append(e) const container = document.getElementById("container");
}
const CreateElement = (tag = "div", className = "", parent) => {
return e const e = document.createElement(tag);
} e.className = className;
function Open(eles, position = "right") { if (parent) {
container.innerHTML = "" parent.append(e);
container.className = position }
for (let i = 0; i < eles.length; i++) { return e;
let ele = eles[i] };
let item = CreateElement("div", "item", container)
function Open(eles, position = "right") {
let icon = CreateElement("i", ele.icon, item) container.innerHTML = "";
let div = CreateElement("div", "", item) container.className = position;
let title = CreateElement("b", "", div) for (let i = 0; i < eles.length; i++) {
title.innerHTML = ele.title let ele = eles[i];
let item = CreateElement("div", "item", container);
if (ele.description) {
let desc = CreateElement("i", "", div) let icon = CreateElement("i", ele.icon, item);
desc.innerHTML = ele.description || "" let div = CreateElement("div", "", item);
}
let title = CreateElement("b", "", div);
if (ele.input) { title.innerHTML = ele.title;
if (ele.inputType == "radio") {
for (let j = 0; j < ele.inputValues.length; j++) { if (ele.description) {
let v = ele.inputValues[j] let desc = CreateElement("i", "", div);
let container = CreateElement("label", "container", div) desc.innerHTML = ele.description || "";
container.innerHTML = v.text }
let input = CreateElement("INPUT", "", container) if (ele.input) {
input.type = "radio" if (ele.inputType == "radio") {
input.name = i + 1 for (let j = 0; j < ele.inputValues.length; j++) {
input.checked = (ele.inputValue || ele.inputPlaceholder || -1) == v.value let v = ele.inputValues[j];
let container = CreateElement("label", "container", div);
let span = CreateElement("SPAN", "checkmark", container) container.innerHTML = v.text;
input.onchange = function () { let input = CreateElement("INPUT", "", container);
$.post(`https://${GetParentResourceName()}/changed`, JSON.stringify({ input.type = "radio";
index: i + 1, input.name = i + 1;
value: v.value input.checked =
})) (ele.inputValue || ele.inputPlaceholder || -1) == v.value;
}
} let span = CreateElement("SPAN", "checkmark", container);
} else {
let input = CreateElement("input", "", div) input.onchange = function () {
input.type = ele.inputType $.post(
`https://${GetParentResourceName()}/changed`,
if (ele.inputValue) { JSON.stringify({
input.value = ele.inputValue index: i + 1,
} value: v.value,
})
if (ele.inputPlaceholder) { );
input.placeholder = ele.inputPlaceholder };
} }
} else {
switch (ele.inputType) { let input = CreateElement("input", "", div);
case "number": input.type = ele.inputType;
if (ele.inputMin) input.min = ele.inputMin;
if (ele.inputMax) input.max = ele.inputMax; if (ele.inputValue) {
input.value = ele.inputValue;
input.onchange = function () { }
let v = Number(input.value)
if (ele.inputPlaceholder) {
if (ele.inputMin) { input.placeholder = ele.inputPlaceholder;
v = Math.max(ele.inputMin, v) }
}
switch (ele.inputType) {
if (ele.inputMax) { case "number":
v = Math.min(ele.inputMax, v) if (ele.inputMin) input.min = ele.inputMin;
} if (ele.inputMax) input.max = ele.inputMax;
input.value = v input.onchange = function () {
let v = Number(input.value);
$.post(`https://${GetParentResourceName()}/changed`, JSON.stringify({
index: i + 1, if (ele.inputMin) {
value: v v = Math.max(ele.inputMin, v);
})) }
}
break if (ele.inputMax) {
v = Math.min(ele.inputMax, v);
case "text": }
input.onchange = function () {
$.post(`https://${GetParentResourceName()}/changed`, JSON.stringify({ input.value = v;
index: i + 1,
value: input.value $.post(
})) `https://${GetParentResourceName()}/changed`,
} JSON.stringify({
break index: i + 1,
} value: v,
} })
} else { );
if (ele.disabled) { };
item.className += " disabled" break;
} else if (ele.unselectable) {
item.className += " unselectable" case "text":
} else if (!ele.input) { input.onchange = function () {
item.onclick = function () { $.post(
$.post(`https://${GetParentResourceName()}/selected`, JSON.stringify({ `https://${GetParentResourceName()}/changed`,
index: i + 1 JSON.stringify({
})) index: i + 1,
} value: input.value,
} })
} );
} };
break;
document.body.style.display = "block" }
} }
} else {
function Closed() { if (ele.disabled) {
document.body.style.display = "none" item.className += " disabled";
} } else if (ele.unselectable) {
item.className += " unselectable";
function Close() { } else if (!ele.input) {
$.post(`https://${GetParentResourceName()}/closed`,(retVal)=>{ item.onclick = function () {
if(retVal){ $.post(
Closed() `https://${GetParentResourceName()}/selected`,
} JSON.stringify({
}) index: i + 1,
} })
);
window.addEventListener("message", (e) => { };
let data = e.data }
}
if (!data.func || !window[data.func]) { }
return
} document.body.style.display = "block";
}
window[data.func](...data.args)
}) function Closed() {
document.body.style.display = "none";
window.addEventListener("keydown", (e) => { }
if (e.key == "Escape" || e.key == "Backspace") {
if (e.target.tagName.toLowerCase() == "input") { function Close() {
return $.post(`https://${GetParentResourceName()}/closed`, (retVal) => {
} if (retVal) {
Closed();
Close() }
} });
}) }
// Open([ window.addEventListener("message", (e) => {
// { let data = e.data;
// unselectable:true,
// icon:"fas fa-info-circle", if (!data.func || !window[data.func]) {
// title:"Unselectable Item (Header/Label?)", return;
// }, }
// {
// icon:"fas fa-check", window[data.func](...data.args);
// title:"Item A", });
// description:"Some description here. Add some words to make the text overflow."
// }, window.addEventListener("keydown", (e) => {
// { if (e.key == "Escape" || e.key == "Backspace") {
// disabled:true, if (e.target.tagName.toLowerCase() == "input") {
// icon:"fas fa-times", return;
// title:"Disabled Item", }
// description:"Some description here. Add some words to make the text overflow."
// }, Close();
// { }
// icon:"fas fa-check", });
// title:"Item B",
// description:"Some description here. Add some words to make the text overflow." // Open([
// }, // {
// { // unselectable:true,
// input:true, // icon:"fas fa-info-circle",
// icon:"fas fa-times", // title:"Unselectable Item (Header/Label?)",
// title:"Input Text", // },
// inputType:"text", // {
// inputPlaceholder:"Placeholder..." // icon:"fas fa-check",
// }, // title:"Item A",
// { // description:"Some description here. Add some words to make the text overflow."
// input:true, // },
// icon:"", // {
// title:"Input Number", // disabled:true,
// inputType:"number", // icon:"fas fa-times",
// inputPlaceholder:"Placeholder...", // title:"Disabled Item",
// inputValue:0, // description:"Some description here. Add some words to make the text overflow."
// inputMin:0, // },
// inputMax:50 // {
// }, // icon:"fas fa-check",
// { // title:"Item B",
// input:true, // description:"Some description here. Add some words to make the text overflow."
// icon:"", // },
// title:"Input Radio", // {
// inputType:"radio", // input:true,
// inputPlaceholder:"turbocharger", // icon:"fas fa-times",
// inputValue:"supercharger", // title:"Input Text",
// inputValues:[ // inputType:"text",
// { // inputPlaceholder:"Placeholder..."
// value:"turbocharger", // },
// title:"Turbocharger" // {
// }, // input:true,
// { // icon:"",
// value:"supercharger", // title:"Input Number",
// title:"Supercharger" // inputType:"number",
// }, // inputPlaceholder:"Placeholder...",
// ] // inputValue:0,
// } // inputMin:0,
// ]) // inputMax:50
</script> // },
</body> // {
// input:true,
// icon:"",
// title:"Input Radio",
// inputType:"radio",
// inputPlaceholder:"turbocharger",
// inputValue:"supercharger",
// inputValues:[
// {
// value:"turbocharger",
// title:"Turbocharger"
// },
// {
// value:"supercharger",
// title:"Supercharger"
// },
// ]
// }
// ])
</script>
</body>
</html> </html>