ThatGuyJacobee/Elite-Gaming-FiveM-Old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added new scripts and eup

Browse Source
This commit is contained in:
KingMcDonalds
2025-05-19 16:45:39 -07:00
parent 92357c972e
commit 5fa9cc69be
292 changed files with 10254 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/xmenu/html/events.js
+17
View File
@@ -0,0 +1,17 @@
const EVENTS = []
document.onreadystatechange = () => {
if (document.readyState == "complete") {
window.addEventListener("message", (event) => {
EVENTS.forEach(e => {
if (e.event == event.data.type) {
e.callback(event.data.data);
}
});
})
}
}
function RegisterEvent(event, callback) {
EVENTS.push({ event, callback });
}
resources/xmenu/html/index.html
+51
View File
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XMenu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app" v-show="visible">
<div id="menu_base" class="middle-right">
<div id="menu_header" v-bind:style="{ 'background-color': HeaderColor }">
{{ MenuName }}
</div>
<div id="menu_body">
<div v-for="(comp, compIndex) in MenuComponents">
<!-- List -->
<div :id="compIndex" v-if="comp.type == 'list'" class="menu_button" v-bind:class="{ 'menu_button_hovered': compIndex == MenuOption }">
<i class="fa fa-arrow-left fa-2x menu_list_icon_left"></i>
{{ comp.list[comp.listIndex - 1] }}
<i class="fa fa-arrow-right fa-2x menu_list_icon_right"></i>
</div>
<!-- Checkbox -->
<div :id="compIndex" v-else-if="comp.type == 'checkbox'" class="menu_checkbox" v-bind:class="{ 'menu_checkbox_hovered': compIndex == MenuOption, 'menu_checkbox_icon_hovered': compIndex == MenuOption }">
{{ comp.name }}
<i v-if="comp.state" class="fa fa-check-square fa-2x menu_checkbox_icon"></i>
<i v-else class="fa fa-square fa-2x menu_checkbox_icon"></i>
</div>
<!-- Button -->
<div :id="compIndex" v-else class="menu_button" v-bind:class="{ 'menu_button_hovered': compIndex == MenuOption }">
{{ comp.name }}
</div>
</div>
</div>
</div>
</div>
<script src="https://use.fontawesome.com/4802736edb.js"></script>
<script src="https://use.fontawesome.com/4802736edb.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- DEVELOPMENT -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script> --> <!-- PRODUCTION -->
<script src="events.js"></script>
<script src="script.js"></script>
</body>
</html>
resources/xmenu/html/script.js
+65
View File
@@ -0,0 +1,65 @@
const app = new Vue({
el: "#app",
data: {
resource: "xmenu",
visible: false,
// Menu
MenuName: "Default",
MenuComponents: {},
MenuOption: 0,
HeaderColor: "#0984e3"
},
methods: {
SetResourceData(data) {
this.resource = data.resource;
},
OpenMenu(data) {
this.MenuName = data.name;
this.MenuComponents = data.components;
this.MenuOption = data.option - 1;
this.HeaderColor = data.color || "#0984e3";
this.visible = true;
},
CloseMenu() {
this.MenuName = "";
this.MenuComponents = {};
this.MenuOption = 0;
this.visible = false;
},
SetMenuOption(data) {
this.MenuOption = data.option - 1;
const element = document.getElementById(`${this.MenuOption}`);
element.scrollIntoView();
},
SetCheckboxState(data) {
const comp = this.GetMenuIndexById(data.id)
if (comp != null) {
this.MenuComponents[comp].state = data.state
}
},
SetListItem(data) {
this.MenuComponents.forEach(comp => {
if (comp.index == data.index) {
comp.listIndex = data.listIndex
}
});
},
GetMenuIndexById(id) {
for (let a = 0; a < this.MenuComponents.length; a++) {
if (this.MenuComponents[a].index == id) {
return a
}
}
return null;
}
},
mounted() {
RegisterEvent("set_resource_data", this.SetResourceData);
RegisterEvent("open_menu", this.OpenMenu);
RegisterEvent("close_menu", this.CloseMenu);
RegisterEvent("set_menu_option", this.SetMenuOption);
RegisterEvent("set_checkbox_state", this.SetCheckboxState);
RegisterEvent("set_list_item", this.SetListItem);
}
})
resources/xmenu/html/style.css
+131
View File
@@ -0,0 +1,131 @@
:root {
/* Vars */
--header-font-size: 20px;
/* Colors */
--blue: #0984e3;
--white: white;
--midgray: #636e72;
--darkgray: #2d3436;
--red: red;
--black: #000000;
}
html {
overflow: hidden;
}
body {
margin: 0;
}
#app {
width: 100%;
height: 100%;
}
#menu_base {
position: absolute;
width: 20%;
position: absolute;
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: var(--darkgray);
}
#menu_header {
font-size: var(--menu-header-font-size);
padding: 15px;
text-align: center;
color: white;
}
#menu_body {
position: relative;
margin: 1px;
max-height: 500px;
overflow-y: auto;
}
/* BUTTON CLASSES */
.menu_button {
padding: 12px;
text-align: center;
background-color: var(--black);
color: white;
border-style: solid;
border-width: 1px;
border-color: var(--white);
margin: 5px;
}
.menu_button_hovered {
background-color: var(--white) !important;
border-style: solid;
border-width: 1px;
border-color: var(--black);
color: var(--black);
}
/* CHECKBOX CLASSES */
.menu_checkbox {
padding: 12px;
text-align: center;
background-color: var(--black);
color: white;
border-style: solid;
border-width: 1px;
border-color: var(--white);
margin: 5px;
}
.menu_checkbox_hovered {
background-color: var(--white) !important;
border-style: solid;
border-width: 1px;
border-color: var(--black);
color: var(--black);
}
.menu_checkbox_icon {
position: absolute;
right: 25px;
margin-top: -6px;
}
/* LIST CLASSES */
.menu_list_icon_left {
position: absolute;
left: 25px;
margin-top: -6px;
}
.menu_list_icon_right {
position: absolute;
right: 25px;
margin-top: -6px;
}
/* POSITION CLASSES */
.top-left {
top: 5px;
left: 5px;
}
.top-right {
top: 5px;
right: 5px;
}
.middle-left {
top: 50%;
left: 5px;
transform: translateY(-50%);
}
.middle-right {
top: 50%;
right: 5px;
transform: translateY(-50%);
}
.bottom-left {
bottom: 5px;
left: 5px;
}
.bottom-right {
bottom: 5px;
right: 5px;
}