Add files

html/css/app.css

@@ -0,0 +1,52 @@
+@font-face {
+  font-family: bankgothic;
+  src: url('../fonts/bankgothic.ttf');
+}
+
+@font-face {
+  font-family: pcdown;
+  src: url('../fonts/pdown.ttf');
+}
+
+.menu {
+  font-family: bankgothic;  
+  position   : absolute;
+  left       : 50%;
+  top        : 50%;
+  transform  : translate(-50%, -50%);
+  box-shadow : 0px 0px 50px 0px #000;
+  overflow-y : auto;
+  max-height : 90%; 
+}
+
+.menu button {
+  font-family: bankgothic; 
+}
+
+.menu > table {
+  border          : 1px transparent;
+  border-spacing  : 0;
+  min-width       : 400px;
+  background-color: #FFF;
+}
+
+.menu > table > thead {
+  background-color: #506be6;
+  text-align      : center;
+  height          : 40px;
+  line-height     : 40px;
+  color           : #fff;
+}
+
+.menu td {
+  text-align: center;
+  padding   : 8px;
+}
+
+.menu tbody tr:nth-child(even) {
+  background: #CCC
+}
+
+.menu tbody tr:nth-child(odd) {
+  background: #FFF
+}

html/js/app.js

@@ -0,0 +1,196 @@
+(function(){
+
+	let MenuTpl =
+		'<div id="menu_{{_namespace}}_{{_name}}" class="menu">' +
+			'<table>' +
+				'<thead>' +
+					'<tr>' +
+						'{{#head}}<td>{{content}}</td>{{/head}}' +
+					'</tr>' +
+				'</thead>'+
+				'<tbody>' +
+					'{{#rows}}' +
+						'<tr>' +
+							'{{#cols}}<td>{{{content}}}</td>{{/cols}}' +
+						'</tr>' +
+					'{{/rows}}' +
+				'</tbody>' +
+			'</table>' +
+		'</div>'
+	;
+
+	window.ESX_MENU       = {};
+	ESX_MENU.ResourceName = 'esx_menu_list';
+	ESX_MENU.opened       = {};
+	ESX_MENU.focus        = [];
+	ESX_MENU.data         = {}
+
+	ESX_MENU.open = function(namespace, name, data){
+
+		if(typeof ESX_MENU.opened[namespace] == 'undefined')
+			ESX_MENU.opened[namespace] = {};
+
+		if(typeof ESX_MENU.opened[namespace][name] != 'undefined')
+			ESX_MENU.close(namespace, name);
+
+		data._namespace = namespace;
+		data._name      = name;
+
+		ESX_MENU.opened[namespace][name] = data;
+
+		ESX_MENU.focus.push({
+			namespace: namespace,
+			name     : name
+		});
+		
+		ESX_MENU.render();
+	}
+
+	ESX_MENU.close = function(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.render();
+
+	}
+
+	ESX_MENU.render = function(){
+
+		let menuContainer       = document.getElementById('menus');
+		let focused             = ESX_MENU.getFocused();
+		menuContainer.innerHTML = '';
+
+		$(menuContainer).hide();
+
+		for(let namespace in ESX_MENU.opened){
+			
+			if(typeof ESX_MENU.data[namespace] == 'undefined')
+				ESX_MENU.data[namespace] = {};
+
+			for(let name in ESX_MENU.opened[namespace]){
+
+				ESX_MENU.data[namespace][name] = [];
+
+				let menuData = ESX_MENU.opened[namespace][name];
+				let view     = {
+					_namespace: menuData._namespace,
+					_name     : menuData._name,
+					head      : [],
+					rows      : []
+				}
+
+				for(let i=0; i<menuData.head.length; i++){
+					let item = {content: menuData.head[i]};
+					view.head.push(item);
+				}
+
+				for(let i=0; i<menuData.rows.length; i++){
+
+					let row  = menuData.rows[i];
+					let data = row.data;
+
+					ESX_MENU.data[namespace][name].push(data)
+
+					view.rows.push({cols: []});
+
+					for(let j=0; j<row.cols.length; j++){
+
+						let col     = menuData.rows[i].cols[j];
+						let regex   = /\{\{(.*?)\|(.*?)\}\}/g;
+						let matches = [];
+						let match;
+
+						while ((match = regex.exec(col)) != null)
+							matches.push(match)
+
+						for(let k=0; k<matches.length; k++)
+							col = col.replace('{{' + matches[k][1] + '|' + matches[k][2] + '}}', '<button data-id="' + i + '" data-namespace="' + namespace + '" data-name="' + name + '" data-value="' + matches[k][2] +'">' + matches[k][1] + '</button>');
+
+						view.rows[i].cols.push({data: data, content: col})
+
+					}
+
+				}
+
+				let menu = $(Mustache.render(MenuTpl, view))
+
+				menu.find('button[data-namespace][data-name]').click(function(){
+					ESX_MENU.submit($(this).data('namespace'), $(this).data('name'), {
+						data : ESX_MENU.data[$(this).data('namespace')][$(this).data('name')][parseInt($(this).data('id'))],
+						value: $(this).data('value')
+					})
+				})
+
+				menu.hide();
+
+				menuContainer.appendChild(menu[0]);
+			}
+		}
+
+		if(typeof focused != 'undefined')
+			$('#menu_' + focused.namespace + '_' + focused.name).show();
+
+		$(menuContainer).show();
+
+	}
+
+	ESX_MENU.submit = function(namespace, name, data){
+		$.post('http://' + ESX_MENU.ResourceName + '/menu_submit', JSON.stringify({
+			_namespace: namespace,
+			_name     : name,
+			data      : data.data,
+			value     : data.value
+		}));
+	}
+
+	ESX_MENU.cancel = function(namespace, name){
+		$.post('http://' + ESX_MENU.ResourceName + '/menu_cancel', JSON.stringify({
+			_namespace: namespace,
+			_name     : name
+		}));
+	}
+
+	ESX_MENU.getFocused = function(){
+		return ESX_MENU.focus[ESX_MENU.focus.length - 1];
+	}
+
+	window.onData = (data) => {
+
+		switch(data.action){
+
+			case 'openMenu' : {
+				ESX_MENU.open(data.namespace, data.name, data.data);
+				break;
+			}
+
+			case 'closeMenu' : {
+				ESX_MENU.close(data.namespace, data.name);
+				break;
+			}
+
+		}
+
+	}
+
+	window.onload = function(e){
+		window.addEventListener('message', (event) => {
+			onData(event.data)
+		});
+	}
+
+  document.onkeyup = function(data) {
+    
+    if(data.which == 27) {
+			let focused  = ESX_MENU.getFocused();
+      ESX_MENU.cancel(focused.namespace, focused.name);
+    }
+  };
+
+})()

html/ui.html

@@ -0,0 +1,15 @@
+<html>
+	<head>
+		<link rel="stylesheet" href="css/app.css" />
+	</head>
+	<body>
+		
+		<div id="menus"></div>
+
+		<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
+		<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
+		<script src="js/mustache.min.js"></script>
+		<script src="js/app.js"></script>
+
+	</body>
+</html>