implement inbuilt nui menu

This commit is contained in:
Jim Shield
2025-04-20 01:22:32 +01:00
parent b7db98ffdc
commit d1bb796d5f
7 changed files with 483 additions and 10 deletions

View File

@@ -13,3 +13,8 @@ files {
'shared/make/*.lua',
'shared/scaleforms/*.lua',
}
-- NUI Menu Loading
client_scripts { 'nui/*.lua' }
ui_page 'nui/index.html'
files { 'nui/index.html', 'nui/script.js', 'nui/style.css' }

20
nui/index.html Normal file
View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>QB Menu</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Font Awesome Icons Import -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div id="container">
<div id="buttons"></div>
</div>
</body>
</html>

115
nui/main.lua Normal file
View File

@@ -0,0 +1,115 @@
local debug = GetConvar("jim_DisableDebug", "false") == "true" and false or true
Config = Config or { System = {} }
CreateThread(function()
local fileLoader = assert(load(LoadResourceFile('jim_bridge', ('starter.lua')), ('@@jim_bridge/starter.lua')))
fileLoader()
end)
print("yay")
local headerShown = true
local sendData = nil
local sendModifiers = nil
--Colours for progressbar
local colours = {
["dark.0"] = "#C1C2C5", ["dark.1"] = "#A6A7AB", ["dark.2"] = "#909296", ["dark.3"] = "#5C5F66", ["dark.4"] = "#373A40", ["dark.5"] = "#2C2E33", ["dark.6"] = "#25262B", ["dark.7"] = "#1A1B1E", ["dark.8"] = "#141517", ["dark.9"] = "#101113",
["gray.0"] = "#F8F9FA", ["gray.1"] = "#F1F3F5", ["gray.2"] = "#E9ECEF", ["gray.3"] = "#DEE2E6", ["gray.4"] = "#CED4DA", ["gray.5"] = "#ADB5BD", ["gray.6"] = "#868E96", ["gray.7"] = "#495057", ["gray.8"] = "#343A40", ["gray.9"] = "#212529",
["red.0"] = "#FFF5F5", ["red.1"] = "#FFE3E3", ["red.2"] = "#FFC9C9", ["red.3"] = "#FFA8A8", ["red.4"] = "#FF8787", ["red.5"] = "#FF6B6B", ["red.6"] = "#FA5252", ["red.7"] = "#F03E3E", ["red.8"] = "#E03131", ["red.9"] = "#C92A2A",
["pink.0"] = "#FFF0F6", ["pink.1"] = "#FFDEEB", ["pink.2"] = "#FCC2D7", ["pink.3"] = "#FAA2C1", ["pink.4"] = "#F783AC", ["pink.5"] = "#F06595", ["pink.6"] = "#E64980", ["pink.7"] = "#D6336C", ["pink.8"] = "#C2255C", ["pink.9"] = "#A61E4D",
["grape.0"] = "#F8F0FC", ["grape.1"] = "#F3D9FA", ["grape.2"] = "#EEBEFA", ["grape.3"] = "#E599F7", ["grape.4"] = "#DA77F2", ["grape.5"] = "#CC5DE8", ["grape.6"] = "#BE4BDB", ["grape.7"] = "#AE3EC9", ["grape.8"] = "#9C36B5", ["grape.9"] = "#862E9C",
["violet.0"] = "#F3F0FF", ["violet.1"] = "#E5DBFF", ["violet.2"] = "#D0BFFF", ["violet.3"] = "#B197FC", ["violet.4"] = "#9775FA", ["violet.5"] = "#845EF7", ["violet.6"] = "#7950F2", ["violet.7"] = "#7048E8", ["violet.8"] = "#6741D9", ["violet.9"] = "#5F3DC4",
["indigo.0"] = "#EDF2FF", ["indigo.1"] = "#DBE4FF", ["indigo.2"] = "#BAC8FF", ["indigo.3"] = "#91A7FF", ["indigo.4"] = "#748FFC", ["indigo.5"] = "#5C7CFA", ["indigo.6"] = "#4C6EF5", ["indigo.7"] = "#4263EB", ["indigo.8"] = "#3B5BDB", ["indigo.9"] = "#364FC7",
["blue.0"] = "#E7F5FF", ["blue.1"] = "#D0EBFF", ["blue.2"] = "#A5D8FF", ["blue.3"] = "#74C0FC", ["blue.4"] = "#4DABF7", ["blue.5"] = "#339AF0", ["blue.6"] = "#228BE6", ["blue.7"] = "#1C7ED6", ["blue.8"] = "#1971C2", ["blue.9"] = "#1864AB",
["cyan.0"] = "#E3FAFC", ["cyan.1"] = "#C5F6FA", ["cyan.2"] = "#99E9F2", ["cyan.3"] = "#66D9E8", ["cyan.4"] = "#3BC9DB", ["cyan.5"] = "#22B8CF", ["cyan.6"] = "#15AABF", ["cyan.7"] = "#1098AD", ["cyan.8"] = "#0C8599", ["cyan.9"] = "#0B7285",
["teal.0"] = "#E6FCF5", ["teal.1"] = "#C3FAE8", ["teal.2"] = "#96F2D7", ["teal.3"] = "#63E6BE", ["teal.4"] = "#38D9A9", ["teal.5"] = "#20C997", ["teal.6"] = "#12B886", ["teal.7"] = "#0CA678", ["teal.8"] = "#099268", ["teal.9"] = "#087F5B",
["green.0"] = "#EBFBEE", ["green.1"] = "#D3F9D8", ["green.2"] = "#B2F2BB", ["green.3"] = "#8CE99A", ["green.4"] = "#69DB7C", ["green.5"] = "#51CF66", ["green.6"] = "#40C057", ["green.7"] = "#37B24D", ["green.8"] = "#2F9E44", ["green.9"] = "#2B8A3E",
["lime.0"] = "#F4FCE3", ["lime.1"] = "#E9FAC8", ["lime.2"] = "#D8F5A2", ["lime.3"] = "#C0EB75", ["lime.4"] = "#A9E34B", ["lime.5"] = "#94D82D", ["lime.6"] = "#82C91E", ["lime.7"] = "#74B816", ["lime.8"] = "#66A80F", ["lime.9"] = "#5C940D",
["yellow.0"] = "#FFF9DB", ["yellow.1"] = "#FFF3BF", ["yellow.2"] = "#FFEC99", ["yellow.3"] = "#FFE066", ["yellow.4"] = "#FFD43B", ["yellow.5"] = "#FCC419", ["yellow.6"] = "#FAB005", ["yellow.7"] = "#F59F00", ["yellow.8"] = "#F08C00", ["yellow.9"] = "#E67700",
["orange.0"] = "#FFF4E6", ["orange.1"] = "#FFE8CC", ["orange.2"] = "#FFD8A8", ["orange.3"] = "#FFC078", ["orange.4"] = "#FFA94D", ["orange.5"] = "#FF922B", ["orange.6"] = "#FD7E14", ["orange.7"] = "#F76707",["orange.8"] = "#E8590C",["orange.9"] = "#D9480F"
}
-- Functions
function openNuiMenu(data, modifiers)
print("Trying to open menu")
if not data or not next(data) then return end
for _, v in pairs(data) do
v["icon"] = v["arrow"] and "fas fa-angle-right" or v["icon"] or nil
v["colorScheme"] = v["colourScheme"] and colours[v["colourScheme"]] or (v["colorScheme"] and colours[v["colorScheme"]] or colours["green.7"])
if v["onSelect"] then
if debug then print("^5Debug^7: ^6onSelect^2 found^7 -^2 sending to ^7'^6params^7.^6isAction^3()^7'") end
v.params = { isAction = true, event = v["onSelect"] }
end
end
SetNuiFocus(true, true)
headerShown = false
sendData = data
sendModifiers = modifiers or {}
SendNUIMessage({ action = 'OPEN_MENU', data = table.clone(data) })
end
local function closeMenu()
sendData = nil
sendModifiers = nil
headerShown = false
SetNuiFocus(false)
SendNUIMessage({ action = 'CLOSE_MENU' })
end
local function showHeader(data)
if not data or not next(data) then return end
headerShown = true
sendData = data
SendNUIMessage({ action = 'SHOW_HEADER', data = table.clone(data) })
end
-- Events
RegisterNetEvent("jim_bridge:client:openMenu", function(data) print("test") openNuiMenu(data) end)
RegisterNetEvent("jim_bridge:client:closeMenu", function() closeMenu() end)
-- NUI Callbacks
RegisterNUICallback('clickedButton', function(option)
if headerShown then headerShown = false end
PlaySound(-1, "CLICK_BACK", "WEB_NAVIGATION_SOUNDS_PHONE", 0, 0, 1)
SetNuiFocus(false)
if sendData then
local data = sendData[tonumber(option)]
sendData = nil
if data then
if data.params and data.params.event then
if data.params.isServer then
TriggerServerEvent(data.params.event, data.params.args)
elseif data.params.isCommand then
ExecuteCommand(data.params.event)
elseif data.params.isQBCommand then
TriggerServerEvent('QBCore:CallCommand', data.params.event, data.params.args)
elseif data.params.isAction then
data.params.event(data.params.args)
else
TriggerEvent(data.params.event, data.params.args)
end
end
end
end
end)
RegisterNUICallback('closeMenu', function()
if sendModifiers and sendModifiers.onExit then sendModifiers.onExit() end -- when close menu is triggered (with esc or using a button to close it) trigger onExit function
headerShown = false
sendModifiers = nil
sendData = nil
SetNuiFocus(false)
end)
-- Command and Keymapping
RegisterCommand('playerfocus', function() if headerShown then SetNuiFocus(true, true) end end)
RegisterKeyMapping('playerFocus', 'Give Menu Focus', 'keyboard', 'LMENU')
-- Exports
exports('openMenu', function(data) openNuiMenu(data) end)
exports('closeMenu', function() closeMenu() end)
exports('showHeader', function(data) showHeader(data) end)

