├── example ├── esx_menuA │ ├── esx_menu_default │ │ ├── README.md │ │ ├── html │ │ │ ├── fonts │ │ │ │ ├── pdown.ttf │ │ │ │ └── bankgothic.ttf │ │ │ ├── ui.html │ │ │ ├── css │ │ │ │ └── app.css │ │ │ └── js │ │ │ │ ├── mustache.min.js │ │ │ │ └── app.js │ │ ├── .editorconfig │ │ ├── client │ │ │ └── main.lua │ │ └── LICENSE │ ├── esx_menu_list │ │ ├── html │ │ │ ├── fonts │ │ │ │ ├── pdown.ttf │ │ │ │ └── bankgothic.ttf │ │ │ ├── ui.html │ │ │ ├── css │ │ │ │ └── app.css │ │ │ └── js │ │ │ │ ├── app.js │ │ │ │ └── mustache.min.js │ │ ├── .editorconfig │ │ ├── README.md │ │ ├── client │ │ │ └── main.lua │ │ └── LICENSE │ ├── esx_menu_dialog │ │ ├── html │ │ │ ├── fonts │ │ │ │ ├── pdown.ttf │ │ │ │ └── bankgothic.ttf │ │ │ ├── ui.html │ │ │ ├── css │ │ │ │ └── app.css │ │ │ └── js │ │ │ │ ├── app.js │ │ │ │ └── mustache.min.js │ │ ├── .editorconfig │ │ ├── README.md │ │ └── client │ │ │ └── main.lua │ ├── cl_ui.lua │ └── fxmanifest.lua ├── esx_menuB │ ├── html │ │ ├── fonts │ │ │ ├── pdown.ttf │ │ │ └── bankgothic.ttf │ │ ├── list.html │ │ ├── default.html │ │ ├── dialog.html │ │ ├── css │ │ │ ├── list_app.css │ │ │ ├── default_app.css │ │ │ └── dialog_app.css │ │ └── js │ │ │ ├── dialog_app.js │ │ │ ├── list_app.js │ │ │ ├── mustache.min.js │ │ │ └── default_app.js │ ├── cl_ui.lua │ ├── fxmanifest.lua │ └── client │ │ ├── cl_list.lua │ │ ├── cl_dialog.lua │ │ └── cl_default.lua ├── ui-wrapper │ ├── fxmanifest.lua │ ├── index.html │ ├── cl_ui.lua │ └── f_script.js └── README.md ├── fxmanifest.lua ├── index.html ├── cl_ui.lua ├── f_script.js └── README.md /example/esx_menuA/esx_menu_default/README.md: -------------------------------------------------------------------------------- 1 | # esx_menu_default 2 | ESX Menu Default 3 | -------------------------------------------------------------------------------- /example/esx_menuB/html/fonts/pdown.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Solositeous/ui-wrapper/HEAD/example/esx_menuB/html/fonts/pdown.ttf -------------------------------------------------------------------------------- /example/esx_menuB/html/fonts/bankgothic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Solositeous/ui-wrapper/HEAD/example/esx_menuB/html/fonts/bankgothic.ttf -------------------------------------------------------------------------------- /example/esx_menuA/esx_menu_list/html/fonts/pdown.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Solositeous/ui-wrapper/HEAD/example/esx_menuA/esx_menu_list/html/fonts/pdown.ttf -------------------------------------------------------------------------------- /example/esx_menuA/esx_menu_default/html/fonts/pdown.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Solositeous/ui-wrapper/HEAD/example/esx_menuA/esx_menu_default/html/fonts/pdown.ttf -------------------------------------------------------------------------------- /example/esx_menuA/esx_menu_dialog/html/fonts/pdown.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Solositeous/ui-wrapper/HEAD/example/esx_menuA/esx_menu_dialog/html/fonts/pdown.ttf -------------------------------------------------------------------------------- /example/esx_menuA/esx_menu_list/html/fonts/bankgothic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Solositeous/ui-wrapper/HEAD/example/esx_menuA/esx_menu_list/html/fonts/bankgothic.ttf -------------------------------------------------------------------------------- /example/esx_menuA/esx_menu_default/html/fonts/bankgothic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Solositeous/ui-wrapper/HEAD/example/esx_menuA/esx_menu_default/html/fonts/bankgothic.ttf -------------------------------------------------------------------------------- /example/esx_menuA/esx_menu_dialog/html/fonts/bankgothic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Solositeous/ui-wrapper/HEAD/example/esx_menuA/esx_menu_dialog/html/fonts/bankgothic.ttf -------------------------------------------------------------------------------- /example/esx_menuA/esx_menu_list/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_size = 4 5 | indent_style = tab 6 | end_of_line = crlf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true -------------------------------------------------------------------------------- /example/esx_menuA/esx_menu_default/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_size = 4 5 | indent_style = tab 6 | end_of_line = crlf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true -------------------------------------------------------------------------------- /example/esx_menuA/esx_menu_dialog/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_size = 4 5 | indent_style = tab 6 | end_of_line = crlf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true -------------------------------------------------------------------------------- /example/ui-wrapper/fxmanifest.lua: -------------------------------------------------------------------------------- 1 | fx_version 'adamant' 2 | 3 | game 'gta5' 4 | 5 | version '1.1.0' 6 | 7 | ui_page 'index.html' 8 | 9 | client_script 'cl_ui.lua' 10 | 11 | files { 12 | 'f_script.js', 13 | 'index.html' 14 | } 15 | -------------------------------------------------------------------------------- /fxmanifest.lua: -------------------------------------------------------------------------------- 1 | fx_version 'adamant' 2 | 3 | game 'gta5' 4 | 5 | version '1.3.0' 6 | 7 | lua54 'yes' 8 | 9 | ui_page 'index.html' 10 | 11 | client_script 'cl_ui.lua' 12 | 13 | files { 14 | 'f_script.js', 15 | 'index.html' 16 | } 17 | -------------------------------------------------------------------------------- /example/esx_menuB/cl_ui.lua: -------------------------------------------------------------------------------- 1 | exports['ui-wrapper']:uiCreateCustom("ESX Menu Default B", "esx_menuB", "html/default.html") 2 | exports['ui-wrapper']:uiCreateCustom("ESX Menu Dialog B", "esx_menuB", "html/dialog.html") 3 | exports['ui-wrapper']:uiCreateCustom("ESX Menu List B", "esx_menuB", "html/list.html") -------------------------------------------------------------------------------- /example/esx_menuA/cl_ui.lua: -------------------------------------------------------------------------------- 1 | exports['ui-wrapper']:uiCreateCustom("ESX Menu Default A", "esx_menuA", "esx_menu_default/html/ui.html") 2 | exports['ui-wrapper']:uiCreateCustom("ESX Menu Dialog A", "esx_menuA", "esx_menu_dialog/html/ui.html") 3 | exports['ui-wrapper']:uiCreateCustom("ESX Menu List A", "esx_menuA", "esx_menu_list/html/ui.html") -------------------------------------------------------------------------------- /example/esx_menuB/fxmanifest.lua: -------------------------------------------------------------------------------- 1 | fx_version 'adamant' 2 | 3 | game 'gta5' 4 | 5 | client_scripts { 6 | 'cl_ui.lua', 7 | '@es_extended/client/wrapper.lua', 8 | 'client/cl_*.lua', 9 | } 10 | 11 | files { 12 | 'html/*.html', 13 | 'html/css/*.css', 14 | 'html/js/*.js', 15 | 'html/fonts/*.ttf', 16 | } 17 | 18 | dependencies { 19 | 'es_extended' 20 | } -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | I am using esx_menu_default, esx_menu_dialog, esx_menu_list from https://github.com/esx-framework/esx-legacy. 2 | 3 | # esx_menuA 4 | This resource is esx_menu_default, esx_menu_dialog and esx_menu_list just moved into the folder. This is the easiest way of using this wrapper. 5 | 6 | # esx_menuB 7 | This resouce is a more advanced example of merging the 3 resources together. -------------------------------------------------------------------------------- /example/esx_menuB/html/list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /example/esx_menuA/esx_menu_list/html/ui.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /example/ui-wrapper/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 27 | -------------------------------------------------------------------------------- /example/ui-wrapper/cl_ui.lua: -------------------------------------------------------------------------------- 1 | exports("uiCreateCustom", function(identifier, addon, htmladd) 2 | Citizen.CreateThread(function() 3 | Wait(5000) 4 | SendNUIMessage({ 5 | addon = "ui", 6 | table = { 7 | identifier = identifier, 8 | addonname = addon, 9 | htmladd = htmladd, 10 | }, 11 | }) 12 | end) 13 | end) 14 | 15 | exports("uiSendMessage", function(identifier, table) 16 | SendNUIMessage({ 17 | addon = identifier, 18 | table = table, 19 | }) 20 | end) 21 | 22 | exports("uiRegisterCallback", function(identifier, name, func) 23 | RegisterNUICallback(identifier..":"..name, func) 24 | end) -------------------------------------------------------------------------------- /example/esx_menuB/html/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /example/esx_menuA/esx_menu_default/html/ui.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /example/esx_menuB/html/dialog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /example/esx_menuA/esx_menu_dialog/html/ui.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 42 | -------------------------------------------------------------------------------- /example/esx_menuB/html/css/list_app.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: bankgothic; 3 | src: url('../fonts/bankgothic.ttf'); 4 | } 5 | 6 | @font-face { 7 | font-family: pcdown; 8 | src: url('../fonts/pdown.ttf'); 9 | } 10 | 11 | .menu { 12 | font-family: bankgothic; 13 | position: absolute; 14 | left: 50%; 15 | top: 50%; 16 | transform: translate(-50%, -50%); 17 | box-shadow: 0px 0px 50px 0px #000; 18 | overflow-y: auto; 19 | max-height: 90%; 20 | } 21 | 22 | .menu button { 23 | font-family: bankgothic; 24 | } 25 | 26 | .menu>table { 27 | border: 1px transparent; 28 | border-spacing: 0; 29 | min-width: 400px; 30 | background-color: #FFF; 31 | } 32 | 33 | .menu>table>thead { 34 | background-color: #506be6; 35 | text-align: center; 36 | height: 40px; 37 | line-height: 40px; 38 | color: #fff; 39 | } 40 | 41 | .menu td { 42 | text-align: center; 43 | padding: 8px; 44 | } 45 | 46 | .menu tbody tr:nth-child(even) { 47 | background: #CCC 48 | } 49 | 50 | .menu tbody tr:nth-child(odd) { 51 | background: #FFF 52 | } -------------------------------------------------------------------------------- /example/esx_menuA/fxmanifest.lua: -------------------------------------------------------------------------------- 1 | fx_version 'adamant' 2 | 3 | game 'gta5' 4 | 5 | client_scripts { 6 | 'cl_ui.lua', 7 | '@es_extended/client/wrapper.lua', 8 | 'esx_menu_list/client/main.lua', 9 | 'esx_menu_default/client/main.lua', 10 | 'esx_menu_dialog/client/main.lua', 11 | } 12 | 13 | files { 14 | 'esx_menu_default/html/ui.html', 15 | 'esx_menu_default/html/css/app.css', 16 | 'esx_menu_default/html/js/mustache.min.js', 17 | 'esx_menu_default/html/js/app.js', 18 | 'esx_menu_list/html/ui.html', 19 | 'esx_menu_list/html/css/app.css', 20 | 'esx_menu_list/html/js/mustache.min.js', 21 | 'esx_menu_list/html/js/app.js', 22 | 'esx_menu_list/html/fonts/pdown.ttf', 23 | 'esx_menu_list/html/fonts/bankgothic.ttf', 24 | 'esx_menu_dialog/html/ui.html', 25 | 'esx_menu_dialog/html/css/app.css', 26 | 'esx_menu_dialog/html/js/mustache.min.js', 27 | 'esx_menu_dialog/html/js/app.js', 28 | 'esx_menu_dialog/html/fonts/pdown.ttf', 29 | 'esx_menu_dialog/html/fonts/bankgothic.ttf', 30 | } 31 | 32 | dependencies { 33 | 'es_extended' 34 | } -------------------------------------------------------------------------------- /example/esx_menuA/esx_menu_list/html/css/app.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: bankgothic; 3 | src: url('../fonts/bankgothic.ttf'); 4 | } 5 | 6 | @font-face { 7 | font-family: pcdown; 8 | src: url('../fonts/pdown.ttf'); 9 | } 10 | 11 | .menu { 12 | font-family: bankgothic; 13 | position: absolute; 14 | left: 50%; 15 | top: 50%; 16 | transform: translate(-50%, -50%); 17 | box-shadow: 0px 0px 50px 0px #000; 18 | overflow-y: auto; 19 | max-height: 90%; 20 | } 21 | 22 | .menu button { 23 | font-family: bankgothic; 24 | } 25 | 26 | .menu>table { 27 | border: 1px transparent; 28 | border-spacing: 0; 29 | min-width: 400px; 30 | background-color: #FFF; 31 | } 32 | 33 | .menu>table>thead { 34 | background-color: #506be6; 35 | text-align: center; 36 | height: 40px; 37 | line-height: 40px; 38 | color: #fff; 39 | } 40 | 41 | .menu td { 42 | text-align: center; 43 | padding: 8px; 44 | } 45 | 46 | .menu tbody tr:nth-child(even) { 47 | background: #CCC 48 | } 49 | 50 | .menu tbody tr:nth-child(odd) { 51 | background: #FFF 52 | } -------------------------------------------------------------------------------- /example/ui-wrapper/f_script.js: -------------------------------------------------------------------------------- 1 | $(function () { 2 | var uiList = []; 3 | window.addEventListener('message', event => { 4 | var data = event.data 5 | var skip = false 6 | if (data.addon == "ui") { 7 | if (data.table.identifier != null) { 8 | uiList.forEach(function(item, index) { 9 | if (data.table.identifier == item) { 10 | skip = true; 11 | } 12 | }) 13 | if (skip) return false; 14 | $("