diff --git a/[core]/esx_menu_default/html/css/app.css b/[core]/esx_menu_default/html/css/app.css index a4312dfe..e7f07e2b 100644 --- a/[core]/esx_menu_default/html/css/app.css +++ b/[core]/esx_menu_default/html/css/app.css @@ -1,11 +1,11 @@ -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap"); ::-webkit-scrollbar { display: none; } .menu { - font-family: 'Poppins', sans-serif; + font-family: "Poppins", sans-serif; min-width: 350px; color: #fff; position: absolute; diff --git a/[core]/esx_menu_default/html/js/app.js b/[core]/esx_menu_default/html/js/app.js index 2ce7a0f9..d53e3de8 100644 --- a/[core]/esx_menu_default/html/js/app.js +++ b/[core]/esx_menu_default/html/js/app.js @@ -1,378 +1,378 @@ -;(function () { +(function () { let MenuTpl = '
' + - '' - window.ESX_MENU = {} - ESX_MENU.ResourceName = 'esx_menu_default' - ESX_MENU.opened = {} - ESX_MENU.focus = [] - ESX_MENU.pos = {} + "{{{label}}}{{#isSlider}} : <{{{sliderLabel}}}>{{/isSlider}}" + + "" + + "{{/elements}}" + + "" + + "" + + ""; + window.ESX_MENU = {}; + ESX_MENU.ResourceName = "esx_menu_default"; + ESX_MENU.opened = {}; + ESX_MENU.focus = []; + ESX_MENU.pos = {}; ESX_MENU.open = function (namespace, name, data) { - if (typeof ESX_MENU.opened[namespace] == 'undefined') { - ESX_MENU.opened[namespace] = {} + if (typeof ESX_MENU.opened[namespace] == "undefined") { + ESX_MENU.opened[namespace] = {}; } - if (typeof ESX_MENU.opened[namespace][name] != 'undefined') { - ESX_MENU.close(namespace, name) + if (typeof ESX_MENU.opened[namespace][name] != "undefined") { + ESX_MENU.close(namespace, name); } - if (typeof ESX_MENU.pos[namespace] == 'undefined') { - ESX_MENU.pos[namespace] = {} + if (typeof ESX_MENU.pos[namespace] == "undefined") { + ESX_MENU.pos[namespace] = {}; } for (let i = 0; i < data.elements.length; i++) { - if (typeof data.elements[i].type == 'undefined') { - data.elements[i].type = 'default' + if (typeof data.elements[i].type == "undefined") { + data.elements[i].type = "default"; } } - data._index = ESX_MENU.focus.length - data._namespace = namespace - data._name = name + data._index = ESX_MENU.focus.length; + data._namespace = namespace; + data._name = name; for (let i = 0; i < data.elements.length; i++) { - data.elements[i]._namespace = namespace - data.elements[i]._name = name + data.elements[i]._namespace = namespace; + data.elements[i]._name = name; } - ESX_MENU.opened[namespace][name] = data - ESX_MENU.pos[namespace][name] = 0 + ESX_MENU.opened[namespace][name] = data; + ESX_MENU.pos[namespace][name] = 0; for (let i = 0; i < data.elements.length; i++) { if (data.elements[i].selected) { - ESX_MENU.pos[namespace][name] = i + ESX_MENU.pos[namespace][name] = i; } else { - data.elements[i].selected = false + data.elements[i].selected = false; } } ESX_MENU.focus.push({ namespace: namespace, - name: name - }) + name: name, + }); - ESX_MENU.render() - $('#menu_' + namespace + '_' + name) - .find('.menu-item.selected')[0] - .scrollIntoView() - } + ESX_MENU.render(); + $("#menu_" + namespace + "_" + name) + .find(".menu-item.selected")[0] + .scrollIntoView(); + }; ESX_MENU.close = function (namespace, name) { - delete ESX_MENU.opened[namespace][name] + delete ESX_MENU.opened[namespace][name]; for (let i = 0; i < ESX_MENU.focus.length; i++) { if ( ESX_MENU.focus[i].namespace == namespace && ESX_MENU.focus[i].name == name ) { - ESX_MENU.focus.splice(i, 1) - break + ESX_MENU.focus.splice(i, 1); + break; } } - ESX_MENU.render() - } + ESX_MENU.render(); + }; ESX_MENU.render = function () { - let menuContainer = document.getElementById('menus') - let focused = ESX_MENU.getFocused() - menuContainer.innerHTML = '' - $(menuContainer).hide() + let menuContainer = document.getElementById("menus"); + let focused = ESX_MENU.getFocused(); + menuContainer.innerHTML = ""; + $(menuContainer).hide(); for (let namespace in ESX_MENU.opened) { for (let name in ESX_MENU.opened[namespace]) { - let menuData = ESX_MENU.opened[namespace][name] - let view = JSON.parse(JSON.stringify(menuData)) + let menuData = ESX_MENU.opened[namespace][name]; + let view = JSON.parse(JSON.stringify(menuData)); for (let i = 0; i < menuData.elements.length; i++) { - let element = view.elements[i] + let element = view.elements[i]; switch (element.type) { - case 'default': - break + case "default": + break; - case 'slider': { - element.isSlider = true + case "slider": { + element.isSlider = true; element.sliderLabel = - typeof element.options == 'undefined' + typeof element.options == "undefined" ? element.value - : element.options[element.value] + : element.options[element.value]; - break + break; } default: - break + break; } if (i == ESX_MENU.pos[namespace][name]) { - element.selected = true + element.selected = true; } } - let menu = $(Mustache.render(MenuTpl, view))[0] - $(menu).hide() - menuContainer.appendChild(menu) + let menu = $(Mustache.render(MenuTpl, view))[0]; + $(menu).hide(); + menuContainer.appendChild(menu); } } - if (typeof focused != 'undefined') { - $('#menu_' + focused.namespace + '_' + focused.name).show() + if (typeof focused != "undefined") { + $("#menu_" + focused.namespace + "_" + focused.name).show(); } - $(menuContainer).show() - } + $(menuContainer).show(); + }; ESX_MENU.submit = function (namespace, name, data) { $.post( - 'http://' + ESX_MENU.ResourceName + '/menu_submit', + "http://" + ESX_MENU.ResourceName + "/menu_submit", JSON.stringify({ _namespace: namespace, _name: name, current: data, - elements: ESX_MENU.opened[namespace][name].elements + elements: ESX_MENU.opened[namespace][name].elements, }) - ) - } + ); + }; ESX_MENU.cancel = function (namespace, name) { $.post( - 'http://' + ESX_MENU.ResourceName + '/menu_cancel', + "http://" + ESX_MENU.ResourceName + "/menu_cancel", JSON.stringify({ _namespace: namespace, - _name: name + _name: name, }) - ) - } + ); + }; ESX_MENU.change = function (namespace, name, data) { $.post( - 'http://' + ESX_MENU.ResourceName + '/menu_change', + "http://" + ESX_MENU.ResourceName + "/menu_change", JSON.stringify({ _namespace: namespace, _name: name, current: data, - elements: ESX_MENU.opened[namespace][name].elements + elements: ESX_MENU.opened[namespace][name].elements, }) - ) - } + ); + }; ESX_MENU.getFocused = function () { - return ESX_MENU.focus[ESX_MENU.focus.length - 1] - } + return ESX_MENU.focus[ESX_MENU.focus.length - 1]; + }; - window.onData = data => { + window.onData = (data) => { switch (data.action) { - case 'openMenu': { - ESX_MENU.open(data.namespace, data.name, data.data) - break + case "openMenu": { + ESX_MENU.open(data.namespace, data.name, data.data); + break; } - case 'closeMenu': { - ESX_MENU.close(data.namespace, data.name) - break + case "closeMenu": { + ESX_MENU.close(data.namespace, data.name); + break; } - case 'controlPressed': { + case "controlPressed": { switch (data.control) { - case 'ENTER': { - let focused = ESX_MENU.getFocused() + case "ENTER": { + let focused = ESX_MENU.getFocused(); - if (typeof focused != 'undefined') { - let menu = ESX_MENU.opened[focused.namespace][focused.name] - let pos = ESX_MENU.pos[focused.namespace][focused.name] - let elem = menu.elements[pos] + if (typeof focused != "undefined") { + let menu = ESX_MENU.opened[focused.namespace][focused.name]; + let pos = ESX_MENU.pos[focused.namespace][focused.name]; + let elem = menu.elements[pos]; if (menu.elements.length > 0) { - ESX_MENU.submit(focused.namespace, focused.name, elem) + ESX_MENU.submit(focused.namespace, focused.name, elem); } } - break + break; } - case 'BACKSPACE': { - let focused = ESX_MENU.getFocused() + case "BACKSPACE": { + let focused = ESX_MENU.getFocused(); - if (typeof focused != 'undefined') { - ESX_MENU.cancel(focused.namespace, focused.name) + if (typeof focused != "undefined") { + ESX_MENU.cancel(focused.namespace, focused.name); } - break + break; } - case 'TOP': { - let focused = ESX_MENU.getFocused() + case "TOP": { + let focused = ESX_MENU.getFocused(); - if (typeof focused != 'undefined') { - let menu = ESX_MENU.opened[focused.namespace][focused.name] - let pos = ESX_MENU.pos[focused.namespace][focused.name] + if (typeof focused != "undefined") { + let menu = ESX_MENU.opened[focused.namespace][focused.name]; + let pos = ESX_MENU.pos[focused.namespace][focused.name]; if (pos > 0) { - ESX_MENU.pos[focused.namespace][focused.name]-- + ESX_MENU.pos[focused.namespace][focused.name]--; } else { ESX_MENU.pos[focused.namespace][focused.name] = - menu.elements.length - 1 + menu.elements.length - 1; } let elem = - menu.elements[ESX_MENU.pos[focused.namespace][focused.name]] + menu.elements[ESX_MENU.pos[focused.namespace][focused.name]]; for (let i = 0; i < menu.elements.length; i++) { if (i == ESX_MENU.pos[focused.namespace][focused.name]) { - menu.elements[i].selected = true + menu.elements[i].selected = true; } else { - menu.elements[i].selected = false + menu.elements[i].selected = false; } } - ESX_MENU.change(focused.namespace, focused.name, elem) - ESX_MENU.render() + ESX_MENU.change(focused.namespace, focused.name, elem); + ESX_MENU.render(); - $('#menu_' + focused.namespace + '_' + focused.name) - .find('.menu-item.selected')[0] - .scrollIntoView() + $("#menu_" + focused.namespace + "_" + focused.name) + .find(".menu-item.selected")[0] + .scrollIntoView(); } - break + break; } - case 'DOWN': { - let focused = ESX_MENU.getFocused() + case "DOWN": { + let focused = ESX_MENU.getFocused(); - if (typeof focused != 'undefined') { - let menu = ESX_MENU.opened[focused.namespace][focused.name] - let pos = ESX_MENU.pos[focused.namespace][focused.name] - let length = menu.elements.length + if (typeof focused != "undefined") { + let menu = ESX_MENU.opened[focused.namespace][focused.name]; + let pos = ESX_MENU.pos[focused.namespace][focused.name]; + let length = menu.elements.length; if (pos < length - 1) { - ESX_MENU.pos[focused.namespace][focused.name]++ + ESX_MENU.pos[focused.namespace][focused.name]++; } else { - ESX_MENU.pos[focused.namespace][focused.name] = 0 + ESX_MENU.pos[focused.namespace][focused.name] = 0; } let elem = - menu.elements[ESX_MENU.pos[focused.namespace][focused.name]] + menu.elements[ESX_MENU.pos[focused.namespace][focused.name]]; for (let i = 0; i < menu.elements.length; i++) { if (i == ESX_MENU.pos[focused.namespace][focused.name]) { - menu.elements[i].selected = true + menu.elements[i].selected = true; } else { - menu.elements[i].selected = false + menu.elements[i].selected = false; } } - ESX_MENU.change(focused.namespace, focused.name, elem) - ESX_MENU.render() + ESX_MENU.change(focused.namespace, focused.name, elem); + ESX_MENU.render(); - $('#menu_' + focused.namespace + '_' + focused.name) - .find('.menu-item.selected')[0] - .scrollIntoView() + $("#menu_" + focused.namespace + "_" + focused.name) + .find(".menu-item.selected")[0] + .scrollIntoView(); } - break + break; } - case 'LEFT': { - let focused = ESX_MENU.getFocused() + case "LEFT": { + let focused = ESX_MENU.getFocused(); - if (typeof focused != 'undefined') { - let menu = ESX_MENU.opened[focused.namespace][focused.name] - let pos = ESX_MENU.pos[focused.namespace][focused.name] - let elem = menu.elements[pos] + if (typeof focused != "undefined") { + let menu = ESX_MENU.opened[focused.namespace][focused.name]; + let pos = ESX_MENU.pos[focused.namespace][focused.name]; + let elem = menu.elements[pos]; switch (elem.type) { - case 'default': - break + case "default": + break; - case 'slider': { - let min = typeof elem.min == 'undefined' ? 0 : elem.min + case "slider": { + let min = typeof elem.min == "undefined" ? 0 : elem.min; if (elem.value > min) { - elem.value-- - ESX_MENU.change(focused.namespace, focused.name, elem) + elem.value--; + ESX_MENU.change(focused.namespace, focused.name, elem); } - ESX_MENU.render() - break + ESX_MENU.render(); + break; } default: - break + break; } - $('#menu_' + focused.namespace + '_' + focused.name) - .find('.menu-item.selected')[0] - .scrollIntoView() + $("#menu_" + focused.namespace + "_" + focused.name) + .find(".menu-item.selected")[0] + .scrollIntoView(); } - break + break; } - case 'RIGHT': { - let focused = ESX_MENU.getFocused() + case "RIGHT": { + let focused = ESX_MENU.getFocused(); - if (typeof focused != 'undefined') { - let menu = ESX_MENU.opened[focused.namespace][focused.name] - let pos = ESX_MENU.pos[focused.namespace][focused.name] - let elem = menu.elements[pos] + if (typeof focused != "undefined") { + let menu = ESX_MENU.opened[focused.namespace][focused.name]; + let pos = ESX_MENU.pos[focused.namespace][focused.name]; + let elem = menu.elements[pos]; switch (elem.type) { - case 'default': - break + case "default": + break; - case 'slider': { + case "slider": { if ( - typeof elem.options != 'undefined' && + typeof elem.options != "undefined" && elem.value < elem.options.length - 1 ) { - elem.value++ - ESX_MENU.change(focused.namespace, focused.name, elem) + elem.value++; + ESX_MENU.change(focused.namespace, focused.name, elem); } - if (typeof elem.max != 'undefined' && elem.value < elem.max) { - elem.value++ - ESX_MENU.change(focused.namespace, focused.name, elem) + if (typeof elem.max != "undefined" && elem.value < elem.max) { + elem.value++; + ESX_MENU.change(focused.namespace, focused.name, elem); } - ESX_MENU.render() - break + ESX_MENU.render(); + break; } default: - break + break; } - $('#menu_' + focused.namespace + '_' + focused.name) - .find('.menu-item.selected')[0] - .scrollIntoView() + $("#menu_" + focused.namespace + "_" + focused.name) + .find(".menu-item.selected")[0] + .scrollIntoView(); } - break + break; } default: - break + break; } - break + break; } } - } + }; window.onload = function (e) { - window.addEventListener('message', event => { - onData(event.data) - }) - } -})() + window.addEventListener("message", (event) => { + onData(event.data); + }); + }; +})();