112
nui/script.js Normal file
View File

@@ -0,0 +1,112 @@
let buttonParams = [];
let menuItems = [];
const openMenu = (data = null) => {
let html = `
<div class="search-container">
<input type="text" id="search-input" placeholder="Search...">
</div>
`;
html += "<div id='buttons'>";
data.forEach((item, index) => {
if (!item.hidden) {
let header = item.header || item.title;
let message = item.txt || item.text || item.description;
let isMenuHeader = item.isMenuHeader;
let isDisabled = item.disabled;
let icon = item.icon;
let progress = item.progress || item.progressbar;
let colour = item.colorScheme;
html += getButtonRender(header, message, index, isMenuHeader, isDisabled, icon, progress, colour);
if (item.params) buttonParams[index] = item.params;
}
});
html += "</div>";
$("#buttons").html(html);
$("#container").html(html);
$('.button').click(function() {
const target = $(this)
if (!target.hasClass('title') && !target.hasClass('disabled')) {
postData(target.attr('id'));
}
});
$("#search-input").on("keyup", function() {
let value = $(this).val().toLowerCase();
$("#buttons .button, #buttons .title").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
};
const getButtonRender = (header, message = null, id, isMenuHeader, isDisabled, icon, progress, colour) => {
return `
<div class="${isMenuHeader ? "title" : "button"} ${isDisabled ? "disabled" : ""} " id="${id}">
${icon ? `
<div class="icon">
<img src=${icon} onerror="this.onerror=null; this.remove();">
<i class="${icon}" onerror="this.onerror=null; this.remove();"></i>
</div>
` : " " }
<div class="column">
<div class="header">${header ? `${header}` : " "}</div>
${message ? `<div class="text"> ${message}</div>` : ""}
${progress ? `
<div style="width: 7vw; background-color: #ddd; border-radius: 5px;">
<div style="padding-top: 0.3vh; padding-bottom: 0.3vh; width:${progress}%; background-color:${colour}; border-radius: 5px;"></div>
</div>`
: ""}
</div>
</div>
`;
};
const closeMenu = () => {
$("#buttons").html(" ");
buttonParams = [];
$("#search-input").hide(); // hide search bar
};
const postData = (id) => {
$.post(`https://${GetParentResourceName()}/clickedButton`, JSON.stringify(parseInt(id) + 1));
return closeMenu();
};
const cancelMenu = () => {
$.post(`https://${GetParentResourceName()}/closeMenu`);
return closeMenu();
};
const filterButtons = (query) => {
const filteredItems = menuItems.filter(item => item.header.toLowerCase().includes(query.toLowerCase()));
openMenu(filteredItems);
};
$("#search-input").on('input', function() {
filterButtons($(this).val());
});
window.addEventListener("message", (event) => {
const data = event.data;
const buttons = data.data;
const action = data.action;
switch (action) {
case "OPEN_MENU":
case "SHOW_HEADER":
return openMenu(buttons);
case "CLOSE_MENU":
return closeMenu();
default:
return;
}
});
document.onkeyup = function (event) {
const charCode = event.key;
if (charCode == "Escape") {
cancelMenu();
}
};

183
nui/style.css Normal file
View File

@@ -0,0 +1,183 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap");
:root {
--clr-yes: 8px solid red;
--font-family: "Poppins", sans-serif !important;
--width: 65%;
}
* {
padding: 0;
margin: 0;
font-family: var(--font-family);
font-weight: 300;
}
#container {
position: absolute;
height: auto;
top: 15%;
right: 20%;
z-index: 2;
}
.button {
cursor: pointer;
display: flex;
flex-direction: row !important;
gap: 10px;
}
.title {
cursor: default;
gap: 10px;
display: flex;
flex-direction: row !important;
}
#buttons {
max-height: 80vh;
width: 250%;
overflow-x: none;
overflow-y: auto;
padding: 10px;
}
html, body { background: transparent !important; }
#buttons::-webkit-scrollbar { display: none; }
body::-webkit-scrollbar { display: none; }
.button {
width: auto;
max-width: 55%;
height: 10%;
background-color: rgba(23, 23, 23, 85%);
color: grey;
margin: auto;
position: relative;
top: 10%;
overflow: hidden;
padding: 0.35rem;
display: flex;
flex-direction: column;
cursor: pointer;
border-left: 8px solid rgba(23, 23, 23, 1%);
transition-property: color, background-color, border-left;
transition-duration: 0.1s, 0.3s;
transition-timing-function: linear, ease-in;
}
.button:hover {
border-left: var(--clr-yes);
background: rgba(0, 0, 0);
color: white;
}
.icon > img {
width: 2.2vh !important;
}
.icon {
font-size: 1.2vh;
transition-property: all, filter;
transition-duration: 0.1s, 0.3s;
transition-timing-function: linear, ease-in;
display: inline-flex;
align-items: center;
position: static;
justify-content: left;
opacity: 0.5;
}
.button:hover > .icon {
opacity: 1.0;
animation: bounce 2s linear;
filter: drop-shadow(-1px -1px 15px white);
}
.bounce {
animation-name: bounce-4;
animation-timing-function: ease;
}
@keyframes bounce {
0% { transform: scale(1,1); }
10% { transform: scale(1.1); }
30% { transform: scale(1.5); }
50% { transform: scale(1.5); }
100% { transform: scale(1.5); }
}
.title {
font-family: var(--font-family);
width: auto;
max-width: 56%;
height: 60%;
background: rgba(23, 23, 23);
border-left: 8px solid rgba(23, 23, 23, 1%);
color: white;
margin: auto;
margin-left: -0.5;
position: relative;
top: 10%;
overflow: hidden;
padding: 0.35rem;
flex-direction: column;
border-left: 0px;
}
.title > div.header {
font-family: var(--font-family);
text-decoration: underline !important;
}
.disabled {
cursor: default;
}
div > .text {
font-family: var(--font-family);
flex-direction: column;
font-size: 1.0vh;
overflow: hidden;
}
div > .header {
font-family: var(--font-family);
width: 100%;
max-width: 100%;
display: flex;
align-items: center;
position: relative;
justify-content: left;
overflow: wrap;
color: white;
font-size: 1.2vh;
font-weight: 400;
overflow: hidden;
}
/* Search input */
.search-container {
margin-top: -10px;
margin-bottom: 10px;
position: relative;
left:55%;
z-index: 1;
}
.search-container input[type="text"] {
color: white;
font-family: var(--font-family);
padding: 0.35rem;
width: 100%;
font-size: 1.0rem;
border: none;
border-bottom: 2px solid red;
background-color: rgba(255, 255, 255, 0.2);
}
.search-container input[type="text"]:focus {
outline: none;
border-bottom: 2px solid red;
}

