mirror of
https://github.com/esx-framework/esx_core.git
synced 2026-08-29 03:01:31 +00:00
build: new repos
This commit is contained in:
Benzo
|
Before Width: | Height: | Size: 1015 B After Width: | Height: | Size: 1015 B |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 662 B After Width: | Height: | Size: 662 B |
@@ -1,24 +1,24 @@
|
|||||||
fx_version 'bodacious'
|
fx_version 'bodacious'
|
||||||
|
|
||||||
game 'gta5'
|
game 'gta5'
|
||||||
author 'ESX-Framework & Brayden'
|
author 'ESX-Framework & Brayden'
|
||||||
description 'Offical ESX Legacy Context Menu'
|
description 'Offical ESX Legacy Context Menu'
|
||||||
lua54 'yes'
|
lua54 'yes'
|
||||||
version '1.9.0'
|
version '1.9.0'
|
||||||
|
|
||||||
ui_page 'index.html'
|
ui_page 'index.html'
|
||||||
|
|
||||||
shared_script '@es_extended/imports.lua'
|
shared_script '@es_extended/imports.lua'
|
||||||
|
|
||||||
client_scripts {
|
client_scripts {
|
||||||
'config.lua',
|
'config.lua',
|
||||||
'main.lua',
|
'main.lua',
|
||||||
}
|
}
|
||||||
|
|
||||||
files {
|
files {
|
||||||
'index.html'
|
'index.html'
|
||||||
}
|
}
|
||||||
|
|
||||||
dependencies {
|
dependencies {
|
||||||
'es_extended'
|
'es_extended'
|
||||||
}
|
}
|
||||||
@@ -1,443 +1,443 @@
|
|||||||
<!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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
|
||||||
|
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>ESX Context HUD</title>
|
<title>ESX Context HUD</title>
|
||||||
|
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
:root {
|
:root {
|
||||||
--item-main: #242424;
|
--item-main: #242424;
|
||||||
--item-unselectable: #161616;
|
--item-unselectable: #161616;
|
||||||
--item-hover: #404040;
|
--item-hover: #404040;
|
||||||
--item-disabled: #393939;
|
--item-disabled: #393939;
|
||||||
}
|
}
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
outline: none;
|
outline: none;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#container {
|
#container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 280px;
|
width: 280px;
|
||||||
max-height: 50%;
|
max-height: 50%;
|
||||||
height: auto;
|
height: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.center {
|
.center {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 25%;
|
left: 25%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 75%;
|
left: 75%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 30px calc(100% - 30px);
|
grid-template-columns: 30px calc(100% - 30px);
|
||||||
padding: 15px 10px;
|
padding: 15px 10px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background: var(--item-main);
|
background: var(--item-main);
|
||||||
}
|
}
|
||||||
|
|
||||||
.item:hover {
|
.item:hover {
|
||||||
background: var(--item-hover);
|
background: var(--item-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.item>i {
|
.item>i {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item>div {
|
.item>div {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item>div>i {
|
.item>div>i {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input {
|
.input {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
padding: 15px 10px;
|
padding: 15px 10px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background: var(--item-main);
|
background: var(--item-main);
|
||||||
}
|
}
|
||||||
|
|
||||||
.input:hover {
|
.input:hover {
|
||||||
background: var(--item-hover);
|
background: var(--item-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: auto;
|
width: auto;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
border: none;
|
border: none;
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.unselectable {
|
.unselectable {
|
||||||
background: var(--item-unselectable);
|
background: var(--item-unselectable);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.disabled {
|
.disabled {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
background: var(--item-disabled);
|
background: var(--item-disabled);
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
color: white;
|
color: white;
|
||||||
font-family: Arial;
|
font-family: Arial;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 5px;
|
width: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background: rgb(20, 20, 20);
|
background: rgb(20, 20, 20);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
::-webkit-scrollbar-thumb:hover {
|
||||||
background: rgb(30, 30, 30);
|
background: rgb(30, 30, 30);
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hide the browser's default checkbox */
|
/* Hide the browser's default checkbox */
|
||||||
.container input {
|
.container input {
|
||||||
position: relative;
|
position: relative;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 0;
|
height: 0;
|
||||||
width: 0;
|
width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Create a custom checkbox */
|
/* Create a custom checkbox */
|
||||||
.checkmark {
|
.checkmark {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* On mouse-over, add a grey background color */
|
/* On mouse-over, add a grey background color */
|
||||||
.container:hover input~.checkmark {
|
.container:hover input~.checkmark {
|
||||||
background-color: #ccc;
|
background-color: #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* When the checkbox is checked, add a blue background */
|
/* When the checkbox is checked, add a blue background */
|
||||||
.container input:checked~.checkmark {
|
.container input:checked~.checkmark {
|
||||||
background-color: #2196F3;
|
background-color: #2196F3;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Create the checkmark/indicator (hidden when not checked) */
|
/* Create the checkmark/indicator (hidden when not checked) */
|
||||||
.checkmark:after {
|
.checkmark:after {
|
||||||
content: "";
|
content: "";
|
||||||
position: relative;
|
position: relative;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Show the checkmark when checked */
|
/* Show the checkmark when checked */
|
||||||
.container input:checked~.checkmark:after {
|
.container input:checked~.checkmark:after {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="container" class="right">
|
<div id="container" class="right">
|
||||||
<div class="item unselectable">
|
<div class="item unselectable">
|
||||||
<i class="fas fa-info-circle"></i>
|
<i class="fas fa-info-circle"></i>
|
||||||
<div>
|
<div>
|
||||||
<b>Unselectable Item</b>
|
<b>Unselectable Item</b>
|
||||||
<i>Testing, testing a description here.</i>
|
<i>Testing, testing a description here.</i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item disabled">
|
<div class="item disabled">
|
||||||
<i class="fas fa-times"></i>
|
<i class="fas fa-times"></i>
|
||||||
<div>
|
<div>
|
||||||
<b>Disabled Item</b>
|
<b>Disabled Item</b>
|
||||||
<i>Testing, testing a description here.</i>
|
<i>Testing, testing a description here.</i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<i class="fas fa-check"></i>
|
<i class="fas fa-check"></i>
|
||||||
<div>
|
<div>
|
||||||
<b>Item</b>
|
<b>Item</b>
|
||||||
<i>Testing, testing a description here. Generic words to force overflow.</i>
|
<i>Testing, testing a description here. Generic words to force overflow.</i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
const container = document.getElementById("container")
|
const container = document.getElementById("container")
|
||||||
|
|
||||||
const CreateElement = (tag = "div", className = "", parent) => {
|
const CreateElement = (tag = "div", className = "", parent) => {
|
||||||
const e = document.createElement(tag)
|
const e = document.createElement(tag)
|
||||||
e.className = className
|
e.className = className
|
||||||
|
|
||||||
if (parent) {
|
if (parent) {
|
||||||
parent.append(e)
|
parent.append(e)
|
||||||
}
|
}
|
||||||
|
|
||||||
return e
|
return e
|
||||||
}
|
}
|
||||||
|
|
||||||
function Open(eles, position = "right") {
|
function Open(eles, position = "right") {
|
||||||
container.innerHTML = ""
|
container.innerHTML = ""
|
||||||
container.className = position
|
container.className = position
|
||||||
|
|
||||||
for (let i = 0; i < eles.length; i++) {
|
for (let i = 0; i < eles.length; i++) {
|
||||||
let ele = eles[i]
|
let ele = eles[i]
|
||||||
let item = CreateElement("div", "item", container)
|
let item = CreateElement("div", "item", container)
|
||||||
|
|
||||||
let icon = CreateElement("i", ele.icon, item)
|
let icon = CreateElement("i", ele.icon, item)
|
||||||
let div = CreateElement("div", "", item)
|
let div = CreateElement("div", "", item)
|
||||||
|
|
||||||
let title = CreateElement("b", "", div)
|
let title = CreateElement("b", "", div)
|
||||||
title.innerHTML = ele.title
|
title.innerHTML = ele.title
|
||||||
|
|
||||||
if (ele.description) {
|
if (ele.description) {
|
||||||
let desc = CreateElement("i", "", div)
|
let desc = CreateElement("i", "", div)
|
||||||
desc.innerHTML = ele.description || ""
|
desc.innerHTML = ele.description || ""
|
||||||
}
|
}
|
||||||
|
|
||||||
if (ele.input) {
|
if (ele.input) {
|
||||||
if (ele.inputType == "radio") {
|
if (ele.inputType == "radio") {
|
||||||
for (let j = 0; j < ele.inputValues.length; j++) {
|
for (let j = 0; j < ele.inputValues.length; j++) {
|
||||||
let v = ele.inputValues[j]
|
let v = ele.inputValues[j]
|
||||||
let container = CreateElement("label", "container", div)
|
let container = CreateElement("label", "container", div)
|
||||||
container.innerHTML = v.text
|
container.innerHTML = v.text
|
||||||
|
|
||||||
let input = CreateElement("INPUT", "", container)
|
let input = CreateElement("INPUT", "", container)
|
||||||
input.type = "radio"
|
input.type = "radio"
|
||||||
input.name = i + 1
|
input.name = i + 1
|
||||||
input.checked = (ele.inputValue || ele.inputPlaceholder || -1) == v.value
|
input.checked = (ele.inputValue || ele.inputPlaceholder || -1) == v.value
|
||||||
|
|
||||||
let span = CreateElement("SPAN", "checkmark", container)
|
let span = CreateElement("SPAN", "checkmark", container)
|
||||||
|
|
||||||
input.onchange = function () {
|
input.onchange = function () {
|
||||||
$.post(`https://${GetParentResourceName()}/changed`, JSON.stringify({
|
$.post(`https://${GetParentResourceName()}/changed`, JSON.stringify({
|
||||||
index: i + 1,
|
index: i + 1,
|
||||||
value: v.value
|
value: v.value
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
let input = CreateElement("input", "", div)
|
let input = CreateElement("input", "", div)
|
||||||
input.type = ele.inputType
|
input.type = ele.inputType
|
||||||
|
|
||||||
if (ele.inputValue) {
|
if (ele.inputValue) {
|
||||||
input.value = ele.inputValue
|
input.value = ele.inputValue
|
||||||
}
|
}
|
||||||
|
|
||||||
if (ele.inputPlaceholder) {
|
if (ele.inputPlaceholder) {
|
||||||
input.placeholder = ele.inputPlaceholder
|
input.placeholder = ele.inputPlaceholder
|
||||||
}
|
}
|
||||||
|
|
||||||
switch (ele.inputType) {
|
switch (ele.inputType) {
|
||||||
case "number":
|
case "number":
|
||||||
if (ele.inputMin) input.min = ele.inputMin;
|
if (ele.inputMin) input.min = ele.inputMin;
|
||||||
if (ele.inputMax) input.max = ele.inputMax;
|
if (ele.inputMax) input.max = ele.inputMax;
|
||||||
|
|
||||||
input.onchange = function () {
|
input.onchange = function () {
|
||||||
let v = Number(input.value)
|
let v = Number(input.value)
|
||||||
|
|
||||||
if (ele.inputMin) {
|
if (ele.inputMin) {
|
||||||
v = Math.max(ele.inputMin, v)
|
v = Math.max(ele.inputMin, v)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (ele.inputMax) {
|
if (ele.inputMax) {
|
||||||
v = Math.min(ele.inputMax, v)
|
v = Math.min(ele.inputMax, v)
|
||||||
}
|
}
|
||||||
|
|
||||||
input.value = v
|
input.value = v
|
||||||
|
|
||||||
$.post(`https://${GetParentResourceName()}/changed`, JSON.stringify({
|
$.post(`https://${GetParentResourceName()}/changed`, JSON.stringify({
|
||||||
index: i + 1,
|
index: i + 1,
|
||||||
value: v
|
value: v
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
break
|
break
|
||||||
|
|
||||||
case "text":
|
case "text":
|
||||||
input.onchange = function () {
|
input.onchange = function () {
|
||||||
$.post(`https://${GetParentResourceName()}/changed`, JSON.stringify({
|
$.post(`https://${GetParentResourceName()}/changed`, JSON.stringify({
|
||||||
index: i + 1,
|
index: i + 1,
|
||||||
value: input.value
|
value: input.value
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
if (ele.disabled) {
|
if (ele.disabled) {
|
||||||
item.className += " disabled"
|
item.className += " disabled"
|
||||||
} else if (ele.unselectable) {
|
} else if (ele.unselectable) {
|
||||||
item.className += " unselectable"
|
item.className += " unselectable"
|
||||||
} else if (!ele.input) {
|
} else if (!ele.input) {
|
||||||
item.onclick = function () {
|
item.onclick = function () {
|
||||||
$.post(`https://${GetParentResourceName()}/selected`, JSON.stringify({
|
$.post(`https://${GetParentResourceName()}/selected`, JSON.stringify({
|
||||||
index: i + 1
|
index: i + 1
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
document.body.style.display = "block"
|
document.body.style.display = "block"
|
||||||
}
|
}
|
||||||
|
|
||||||
function Closed() {
|
function Closed() {
|
||||||
document.body.style.display = "none"
|
document.body.style.display = "none"
|
||||||
}
|
}
|
||||||
|
|
||||||
function Close() {
|
function Close() {
|
||||||
$.post(`https://${GetParentResourceName()}/closed`,(retVal)=>{
|
$.post(`https://${GetParentResourceName()}/closed`,(retVal)=>{
|
||||||
if(retVal){
|
if(retVal){
|
||||||
Closed()
|
Closed()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener("message", (e) => {
|
window.addEventListener("message", (e) => {
|
||||||
let data = e.data
|
let data = e.data
|
||||||
|
|
||||||
if (!data.func || !window[data.func]) {
|
if (!data.func || !window[data.func]) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
window[data.func](...data.args)
|
window[data.func](...data.args)
|
||||||
})
|
})
|
||||||
|
|
||||||
window.addEventListener("keydown", (e) => {
|
window.addEventListener("keydown", (e) => {
|
||||||
if (e.key == "Escape" || e.key == "Backspace") {
|
if (e.key == "Escape" || e.key == "Backspace") {
|
||||||
if (e.target.tagName.toLowerCase() == "input") {
|
if (e.target.tagName.toLowerCase() == "input") {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
Close()
|
Close()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// Open([
|
// Open([
|
||||||
// {
|
// {
|
||||||
// unselectable:true,
|
// unselectable:true,
|
||||||
// icon:"fas fa-info-circle",
|
// icon:"fas fa-info-circle",
|
||||||
// title:"Unselectable Item (Header/Label?)",
|
// title:"Unselectable Item (Header/Label?)",
|
||||||
// },
|
// },
|
||||||
// {
|
// {
|
||||||
// icon:"fas fa-check",
|
// icon:"fas fa-check",
|
||||||
// title:"Item A",
|
// title:"Item A",
|
||||||
// description:"Some description here. Add some words to make the text overflow."
|
// description:"Some description here. Add some words to make the text overflow."
|
||||||
// },
|
// },
|
||||||
// {
|
// {
|
||||||
// disabled:true,
|
// disabled:true,
|
||||||
// icon:"fas fa-times",
|
// icon:"fas fa-times",
|
||||||
// title:"Disabled Item",
|
// title:"Disabled Item",
|
||||||
// description:"Some description here. Add some words to make the text overflow."
|
// description:"Some description here. Add some words to make the text overflow."
|
||||||
// },
|
// },
|
||||||
// {
|
// {
|
||||||
// icon:"fas fa-check",
|
// icon:"fas fa-check",
|
||||||
// title:"Item B",
|
// title:"Item B",
|
||||||
// description:"Some description here. Add some words to make the text overflow."
|
// description:"Some description here. Add some words to make the text overflow."
|
||||||
// },
|
// },
|
||||||
// {
|
// {
|
||||||
// input:true,
|
// input:true,
|
||||||
// icon:"fas fa-times",
|
// icon:"fas fa-times",
|
||||||
// title:"Input Text",
|
// title:"Input Text",
|
||||||
// inputType:"text",
|
// inputType:"text",
|
||||||
// inputPlaceholder:"Placeholder..."
|
// inputPlaceholder:"Placeholder..."
|
||||||
// },
|
// },
|
||||||
// {
|
// {
|
||||||
// input:true,
|
// input:true,
|
||||||
// icon:"",
|
// icon:"",
|
||||||
// title:"Input Number",
|
// title:"Input Number",
|
||||||
// inputType:"number",
|
// inputType:"number",
|
||||||
// inputPlaceholder:"Placeholder...",
|
// inputPlaceholder:"Placeholder...",
|
||||||
// inputValue:0,
|
// inputValue:0,
|
||||||
// inputMin:0,
|
// inputMin:0,
|
||||||
// inputMax:50
|
// inputMax:50
|
||||||
// },
|
// },
|
||||||
// {
|
// {
|
||||||
// input:true,
|
// input:true,
|
||||||
// icon:"",
|
// icon:"",
|
||||||
// title:"Input Radio",
|
// title:"Input Radio",
|
||||||
// inputType:"radio",
|
// inputType:"radio",
|
||||||
// inputPlaceholder:"turbocharger",
|
// inputPlaceholder:"turbocharger",
|
||||||
// inputValue:"supercharger",
|
// inputValue:"supercharger",
|
||||||
// inputValues:[
|
// inputValues:[
|
||||||
// {
|
// {
|
||||||
// value:"turbocharger",
|
// value:"turbocharger",
|
||||||
// title:"Turbocharger"
|
// title:"Turbocharger"
|
||||||
// },
|
// },
|
||||||
// {
|
// {
|
||||||
// value:"supercharger",
|
// value:"supercharger",
|
||||||
// title:"Supercharger"
|
// title:"Supercharger"
|
||||||
// },
|
// },
|
||||||
// ]
|
// ]
|
||||||
// }
|
// }
|
||||||
// ])
|
// ])
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -1,271 +1,271 @@
|
|||||||
local defaultPosition = "right" -- [ left | center | right ]
|
local defaultPosition = "right" -- [ left | center | right ]
|
||||||
local activeMenu
|
local activeMenu
|
||||||
local Debug = ESX.GetConfig().EnableDebug
|
local Debug = ESX.GetConfig().EnableDebug
|
||||||
|
|
||||||
-- Global functions
|
-- Global functions
|
||||||
-- [ Post | Open | Closed ]
|
-- [ Post | Open | Closed ]
|
||||||
|
|
||||||
function Post(fn,...)
|
function Post(fn,...)
|
||||||
SendNUIMessage({
|
SendNUIMessage({
|
||||||
func = fn,
|
func = fn,
|
||||||
args = {...}
|
args = {...}
|
||||||
})
|
})
|
||||||
end
|
end
|
||||||
|
|
||||||
function Open(position,eles,onSelect,onClose,canClose)
|
function Open(position,eles,onSelect,onClose,canClose)
|
||||||
local canClose = canClose == nil and true or canClose
|
local canClose = canClose == nil and true or canClose
|
||||||
activeMenu = {
|
activeMenu = {
|
||||||
position = position,
|
position = position,
|
||||||
eles = eles,
|
eles = eles,
|
||||||
canClose = canClose,
|
canClose = canClose,
|
||||||
onSelect = onSelect,
|
onSelect = onSelect,
|
||||||
onClose = onClose
|
onClose = onClose
|
||||||
}
|
}
|
||||||
|
|
||||||
LocalPlayer.state:set("context:active",true)
|
LocalPlayer.state:set("context:active",true)
|
||||||
|
|
||||||
Post("Open",eles,position)
|
Post("Open",eles,position)
|
||||||
end
|
end
|
||||||
|
|
||||||
function Closed()
|
function Closed()
|
||||||
SetNuiFocus(false,false)
|
SetNuiFocus(false,false)
|
||||||
|
|
||||||
local menu = activeMenu
|
local menu = activeMenu
|
||||||
local cb = menu.onClose
|
local cb = menu.onClose
|
||||||
|
|
||||||
activeMenu = nil
|
activeMenu = nil
|
||||||
|
|
||||||
LocalPlayer.state:set("context:active",false)
|
LocalPlayer.state:set("context:active",false)
|
||||||
|
|
||||||
if cb then
|
if cb then
|
||||||
cb(menu)
|
cb(menu)
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
-- Exports
|
-- Exports
|
||||||
-- [ Preview | Open | Close ]
|
-- [ Preview | Open | Close ]
|
||||||
|
|
||||||
exports("Preview",Open)
|
exports("Preview",Open)
|
||||||
|
|
||||||
exports("Open",function(...)
|
exports("Open",function(...)
|
||||||
Open(...)
|
Open(...)
|
||||||
SetNuiFocus(true,true)
|
SetNuiFocus(true,true)
|
||||||
end)
|
end)
|
||||||
|
|
||||||
exports("Close",function()
|
exports("Close",function()
|
||||||
if not activeMenu then
|
if not activeMenu then
|
||||||
return
|
return
|
||||||
end
|
end
|
||||||
|
|
||||||
Post("Closed")
|
Post("Closed")
|
||||||
|
|
||||||
Closed()
|
Closed()
|
||||||
end)
|
end)
|
||||||
|
|
||||||
exports("Refresh",function(eles,position)
|
exports("Refresh",function(eles,position)
|
||||||
if not activeMenu then
|
if not activeMenu then
|
||||||
return
|
return
|
||||||
end
|
end
|
||||||
|
|
||||||
activeMenu.eles = eles or activeMenu.eles
|
activeMenu.eles = eles or activeMenu.eles
|
||||||
activeMenu.position = position or activeMenu.position
|
activeMenu.position = position or activeMenu.position
|
||||||
|
|
||||||
Post("Open",activeMenu.eles,activeMenu.position)
|
Post("Open",activeMenu.eles,activeMenu.position)
|
||||||
end)
|
end)
|
||||||
|
|
||||||
-- NUI Callbacks
|
-- NUI Callbacks
|
||||||
-- [ closed | selected | changed ]
|
-- [ closed | selected | changed ]
|
||||||
|
|
||||||
RegisterNUICallback("closed",function(data,cb)
|
RegisterNUICallback("closed",function(data,cb)
|
||||||
if not activeMenu or (activeMenu and not activeMenu.canClose) then
|
if not activeMenu or (activeMenu and not activeMenu.canClose) then
|
||||||
return cb(false)
|
return cb(false)
|
||||||
end
|
end
|
||||||
cb(true)
|
cb(true)
|
||||||
Closed()
|
Closed()
|
||||||
end)
|
end)
|
||||||
|
|
||||||
RegisterNUICallback("selected",function(data)
|
RegisterNUICallback("selected",function(data)
|
||||||
if not activeMenu
|
if not activeMenu
|
||||||
or not activeMenu.onSelect
|
or not activeMenu.onSelect
|
||||||
or not data.index
|
or not data.index
|
||||||
then
|
then
|
||||||
return
|
return
|
||||||
end
|
end
|
||||||
|
|
||||||
local index = tonumber(data.index)
|
local index = tonumber(data.index)
|
||||||
local ele = activeMenu.eles[index]
|
local ele = activeMenu.eles[index]
|
||||||
|
|
||||||
if not ele
|
if not ele
|
||||||
or ele.input
|
or ele.input
|
||||||
then
|
then
|
||||||
return
|
return
|
||||||
end
|
end
|
||||||
|
|
||||||
activeMenu:onSelect(ele)
|
activeMenu:onSelect(ele)
|
||||||
end)
|
end)
|
||||||
|
|
||||||
RegisterNUICallback("changed",function(data)
|
RegisterNUICallback("changed",function(data)
|
||||||
if not activeMenu
|
if not activeMenu
|
||||||
or not data.index
|
or not data.index
|
||||||
or not data.value
|
or not data.value
|
||||||
then
|
then
|
||||||
return
|
return
|
||||||
end
|
end
|
||||||
|
|
||||||
local index = tonumber(data.index)
|
local index = tonumber(data.index)
|
||||||
local ele = activeMenu.eles[index]
|
local ele = activeMenu.eles[index]
|
||||||
|
|
||||||
if not ele
|
if not ele
|
||||||
or not ele.input
|
or not ele.input
|
||||||
then
|
then
|
||||||
return
|
return
|
||||||
end
|
end
|
||||||
|
|
||||||
if ele.inputType == "number" then
|
if ele.inputType == "number" then
|
||||||
ele.inputValue = tonumber(data.value)
|
ele.inputValue = tonumber(data.value)
|
||||||
|
|
||||||
if ele.inputMin then
|
if ele.inputMin then
|
||||||
ele.inputValue = math.max(ele.inputMin,ele.inputValue)
|
ele.inputValue = math.max(ele.inputMin,ele.inputValue)
|
||||||
end
|
end
|
||||||
|
|
||||||
if ele.inputMax then
|
if ele.inputMax then
|
||||||
ele.inputValue = math.min(ele.inputMax,ele.inputValue)
|
ele.inputValue = math.min(ele.inputMax,ele.inputValue)
|
||||||
end
|
end
|
||||||
elseif ele.inputType == "text" then
|
elseif ele.inputType == "text" then
|
||||||
ele.inputValue = data.value
|
ele.inputValue = data.value
|
||||||
elseif ele.inputType == "radio" then
|
elseif ele.inputType == "radio" then
|
||||||
ele.inputValue = data.value
|
ele.inputValue = data.value
|
||||||
end
|
end
|
||||||
end)
|
end)
|
||||||
|
|
||||||
-- Keybind
|
-- Keybind
|
||||||
|
|
||||||
local function focusPreview()
|
local function focusPreview()
|
||||||
if not activeMenu
|
if not activeMenu
|
||||||
or not activeMenu.onSelect
|
or not activeMenu.onSelect
|
||||||
then
|
then
|
||||||
return
|
return
|
||||||
end
|
end
|
||||||
|
|
||||||
SetNuiFocus(true,true)
|
SetNuiFocus(true,true)
|
||||||
end
|
end
|
||||||
|
|
||||||
if PREVIEW_KEYBIND then
|
if PREVIEW_KEYBIND then
|
||||||
RegisterCommand("previewContext",focusPreview)
|
RegisterCommand("previewContext",focusPreview)
|
||||||
|
|
||||||
RegisterKeyMapping("previewContext","Preview Active Context","keyboard",PREVIEW_KEYBIND)
|
RegisterKeyMapping("previewContext","Preview Active Context","keyboard",PREVIEW_KEYBIND)
|
||||||
end
|
end
|
||||||
|
|
||||||
exports("focusPreview",focusPreview)
|
exports("focusPreview",focusPreview)
|
||||||
|
|
||||||
-- Debug/Test
|
-- Debug/Test
|
||||||
-- Commands:
|
-- Commands:
|
||||||
-- [ ctx:preview | ctx:open | ctx:close | ctx:form ]
|
-- [ ctx:preview | ctx:open | ctx:close | ctx:form ]
|
||||||
|
|
||||||
if Debug then
|
if Debug then
|
||||||
local position = "right"
|
local position = "right"
|
||||||
|
|
||||||
local eles = {
|
local eles = {
|
||||||
{
|
{
|
||||||
unselectable=true,
|
unselectable=true,
|
||||||
icon="fas fa-info-circle",
|
icon="fas fa-info-circle",
|
||||||
title="Unselectable Item (Header/Label?)",
|
title="Unselectable Item (Header/Label?)",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon="fas fa-check",
|
icon="fas fa-check",
|
||||||
title="Item A",
|
title="Item A",
|
||||||
description="Some description here. Add some words to make the text overflow."
|
description="Some description here. Add some words to make the text overflow."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
disabled=true,
|
disabled=true,
|
||||||
icon="fas fa-times",
|
icon="fas fa-times",
|
||||||
title="Disabled Item",
|
title="Disabled Item",
|
||||||
description="Some description here. Add some words to make the text overflow."
|
description="Some description here. Add some words to make the text overflow."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon="fas fa-check",
|
icon="fas fa-check",
|
||||||
title="Item B",
|
title="Item B",
|
||||||
description="Some description here. Add some words to make the text overflow."
|
description="Some description here. Add some words to make the text overflow."
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
local function onSelect(menu,ele)
|
local function onSelect(menu,ele)
|
||||||
print("Ele selected",ele.title)
|
print("Ele selected",ele.title)
|
||||||
|
|
||||||
if ele.name == "close" then
|
if ele.name == "close" then
|
||||||
exports["esx_context"]:Close()
|
exports["esx_context"]:Close()
|
||||||
end
|
end
|
||||||
|
|
||||||
if ele.name ~= "submit" then
|
if ele.name ~= "submit" then
|
||||||
return
|
return
|
||||||
end
|
end
|
||||||
|
|
||||||
for _,ele in ipairs(menu.eles) do
|
for _,ele in ipairs(menu.eles) do
|
||||||
if ele.input then
|
if ele.input then
|
||||||
print(ele.name,ele.inputType,ele.inputValue)
|
print(ele.name,ele.inputType,ele.inputValue)
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
exports["esx_context"]:Close()
|
exports["esx_context"]:Close()
|
||||||
end
|
end
|
||||||
|
|
||||||
local function onClose(menu)
|
local function onClose(menu)
|
||||||
print("Menu closed.")
|
print("Menu closed.")
|
||||||
end
|
end
|
||||||
|
|
||||||
RegisterCommand("ctx:preview",function()
|
RegisterCommand("ctx:preview",function()
|
||||||
exports["esx_context"]:Preview(position,eles)
|
exports["esx_context"]:Preview(position,eles)
|
||||||
end)
|
end)
|
||||||
|
|
||||||
RegisterCommand("ctx:open",function()
|
RegisterCommand("ctx:open",function()
|
||||||
exports["esx_context"]:Open(position,eles,onSelect,onClose)
|
exports["esx_context"]:Open(position,eles,onSelect,onClose)
|
||||||
end)
|
end)
|
||||||
|
|
||||||
RegisterCommand("ctx:close",function()
|
RegisterCommand("ctx:close",function()
|
||||||
exports["esx_context"]:Close()
|
exports["esx_context"]:Close()
|
||||||
end)
|
end)
|
||||||
|
|
||||||
RegisterCommand("ctx:form",function()
|
RegisterCommand("ctx:form",function()
|
||||||
local eles = {
|
local eles = {
|
||||||
{
|
{
|
||||||
unselectable=true,
|
unselectable=true,
|
||||||
icon="fas fa-info-circle",
|
icon="fas fa-info-circle",
|
||||||
title="Unselectable Item (Header/Label?)",
|
title="Unselectable Item (Header/Label?)",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon="",
|
icon="",
|
||||||
title="Input Text",
|
title="Input Text",
|
||||||
input=true,
|
input=true,
|
||||||
inputType="text",
|
inputType="text",
|
||||||
inputPlaceholder="Placeholder...",
|
inputPlaceholder="Placeholder...",
|
||||||
name="firstname",
|
name="firstname",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon="",
|
icon="",
|
||||||
title="Input Text",
|
title="Input Text",
|
||||||
input=true,
|
input=true,
|
||||||
inputType="text",
|
inputType="text",
|
||||||
inputPlaceholder="Placeholder...",
|
inputPlaceholder="Placeholder...",
|
||||||
name="lastname",
|
name="lastname",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon="",
|
icon="",
|
||||||
title="Input Number",
|
title="Input Number",
|
||||||
input=true,
|
input=true,
|
||||||
inputType="number",
|
inputType="number",
|
||||||
inputPlaceholder="Placeholder...",
|
inputPlaceholder="Placeholder...",
|
||||||
inputValue=0,
|
inputValue=0,
|
||||||
inputMin=0,
|
inputMin=0,
|
||||||
inputMax=50,
|
inputMax=50,
|
||||||
name="age",
|
name="age",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon = "fas fa-check",
|
icon = "fas fa-check",
|
||||||
title = "Submit",
|
title = "Submit",
|
||||||
name = "submit"
|
name = "submit"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
exports["esx_context"]:Open(position,eles,onSelect,onClose)
|
exports["esx_context"]:Open(position,eles,onSelect,onClose)
|
||||||
end)
|
end)
|
||||||
end
|
end
|
||||||
|
Before Width: | Height: | Size: 943 KiB After Width: | Height: | Size: 943 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user