implement inbuilt nui menu

2026-08-17 05:56:02 +01:00 · 2025-04-20 01:22:32 +01:00
parent b7db98ffdc
commit d1bb796d5f
7 changed files with 483 additions and 10 deletions
--- a/nui/script.js
+++ b/nui/script.js
@@ -0,0 +1,112 @@
+let buttonParams = [];
+let menuItems = [];
+
+const openMenu = (data = null) => {
+    let html = `
+        <div class="search-container">
+            <input type="text" id="search-input" placeholder="Search...">
+        </div>
+    `;
+
+    html += "<div id='buttons'>";
+
+    data.forEach((item, index) => {
+        if (!item.hidden) {
+            let header = item.header || item.title;
+            let message = item.txt || item.text || item.description;
+            let isMenuHeader = item.isMenuHeader;
+            let isDisabled = item.disabled;
+            let icon = item.icon;
+            let progress = item.progress || item.progressbar;
+            let colour = item.colorScheme;
+            html += getButtonRender(header, message, index, isMenuHeader, isDisabled, icon, progress, colour);
+            if (item.params) buttonParams[index] = item.params;
+        }
+    });
+
+    html += "</div>";
+    $("#buttons").html(html);
+    $("#container").html(html);
+    $('.button').click(function() {
+        const target = $(this)
+        if (!target.hasClass('title') && !target.hasClass('disabled')) {
+            postData(target.attr('id'));
+        }
+    });
+
+    $("#search-input").on("keyup", function() {
+        let value = $(this).val().toLowerCase();
+        $("#buttons .button, #buttons .title").filter(function() {
+            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
+        });
+    });
+};
+
+const getButtonRender = (header, message = null, id, isMenuHeader, isDisabled, icon, progress, colour) => {
+    return `
+        <div class="${isMenuHeader ? "title" : "button"} ${isDisabled ? "disabled" : ""} " id="${id}">
+            ${icon ? `
+                <div class="icon">
+                    <img src=${icon} onerror="this.onerror=null; this.remove();">
+                    <i class="${icon}" onerror="this.onerror=null; this.remove();"></i>
+                </div>
+            ` : " " }
+            <div class="column">
+                <div class="header">${header ? `${header}` : " "}</div>
+                ${message ? `<div class="text"> ${message}</div>` : ""}
+                ${progress ? `
+                    <div style="width: 7vw; background-color: #ddd; border-radius: 5px;">
+                        <div style="padding-top: 0.3vh; padding-bottom: 0.3vh; width:${progress}%; background-color:${colour}; border-radius: 5px;"></div>
+                    </div>`
+                : ""}
+            </div>
+        </div>
+    `;
+};
+
+const closeMenu = () => {
+    $("#buttons").html(" ");
+    buttonParams = [];
+    $("#search-input").hide(); // hide search bar
+};
+
+const postData = (id) => {
+    $.post(`https://${GetParentResourceName()}/clickedButton`, JSON.stringify(parseInt(id) + 1));
+    return closeMenu();
+};
+
+const cancelMenu = () => {
+    $.post(`https://${GetParentResourceName()}/closeMenu`);
+    return closeMenu();
+};
+
+const filterButtons = (query) => {
+    const filteredItems = menuItems.filter(item => item.header.toLowerCase().includes(query.toLowerCase()));
+    openMenu(filteredItems);
+};
+
+$("#search-input").on('input', function() {
+    filterButtons($(this).val());
+});
+
+window.addEventListener("message", (event) => {
+    const data = event.data;
+    const buttons = data.data;
+    const action = data.action;
+    switch (action) {
+        case "OPEN_MENU":
+        case "SHOW_HEADER":
+            return openMenu(buttons);
+        case "CLOSE_MENU":
+            return closeMenu();
+        default:
+            return;
+    }
+});
+
+document.onkeyup = function (event) {
+    const charCode = event.key;
+    if (charCode == "Escape") {
+        cancelMenu();
+    }
+};