View File

@@ -48,21 +48,45 @@
--- ```
function openMenu(Menu, data)
if Config.System.Menu == "jim" then
-- Insert "Return" option if onBack is defined.
if data.onBack then
table.insert(Menu, 1, {
icon = "fas fa-circle-arrow-left",
title = "Return",
onSelect = data.onBack,
header = " ",
txt = "Return",
params = {
isAction = true,
event = data.onBack,
},
})
elseif data.canClose then
table.insert(Menu, 1, {
icon = "fas fa-circle-xmark",
header = " ",
txt = "Close",
params = {
isAction = true,
event = data.onExit and data.onExit or (function() exports[QBMenuExport]:closeMenu() end),
},
})
end
exports["jim-nui"]:openMenu({
title = data.header..(data.headertxt and " -- "..data.headertxt or ""),
canClose = data.canClose and data.canClose or nil,
onClose = (data.onBack and data.onBack) or (data.onExit and data.onExit) or nil,
onExit = data.onExit and data.onExit or nil,
options = Menu,
})
if data.header ~= nil then
local tempMenu = {}
for k, v in pairs(Menu) do tempMenu[k + 1] = v end
tempMenu[1] = { header = data.header, txt = data.headertxt or "", isMenuHeader = true }
Menu = tempMenu
end
for k in pairs(Menu) do
if not Menu[k].params or not Menu[k].params.event then
Menu[k].params = {
isAction = true,
event = Menu[k].onSelect or function() end,
}
end
if not Menu[k].header then Menu[k].header = " " end
if Menu[k].arrow then Menu[k].icon = "fas fa-angle-right" end
Menu[k].isMenuHeader = Menu[k].isMenuHeader or Menu[k].disable
end
TriggerEvent("jim_bridge:client:openMenu", Menu)
elseif Config.System.Menu == "ox" then
local index = nil

View File

@@ -29,12 +29,26 @@ Exports = {
-- Required variables
debugMode = Config.System.Debug
-- Check server convars for hard set defaults
if Config and Config.System then
if Config.System.Debug then
if GetConvar("jim_DisableDebug", "false") == "true" then debugMode = false end
end
Config.System.Menu = GetConvar("jim_menuScript", Config.System.Menu)
Config.System.Notify = GetConvar("jim_notifyScript", Config.System.Notify)
Config.System.ProgressBar = GetConvar("jim_progressBarScript", Config.System.ProgressBar)
Config.System.drawText = GetConvar("jim_drawTextScript", Config.System.drawText)
Config.System.skillCheck = GetConvar("jim_skillCheckScript", Config.System.skillCheck)
Config.System.DontUseTarget = GetConvar("jim_dontUseTarget", "false")
end
QBInvNew = true
InventoryWeight = 120000
-- Load files here into the invoking script
for _, v in pairs({ -- This is a specific load order
--'convarCheck.lua',
'helpers.lua', -- needs to be first
'_loaders.lua',