esx_core/html/js/app.js

(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);
    }
  };

})()