mirror of
https://github.com/esx-framework/esx_core.git
synced 2026-08-29 01:08:54 +00:00
Merge pull request #879 from MoskalykA/moskalyka/formatting
refactor(core): reformatting code with prettier
This commit is contained in:
P Gergő
@@ -1,11 +1,11 @@
|
||||
@font-face {
|
||||
font-family: 'Pricedown';
|
||||
src: url('../fonts/pdown.ttf');
|
||||
font-family: "Pricedown";
|
||||
src: url("../fonts/pdown.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'bankgothic';
|
||||
src: url('../fonts/bankgothic.ttf');
|
||||
font-family: "bankgothic";
|
||||
src: url("../fonts/bankgothic.ttf");
|
||||
}
|
||||
|
||||
html {
|
||||
@@ -20,11 +20,12 @@ html {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
|
||||
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
|
||||
1px 1px 0 #000;
|
||||
}
|
||||
|
||||
.menu {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
min-width: 400px;
|
||||
min-height: 250px;
|
||||
color: #fff;
|
||||
@@ -34,7 +35,7 @@ html {
|
||||
}
|
||||
|
||||
.menu .head {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 28px;
|
||||
padding: 10px;
|
||||
background: #1a1a1a;
|
||||
@@ -51,14 +52,14 @@ html {
|
||||
}
|
||||
|
||||
.menu .head span {
|
||||
font-family: 'Pricedown';
|
||||
font-family: "Pricedown";
|
||||
font-size: 28px;
|
||||
padding-left: 15px;
|
||||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.menu .menu-items .menu-item {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
display: block;
|
||||
|
||||
@@ -1,38 +1,40 @@
|
||||
(() => {
|
||||
ESX = {};
|
||||
ESX = {};
|
||||
|
||||
ESX.inventoryNotification = function (add, label, count) {
|
||||
let notif = '';
|
||||
ESX.inventoryNotification = function (add, label, count) {
|
||||
let notif = "";
|
||||
|
||||
if (add) {
|
||||
notif += '+';
|
||||
} else {
|
||||
notif += '-';
|
||||
}
|
||||
if (add) {
|
||||
notif += "+";
|
||||
} else {
|
||||
notif += "-";
|
||||
}
|
||||
|
||||
if (count) {
|
||||
notif += count + ' ' + label;
|
||||
} else {
|
||||
notif += ' ' + label;
|
||||
}
|
||||
if (count) {
|
||||
notif += count + " " + label;
|
||||
} else {
|
||||
notif += " " + label;
|
||||
}
|
||||
|
||||
let elem = $('<div>' + notif + '</div>');
|
||||
$('#inventory_notifications').append(elem);
|
||||
let elem = $("<div>" + notif + "</div>");
|
||||
$("#inventory_notifications").append(elem);
|
||||
|
||||
$(elem).delay(3000).fadeOut(1000, function () {
|
||||
elem.remove();
|
||||
});
|
||||
};
|
||||
$(elem)
|
||||
.delay(3000)
|
||||
.fadeOut(1000, function () {
|
||||
elem.remove();
|
||||
});
|
||||
};
|
||||
|
||||
window.onData = (data) => {
|
||||
if (data.action === 'inventoryNotification') {
|
||||
ESX.inventoryNotification(data.add, data.item, data.count);
|
||||
}
|
||||
};
|
||||
window.onData = (data) => {
|
||||
if (data.action === "inventoryNotification") {
|
||||
ESX.inventoryNotification(data.add, data.item, data.count);
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function (e) {
|
||||
window.addEventListener('message', (event) => {
|
||||
onData(event.data);
|
||||
});
|
||||
};
|
||||
window.onload = function (e) {
|
||||
window.addEventListener("message", (event) => {
|
||||
onData(event.data);
|
||||
});
|
||||
};
|
||||
})();
|
||||
|
||||
@@ -1,42 +1,35 @@
|
||||
(() => {
|
||||
let ESXWrapper = {};
|
||||
ESXWrapper.MessageSize = 1024;
|
||||
ESXWrapper.messageId = 0;
|
||||
|
||||
let ESXWrapper = {};
|
||||
ESXWrapper.MessageSize = 1024;
|
||||
ESXWrapper.messageId = 0;
|
||||
window.SendMessage = function (namespace, type, msg) {
|
||||
ESXWrapper.messageId =
|
||||
ESXWrapper.messageId < 65535 ? ESXWrapper.messageId + 1 : 0;
|
||||
const str = JSON.stringify(msg);
|
||||
|
||||
window.SendMessage = function (namespace, type, msg) {
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
let count = 0;
|
||||
let chunk = "";
|
||||
|
||||
ESXWrapper.messageId = (ESXWrapper.messageId < 65535) ? ESXWrapper.messageId + 1 : 0;
|
||||
const str = JSON.stringify(msg);
|
||||
while (count < ESXWrapper.MessageSize && i < str.length) {
|
||||
chunk += str[i];
|
||||
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
count++;
|
||||
i++;
|
||||
}
|
||||
|
||||
let count = 0;
|
||||
let chunk = '';
|
||||
i--;
|
||||
|
||||
while (count < ESXWrapper.MessageSize && i < str.length) {
|
||||
const data = {
|
||||
__type: type,
|
||||
id: ESXWrapper.messageId,
|
||||
chunk: chunk,
|
||||
};
|
||||
|
||||
chunk += str[i];
|
||||
if (i == str.length - 1) data.end = true;
|
||||
|
||||
count++;
|
||||
i++;
|
||||
}
|
||||
|
||||
i--;
|
||||
|
||||
const data = {
|
||||
__type: type,
|
||||
id: ESXWrapper.messageId,
|
||||
chunk: chunk
|
||||
}
|
||||
|
||||
if (i == str.length - 1)
|
||||
data.end = true;
|
||||
|
||||
$.post('http://' + namespace + '/__chunk', JSON.stringify(data));
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
})()
|
||||
$.post("http://" + namespace + "/__chunk", JSON.stringify(data));
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
+459
-440
@@ -1,443 +1,462 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>ESX Context HUD</title>
|
||||
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--item-main: #242424;
|
||||
--item-unselectable: #161616;
|
||||
--item-hover: #404040;
|
||||
--item-disabled: #393939;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
body {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
#container {
|
||||
position: absolute;
|
||||
width: 280px;
|
||||
max-height: 50%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow-y: auto;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.center {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.left {
|
||||
top: 50%;
|
||||
left: 25%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.right {
|
||||
top: 50%;
|
||||
left: 75%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.item {
|
||||
display: grid;
|
||||
grid-template-columns: 30px calc(100% - 30px);
|
||||
padding: 15px 10px;
|
||||
border-radius: 5px;
|
||||
background: var(--item-main);
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
background: var(--item-hover);
|
||||
}
|
||||
|
||||
.item>i {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item>div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.item>div>i {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
padding: 15px 10px;
|
||||
border-radius: 5px;
|
||||
background: var(--item-main);
|
||||
}
|
||||
|
||||
.input:hover {
|
||||
background: var(--item-hover);
|
||||
}
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
width: auto;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.unselectable {
|
||||
background: var(--item-unselectable);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
background: var(--item-disabled);
|
||||
}
|
||||
|
||||
* {
|
||||
color: white;
|
||||
font-family: Arial;
|
||||
user-select: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgb(20, 20, 20);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(30, 30, 30);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
/* Hide the browser's default checkbox */
|
||||
.container input {
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
/* Create a custom checkbox */
|
||||
.checkmark {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 8px;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
/* On mouse-over, add a grey background color */
|
||||
.container:hover input~.checkmark {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
/* When the checkbox is checked, add a blue background */
|
||||
.container input:checked~.checkmark {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
|
||||
/* Create the checkmark/indicator (hidden when not checked) */
|
||||
.checkmark:after {
|
||||
content: "";
|
||||
position: relative;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show the checkmark when checked */
|
||||
.container input:checked~.checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="container" class="right">
|
||||
<div class="item unselectable">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
<div>
|
||||
<b>Unselectable Item</b>
|
||||
<i>Testing, testing a description here.</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item disabled">
|
||||
<i class="fas fa-times"></i>
|
||||
<div>
|
||||
<b>Disabled Item</b>
|
||||
<i>Testing, testing a description here.</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<i class="fas fa-check"></i>
|
||||
<div>
|
||||
<b>Item</b>
|
||||
<i>Testing, testing a description here. Generic words to force overflow.</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
const container = document.getElementById("container")
|
||||
|
||||
const CreateElement = (tag = "div", className = "", parent) => {
|
||||
const e = document.createElement(tag)
|
||||
e.className = className
|
||||
|
||||
if (parent) {
|
||||
parent.append(e)
|
||||
}
|
||||
|
||||
return e
|
||||
}
|
||||
|
||||
function Open(eles, position = "right") {
|
||||
container.innerHTML = ""
|
||||
container.className = position
|
||||
|
||||
for (let i = 0; i < eles.length; i++) {
|
||||
let ele = eles[i]
|
||||
let item = CreateElement("div", "item", container)
|
||||
|
||||
let icon = CreateElement("i", ele.icon, item)
|
||||
let div = CreateElement("div", "", item)
|
||||
|
||||
let title = CreateElement("b", "", div)
|
||||
title.innerHTML = ele.title
|
||||
|
||||
if (ele.description) {
|
||||
let desc = CreateElement("i", "", div)
|
||||
desc.innerHTML = ele.description || ""
|
||||
}
|
||||
|
||||
if (ele.input) {
|
||||
if (ele.inputType == "radio") {
|
||||
for (let j = 0; j < ele.inputValues.length; j++) {
|
||||
let v = ele.inputValues[j]
|
||||
let container = CreateElement("label", "container", div)
|
||||
container.innerHTML = v.text
|
||||
|
||||
let input = CreateElement("INPUT", "", container)
|
||||
input.type = "radio"
|
||||
input.name = i + 1
|
||||
input.checked = (ele.inputValue || ele.inputPlaceholder || -1) == v.value
|
||||
|
||||
let span = CreateElement("SPAN", "checkmark", container)
|
||||
|
||||
input.onchange = function () {
|
||||
$.post(`https://${GetParentResourceName()}/changed`, JSON.stringify({
|
||||
index: i + 1,
|
||||
value: v.value
|
||||
}))
|
||||
}
|
||||
}
|
||||
} else {
|
||||
let input = CreateElement("input", "", div)
|
||||
input.type = ele.inputType
|
||||
|
||||
if (ele.inputValue) {
|
||||
input.value = ele.inputValue
|
||||
}
|
||||
|
||||
if (ele.inputPlaceholder) {
|
||||
input.placeholder = ele.inputPlaceholder
|
||||
}
|
||||
|
||||
switch (ele.inputType) {
|
||||
case "number":
|
||||
if (ele.inputMin) input.min = ele.inputMin;
|
||||
if (ele.inputMax) input.max = ele.inputMax;
|
||||
|
||||
input.onchange = function () {
|
||||
let v = Number(input.value)
|
||||
|
||||
if (ele.inputMin) {
|
||||
v = Math.max(ele.inputMin, v)
|
||||
}
|
||||
|
||||
if (ele.inputMax) {
|
||||
v = Math.min(ele.inputMax, v)
|
||||
}
|
||||
|
||||
input.value = v
|
||||
|
||||
$.post(`https://${GetParentResourceName()}/changed`, JSON.stringify({
|
||||
index: i + 1,
|
||||
value: v
|
||||
}))
|
||||
}
|
||||
break
|
||||
|
||||
case "text":
|
||||
input.onchange = function () {
|
||||
$.post(`https://${GetParentResourceName()}/changed`, JSON.stringify({
|
||||
index: i + 1,
|
||||
value: input.value
|
||||
}))
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (ele.disabled) {
|
||||
item.className += " disabled"
|
||||
} else if (ele.unselectable) {
|
||||
item.className += " unselectable"
|
||||
} else if (!ele.input) {
|
||||
item.onclick = function () {
|
||||
$.post(`https://${GetParentResourceName()}/selected`, JSON.stringify({
|
||||
index: i + 1
|
||||
}))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.body.style.display = "block"
|
||||
}
|
||||
|
||||
function Closed() {
|
||||
document.body.style.display = "none"
|
||||
}
|
||||
|
||||
function Close() {
|
||||
$.post(`https://${GetParentResourceName()}/closed`,(retVal)=>{
|
||||
if(retVal){
|
||||
Closed()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
window.addEventListener("message", (e) => {
|
||||
let data = e.data
|
||||
|
||||
if (!data.func || !window[data.func]) {
|
||||
return
|
||||
}
|
||||
|
||||
window[data.func](...data.args)
|
||||
})
|
||||
|
||||
window.addEventListener("keydown", (e) => {
|
||||
if (e.key == "Escape" || e.key == "Backspace") {
|
||||
if (e.target.tagName.toLowerCase() == "input") {
|
||||
return
|
||||
}
|
||||
|
||||
Close()
|
||||
}
|
||||
})
|
||||
|
||||
// Open([
|
||||
// {
|
||||
// unselectable:true,
|
||||
// icon:"fas fa-info-circle",
|
||||
// title:"Unselectable Item (Header/Label?)",
|
||||
// },
|
||||
// {
|
||||
// icon:"fas fa-check",
|
||||
// title:"Item A",
|
||||
// description:"Some description here. Add some words to make the text overflow."
|
||||
// },
|
||||
// {
|
||||
// disabled:true,
|
||||
// icon:"fas fa-times",
|
||||
// title:"Disabled Item",
|
||||
// description:"Some description here. Add some words to make the text overflow."
|
||||
// },
|
||||
// {
|
||||
// icon:"fas fa-check",
|
||||
// title:"Item B",
|
||||
// description:"Some description here. Add some words to make the text overflow."
|
||||
// },
|
||||
// {
|
||||
// input:true,
|
||||
// icon:"fas fa-times",
|
||||
// title:"Input Text",
|
||||
// inputType:"text",
|
||||
// inputPlaceholder:"Placeholder..."
|
||||
// },
|
||||
// {
|
||||
// input:true,
|
||||
// icon:"",
|
||||
// title:"Input Number",
|
||||
// inputType:"number",
|
||||
// inputPlaceholder:"Placeholder...",
|
||||
// inputValue:0,
|
||||
// inputMin:0,
|
||||
// inputMax:50
|
||||
// },
|
||||
// {
|
||||
// input:true,
|
||||
// icon:"",
|
||||
// title:"Input Radio",
|
||||
// inputType:"radio",
|
||||
// inputPlaceholder:"turbocharger",
|
||||
// inputValue:"supercharger",
|
||||
// inputValues:[
|
||||
// {
|
||||
// value:"turbocharger",
|
||||
// title:"Turbocharger"
|
||||
// },
|
||||
// {
|
||||
// value:"supercharger",
|
||||
// title:"Supercharger"
|
||||
// },
|
||||
// ]
|
||||
// }
|
||||
// ])
|
||||
</script>
|
||||
</body>
|
||||
|
||||
<head>
|
||||
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
|
||||
/>
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>ESX Context HUD</title>
|
||||
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--item-main: #242424;
|
||||
--item-unselectable: #161616;
|
||||
--item-hover: #404040;
|
||||
--item-disabled: #393939;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
body {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
#container {
|
||||
position: absolute;
|
||||
width: 280px;
|
||||
max-height: 50%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
overflow-y: auto;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.center {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.left {
|
||||
top: 50%;
|
||||
left: 25%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.right {
|
||||
top: 50%;
|
||||
left: 75%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.item {
|
||||
display: grid;
|
||||
grid-template-columns: 30px calc(100% - 30px);
|
||||
padding: 15px 10px;
|
||||
border-radius: 5px;
|
||||
background: var(--item-main);
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
background: var(--item-hover);
|
||||
}
|
||||
|
||||
.item > i {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item > div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.item > div > i {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
padding: 15px 10px;
|
||||
border-radius: 5px;
|
||||
background: var(--item-main);
|
||||
}
|
||||
|
||||
.input:hover {
|
||||
background: var(--item-hover);
|
||||
}
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
width: auto;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.unselectable {
|
||||
background: var(--item-unselectable);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
background: var(--item-disabled);
|
||||
}
|
||||
|
||||
* {
|
||||
color: white;
|
||||
font-family: Arial;
|
||||
user-select: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgb(20, 20, 20);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(30, 30, 30);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
/* Hide the browser's default checkbox */
|
||||
.container input {
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
/* Create a custom checkbox */
|
||||
.checkmark {
|
||||
position: relative;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 8px;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
/* On mouse-over, add a grey background color */
|
||||
.container:hover input ~ .checkmark {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
/* When the checkbox is checked, add a blue background */
|
||||
.container input:checked ~ .checkmark {
|
||||
background-color: #2196f3;
|
||||
}
|
||||
|
||||
/* Create the checkmark/indicator (hidden when not checked) */
|
||||
.checkmark:after {
|
||||
content: "";
|
||||
position: relative;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show the checkmark when checked */
|
||||
.container input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container" class="right">
|
||||
<div class="item unselectable">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
<div>
|
||||
<b>Unselectable Item</b>
|
||||
<i>Testing, testing a description here.</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item disabled">
|
||||
<i class="fas fa-times"></i>
|
||||
<div>
|
||||
<b>Disabled Item</b>
|
||||
<i>Testing, testing a description here.</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<i class="fas fa-check"></i>
|
||||
<div>
|
||||
<b>Item</b>
|
||||
<i
|
||||
>Testing, testing a description here. Generic words to force
|
||||
overflow.</i
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
const container = document.getElementById("container");
|
||||
|
||||
const CreateElement = (tag = "div", className = "", parent) => {
|
||||
const e = document.createElement(tag);
|
||||
e.className = className;
|
||||
|
||||
if (parent) {
|
||||
parent.append(e);
|
||||
}
|
||||
|
||||
return e;
|
||||
};
|
||||
|
||||
function Open(eles, position = "right") {
|
||||
container.innerHTML = "";
|
||||
container.className = position;
|
||||
|
||||
for (let i = 0; i < eles.length; i++) {
|
||||
let ele = eles[i];
|
||||
let item = CreateElement("div", "item", container);
|
||||
|
||||
let icon = CreateElement("i", ele.icon, item);
|
||||
let div = CreateElement("div", "", item);
|
||||
|
||||
let title = CreateElement("b", "", div);
|
||||
title.innerHTML = ele.title;
|
||||
|
||||
if (ele.description) {
|
||||
let desc = CreateElement("i", "", div);
|
||||
desc.innerHTML = ele.description || "";
|
||||
}
|
||||
|
||||
if (ele.input) {
|
||||
if (ele.inputType == "radio") {
|
||||
for (let j = 0; j < ele.inputValues.length; j++) {
|
||||
let v = ele.inputValues[j];
|
||||
let container = CreateElement("label", "container", div);
|
||||
container.innerHTML = v.text;
|
||||
|
||||
let input = CreateElement("INPUT", "", container);
|
||||
input.type = "radio";
|
||||
input.name = i + 1;
|
||||
input.checked =
|
||||
(ele.inputValue || ele.inputPlaceholder || -1) == v.value;
|
||||
|
||||
let span = CreateElement("SPAN", "checkmark", container);
|
||||
|
||||
input.onchange = function () {
|
||||
$.post(
|
||||
`https://${GetParentResourceName()}/changed`,
|
||||
JSON.stringify({
|
||||
index: i + 1,
|
||||
value: v.value,
|
||||
})
|
||||
);
|
||||
};
|
||||
}
|
||||
} else {
|
||||
let input = CreateElement("input", "", div);
|
||||
input.type = ele.inputType;
|
||||
|
||||
if (ele.inputValue) {
|
||||
input.value = ele.inputValue;
|
||||
}
|
||||
|
||||
if (ele.inputPlaceholder) {
|
||||
input.placeholder = ele.inputPlaceholder;
|
||||
}
|
||||
|
||||
switch (ele.inputType) {
|
||||
case "number":
|
||||
if (ele.inputMin) input.min = ele.inputMin;
|
||||
if (ele.inputMax) input.max = ele.inputMax;
|
||||
|
||||
input.onchange = function () {
|
||||
let v = Number(input.value);
|
||||
|
||||
if (ele.inputMin) {
|
||||
v = Math.max(ele.inputMin, v);
|
||||
}
|
||||
|
||||
if (ele.inputMax) {
|
||||
v = Math.min(ele.inputMax, v);
|
||||
}
|
||||
|
||||
input.value = v;
|
||||
|
||||
$.post(
|
||||
`https://${GetParentResourceName()}/changed`,
|
||||
JSON.stringify({
|
||||
index: i + 1,
|
||||
value: v,
|
||||
})
|
||||
);
|
||||
};
|
||||
break;
|
||||
|
||||
case "text":
|
||||
input.onchange = function () {
|
||||
$.post(
|
||||
`https://${GetParentResourceName()}/changed`,
|
||||
JSON.stringify({
|
||||
index: i + 1,
|
||||
value: input.value,
|
||||
})
|
||||
);
|
||||
};
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (ele.disabled) {
|
||||
item.className += " disabled";
|
||||
} else if (ele.unselectable) {
|
||||
item.className += " unselectable";
|
||||
} else if (!ele.input) {
|
||||
item.onclick = function () {
|
||||
$.post(
|
||||
`https://${GetParentResourceName()}/selected`,
|
||||
JSON.stringify({
|
||||
index: i + 1,
|
||||
})
|
||||
);
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.body.style.display = "block";
|
||||
}
|
||||
|
||||
function Closed() {
|
||||
document.body.style.display = "none";
|
||||
}
|
||||
|
||||
function Close() {
|
||||
$.post(`https://${GetParentResourceName()}/closed`, (retVal) => {
|
||||
if (retVal) {
|
||||
Closed();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener("message", (e) => {
|
||||
let data = e.data;
|
||||
|
||||
if (!data.func || !window[data.func]) {
|
||||
return;
|
||||
}
|
||||
|
||||
window[data.func](...data.args);
|
||||
});
|
||||
|
||||
window.addEventListener("keydown", (e) => {
|
||||
if (e.key == "Escape" || e.key == "Backspace") {
|
||||
if (e.target.tagName.toLowerCase() == "input") {
|
||||
return;
|
||||
}
|
||||
|
||||
Close();
|
||||
}
|
||||
});
|
||||
|
||||
// Open([
|
||||
// {
|
||||
// unselectable:true,
|
||||
// icon:"fas fa-info-circle",
|
||||
// title:"Unselectable Item (Header/Label?)",
|
||||
// },
|
||||
// {
|
||||
// icon:"fas fa-check",
|
||||
// title:"Item A",
|
||||
// description:"Some description here. Add some words to make the text overflow."
|
||||
// },
|
||||
// {
|
||||
// disabled:true,
|
||||
// icon:"fas fa-times",
|
||||
// title:"Disabled Item",
|
||||
// description:"Some description here. Add some words to make the text overflow."
|
||||
// },
|
||||
// {
|
||||
// icon:"fas fa-check",
|
||||
// title:"Item B",
|
||||
// description:"Some description here. Add some words to make the text overflow."
|
||||
// },
|
||||
// {
|
||||
// input:true,
|
||||
// icon:"fas fa-times",
|
||||
// title:"Input Text",
|
||||
// inputType:"text",
|
||||
// inputPlaceholder:"Placeholder..."
|
||||
// },
|
||||
// {
|
||||
// input:true,
|
||||
// icon:"",
|
||||
// title:"Input Number",
|
||||
// inputType:"number",
|
||||
// inputPlaceholder:"Placeholder...",
|
||||
// inputValue:0,
|
||||
// inputMin:0,
|
||||
// inputMax:50
|
||||
// },
|
||||
// {
|
||||
// input:true,
|
||||
// icon:"",
|
||||
// title:"Input Radio",
|
||||
// inputType:"radio",
|
||||
// inputPlaceholder:"turbocharger",
|
||||
// inputValue:"supercharger",
|
||||
// inputValues:[
|
||||
// {
|
||||
// value:"turbocharger",
|
||||
// title:"Turbocharger"
|
||||
// },
|
||||
// {
|
||||
// value:"supercharger",
|
||||
// title:"Supercharger"
|
||||
// },
|
||||
// ]
|
||||
// }
|
||||
// ])
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,152 +1,152 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
|
||||
@import url("https://fonts.googleapis.com/css2?family=Oswald&display=swap");
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
font-family: sans-serif;
|
||||
overflow: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
width: 332px;
|
||||
opacity : 0.95;
|
||||
position : absolute;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
top : 30.0%;
|
||||
padding: 20px;
|
||||
left : 50%; /* à 50%/50% du parent référent */
|
||||
transform : translate(-50%); /* décalage de 50% de sa propre taille */
|
||||
background-color: #152029;
|
||||
border-radius : 10px;
|
||||
box-shadow: 0 -5px 3px -3px #21303d, 0 5px 3px -3px #21303d;
|
||||
border:none;
|
||||
margin:5px;
|
||||
margin-bottom:20px;
|
||||
color: #ffffff;
|
||||
width: 332px;
|
||||
opacity: 0.95;
|
||||
position: absolute;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
top: 30%;
|
||||
padding: 20px;
|
||||
left: 50%; /* à 50%/50% du parent référent */
|
||||
transform: translate(-50%); /* décalage de 50% de sa propre taille */
|
||||
background-color: #152029;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 -5px 3px -3px #21303d, 0 5px 3px -3px #21303d;
|
||||
border: none;
|
||||
margin: 5px;
|
||||
margin-bottom: 20px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
margin-bottom: 20px;
|
||||
font-family: "Oswald", sans-serif;
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-bottom: 15px;
|
||||
border: none;
|
||||
border-bottom: 2px solid #58636c;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
padding: 10px;
|
||||
padding-left:0;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
color: #ffffff;
|
||||
text-align:left;
|
||||
background-color: #152029;
|
||||
margin-bottom: 15px;
|
||||
border: none;
|
||||
border-bottom: 2px solid #58636c;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
padding: 10px;
|
||||
padding-left: 0;
|
||||
font-family: "Oswald", sans-serif;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
background-color: #152029;
|
||||
}
|
||||
|
||||
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||
color: rgba(84,97,105,255);
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-weight: 200;
|
||||
opacity: 1; /* Firefox */
|
||||
::placeholder {
|
||||
/* Chrome, Firefox, Opera, Safari 10.1+ */
|
||||
color: rgba(84, 97, 105, 255);
|
||||
font-family: "Oswald", sans-serif;
|
||||
font-weight: 200;
|
||||
opacity: 1; /* Firefox */
|
||||
}
|
||||
|
||||
.radio-toolbar input[type="radio"] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: 36%;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
.radio-toolbar label {
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
background-color: rgba(15,15,15,0.9);
|
||||
padding: 10px 20px;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
width: 36%;
|
||||
display: inline-block;
|
||||
margin-top: 5px;
|
||||
background-color: rgba(15, 15, 15, 0.9);
|
||||
padding: 10px 20px;
|
||||
font-family: "Oswald", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
width: 36%;
|
||||
}
|
||||
|
||||
.radio-toolbar input[type="radio"]:checked + label {
|
||||
width: 36%;
|
||||
background-color:rgba(15,15,15,0.9);
|
||||
border: none;
|
||||
border-bottom: 1px solid #93a3b6;
|
||||
border-radius: 5px;
|
||||
color: #ffffff;
|
||||
width: 36%;
|
||||
background-color: rgba(15, 15, 15, 0.9);
|
||||
border: none;
|
||||
border-bottom: 1px solid #93a3b6;
|
||||
border-radius: 5px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.radio-toolbar input[type="radio"]:focus + label {
|
||||
background-color:rgba(15,15,15,0.9);
|
||||
border: none;
|
||||
border-bottom: 1px solid #93a3b6;
|
||||
border-radius: 5px;
|
||||
color: #ffffff;
|
||||
background-color: rgba(15, 15, 15, 0.9);
|
||||
border: none;
|
||||
border-bottom: 1px solid #93a3b6;
|
||||
border-radius: 5px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.radio-toolbar label:hover {
|
||||
background-color: rgba(28, 24, 24, 0.931);
|
||||
width: 36%;
|
||||
color: #ffffff;
|
||||
background-color: rgba(28, 24, 24, 0.931);
|
||||
width: 36%;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
margin-top: 35px;
|
||||
/*padding: 10px;*/
|
||||
background-color: #4569c6;
|
||||
outline: none;
|
||||
border: 2px double rgba(40, 40, 40, 0.9);
|
||||
color: #FFFFFF;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin-top: 35px;
|
||||
/*padding: 10px;*/
|
||||
background-color: #4569c6;
|
||||
outline: none;
|
||||
border: 2px double rgba(40, 40, 40, 0.9);
|
||||
color: #ffffff;
|
||||
height: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
margin-right: 5px;
|
||||
padding: 10px;
|
||||
background-color: rgba(15,15,15,0.9);
|
||||
color: #ffffff;
|
||||
width: 93%;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
margin-right: 5px;
|
||||
padding: 10px;
|
||||
background-color: rgba(15, 15, 15, 0.9);
|
||||
color: #ffffff;
|
||||
width: 93%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.range-wrap {
|
||||
position: relative;
|
||||
margin: 0 auto 3rem;
|
||||
position: relative;
|
||||
margin: 0 auto 3rem;
|
||||
}
|
||||
|
||||
.range {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
background: rgba(15,15,15,0.9);
|
||||
color: #ffffff;
|
||||
padding: 4px 12px;
|
||||
position: absolute;
|
||||
border-radius: 4px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(15, 15, 15, 0.9);
|
||||
color: #ffffff;
|
||||
padding: 4px 12px;
|
||||
position: absolute;
|
||||
border-radius: 4px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
|
||||
.bubble::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background: rgba(15,15,15,0.9);
|
||||
color: black;
|
||||
top: -1px;
|
||||
left: 50%;
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background: rgba(15, 15, 15, 0.9);
|
||||
color: black;
|
||||
top: -1px;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
@@ -1,45 +1,119 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script src="nui://game/ui/jquery.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
<head>
|
||||
<script src="nui://game/ui/jquery.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
|
||||
<link href="css/style.css" rel="stylesheet" />
|
||||
|
||||
<title>ESX Identity</title>
|
||||
</head>
|
||||
<title>ESX Identity</title>
|
||||
</head>
|
||||
|
||||
<body onkeydown="TriggeredKey(this)">
|
||||
<div class="dialog">
|
||||
<div class="title"><b>IDENTITY</b></div>
|
||||
<form id="register" name="register" action="#">
|
||||
<div style="color: rgb(46, 187, 205);font-size: 12px; font-family: 'Gill Sans', sans-serif">First Name</div>
|
||||
<input id="firstname" type="text" class="" name="firstname" placeholder="First Name" minlength="3" maxlength="8" pattern="[a-zA-Z]*"><br>
|
||||
<div style="color: rgb(46, 187, 205);font-size: 12px; font-family: 'Gill Sans', sans-serif">Last Name</div>
|
||||
<input id="lastname" type="text" class="" name="lastname" placeholder="Last Name" minlength="3" maxlength="10" pattern="[a-zA-Z]*"><br>
|
||||
<div style="color: rgb(46, 187, 205);font-size: 12px; font-family: 'Gill Sans', sans-serif">Date of Birth (MM/DD/YYYY)</div>
|
||||
<input id="dateofbirth" type="date" name="dateofbirth" class="" min="1900-01-01" max="2010-01-01" onfocus="(this.type='date')"><br>
|
||||
<div style="color: rgb(46, 187, 205);font-size: 12px; font-family: 'Gill Sans', sans-serif">Height</div>
|
||||
<input id="height" type="number" class="" name="height" min="120" max="220" placeholder="Height (cm)"><br>
|
||||
<center>
|
||||
<div class="radio-toolbar">
|
||||
<input type="radio" id="radiom" name="sex" value="m" checked>
|
||||
<label for="radiom">Male</label>
|
||||
|
||||
<input type="radio" id="radiof" name="sex" value="f">
|
||||
<label for="radiof">Female</label>
|
||||
</div>
|
||||
</center>
|
||||
<button id="submit" type="submit"><font size="4px">CREATE</font></button>
|
||||
</form>
|
||||
<center><font size="1px" color="green">If the submit button doesn't work, please ensure that you've entered the fields correctly.</font></center>
|
||||
</div>
|
||||
<script>
|
||||
function TriggeredKey(e) {
|
||||
var keycode;
|
||||
if (window.event) keycode = window.event.keyCode;
|
||||
if (window.event.keyCode == 13 || window.event.keyCode == 27) return false;
|
||||
}
|
||||
</script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
<body onkeydown="TriggeredKey(this)">
|
||||
<div class="dialog">
|
||||
<div class="title"><b>IDENTITY</b></div>
|
||||
<form id="register" name="register" action="#">
|
||||
<div
|
||||
style="
|
||||
color: rgb(46, 187, 205);
|
||||
font-size: 12px;
|
||||
font-family: 'Gill Sans', sans-serif;
|
||||
"
|
||||
>
|
||||
First Name
|
||||
</div>
|
||||
<input
|
||||
id="firstname"
|
||||
type="text"
|
||||
class=""
|
||||
name="firstname"
|
||||
placeholder="First Name"
|
||||
minlength="3"
|
||||
maxlength="8"
|
||||
pattern="[a-zA-Z]*"
|
||||
/><br />
|
||||
<div
|
||||
style="
|
||||
color: rgb(46, 187, 205);
|
||||
font-size: 12px;
|
||||
font-family: 'Gill Sans', sans-serif;
|
||||
"
|
||||
>
|
||||
Last Name
|
||||
</div>
|
||||
<input
|
||||
id="lastname"
|
||||
type="text"
|
||||
class=""
|
||||
name="lastname"
|
||||
placeholder="Last Name"
|
||||
minlength="3"
|
||||
maxlength="10"
|
||||
pattern="[a-zA-Z]*"
|
||||
/><br />
|
||||
<div
|
||||
style="
|
||||
color: rgb(46, 187, 205);
|
||||
font-size: 12px;
|
||||
font-family: 'Gill Sans', sans-serif;
|
||||
"
|
||||
>
|
||||
Date of Birth (MM/DD/YYYY)
|
||||
</div>
|
||||
<input
|
||||
id="dateofbirth"
|
||||
type="date"
|
||||
name="dateofbirth"
|
||||
class=""
|
||||
min="1900-01-01"
|
||||
max="2010-01-01"
|
||||
onfocus="(this.type='date')"
|
||||
/><br />
|
||||
<div
|
||||
style="
|
||||
color: rgb(46, 187, 205);
|
||||
font-size: 12px;
|
||||
font-family: 'Gill Sans', sans-serif;
|
||||
"
|
||||
>
|
||||
Height
|
||||
</div>
|
||||
<input
|
||||
id="height"
|
||||
type="number"
|
||||
class=""
|
||||
name="height"
|
||||
min="120"
|
||||
max="220"
|
||||
placeholder="Height (cm)"
|
||||
/><br />
|
||||
<center>
|
||||
<div class="radio-toolbar">
|
||||
<input type="radio" id="radiom" name="sex" value="m" checked />
|
||||
<label for="radiom">Male</label>
|
||||
|
||||
<input type="radio" id="radiof" name="sex" value="f" />
|
||||
<label for="radiof">Female</label>
|
||||
</div>
|
||||
</center>
|
||||
<button id="submit" type="submit">
|
||||
<font size="4px">CREATE</font>
|
||||
</button>
|
||||
</form>
|
||||
<center>
|
||||
<font size="1px" color="green"
|
||||
>If the submit button doesn't work, please ensure that you've entered
|
||||
the fields correctly.</font
|
||||
>
|
||||
</center>
|
||||
</div>
|
||||
<script>
|
||||
function TriggeredKey(e) {
|
||||
var keycode;
|
||||
if (window.event) keycode = window.event.keyCode;
|
||||
if (window.event.keyCode == 13 || window.event.keyCode == 27)
|
||||
return false;
|
||||
}
|
||||
</script>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,37 +1,43 @@
|
||||
$(document).ready(function () {
|
||||
$.post('http://esx_identity/ready', JSON.stringify({}));
|
||||
$.post("http://esx_identity/ready", JSON.stringify({}));
|
||||
|
||||
window.addEventListener('message', function (event) {
|
||||
if (event.data.type === 'enableui') {
|
||||
window.addEventListener("message", function (event) {
|
||||
if (event.data.type === "enableui") {
|
||||
event.data.enable ? $(document.body).show() : $(document.body).hide();
|
||||
}
|
||||
});
|
||||
|
||||
$('#register').submit(function (event) {
|
||||
$("#register").submit(function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
const dofVal = $('#dateofbirth').val();
|
||||
const dofVal = $("#dateofbirth").val();
|
||||
if (!dofVal) return;
|
||||
|
||||
const dateCheck = new Date(dofVal);
|
||||
|
||||
const year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(dateCheck);
|
||||
const month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(dateCheck);
|
||||
const day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(dateCheck);
|
||||
const year = new Intl.DateTimeFormat("en", { year: "numeric" }).format(
|
||||
dateCheck
|
||||
);
|
||||
const month = new Intl.DateTimeFormat("en", { month: "2-digit" }).format(
|
||||
dateCheck
|
||||
);
|
||||
const day = new Intl.DateTimeFormat("en", { day: "2-digit" }).format(
|
||||
dateCheck
|
||||
);
|
||||
|
||||
const formattedDate = `${day}/${month}/${year}`;
|
||||
|
||||
$.post(
|
||||
'http://esx_identity/register',
|
||||
"http://esx_identity/register",
|
||||
JSON.stringify({
|
||||
firstname: $('#firstname').val(),
|
||||
lastname: $('#lastname').val(),
|
||||
firstname: $("#firstname").val(),
|
||||
lastname: $("#lastname").val(),
|
||||
dateofbirth: formattedDate,
|
||||
sex: $("input[type='radio'][name='sex']:checked").val(),
|
||||
height: $('#height').val(),
|
||||
height: $("#height").val(),
|
||||
})
|
||||
);
|
||||
|
||||
$('#register').trigger('reset');
|
||||
$("#register").trigger("reset");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,378 +1,378 @@
|
||||
;(function () {
|
||||
(function () {
|
||||
let MenuTpl =
|
||||
'<div id="menu_{{_namespace}}_{{_name}}" class="menu{{#align}} align-{{align}}{{/align}}">' +
|
||||
'<div class="head"><span>{{{title}}}</span></div>' +
|
||||
'<div class="menu-items">' +
|
||||
'{{#elements}}' +
|
||||
"{{#elements}}" +
|
||||
'<div class="menu-item {{#selected}}selected{{/selected}}">' +
|
||||
'{{{label}}}{{#isSlider}} : <{{{sliderLabel}}}>{{/isSlider}}' +
|
||||
'</div>' +
|
||||
'{{/elements}}' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
window.ESX_MENU = {}
|
||||
ESX_MENU.ResourceName = 'esx_menu_default'
|
||||
ESX_MENU.opened = {}
|
||||
ESX_MENU.focus = []
|
||||
ESX_MENU.pos = {}
|
||||
"{{{label}}}{{#isSlider}} : <{{{sliderLabel}}}>{{/isSlider}}" +
|
||||
"</div>" +
|
||||
"{{/elements}}" +
|
||||
"</div>" +
|
||||
"</div>" +
|
||||
"</div>";
|
||||
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);
|
||||
});
|
||||
};
|
||||
})();
|
||||
|
||||
@@ -1,89 +1,89 @@
|
||||
|
||||
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
|
||||
@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
|
||||
|
||||
#controls {
|
||||
font-family: montserrat;
|
||||
font-size: 3em;
|
||||
color: #FFF;
|
||||
position: absolute;
|
||||
bottom: 40;
|
||||
right: 40;
|
||||
font-family: montserrat;
|
||||
font-size: 3em;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
bottom: 40;
|
||||
right: 40;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dialog {
|
||||
font-family: montserrat;
|
||||
background: rgba(33, 33, 33, 0.8);
|
||||
font-family: montserrat;
|
||||
background: rgba(33, 33, 33, 0.8);
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
overflow: hidden;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 600px;
|
||||
height: 152px;
|
||||
transform: translate(-50%, -50%);
|
||||
position: absolute;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
overflow: hidden;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 600px;
|
||||
height: 152px;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.head {
|
||||
display: flex;
|
||||
flex-basis: 100%;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-basis: 100%;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dialog.big {
|
||||
height: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.dialog .head {
|
||||
background: rgba(25, 25, 25, 0.9);
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
background: rgba(25, 25, 25, 0.9);
|
||||
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: 60%;
|
||||
height: 32px;
|
||||
width: 60%;
|
||||
height: 32px;
|
||||
outline: 0;
|
||||
background: none;
|
||||
text-align: center;
|
||||
margin-top: 26px;
|
||||
margin-left: 125px;
|
||||
font-size: large;
|
||||
font-size: large;
|
||||
transition: all 0.2s ease-in-out;
|
||||
color: white;
|
||||
border: 0.5px solid #ffffff3b;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.dialog input[type="text"]:active, .dialog input[type="text"]:hover {
|
||||
.dialog input[type="text"]:active,
|
||||
.dialog input[type="text"]:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dialog textarea {
|
||||
width: 100%;
|
||||
height: 128px;
|
||||
width: 100%;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
.dialog button[name="submit"] {
|
||||
width: 17.6%;
|
||||
height: 32px;
|
||||
width: 17.6%;
|
||||
height: 32px;
|
||||
margin-left: 160px;
|
||||
font-weight: 300;
|
||||
color: rgb(37, 34, 53);
|
||||
border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
text-transform: uppercase;
|
||||
background: rgb(50, 79, 208);
|
||||
outline: 0;
|
||||
@@ -93,17 +93,17 @@
|
||||
|
||||
.dialog button {
|
||||
z-index: 9999;
|
||||
transform: translate(-0%, 50%);
|
||||
transform: translate(-0%, 50%);
|
||||
}
|
||||
|
||||
.dialog button[name="cancel"] {
|
||||
width: 17.6%;
|
||||
height: 32px;
|
||||
width: 17.6%;
|
||||
height: 32px;
|
||||
margin-left: 60px;
|
||||
border: none;
|
||||
text-transform: uppercase;
|
||||
font-weight: 200;
|
||||
border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
color: rgb(53, 34, 34);
|
||||
outline: 0;
|
||||
background: #c74545;
|
||||
@@ -124,9 +124,9 @@
|
||||
|
||||
.head::before,
|
||||
.head::after {
|
||||
content: "";
|
||||
flex-grow: 1;
|
||||
background: #00e1ff;
|
||||
height: 2px;
|
||||
margin: 0px 3px;
|
||||
content: "";
|
||||
flex-grow: 1;
|
||||
background: #00e1ff;
|
||||
height: 2px;
|
||||
margin: 0px 3px;
|
||||
}
|
||||
|
||||
@@ -1,170 +1,184 @@
|
||||
(function () {
|
||||
let MenuTpl =
|
||||
'<div id="menu_{{_namespace}}_{{_name}}" class="dialog {{#isBig}}big{{/isBig}}">' +
|
||||
'<div class="head"><span>{{title}}</span></div>' +
|
||||
'{{#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>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
;
|
||||
let MenuTpl =
|
||||
'<div id="menu_{{_namespace}}_{{_name}}" class="dialog {{#isBig}}big{{/isBig}}">' +
|
||||
'<div class="head"><span>{{title}}</span></div>' +
|
||||
'{{#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>' +
|
||||
"</div>" +
|
||||
"</div>";
|
||||
window.ESX_MENU = {};
|
||||
ESX_MENU.ResourceName = "esx_menu_dialog";
|
||||
ESX_MENU.opened = {};
|
||||
ESX_MENU.focus = [];
|
||||
ESX_MENU.pos = {};
|
||||
|
||||
window.ESX_MENU = {};
|
||||
ESX_MENU.ResourceName = 'esx_menu_dialog';
|
||||
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] = {};
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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] = {};
|
||||
}
|
||||
if (typeof data.type == "undefined") {
|
||||
data.type = "default";
|
||||
}
|
||||
|
||||
if (typeof data.type == 'undefined') {
|
||||
data.type = 'default';
|
||||
}
|
||||
if (typeof data.align == "undefined") {
|
||||
data.align = "top-left";
|
||||
}
|
||||
|
||||
if (typeof data.align == 'undefined') {
|
||||
data.align = 'top-left';
|
||||
}
|
||||
data._index = ESX_MENU.focus.length;
|
||||
data._namespace = namespace;
|
||||
data._name = name;
|
||||
|
||||
data._index = ESX_MENU.focus.length;
|
||||
data._namespace = namespace;
|
||||
data._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;
|
||||
ESX_MENU.focus.push({
|
||||
namespace: namespace,
|
||||
name: name,
|
||||
});
|
||||
|
||||
ESX_MENU.focus.push({
|
||||
namespace: namespace,
|
||||
name: name
|
||||
});
|
||||
document.onkeyup = function (key) {
|
||||
if (key.which == 27) {
|
||||
// Escape key
|
||||
SendMessage(ESX_MENU.ResourceName, "menu_cancel", data);
|
||||
} else if (key.which == 13) {
|
||||
// Enter key
|
||||
SendMessage(ESX_MENU.ResourceName, "menu_submit", data);
|
||||
}
|
||||
};
|
||||
|
||||
document.onkeyup = function (key) {
|
||||
if (key.which == 27) { // Escape key
|
||||
SendMessage(ESX_MENU.ResourceName, 'menu_cancel', data);
|
||||
} else if (key.which == 13) { // Enter key
|
||||
SendMessage(ESX_MENU.ResourceName, 'menu_submit', data);
|
||||
}
|
||||
};
|
||||
ESX_MENU.render();
|
||||
};
|
||||
|
||||
ESX_MENU.render();
|
||||
};
|
||||
ESX_MENU.close = function (namespace, name) {
|
||||
delete ESX_MENU.opened[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
|
||||
) {
|
||||
ESX_MENU.focus.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
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();
|
||||
};
|
||||
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.innerHTML = "";
|
||||
$(menuContainer).hide();
|
||||
|
||||
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.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));
|
||||
|
||||
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));
|
||||
switch (menuData.type) {
|
||||
case "default": {
|
||||
view.isDefault = true;
|
||||
break;
|
||||
}
|
||||
|
||||
switch (menuData.type) {
|
||||
case "big": {
|
||||
view.isBig = true;
|
||||
break;
|
||||
}
|
||||
|
||||
case 'default': {
|
||||
view.isDefault = true;
|
||||
break;
|
||||
}
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
case 'big': {
|
||||
view.isBig = true;
|
||||
break;
|
||||
}
|
||||
let menu = $(Mustache.render(MenuTpl, view))[0];
|
||||
|
||||
default: break;
|
||||
}
|
||||
$(menu).css("z-index", 1000 + view._index);
|
||||
|
||||
let menu = $(Mustache.render(MenuTpl, view))[0];
|
||||
$(menu)
|
||||
.find('button[name="submit"]')
|
||||
.click(
|
||||
function () {
|
||||
ESX_MENU.submit(this.namespace, this.name, this.data);
|
||||
}.bind({ namespace: namespace, name: name, data: menuData })
|
||||
);
|
||||
|
||||
$(menu).css('z-index', 1000 + view._index);
|
||||
$(menu)
|
||||
.find('button[name="cancel"]')
|
||||
.click(
|
||||
function () {
|
||||
ESX_MENU.cancel(this.namespace, this.name, this.data);
|
||||
}.bind({ namespace: namespace, name: name, data: menuData })
|
||||
);
|
||||
|
||||
$(menu).find('button[name="submit"]').click(function () {
|
||||
ESX_MENU.submit(this.namespace, this.name, this.data);
|
||||
}.bind({ namespace: namespace, name: name, data: menuData }));
|
||||
$(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 })
|
||||
);
|
||||
|
||||
$(menu).find('button[name="cancel"]').click(function () {
|
||||
ESX_MENU.cancel(this.namespace, this.name, this.data);
|
||||
}.bind({ namespace: namespace, name: name, data: menuData }));
|
||||
if (typeof menuData.value != "undefined") {
|
||||
$(menu).find('[name="value"]').val(menuData.value);
|
||||
}
|
||||
|
||||
$(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 }));
|
||||
menuContainer.appendChild(menu);
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof menuData.value != 'undefined') {
|
||||
$(menu).find('[name="value"]').val(menuData.value);
|
||||
}
|
||||
$(menuContainer).show();
|
||||
$("#inputText").focus();
|
||||
};
|
||||
|
||||
menuContainer.appendChild(menu);
|
||||
}
|
||||
}
|
||||
ESX_MENU.submit = function (namespace, name, data) {
|
||||
SendMessage(ESX_MENU.ResourceName, "menu_submit", data);
|
||||
};
|
||||
|
||||
$(menuContainer).show();
|
||||
$("#inputText").focus();
|
||||
};
|
||||
ESX_MENU.cancel = function (namespace, name, data) {
|
||||
SendMessage(ESX_MENU.ResourceName, "menu_cancel", data);
|
||||
};
|
||||
|
||||
ESX_MENU.submit = function (namespace, name, data) {
|
||||
SendMessage(ESX_MENU.ResourceName, 'menu_submit', data);
|
||||
};
|
||||
ESX_MENU.change = function (namespace, name, data) {
|
||||
SendMessage(ESX_MENU.ResourceName, "menu_change", data);
|
||||
};
|
||||
|
||||
ESX_MENU.cancel = function (namespace, name, data) {
|
||||
SendMessage(ESX_MENU.ResourceName, 'menu_cancel', data);
|
||||
};
|
||||
ESX_MENU.getFocused = function () {
|
||||
return ESX_MENU.focus[ESX_MENU.focus.length - 1];
|
||||
};
|
||||
|
||||
ESX_MENU.change = function (namespace, name, data) {
|
||||
SendMessage(ESX_MENU.ResourceName, 'menu_change', data);
|
||||
};
|
||||
window.onData = (data) => {
|
||||
switch (data.action) {
|
||||
case "openMenu": {
|
||||
ESX_MENU.open(data.namespace, data.name, data.data);
|
||||
break;
|
||||
}
|
||||
|
||||
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);
|
||||
});
|
||||
};
|
||||
case "closeMenu": {
|
||||
ESX_MENU.close(data.namespace, data.name);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function (e) {
|
||||
window.addEventListener("message", (event) => {
|
||||
onData(event.data);
|
||||
});
|
||||
};
|
||||
})();
|
||||
|
||||
@@ -1,19 +1,26 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="nui://esx_menu_dialog/html/css/app.css" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@1,300&family=PT+Sans+Narrow&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="nui://esx_menu_dialog/html/css/app.css">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@1,300&family=PT+Sans+Narrow&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="menus"></div>
|
||||
|
||||
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
|
||||
<script src="nui://es_extended/html/js/wrapper.js"></script>
|
||||
<script src="nui://esx_menu_dialog/html/js/mustache.min.js" type="text/javascript"></script>
|
||||
<script src="nui://esx_menu_dialog/html/js/app.js" type="text/javascript"></script>
|
||||
</body>
|
||||
<body>
|
||||
<div id="menus"></div>
|
||||
|
||||
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
|
||||
<script src="nui://es_extended/html/js/wrapper.js"></script>
|
||||
<script
|
||||
src="nui://esx_menu_dialog/html/js/mustache.min.js"
|
||||
type="text/javascript"
|
||||
></script>
|
||||
<script
|
||||
src="nui://esx_menu_dialog/html/js/app.js"
|
||||
type="text/javascript"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,56 +1,55 @@
|
||||
@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");
|
||||
}
|
||||
|
||||
.menu {
|
||||
font-family: bankgothic;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 40%;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow-y: auto;
|
||||
max-height: 90%;
|
||||
font-family: bankgothic;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 40%;
|
||||
transform: translate(-50%, -50%);
|
||||
overflow-y: auto;
|
||||
max-height: 90%;
|
||||
}
|
||||
|
||||
.menu button {
|
||||
font-family: bankgothic;
|
||||
font-family: bankgothic;
|
||||
}
|
||||
|
||||
.menu>table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0 5px;
|
||||
min-width: 400px;
|
||||
background: rgba(33, 33, 33, 0.0);
|
||||
.menu > table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0 5px;
|
||||
min-width: 400px;
|
||||
background: rgba(33, 33, 33, 0);
|
||||
}
|
||||
|
||||
.menu>table>thead {
|
||||
background: rgba(10, 10, 10, 0.9);
|
||||
text-align: center;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 20px;
|
||||
color: #fff;
|
||||
.menu > table > thead {
|
||||
background: rgba(10, 10, 10, 0.9);
|
||||
text-align: center;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.menu td {
|
||||
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
margin: 20px;
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.menu tbody tr:nth-child(even) {
|
||||
color: #fff;
|
||||
background: rgba(40, 40, 40, 0.8);
|
||||
color: #fff;
|
||||
background: rgba(40, 40, 40, 0.8);
|
||||
}
|
||||
|
||||
.menu tbody tr:nth-child(odd) {
|
||||
color: #fff;
|
||||
background: rgba(40, 40, 40, 0.8);
|
||||
}
|
||||
color: #fff;
|
||||
background: rgba(40, 40, 40, 0.8);
|
||||
}
|
||||
|
||||
+174
-157
@@ -1,192 +1,209 @@
|
||||
(function(){
|
||||
(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 = {};
|
||||
|
||||
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>'
|
||||
;
|
||||
ESX_MENU.open = function (namespace, name, data) {
|
||||
if (typeof ESX_MENU.opened[namespace] == "undefined") {
|
||||
ESX_MENU.opened[namespace] = {};
|
||||
}
|
||||
|
||||
window.ESX_MENU = {};
|
||||
ESX_MENU.ResourceName = 'esx_menu_list';
|
||||
ESX_MENU.opened = {};
|
||||
ESX_MENU.focus = [];
|
||||
ESX_MENU.data = {};
|
||||
if (typeof ESX_MENU.opened[namespace][name] != "undefined") {
|
||||
ESX_MENU.close(namespace, name);
|
||||
}
|
||||
|
||||
ESX_MENU.open = function(namespace, name, data) {
|
||||
data._namespace = namespace;
|
||||
data._name = name;
|
||||
|
||||
if (typeof ESX_MENU.opened[namespace] == 'undefined') {
|
||||
ESX_MENU.opened[namespace] = {};
|
||||
}
|
||||
ESX_MENU.opened[namespace][name] = data;
|
||||
|
||||
if (typeof ESX_MENU.opened[namespace][name] != 'undefined') {
|
||||
ESX_MENU.close(namespace, name);
|
||||
}
|
||||
ESX_MENU.focus.push({
|
||||
namespace: namespace,
|
||||
name: name,
|
||||
});
|
||||
|
||||
data._namespace = namespace;
|
||||
data._name = name;
|
||||
ESX_MENU.render();
|
||||
};
|
||||
|
||||
ESX_MENU.opened[namespace][name] = data;
|
||||
ESX_MENU.close = function (namespace, name) {
|
||||
delete ESX_MENU.opened[namespace][name];
|
||||
|
||||
ESX_MENU.focus.push({
|
||||
namespace: namespace,
|
||||
name : name
|
||||
});
|
||||
|
||||
ESX_MENU.render();
|
||||
};
|
||||
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.close = function(namespace, name) {
|
||||
delete ESX_MENU.opened[namespace][name];
|
||||
ESX_MENU.render();
|
||||
};
|
||||
|
||||
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 = function () {
|
||||
let menuContainer = document.getElementById("menus");
|
||||
let focused = ESX_MENU.getFocused();
|
||||
menuContainer.innerHTML = "";
|
||||
|
||||
ESX_MENU.render();
|
||||
};
|
||||
$(menuContainer).hide();
|
||||
|
||||
ESX_MENU.render = function() {
|
||||
for (let namespace in ESX_MENU.opened) {
|
||||
if (typeof ESX_MENU.data[namespace] == "undefined") {
|
||||
ESX_MENU.data[namespace] = {};
|
||||
}
|
||||
|
||||
let menuContainer = document.getElementById('menus');
|
||||
let focused = ESX_MENU.getFocused();
|
||||
menuContainer.innerHTML = '';
|
||||
for (let name in ESX_MENU.opened[namespace]) {
|
||||
ESX_MENU.data[namespace][name] = [];
|
||||
|
||||
$(menuContainer).hide();
|
||||
let menuData = ESX_MENU.opened[namespace][name];
|
||||
let view = {
|
||||
_namespace: menuData._namespace,
|
||||
_name: menuData._name,
|
||||
head: [],
|
||||
rows: [],
|
||||
};
|
||||
|
||||
for (let namespace in ESX_MENU.opened) {
|
||||
|
||||
if (typeof ESX_MENU.data[namespace] == 'undefined') {
|
||||
ESX_MENU.data[namespace] = {};
|
||||
}
|
||||
for (let i = 0; i < menuData.head.length; i++) {
|
||||
let item = { content: menuData.head[i] };
|
||||
view.head.push(item);
|
||||
}
|
||||
|
||||
for (let name in ESX_MENU.opened[namespace]) {
|
||||
for (let i = 0; i < menuData.rows.length; i++) {
|
||||
let row = menuData.rows[i];
|
||||
let data = row.data;
|
||||
|
||||
ESX_MENU.data[namespace][name] = [];
|
||||
ESX_MENU.data[namespace][name].push(data);
|
||||
|
||||
let menuData = ESX_MENU.opened[namespace][name];
|
||||
let view = {
|
||||
_namespace: menuData._namespace,
|
||||
_name : menuData._name,
|
||||
head : [],
|
||||
rows : []
|
||||
};
|
||||
view.rows.push({ cols: [] });
|
||||
|
||||
for (let i=0; i<menuData.head.length; i++) {
|
||||
let item = {content: menuData.head[i]};
|
||||
view.head.push(item);
|
||||
}
|
||||
for (let j = 0; j < row.cols.length; j++) {
|
||||
let col = menuData.rows[i].cols[j];
|
||||
let regex = /\{\{(.*?)\|(.*?)\}\}/g;
|
||||
let matches = [];
|
||||
let match;
|
||||
|
||||
for (let i=0; i<menuData.rows.length; i++) {
|
||||
let row = menuData.rows[i];
|
||||
let data = row.data;
|
||||
while ((match = regex.exec(col)) != null) {
|
||||
matches.push(match);
|
||||
}
|
||||
|
||||
ESX_MENU.data[namespace][name].push(data);
|
||||
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.push({cols: []});
|
||||
view.rows[i].cols.push({ data: data, content: col });
|
||||
}
|
||||
}
|
||||
|
||||
for (let j=0; j<row.cols.length; j++) {
|
||||
let menu = $(Mustache.render(MenuTpl, view));
|
||||
|
||||
let col = menuData.rows[i].cols[j];
|
||||
let regex = /\{\{(.*?)\|(.*?)\}\}/g;
|
||||
let matches = [];
|
||||
let match;
|
||||
menu.find("button[data-namespace][data-name]").click(function () {
|
||||
ESX_MENU.data[$(this).data("namespace")][$(this).data("name")][
|
||||
parseInt($(this).data("id"))
|
||||
].currentRow = parseInt($(this).data("id")) + 1;
|
||||
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"),
|
||||
});
|
||||
});
|
||||
|
||||
while ((match = regex.exec(col)) != null) {
|
||||
matches.push(match);
|
||||
}
|
||||
menu.hide();
|
||||
|
||||
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>');
|
||||
}
|
||||
menuContainer.appendChild(menu[0]);
|
||||
}
|
||||
}
|
||||
|
||||
view.rows[i].cols.push({data: data, content: col});
|
||||
}
|
||||
}
|
||||
if (typeof focused != "undefined") {
|
||||
$("#menu_" + focused.namespace + "_" + focused.name).show();
|
||||
}
|
||||
|
||||
let menu = $(Mustache.render(MenuTpl, view));
|
||||
$(menuContainer).show();
|
||||
};
|
||||
|
||||
menu.find('button[data-namespace][data-name]').click(function() {
|
||||
ESX_MENU.data[$(this).data('namespace')][$(this).data('name')][parseInt($(this).data('id'))].currentRow = parseInt($(this).data('id')) + 1;
|
||||
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')
|
||||
});
|
||||
});
|
||||
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,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
menu.hide();
|
||||
ESX_MENU.cancel = function (namespace, name) {
|
||||
$.post(
|
||||
"http://" + ESX_MENU.ResourceName + "/menu_cancel",
|
||||
JSON.stringify({
|
||||
_namespace: namespace,
|
||||
_name: name,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
menuContainer.appendChild(menu[0]);
|
||||
}
|
||||
}
|
||||
ESX_MENU.getFocused = function () {
|
||||
return ESX_MENU.focus[ESX_MENU.focus.length - 1];
|
||||
};
|
||||
|
||||
if (typeof focused != 'undefined') {
|
||||
$('#menu_' + focused.namespace + '_' + focused.name).show();
|
||||
}
|
||||
window.onData = (data) => {
|
||||
switch (data.action) {
|
||||
case "openMenu": {
|
||||
ESX_MENU.open(data.namespace, data.name, data.data);
|
||||
break;
|
||||
}
|
||||
|
||||
$(menuContainer).show();
|
||||
};
|
||||
case "closeMenu": {
|
||||
ESX_MENU.close(data.namespace, data.name);
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
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
|
||||
}));
|
||||
};
|
||||
window.onload = function (e) {
|
||||
window.addEventListener("message", (event) => {
|
||||
onData(event.data);
|
||||
});
|
||||
};
|
||||
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
})();
|
||||
document.onkeyup = function (data) {
|
||||
if (data.which == 27) {
|
||||
let focused = ESX_MENU.getFocused();
|
||||
ESX_MENU.cancel(focused.namespace, focused.name);
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
@@ -1,16 +1,14 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/app.css" />
|
||||
</head>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/app.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="menus"></div>
|
||||
|
||||
<body>
|
||||
<div id="menus"></div>
|
||||
|
||||
<script src="nui://game/ui/jquery.js"></script>
|
||||
<script src="nui://es_extended/html/js/wrapper.js"></script>
|
||||
<script src="js/mustache.min.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<script src="nui://game/ui/jquery.js"></script>
|
||||
<script src="nui://es_extended/html/js/wrapper.js"></script>
|
||||
<script src="js/mustache.min.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,76 +1,76 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;600&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
|
||||
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;600&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Oswald&display=swap");
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
user-select: none;
|
||||
color: rgb(255, 255, 255);
|
||||
border-radius: 15px;
|
||||
font-weight: 300;
|
||||
font-size: 1.6vh;
|
||||
font-family: Calibri, "Helvetica", san-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
user-select: none;
|
||||
color: rgb(255, 255, 255);
|
||||
border-radius: 15px;
|
||||
font-weight: 300;
|
||||
font-size: 1.6vh;
|
||||
font-family: Calibri, "Helvetica", san-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
display:none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 150;
|
||||
transform: translate(0, -50%);
|
||||
border-radius: 15px;
|
||||
background: rgba(15,15,15, 0.9);
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 150;
|
||||
transform: translate(0, -50%);
|
||||
border-radius: 15px;
|
||||
background: rgba(15, 15, 15, 0.9);
|
||||
}
|
||||
|
||||
.header {
|
||||
font-family: 'Oswald', sans-serif;
|
||||
position: absolute;
|
||||
background: rgba(10, 10, 10, 0.9);
|
||||
border-radius: 15px 15px 0px 0px;
|
||||
height: 10%;
|
||||
width: 100%;
|
||||
left: 50%;
|
||||
text-align: center;
|
||||
transform: translate(-50%);
|
||||
font-weight: 700;
|
||||
padding-bottom: 5px;
|
||||
font-size: 1.6rem;
|
||||
font-family: "Oswald", sans-serif;
|
||||
position: absolute;
|
||||
background: rgba(10, 10, 10, 0.9);
|
||||
border-radius: 15px 15px 0px 0px;
|
||||
height: 10%;
|
||||
width: 100%;
|
||||
left: 50%;
|
||||
text-align: center;
|
||||
transform: translate(-50%);
|
||||
font-weight: 700;
|
||||
padding-bottom: 5px;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: absolute;
|
||||
font-size: 0rem;
|
||||
position: absolute;
|
||||
font-size: 0rem;
|
||||
}
|
||||
|
||||
.character-box {
|
||||
display: flex;
|
||||
right: 0;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
line-height: 1.4rem;
|
||||
height: calc(30rem);
|
||||
width: 17rem;
|
||||
border: 1px rgba(10,10,10,0.7) solid;
|
||||
box-shadow: 2px 1px 9px 3px rgba(10,10,10,0.7);
|
||||
display: flex;
|
||||
right: 0;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
line-height: 1.4rem;
|
||||
height: calc(30rem);
|
||||
width: 17rem;
|
||||
border: 1px rgba(10, 10, 10, 0.7) solid;
|
||||
box-shadow: 2px 1px 9px 3px rgba(10, 10, 10, 0.7);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-size: 22px;
|
||||
padding-top: 1.3rem;
|
||||
display: block;
|
||||
font-weight: 0;
|
||||
font-family: "Oswald", sans-serif;
|
||||
font-size: 22px;
|
||||
padding-top: 1.3rem;
|
||||
display: block;
|
||||
font-weight: 0;
|
||||
}
|
||||
|
||||
@@ -1,35 +1,68 @@
|
||||
var money = Intl.NumberFormat('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'USD',
|
||||
minimumFractionDigits: 0
|
||||
var money = Intl.NumberFormat("en-US", {
|
||||
style: "currency",
|
||||
currency: "USD",
|
||||
minimumFractionDigits: 0,
|
||||
});
|
||||
|
||||
(() => {
|
||||
Kashacter = {};
|
||||
Kashacter = {};
|
||||
|
||||
Kashacter.ShowUI = function(data) {
|
||||
$('body').css({"display":"block"});
|
||||
$('.main-container').css({"display":"block"});
|
||||
$('[data-charid=1]').html('<div class="character-info"><p class="character-info-name"><h1>' + `${translate.name} ` + '</h1><span>' + data.firstname +' '+ data.lastname +'</span></p><p class="character-info-work"><h1>' + `${translate.job} ` + '</h1><span>'+ data.job +' '+ data.job_grade +'</span></p><p class="character-info-money"><h1>' + `${translate.money} ` + '</h1><span> '+ money.format(data.money) +'</span></p><p class="character-info-bank"><h1>' + `${translate.bank} ` + '</h1><span> '+ money.format(data.bank) +'</span></p> <p class="character-info-dateofbirth"><h1>' + `${translate.dob} ` + '</h1><span>'+ data.dateofbirth +'</span></p> <p class="character-info-gender"><h1>' + `${translate.gender} ` + '</h1><span>'+ data.sex +'</span></p></div>').attr("data-ischar", "true");
|
||||
};
|
||||
Kashacter.ShowUI = function (data) {
|
||||
$("body").css({ display: "block" });
|
||||
$(".main-container").css({ display: "block" });
|
||||
$("[data-charid=1]")
|
||||
.html(
|
||||
'<div class="character-info"><p class="character-info-name"><h1>' +
|
||||
`${translate.name} ` +
|
||||
"</h1><span>" +
|
||||
data.firstname +
|
||||
" " +
|
||||
data.lastname +
|
||||
'</span></p><p class="character-info-work"><h1>' +
|
||||
`${translate.job} ` +
|
||||
"</h1><span>" +
|
||||
data.job +
|
||||
" " +
|
||||
data.job_grade +
|
||||
'</span></p><p class="character-info-money"><h1>' +
|
||||
`${translate.money} ` +
|
||||
"</h1><span> " +
|
||||
money.format(data.money) +
|
||||
'</span></p><p class="character-info-bank"><h1>' +
|
||||
`${translate.bank} ` +
|
||||
"</h1><span> " +
|
||||
money.format(data.bank) +
|
||||
'</span></p> <p class="character-info-dateofbirth"><h1>' +
|
||||
`${translate.dob} ` +
|
||||
"</h1><span>" +
|
||||
data.dateofbirth +
|
||||
'</span></p> <p class="character-info-gender"><h1>' +
|
||||
`${translate.gender} ` +
|
||||
"</h1><span>" +
|
||||
data.sex +
|
||||
"</span></p></div>"
|
||||
)
|
||||
.attr("data-ischar", "true");
|
||||
};
|
||||
|
||||
Kashacter.CloseUI = function() {
|
||||
$('body').css({"display":"none"});
|
||||
$('.main-container').css({"display":"none"});
|
||||
$('[data-charid=1]').html('<h3 class="character-fullname"></h3><div class="character-info"><p class="character-info-new"></p></div>');
|
||||
};
|
||||
|
||||
window.onload = function(e) {
|
||||
window.addEventListener('message', function(event) {
|
||||
switch(event.data.action) {
|
||||
case 'openui':
|
||||
Kashacter.ShowUI(event.data.character);
|
||||
break;
|
||||
case 'closeui':
|
||||
Kashacter.CloseUI();
|
||||
break;
|
||||
}
|
||||
})
|
||||
}
|
||||
Kashacter.CloseUI = function () {
|
||||
$("body").css({ display: "none" });
|
||||
$(".main-container").css({ display: "none" });
|
||||
$("[data-charid=1]").html(
|
||||
'<h3 class="character-fullname"></h3><div class="character-info"><p class="character-info-new"></p></div>'
|
||||
);
|
||||
};
|
||||
|
||||
window.onload = function (e) {
|
||||
window.addEventListener("message", function (event) {
|
||||
switch (event.data.action) {
|
||||
case "openui":
|
||||
Kashacter.ShowUI(event.data.character);
|
||||
break;
|
||||
case "closeui":
|
||||
Kashacter.CloseUI();
|
||||
break;
|
||||
}
|
||||
});
|
||||
};
|
||||
})();
|
||||
|
||||
@@ -1,24 +1,29 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" type="text/css" href="css/main.css" />
|
||||
<!-- Locales -->
|
||||
<script src="locales/en.js"></script>
|
||||
</head>
|
||||
<body style="display: none;">
|
||||
<div class="main-container">
|
||||
<div class='header'>Character Info</div>
|
||||
<div class="character-box" data-charid="1">
|
||||
<h3 class="character-fullname"></h3>
|
||||
<div class="character-info"></div>
|
||||
</div>
|
||||
<div class='footer'>Multicharacter</div>
|
||||
</div>
|
||||
</div>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" type="text/css" href="css/main.css" />
|
||||
<!-- Locales -->
|
||||
<script src="locales/en.js"></script>
|
||||
</head>
|
||||
<body style="display: none">
|
||||
<div class="main-container">
|
||||
<div class="header">Character Info</div>
|
||||
<div class="character-box" data-charid="1">
|
||||
<h3 class="character-fullname"></h3>
|
||||
<div class="character-info"></div>
|
||||
</div>
|
||||
<div class="footer">Multicharacter</div>
|
||||
</div>
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.3.1.min.js"
|
||||
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<script src="js/app.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,88 +1,84 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Poppins:wght@300;400;500;600;800&display=swap');
|
||||
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Poppins:wght@300;400;500;600;800&display=swap");
|
||||
|
||||
:root {
|
||||
--color: #919191;
|
||||
--color: #919191;
|
||||
}
|
||||
|
||||
* {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
color: var(--color);
|
||||
font-weight: 100;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
overflow: hidden;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
color: var(--color);
|
||||
font-weight: 100;
|
||||
font-family: "Poppins", sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#root {
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#root .notify {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex: auto;
|
||||
min-width: 20rem;
|
||||
width: fit-content;
|
||||
height: 3.5rem;
|
||||
background: rgba(5,5, 5, 0.9);
|
||||
border-radius: .5rem;
|
||||
margin-top: .5rem;
|
||||
animation: anim 300ms ease-in-out;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex: auto;
|
||||
min-width: 20rem;
|
||||
width: fit-content;
|
||||
height: 3.5rem;
|
||||
background: rgba(5, 5, 5, 0.9);
|
||||
border-radius: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
animation: anim 300ms ease-in-out;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#root .innerText {
|
||||
padding-left: .4rem;
|
||||
padding-right: .4rem;
|
||||
width: 100%;
|
||||
padding-left: 0.4rem;
|
||||
padding-right: 0.4rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#root .icon {
|
||||
float: left;
|
||||
color: #fff;
|
||||
float: left;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#root .text {
|
||||
display: inline-block;
|
||||
margin-left: .5rem;
|
||||
display: inline-block;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
#root .error {
|
||||
border-bottom: 3px solid #c0392b;
|
||||
border-bottom: 3px solid #c0392b;
|
||||
}
|
||||
|
||||
#root .success {
|
||||
border-bottom: 3px solid #2ecc71;
|
||||
border-bottom: 3px solid #2ecc71;
|
||||
}
|
||||
|
||||
#root .info {
|
||||
border-bottom: 3px solid #2980b9;
|
||||
border-bottom: 3px solid #2980b9;
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings:
|
||||
'FILL' 0,
|
||||
'wght' 400,
|
||||
'GRAD' 0,
|
||||
'opsz' 48
|
||||
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
|
||||
}
|
||||
|
||||
@keyframes anim {
|
||||
0% {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
80% {
|
||||
transform: scaleY(1.1)
|
||||
}
|
||||
100% {
|
||||
transform: scaleY(1)
|
||||
}
|
||||
0% {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
80% {
|
||||
transform: scaleY(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,15 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<head>
|
||||
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
|
||||
/>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<script src="js/script.js"></script>
|
||||
<title>ESX Notify</title>
|
||||
</head>
|
||||
<body>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root">
|
||||
<!-- this is just a template! No touchy touchy -->
|
||||
<!-- this is just a template! No touchy touchy -->
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,74 +1,76 @@
|
||||
const w = window
|
||||
const w = window;
|
||||
|
||||
// Gets the current icon it needs to use.
|
||||
const types = {
|
||||
["success"]: {
|
||||
["icon"]: "check_circle",
|
||||
},
|
||||
["error"]: {
|
||||
["icon"]: "error",
|
||||
},
|
||||
["info"]: {
|
||||
["icon"]: "info",
|
||||
}
|
||||
}
|
||||
["success"]: {
|
||||
["icon"]: "check_circle",
|
||||
},
|
||||
["error"]: {
|
||||
["icon"]: "error",
|
||||
},
|
||||
["info"]: {
|
||||
["icon"]: "info",
|
||||
},
|
||||
};
|
||||
|
||||
// the color codes example `i ~r~love~s~ donuts`
|
||||
const codes = {
|
||||
"~r~": "red",
|
||||
"~b~": "#378cbf",
|
||||
"~g~": "green",
|
||||
"~y~": "yellow",
|
||||
"~p~": "purple",
|
||||
"~c~": "grey",
|
||||
"~m~": "#212121",
|
||||
"~u~": "black",
|
||||
"~o~": "orange"
|
||||
}
|
||||
"~r~": "red",
|
||||
"~b~": "#378cbf",
|
||||
"~g~": "green",
|
||||
"~y~": "yellow",
|
||||
"~p~": "purple",
|
||||
"~c~": "grey",
|
||||
"~m~": "#212121",
|
||||
"~u~": "black",
|
||||
"~o~": "orange",
|
||||
};
|
||||
|
||||
w.addEventListener("message", (event) => {
|
||||
notification({
|
||||
type: event.data.type,
|
||||
message: event.data.message,
|
||||
length: event.data.length,
|
||||
});
|
||||
notification({
|
||||
type: event.data.type,
|
||||
message: event.data.message,
|
||||
length: event.data.length,
|
||||
});
|
||||
});
|
||||
|
||||
const replaceColors = (str, obj) => {
|
||||
let strToReplace = str;
|
||||
let strToReplace = str;
|
||||
|
||||
for (let id in obj) {
|
||||
strToReplace = strToReplace.replace(new RegExp(id, "g"), obj[id]);
|
||||
}
|
||||
for (let id in obj) {
|
||||
strToReplace = strToReplace.replace(new RegExp(id, "g"), obj[id]);
|
||||
}
|
||||
|
||||
return strToReplace
|
||||
}
|
||||
return strToReplace;
|
||||
};
|
||||
|
||||
notification = (data) => {
|
||||
for (color in codes) {
|
||||
if (data["message"].includes(color)) {
|
||||
let objArr = {};
|
||||
objArr[color] = `<span style="color: ${codes[color]}">`;
|
||||
objArr["~s~"] = "</span>";
|
||||
for (color in codes) {
|
||||
if (data["message"].includes(color)) {
|
||||
let objArr = {};
|
||||
objArr[color] = `<span style="color: ${codes[color]}">`;
|
||||
objArr["~s~"] = "</span>";
|
||||
|
||||
let newStr = replaceColors(data["message"], objArr);
|
||||
let newStr = replaceColors(data["message"], objArr);
|
||||
|
||||
data["message"] = newStr
|
||||
}
|
||||
data["message"] = newStr;
|
||||
}
|
||||
}
|
||||
|
||||
const notification = $(`
|
||||
const notification = $(`
|
||||
<div class="notify ${data.type}">
|
||||
<div class="innerText">
|
||||
<span class="material-symbols-outlined icon">${types[data.type]["icon"]}</span>
|
||||
<span class="material-symbols-outlined icon">${
|
||||
types[data.type]["icon"]
|
||||
}</span>
|
||||
<p class="text">${data["message"]}</p>
|
||||
</div>
|
||||
</div>
|
||||
`).appendTo(`#root`);
|
||||
|
||||
setTimeout(() => {
|
||||
notification.fadeOut(700);
|
||||
}, data.length);
|
||||
setTimeout(() => {
|
||||
notification.fadeOut(700);
|
||||
}, data.length);
|
||||
|
||||
return notification;
|
||||
}
|
||||
return notification;
|
||||
};
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
:root {
|
||||
--color: white;
|
||||
--bgColor: #212121;
|
||||
--color: white;
|
||||
--bgColor: #212121;
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--color);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
color: var(--color);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
@@ -1,88 +1,90 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<head>
|
||||
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="notifyInfo" class="notify">
|
||||
<div class="innerText">
|
||||
<i class="fas fa-info-circle icon info"></i>
|
||||
<p class="text" id="infoMessage"></p>
|
||||
</div>
|
||||
<div id="progline" class="progline">
|
||||
</div>
|
||||
<div class="innerText">
|
||||
<i class="fas fa-info-circle icon info"></i>
|
||||
<p class="text" id="infoMessage"></p>
|
||||
</div>
|
||||
<div id="progline" class="progline"></div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
<script src="js/script.js"></script>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
.notify {
|
||||
flex: auto;
|
||||
display: none;
|
||||
position: absolute;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 100px;
|
||||
min-width: 15%;
|
||||
width: fit-content;
|
||||
height: 45px;
|
||||
background-color: rgba(5, 5, 5, 0.8);
|
||||
border-radius: 5px;
|
||||
animation: growDown 300ms ease-in-out;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.progline {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
#0052d4,
|
||||
#4364f7,
|
||||
#6fb1fc
|
||||
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||
}
|
||||
|
||||
.notify {
|
||||
flex: auto;
|
||||
display: none;
|
||||
position:absolute;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 100px;
|
||||
min-width:15%;
|
||||
width:fit-content;
|
||||
height:45px;
|
||||
background-color:rgba(5, 5, 5, 0.800);
|
||||
border-radius: 5px;
|
||||
animation: growDown 300ms ease-in-out;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.icon {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.progline {
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
left:0;
|
||||
right:0;
|
||||
height:2px;
|
||||
width:100%;
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(to right, #0052d4, #4364f7, #6fb1fc); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||
}
|
||||
.innerText {
|
||||
flex: auto;
|
||||
margin-top: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icon {
|
||||
border: 0;
|
||||
}
|
||||
.innerText {
|
||||
margin-left: 10px;
|
||||
}
|
||||
p {
|
||||
flex: auto;
|
||||
word-wrap: break-word;
|
||||
margin-left: 30px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.innerText {
|
||||
flex: auto;
|
||||
margin-top: 15px;
|
||||
width:100%;
|
||||
}
|
||||
.innerText .icon {
|
||||
float: left;
|
||||
margin-left: 5px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.innerText{
|
||||
margin-left: 10px;
|
||||
@keyframes growDown {
|
||||
0% {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
p {
|
||||
flex: auto;
|
||||
word-wrap: break-word;
|
||||
margin-left: 30px;
|
||||
margin-top: 15px;
|
||||
80% {
|
||||
transform: scaleY(1.1);
|
||||
}
|
||||
|
||||
.innerText .icon {
|
||||
float: left;
|
||||
margin-left: 5px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@keyframes growDown {
|
||||
0% {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
80% {
|
||||
transform: scaleY(1.1)
|
||||
}
|
||||
100% {
|
||||
transform: scaleY(1)
|
||||
}
|
||||
100% {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,69 +1,69 @@
|
||||
const codes = {
|
||||
"~r~": "red",
|
||||
"~b~": "#378cbf",
|
||||
"~g~": "green",
|
||||
"~y~": "yellow",
|
||||
"~p~": "purple",
|
||||
"~c~": "grey",
|
||||
"~m~": "#212121",
|
||||
"~u~": "black",
|
||||
"~o~": "orange"
|
||||
}
|
||||
"~r~": "red",
|
||||
"~b~": "#378cbf",
|
||||
"~g~": "green",
|
||||
"~y~": "yellow",
|
||||
"~p~": "purple",
|
||||
"~c~": "grey",
|
||||
"~m~": "#212121",
|
||||
"~u~": "black",
|
||||
"~o~": "orange",
|
||||
};
|
||||
|
||||
const elems = {
|
||||
infoMessage: document.getElementById('infoMessage'),
|
||||
notifyInfo: document.getElementById("notifyInfo"),
|
||||
progline: document.getElementById('progline')
|
||||
}
|
||||
infoMessage: document.getElementById("infoMessage"),
|
||||
notifyInfo: document.getElementById("notifyInfo"),
|
||||
progline: document.getElementById("progline"),
|
||||
};
|
||||
|
||||
const replaceColors = (str, obj) => {
|
||||
let strToReplace = str;
|
||||
let strToReplace = str;
|
||||
|
||||
for (let id in obj) {
|
||||
strToReplace = strToReplace.replace(new RegExp(id, "g"), obj[id]);
|
||||
for (let id in obj) {
|
||||
strToReplace = strToReplace.replace(new RegExp(id, "g"), obj[id]);
|
||||
}
|
||||
|
||||
return strToReplace;
|
||||
};
|
||||
|
||||
window.addEventListener("message", function ({ data }) {
|
||||
if (data.type === "Progressbar") {
|
||||
let { message } = data;
|
||||
|
||||
for (color in codes) {
|
||||
if (message.includes(color)) {
|
||||
let objArr = {};
|
||||
objArr[color] = `<span style="color: ${codes[color]}">`;
|
||||
objArr["~s~"] = "</span>";
|
||||
|
||||
let newStr = replaceColors(message, objArr);
|
||||
|
||||
message = newStr;
|
||||
}
|
||||
}
|
||||
|
||||
return strToReplace
|
||||
}
|
||||
elems.infoMessage.innerHTML = message;
|
||||
elems.notifyInfo.style.display = "block";
|
||||
|
||||
window.addEventListener('message', function({data}) {
|
||||
if (data.type === "Progressbar") {
|
||||
let { message } = data
|
||||
const start = new Date();
|
||||
const maxTime = data.length;
|
||||
const timeoutValue = Math.floor(maxTime / 100);
|
||||
animUpdate();
|
||||
|
||||
for (color in codes) {
|
||||
if (message.includes(color)) {
|
||||
let objArr = {};
|
||||
objArr[color] = `<span style="color: ${codes[color]}">`;
|
||||
objArr["~s~"] = "</span>";
|
||||
|
||||
let newStr = replaceColors(message, objArr);
|
||||
|
||||
message = newStr
|
||||
}
|
||||
}
|
||||
|
||||
elems.infoMessage.innerHTML = message
|
||||
elems.notifyInfo.style.display = "block";
|
||||
|
||||
const start = new Date();
|
||||
const maxTime = data.length;
|
||||
const timeoutValue = Math.floor(maxTime / 100);
|
||||
animUpdate();
|
||||
|
||||
function animUpdate() {
|
||||
const now = new Date();
|
||||
const timeoutDiff = now.getTime() - start.getTime();
|
||||
const prc = Math.round((timeoutDiff/maxTime)*100);
|
||||
if (prc <= 100) {
|
||||
elems.progline.style.width = prc + "%"
|
||||
this.timeoutID = setTimeout(animUpdate, timeoutValue);
|
||||
} else {
|
||||
elems.notifyInfo.style.display = "none";
|
||||
}
|
||||
}
|
||||
} else {
|
||||
elems.notifyInfo.style.display = 'none'
|
||||
clearTimeout(this.timeoutID);
|
||||
timeoutValue = 0;
|
||||
function animUpdate() {
|
||||
const now = new Date();
|
||||
const timeoutDiff = now.getTime() - start.getTime();
|
||||
const prc = Math.round((timeoutDiff / maxTime) * 100);
|
||||
if (prc <= 100) {
|
||||
elems.progline.style.width = prc + "%";
|
||||
this.timeoutID = setTimeout(animUpdate, timeoutValue);
|
||||
} else {
|
||||
elems.notifyInfo.style.display = "none";
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
elems.notifyInfo.style.display = "none";
|
||||
clearTimeout(this.timeoutID);
|
||||
timeoutValue = 0;
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,82 +1,77 @@
|
||||
:root {
|
||||
--color: white;
|
||||
--bgColor: #212121;
|
||||
--color: white;
|
||||
--bgColor: #212121;
|
||||
}
|
||||
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--color);
|
||||
font-family: sans-serif;
|
||||
color: var(--color);
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.notify {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 2%;
|
||||
bottom: 50%;
|
||||
flex: auto;
|
||||
min-width: 15%;
|
||||
width: fit-content;
|
||||
height: 50px;
|
||||
background: rgba(5,5,5,.9);
|
||||
border-radius: .5rem;
|
||||
animation: growDown 300ms ease-in-out;
|
||||
align-items: center;
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 2%;
|
||||
bottom: 50%;
|
||||
flex: auto;
|
||||
min-width: 15%;
|
||||
width: fit-content;
|
||||
height: 50px;
|
||||
background: rgba(5, 5, 5, 0.9);
|
||||
border-radius: 0.5rem;
|
||||
animation: growDown 300ms ease-in-out;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.error {
|
||||
border-left: 5px solid #c0392b;
|
||||
border-left: 5px solid #c0392b;
|
||||
}
|
||||
|
||||
.success {
|
||||
border-left: 5px solid #2ecc71;
|
||||
border-left: 5px solid #2ecc71;
|
||||
}
|
||||
|
||||
.info {
|
||||
border-left: 5px solid #2980b9;
|
||||
border-left: 5px solid #2980b9;
|
||||
}
|
||||
|
||||
.innerText {
|
||||
padding-left: .4rem;
|
||||
padding-right: .4rem;
|
||||
padding-top: 12.5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: 0.4rem;
|
||||
padding-right: 0.4rem;
|
||||
padding-top: 12.5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.innerText .icon {
|
||||
float: left;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.innerText .text {
|
||||
display: inline-block;
|
||||
margin-left: .5rem;
|
||||
margin-top: 4px;
|
||||
display: inline-block;
|
||||
margin-left: 0.5rem;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
|
||||
@keyframes growDown {
|
||||
0% {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
80% {
|
||||
transform: scaleY(1.1)
|
||||
}
|
||||
100% {
|
||||
transform: scaleY(1)
|
||||
}
|
||||
0% {
|
||||
transform: scaleY(0);
|
||||
}
|
||||
80% {
|
||||
transform: scaleY(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings:
|
||||
'FILL' 0,
|
||||
'wght' 400,
|
||||
'GRAD' 0,
|
||||
'opsz' 48
|
||||
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
|
||||
}
|
||||
|
||||
@@ -1,30 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
|
||||
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="js/script.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="notifyInfo" class="notify info">
|
||||
<div class="innerText">
|
||||
<span class="material-symbols-outlined icon">info</span>
|
||||
<p class="text" id="infoMessage"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="notifySuccess" class="notify success">
|
||||
<div class="innerText">
|
||||
<span class="material-symbols-outlined icon">check_circle</span>
|
||||
<p class="text" id="successMessage"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="notifyError" class="notify error">
|
||||
<div class="innerText">
|
||||
<span class="material-symbols-outlined icon">error</span>
|
||||
<p class="text" id="errorMessage"></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<head>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
|
||||
/>
|
||||
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<script src="js/script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="notifyInfo" class="notify info">
|
||||
<div class="innerText">
|
||||
<span class="material-symbols-outlined icon">info</span>
|
||||
<p class="text" id="infoMessage"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="notifySuccess" class="notify success">
|
||||
<div class="innerText">
|
||||
<span class="material-symbols-outlined icon">check_circle</span>
|
||||
<p class="text" id="successMessage"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="notifyError" class="notify error">
|
||||
<div class="innerText">
|
||||
<span class="material-symbols-outlined icon">error</span>
|
||||
<p class="text" id="errorMessage"></p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -4,82 +4,80 @@ let lastType = "";
|
||||
|
||||
// Gets the current icon it needs to use.
|
||||
const types = {
|
||||
["success"]: {
|
||||
["message"]: "successMessage",
|
||||
["id"]: "notifySuccess",
|
||||
},
|
||||
["error"]: {
|
||||
["message"]: "errorMessage",
|
||||
["id"]: "notifyError",
|
||||
},
|
||||
["info"]: {
|
||||
["message"]: "infoMessage",
|
||||
["id"]: "notifyInfo",
|
||||
}
|
||||
}
|
||||
["success"]: {
|
||||
["message"]: "successMessage",
|
||||
["id"]: "notifySuccess",
|
||||
},
|
||||
["error"]: {
|
||||
["message"]: "errorMessage",
|
||||
["id"]: "notifyError",
|
||||
},
|
||||
["info"]: {
|
||||
["message"]: "infoMessage",
|
||||
["id"]: "notifyInfo",
|
||||
},
|
||||
};
|
||||
|
||||
// the color codes example `i ~r~love~s~ donuts`
|
||||
const codes = {
|
||||
"~r~": "red",
|
||||
"~b~": "#378cbf",
|
||||
"~g~": "green",
|
||||
"~y~": "yellow",
|
||||
"~p~": "purple",
|
||||
"~c~": "grey",
|
||||
"~m~": "#212121",
|
||||
"~u~": "black",
|
||||
"~o~": "orange"
|
||||
}
|
||||
"~r~": "red",
|
||||
"~b~": "#378cbf",
|
||||
"~g~": "green",
|
||||
"~y~": "yellow",
|
||||
"~p~": "purple",
|
||||
"~c~": "grey",
|
||||
"~m~": "#212121",
|
||||
"~u~": "black",
|
||||
"~o~": "orange",
|
||||
};
|
||||
|
||||
w.addEventListener('message', (event) => {
|
||||
if (event.data.action === "show") {
|
||||
if (lastType) {
|
||||
doc.getElementById(lastType).style.display = "none";
|
||||
notification({
|
||||
type: event.data.type,
|
||||
message: event.data.message
|
||||
});
|
||||
} else {
|
||||
notification({
|
||||
type: event.data.type,
|
||||
message: event.data.message
|
||||
});
|
||||
}
|
||||
} else
|
||||
if (event.data.action === "hide") {
|
||||
if (lastType !== "") {
|
||||
doc.getElementById(lastType).style.display = "none"
|
||||
} else {
|
||||
console.log("There isn't a textUI displaying!?")
|
||||
}
|
||||
w.addEventListener("message", (event) => {
|
||||
if (event.data.action === "show") {
|
||||
if (lastType) {
|
||||
doc.getElementById(lastType).style.display = "none";
|
||||
notification({
|
||||
type: event.data.type,
|
||||
message: event.data.message,
|
||||
});
|
||||
} else {
|
||||
notification({
|
||||
type: event.data.type,
|
||||
message: event.data.message,
|
||||
});
|
||||
}
|
||||
} else if (event.data.action === "hide") {
|
||||
if (lastType !== "") {
|
||||
doc.getElementById(lastType).style.display = "none";
|
||||
} else {
|
||||
console.log("There isn't a textUI displaying!?");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const replaceColors = (str, obj) => {
|
||||
let strToReplace = str
|
||||
let strToReplace = str;
|
||||
|
||||
for (let id in obj) {
|
||||
strToReplace = strToReplace.replace(new RegExp(id, 'g'), obj[id])
|
||||
}
|
||||
for (let id in obj) {
|
||||
strToReplace = strToReplace.replace(new RegExp(id, "g"), obj[id]);
|
||||
}
|
||||
|
||||
return strToReplace
|
||||
}
|
||||
return strToReplace;
|
||||
};
|
||||
|
||||
notification = (data) => {
|
||||
for (color in codes) {
|
||||
if (data["message"].includes(color)) {
|
||||
let objArr = {};
|
||||
objArr[color] = `<span style="color: ${codes[color]}">`;
|
||||
objArr["~s~"] = "</span>";
|
||||
for (color in codes) {
|
||||
if (data["message"].includes(color)) {
|
||||
let objArr = {};
|
||||
objArr[color] = `<span style="color: ${codes[color]}">`;
|
||||
objArr["~s~"] = "</span>";
|
||||
|
||||
let newStr = replaceColors(data["message"], objArr);
|
||||
let newStr = replaceColors(data["message"], objArr);
|
||||
|
||||
data["message"] = newStr;
|
||||
}
|
||||
data["message"] = newStr;
|
||||
}
|
||||
}
|
||||
|
||||
doc.getElementById(types[data.type]["id"]).style.display = "block";
|
||||
lastType = types[data.type]["id"]
|
||||
doc.getElementById(types[data.type]["message"]).innerHTML = data["message"]
|
||||
|
||||
}
|
||||
doc.getElementById(types[data.type]["id"]).style.display = "block";
|
||||
lastType = types[data.type]["id"];
|
||||
doc.getElementById(types[data.type]["message"]).innerHTML = data["message"];
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user