diff --git a/fxmanifest.lua b/fxmanifest.lua index eea0b48..1da37c7 100644 --- a/fxmanifest.lua +++ b/fxmanifest.lua @@ -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' } \ No newline at end of file diff --git a/nui/index.html b/nui/index.html new file mode 100644 index 0000000..4f95ca6 --- /dev/null +++ b/nui/index.html @@ -0,0 +1,20 @@ + + + + + + QB Menu + + + + + + + + + +
+
+
+ + diff --git a/nui/main.lua b/nui/main.lua new file mode 100644 index 0000000..33fad24 --- /dev/null +++ b/nui/main.lua @@ -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) \ No newline at end of file diff --git a/nui/script.js b/nui/script.js new file mode 100644 index 0000000..e212180 --- /dev/null +++ b/nui/script.js @@ -0,0 +1,112 @@ +let buttonParams = []; +let menuItems = []; + +const openMenu = (data = null) => { + let html = ` +
+ +
+ `; + + html += "
"; + + 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 += "
"; + $("#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 ` +
+ ${icon ? ` +
+ + +
+ ` : " " } +
+
${header ? `${header}` : " "}
+ ${message ? `
${message}
` : ""} + ${progress ? ` +
+
+
` + : ""} +
+
+ `; +}; + +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(); + } +}; diff --git a/nui/style.css b/nui/style.css new file mode 100644 index 0000000..37ad642 --- /dev/null +++ b/nui/style.css @@ -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; +} \ No newline at end of file diff --git a/shared/contextmenus.lua b/shared/contextmenus.lua index 7f7685c..b4c9a2d 100644 --- a/shared/contextmenus.lua +++ b/shared/contextmenus.lua @@ -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 diff --git a/starter.lua b/starter.lua index fda1a54..1c67211 100644 --- a/starter.lua +++ b/starter.lua @@ -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',