Minor improvements

This commit is contained in:
ElPumpo
2018-11-11 14:20:49 +01:00
parent 9b7a9b4aa2
commit ade7a3bc16
7 changed files with 224 additions and 231 deletions
+3 -1
View File
@@ -18,4 +18,6 @@ files {
'html/fonts/pdown.ttf',
'html/fonts/bankgothic.ttf'
}
}
dependency 'es_extended'
+5 -7
View File
@@ -23,7 +23,7 @@ Citizen.CreateThread(function()
action = 'openMenu',
namespace = namespace,
name = name,
data = data,
data = data
})
local timeoutId = ESX.SetTimeout(200, function()
@@ -41,7 +41,7 @@ Citizen.CreateThread(function()
action = 'closeMenu',
namespace = namespace,
name = name,
data = data,
data = data
})
for k,v in pairs(OpenedMenus) do
@@ -68,7 +68,7 @@ Citizen.CreateThread(function()
if tonumber(data.value) ~= nil then
-- Round float values
data.value = round(tonumber(data.value))
data.value = ESX.Math.Round(tonumber(data.value))
-- Check for negative value
if tonumber(data.value) <= 0 then
@@ -128,11 +128,9 @@ Citizen.CreateThread(function()
DisableControlAction(0, 15, true) -- WeaponWheelPrev
DisableControlAction(0, 16, true) -- SelectNextWeapon
DisableControlAction(0, 17, true) -- SelectPrevWeapon
else
Citizen.Wait(500)
end
end
end)
function round(x)
return x>=0 and math.floor(x+0.5) or math.ceil(x-0.5)
end
end)
+39 -46
View File
@@ -1,81 +1,74 @@
@font-face {
font-family: bankgothic;
src: url('../fonts/bankgothic.ttf');
font-family: bankgothic;
src: url('../fonts/bankgothic.ttf');
}
@font-face {
font-family: pcdown;
src: url('../fonts/pdown.ttf');
font-family: pcdown;
src: url('../fonts/pdown.ttf');
}
#controls {
font-family : pcdown;
font-size : 3em;
color : #FFF;
position : absolute;
bottom : 40;
right : 40;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000
;
font-family: pcdown;
font-size: 3em;
color: #FFF;
position: absolute;
bottom: 40;
right: 40;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.controls {
display: none;
display: none;
}
.dialog {
font-family : bankgothic;
background-color: #fff;
color : #fff;
box-shadow : 0px 0px 50px 0px #000;
position : absolute;
overflow : hidden;
top : 50%;
left : 50%;
width : 600px;
height : 104px;
transform : translate(-50%, -50%);
font-family: bankgothic;
background-color: #fff;
color: #fff;
box-shadow: 0px 0px 50px 0px #000;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
width: 600px;
height: 104px;
transform: translate(-50%, -50%);
}
.dialog.big {
height: 200px;
height: 200px;
}
.dialog .head {
background-color: #506be6;
text-align : center;
height : 40px;
background-color: #506be6;
text-align: center;
height: 40px;
}
.dialog .head span:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.dialog input[type="text"] {
width : 100%;
height: 32px;
width: 100%;
height: 32px;
}
.dialog textarea {
width : 100%;
height: 128px;
width: 100%;
height: 128px;
}
.dialog button[name="submit"] {
width : 75%;
height: 32px;
width: 75%;
height: 32px;
}
.dialog button[name="cancel"] {
width : 25%;
height: 32px;
width: 25%;
height: 32px;
}
+59 -55
View File
@@ -1,4 +1,4 @@
(function(){
(function () {
let MenuTpl =
'<div id="menu_{{_namespace}}_{{_name}}" class="dialog {{#isBig}}big{{/isBig}}">' +
@@ -6,7 +6,7 @@
'{{#isDefault}}<input type="text" name="value" id="inputText"/>{{/isDefault}}' +
'{{#isBig}}<textarea name="value"/>{{/isBig}}' +
'<button type="button" name="submit">Envoyer</button>' +
'<button type="button" name="cancel">Annuler</button>'
'<button type="button" name="cancel">Annuler</button>' +
'</div>' +
'</div>'
;
@@ -17,33 +17,38 @@
ESX_MENU.focus = [];
ESX_MENU.pos = {};
ESX_MENU.open = function(namespace, name, data) {
ESX_MENU.open = function (namespace, name, data) {
if(typeof ESX_MENU.opened[namespace] == 'undefined')
if (typeof ESX_MENU.opened[namespace] == 'undefined') {
ESX_MENU.opened[namespace] = {};
}
if(typeof ESX_MENU.opened[namespace][name] != 'undefined')
if (typeof ESX_MENU.opened[namespace][name] != 'undefined') {
ESX_MENU.close(namespace, name);
}
if(typeof ESX_MENU.pos[namespace] == 'undefined')
if (typeof ESX_MENU.pos[namespace] == 'undefined') {
ESX_MENU.pos[namespace] = {};
}
if(typeof data.type == 'undefined')
if (typeof data.type == 'undefined') {
data.type = 'default';
}
if(typeof data.align == 'undefined')
if (typeof data.align == 'undefined') {
data.align = 'top-left';
}
data._index = ESX_MENU.focus.length;
data._index = ESX_MENU.focus.length;
data._namespace = namespace;
data._name = name;
data._name = name;
ESX_MENU.opened[namespace][name] = data;
ESX_MENU.pos [namespace][name] = 0;
ESX_MENU.pos[namespace][name] = 0;
ESX_MENU.focus.push({
namespace: namespace,
name : name
name: name
});
document.onkeyup = function (key) {
@@ -55,73 +60,74 @@
};
ESX_MENU.render();
}
ESX_MENU.close = function(namespace, name) {
};
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){
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() {
};
ESX_MENU.render = function () {
let menuContainer = $('#menus')[0];
$(menuContainer).find('button[name="submit"]').unbind('click');
$(menuContainer).find('button[name="cancel"]').unbind('click');
$(menuContainer).find('[name="value"]') .unbind('input propertychange');
$(menuContainer).find('[name="value"]').unbind('input propertychange');
menuContainer.innerHTML = '';
$(menuContainer).hide();
for(let namespace in ESX_MENU.opened){
for(let name in ESX_MENU.opened[namespace]){
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 view = JSON.parse(JSON.stringify(menuData));
switch(menuData.type){
case 'default' : {
switch (menuData.type) {
case 'default': {
view.isDefault = true;
break;
}
case 'big' : {
case 'big': {
view.isBig = true;
break;
}
default : break;
default: break;
}
let menu = $(Mustache.render(MenuTpl, view))[0];
$(menu).css('z-index', 1000 + view._index);
$(menu).find('button[name="submit"]').click(function() {
$(menu).find('button[name="submit"]').click(function () {
ESX_MENU.submit(this.namespace, this.name, this.data);
}.bind({namespace: namespace, name: name, data: menuData}));
}.bind({ namespace: namespace, name: name, data: menuData }));
$(menu).find('button[name="cancel"]').click(function() {
$(menu).find('button[name="cancel"]').click(function () {
ESX_MENU.cancel(this.namespace, this.name, this.data);
}.bind({namespace: namespace, name: name, data: menuData}));
}.bind({ namespace: namespace, name: name, data: menuData }));
$(menu).find('[name="value"]').bind('input propertychange', function(){
$(menu).find('[name="value"]').bind('input propertychange', function () {
this.data.value = $(menu).find('[name="value"]').val();
ESX_MENU.change(this.namespace, this.name, this.data);
}.bind({namespace: namespace, name: name, data: menuData}));
}.bind({ namespace: namespace, name: name, data: menuData }));
if(typeof menuData.value != 'undefined')
if (typeof menuData.value != 'undefined')
$(menu).find('[name="value"]').val(menuData.value);
menuContainer.appendChild(menu);
@@ -130,46 +136,44 @@
$(menuContainer).show();
$("#inputText").focus();
}
};
ESX_MENU.submit = function(namespace, name, data) {
ESX_MENU.submit = function (namespace, name, data) {
$.post('http://' + ESX_MENU.ResourceName + '/menu_submit', JSON.stringify(data));
}
};
ESX_MENU.cancel = function(namespace, name, data) {
ESX_MENU.cancel = function (namespace, name, data) {
$.post('http://' + ESX_MENU.ResourceName + '/menu_cancel', JSON.stringify(data));
}
};
ESX_MENU.change = function(namespace, name, data) {
ESX_MENU.change = function (namespace, name, data) {
$.post('http://' + ESX_MENU.ResourceName + '/menu_change', JSON.stringify(data));
}
};
ESX_MENU.getFocused = function() {
ESX_MENU.getFocused = function () {
return ESX_MENU.focus[ESX_MENU.focus.length - 1];
}
};
window.onData = (data) => {
switch(data.action){
case 'openMenu' : {
switch (data.action) {
case 'openMenu': {
ESX_MENU.open(data.namespace, data.name, data.data);
break;
}
case 'closeMenu' : {
case 'closeMenu': {
ESX_MENU.close(data.namespace, data.name);
break;
}
}
}
};
window.onload = function(e){
window.onload = function (e) {
window.addEventListener('message', (event) => {
onData(event.data)
onData(event.data);
});
}
};
})()
})();
+59 -55
View File
@@ -1,4 +1,4 @@
(function(){
(function () {
let MenuTpl =
'<div id="menu_{{_namespace}}_{{_name}}" class="dialog {{#isBig}}big{{/isBig}}">' +
@@ -6,7 +6,7 @@
'{{#isDefault}}<input type="text" name="value" id="inputText"/>{{/isDefault}}' +
'{{#isBig}}<textarea name="value"/>{{/isBig}}' +
'<button type="button" name="submit">Submit</button>' +
'<button type="button" name="cancel">Cancel</button>'
'<button type="button" name="cancel">Cancel</button>' +
'</div>' +
'</div>'
;
@@ -17,33 +17,38 @@
ESX_MENU.focus = [];
ESX_MENU.pos = {};
ESX_MENU.open = function(namespace, name, data) {
ESX_MENU.open = function (namespace, name, data) {
if(typeof ESX_MENU.opened[namespace] == 'undefined')
if (typeof ESX_MENU.opened[namespace] == 'undefined') {
ESX_MENU.opened[namespace] = {};
}
if(typeof ESX_MENU.opened[namespace][name] != 'undefined')
if (typeof ESX_MENU.opened[namespace][name] != 'undefined') {
ESX_MENU.close(namespace, name);
}
if(typeof ESX_MENU.pos[namespace] == 'undefined')
if (typeof ESX_MENU.pos[namespace] == 'undefined') {
ESX_MENU.pos[namespace] = {};
}
if(typeof data.type == 'undefined')
if (typeof data.type == 'undefined') {
data.type = 'default';
}
if(typeof data.align == 'undefined')
if (typeof data.align == 'undefined') {
data.align = 'top-left';
}
data._index = ESX_MENU.focus.length;
data._index = ESX_MENU.focus.length;
data._namespace = namespace;
data._name = name;
data._name = name;
ESX_MENU.opened[namespace][name] = data;
ESX_MENU.pos [namespace][name] = 0;
ESX_MENU.pos[namespace][name] = 0;
ESX_MENU.focus.push({
namespace: namespace,
name : name
name: name
});
document.onkeyup = function (key) {
@@ -55,73 +60,74 @@
};
ESX_MENU.render();
}
ESX_MENU.close = function(namespace, name) {
};
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){
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() {
};
ESX_MENU.render = function () {
let menuContainer = $('#menus')[0];
$(menuContainer).find('button[name="submit"]').unbind('click');
$(menuContainer).find('button[name="cancel"]').unbind('click');
$(menuContainer).find('[name="value"]') .unbind('input propertychange');
$(menuContainer).find('[name="value"]').unbind('input propertychange');
menuContainer.innerHTML = '';
$(menuContainer).hide();
for(let namespace in ESX_MENU.opened){
for(let name in ESX_MENU.opened[namespace]){
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 view = JSON.parse(JSON.stringify(menuData));
switch(menuData.type){
case 'default' : {
switch (menuData.type) {
case 'default': {
view.isDefault = true;
break;
}
case 'big' : {
case 'big': {
view.isBig = true;
break;
}
default : break;
default: break;
}
let menu = $(Mustache.render(MenuTpl, view))[0];
$(menu).css('z-index', 1000 + view._index);
$(menu).find('button[name="submit"]').click(function() {
$(menu).find('button[name="submit"]').click(function () {
ESX_MENU.submit(this.namespace, this.name, this.data);
}.bind({namespace: namespace, name: name, data: menuData}));
}.bind({ namespace: namespace, name: name, data: menuData }));
$(menu).find('button[name="cancel"]').click(function() {
$(menu).find('button[name="cancel"]').click(function () {
ESX_MENU.cancel(this.namespace, this.name, this.data);
}.bind({namespace: namespace, name: name, data: menuData}));
}.bind({ namespace: namespace, name: name, data: menuData }));
$(menu).find('[name="value"]').bind('input propertychange', function(){
$(menu).find('[name="value"]').bind('input propertychange', function () {
this.data.value = $(menu).find('[name="value"]').val();
ESX_MENU.change(this.namespace, this.name, this.data);
}.bind({namespace: namespace, name: name, data: menuData}));
}.bind({ namespace: namespace, name: name, data: menuData }));
if(typeof menuData.value != 'undefined')
if (typeof menuData.value != 'undefined')
$(menu).find('[name="value"]').val(menuData.value);
menuContainer.appendChild(menu);
@@ -130,46 +136,44 @@
$(menuContainer).show();
$("#inputText").focus();
}
};
ESX_MENU.submit = function(namespace, name, data) {
ESX_MENU.submit = function (namespace, name, data) {
$.post('http://' + ESX_MENU.ResourceName + '/menu_submit', JSON.stringify(data));
}
};
ESX_MENU.cancel = function(namespace, name, data) {
ESX_MENU.cancel = function (namespace, name, data) {
$.post('http://' + ESX_MENU.ResourceName + '/menu_cancel', JSON.stringify(data));
}
};
ESX_MENU.change = function(namespace, name, data) {
ESX_MENU.change = function (namespace, name, data) {
$.post('http://' + ESX_MENU.ResourceName + '/menu_change', JSON.stringify(data));
}
};
ESX_MENU.getFocused = function() {
ESX_MENU.getFocused = function () {
return ESX_MENU.focus[ESX_MENU.focus.length - 1];
}
};
window.onData = (data) => {
switch(data.action){
case 'openMenu' : {
switch (data.action) {
case 'openMenu': {
ESX_MENU.open(data.namespace, data.name, data.data);
break;
}
case 'closeMenu' : {
case 'closeMenu': {
ESX_MENU.close(data.namespace, data.name);
break;
}
}
}
};
window.onload = function(e){
window.onload = function (e) {
window.addEventListener('message', (event) => {
onData(event.data)
onData(event.data);
});
}
};
})()
})();
+59 -55
View File
@@ -1,4 +1,4 @@
(function(){
(function () {
let MenuTpl =
'<div id="menu_{{_namespace}}_{{_name}}" class="dialog {{#isBig}}big{{/isBig}}">' +
@@ -6,7 +6,7 @@
'{{#isDefault}}<input type="text" name="value" id="inputText"/>{{/isDefault}}' +
'{{#isBig}}<textarea name="value"/>{{/isBig}}' +
'<button type="button" name="submit">Zapisz</button>' +
'<button type="button" name="cancel">Zamknij</button>'
'<button type="button" name="cancel">Zamknij</button>' +
'</div>' +
'</div>'
;
@@ -17,33 +17,38 @@
ESX_MENU.focus = [];
ESX_MENU.pos = {};
ESX_MENU.open = function(namespace, name, data) {
ESX_MENU.open = function (namespace, name, data) {
if(typeof ESX_MENU.opened[namespace] == 'undefined')
if (typeof ESX_MENU.opened[namespace] == 'undefined') {
ESX_MENU.opened[namespace] = {};
}
if(typeof ESX_MENU.opened[namespace][name] != 'undefined')
if (typeof ESX_MENU.opened[namespace][name] != 'undefined') {
ESX_MENU.close(namespace, name);
}
if(typeof ESX_MENU.pos[namespace] == 'undefined')
if (typeof ESX_MENU.pos[namespace] == 'undefined') {
ESX_MENU.pos[namespace] = {};
}
if(typeof data.type == 'undefined')
if (typeof data.type == 'undefined') {
data.type = 'default';
}
if(typeof data.align == 'undefined')
if (typeof data.align == 'undefined') {
data.align = 'top-left';
}
data._index = ESX_MENU.focus.length;
data._index = ESX_MENU.focus.length;
data._namespace = namespace;
data._name = name;
data._name = name;
ESX_MENU.opened[namespace][name] = data;
ESX_MENU.pos [namespace][name] = 0;
ESX_MENU.pos[namespace][name] = 0;
ESX_MENU.focus.push({
namespace: namespace,
name : name
name: name
});
document.onkeyup = function (key) {
@@ -55,73 +60,74 @@
};
ESX_MENU.render();
}
ESX_MENU.close = function(namespace, name) {
};
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){
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() {
};
ESX_MENU.render = function () {
let menuContainer = $('#menus')[0];
$(menuContainer).find('button[name="submit"]').unbind('click');
$(menuContainer).find('button[name="cancel"]').unbind('click');
$(menuContainer).find('[name="value"]') .unbind('input propertychange');
$(menuContainer).find('[name="value"]').unbind('input propertychange');
menuContainer.innerHTML = '';
$(menuContainer).hide();
for(let namespace in ESX_MENU.opened){
for(let name in ESX_MENU.opened[namespace]){
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 view = JSON.parse(JSON.stringify(menuData));
switch(menuData.type){
case 'default' : {
switch (menuData.type) {
case 'default': {
view.isDefault = true;
break;
}
case 'big' : {
case 'big': {
view.isBig = true;
break;
}
default : break;
default: break;
}
let menu = $(Mustache.render(MenuTpl, view))[0];
$(menu).css('z-index', 1000 + view._index);
$(menu).find('button[name="submit"]').click(function() {
$(menu).find('button[name="submit"]').click(function () {
ESX_MENU.submit(this.namespace, this.name, this.data);
}.bind({namespace: namespace, name: name, data: menuData}));
}.bind({ namespace: namespace, name: name, data: menuData }));
$(menu).find('button[name="cancel"]').click(function() {
$(menu).find('button[name="cancel"]').click(function () {
ESX_MENU.cancel(this.namespace, this.name, this.data);
}.bind({namespace: namespace, name: name, data: menuData}));
}.bind({ namespace: namespace, name: name, data: menuData }));
$(menu).find('[name="value"]').bind('input propertychange', function(){
$(menu).find('[name="value"]').bind('input propertychange', function () {
this.data.value = $(menu).find('[name="value"]').val();
ESX_MENU.change(this.namespace, this.name, this.data);
}.bind({namespace: namespace, name: name, data: menuData}));
}.bind({ namespace: namespace, name: name, data: menuData }));
if(typeof menuData.value != 'undefined')
if (typeof menuData.value != 'undefined')
$(menu).find('[name="value"]').val(menuData.value);
menuContainer.appendChild(menu);
@@ -130,46 +136,44 @@
$(menuContainer).show();
$("#inputText").focus();
}
};
ESX_MENU.submit = function(namespace, name, data) {
ESX_MENU.submit = function (namespace, name, data) {
$.post('http://' + ESX_MENU.ResourceName + '/menu_submit', JSON.stringify(data));
}
};
ESX_MENU.cancel = function(namespace, name, data) {
ESX_MENU.cancel = function (namespace, name, data) {
$.post('http://' + ESX_MENU.ResourceName + '/menu_cancel', JSON.stringify(data));
}
};
ESX_MENU.change = function(namespace, name, data) {
ESX_MENU.change = function (namespace, name, data) {
$.post('http://' + ESX_MENU.ResourceName + '/menu_change', JSON.stringify(data));
}
};
ESX_MENU.getFocused = function() {
ESX_MENU.getFocused = function () {
return ESX_MENU.focus[ESX_MENU.focus.length - 1];
}
};
window.onData = (data) => {
switch(data.action){
case 'openMenu' : {
switch (data.action) {
case 'openMenu': {
ESX_MENU.open(data.namespace, data.name, data.data);
break;
}
case 'closeMenu' : {
case 'closeMenu': {
ESX_MENU.close(data.namespace, data.name);
break;
}
}
}
};
window.onload = function(e){
window.onload = function (e) {
window.addEventListener('message', (event) => {
onData(event.data)
onData(event.data);
});
}
};
})()
})();
-12
View File
@@ -1,12 +0,0 @@
<html>
<head>
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<div id="menus"></div>
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<script src="js/mustache.min.js"></script>
<script src="js/app_pl.js"></script>
</body>
</html>