Merge pull request #23 from ItsANoBrainer/dev

[Update] Disabled Option

README.md

@@ -24,6 +24,18 @@ RegisterCommand("qbmenutest", function(source, args, raw)
  }
  }
  },
+ {
+ header = "Sub Menu Button",
+ txt = "This goes to a sub menu",
+ disabled = true,
+ -- hidden = true, -- doesnt create this at all if set to true
+ params = {
+ event = "qb-menu:client:testMenu2",
+ args = {
+ number = 1,
+ }
+ }
+ },
  })
 end)
 ```

html/script.js

@@ -3,47 +3,33 @@ let buttonParams = [];
 const openMenu = (data = null) => {
  let html = "";
  data.forEach((item, index) => {
- let header = item.header;
- let message = item.txt || item.text;
- let isMenuHeader = item.isMenuHeader;
- html += getButtonRender(header, message, index, isMenuHeader);
- if (item.params) buttonParams[index] = item.params;
+ if(!item.hidden) {
+ let header = item.header;
+ let message = item.txt || item.text;
+ let isMenuHeader = item.isMenuHeader;
+ let isDisabled = item.disabled;
+ html += getButtonRender(header, message, index, isMenuHeader, isDisabled);
+ if (item.params) buttonParams[index] = item.params;
+ }
  });
 
  $("#buttons").html(html);
-};
 
-const showHeader = (data = null) => {
- let html = "";
- data.forEach((item, index) => {
- let header = item.header;
- let message = item.txt || item.text;
- let isMenuHeader = item.isMenuHeader;
- html += getButtonRender(header, message, index, isMenuHeader);
- if (item.params) buttonParams[index] = item.params;
+ $('.button').click(function() {
+ const target = $(this)
+ if (!target.hasClass('title') && !target.hasClass('disabled')) {
+ postData(target.attr('id'));
+ }
  });
- $("#buttons").html(html);
-}
+};
 
-const getButtonRender = (header, message = null, id, isMenuHeader) => {
- if (message) {
- return `
- <div class="${
- isMenuHeader ? "title" : "button"
- }" data-btn-id="${id}">
- <div class="header">${header}</div>
- <div class="text">${message}</div>
- </div>
- `;
- } else {
- return `
- <div class="${
- isMenuHeader ? "title" : "button"
- }" data-btn-id="${id}">
- <div class="header">${header}</div>
- </div>
- `;
- }
+const getButtonRender = (header, message = null, id, isMenuHeader, isDisabled) => {
+ return `
+ <div class="${isMenuHeader ? "title" : "button"} ${isDisabled ? "disabled" : ""}" id="${id}">
+ <div class="header">${header}</div>
+ ${message ? `<div class="text">${message}</div>` : ""}
+ </div>
+ `;
 };
 
 const closeMenu = () => {
@@ -52,7 +38,7 @@ const closeMenu = () => {
 };
 
 const postData = (id) => {
- $.post(`https://${GetParentResourceName()}/clickedButton`, JSON.stringify(id + 1));
+ $.post(`https://${GetParentResourceName()}/clickedButton`, JSON.stringify(parseInt(id) + 1));
  return closeMenu();
 };
 
@@ -61,23 +47,16 @@ const cancelMenu = () => {
  return closeMenu();
 };
 
-$(document).click(function (event) {
- let target = $(event.target);
- if (target.closest(".button").length && $(".button").is(":visible")) {
- let btnId = $(event.target).closest(".button").data("btn-id");
- postData(btnId);
- }
-});
+
 
 window.addEventListener("message", (event) => {
  const data = event.data;
  const buttons = data.data;
  const action = data.action;
  switch (action) {
  case "OPEN_MENU":
- return openMenu(buttons);
  case "SHOW_HEADER":
- return showHeader(buttons);
+ return openMenu(buttons);
  case "CLOSE_MENU":
  return closeMenu();
  default:

html/style.css

@@ -79,6 +79,15 @@ body::-webkit-scrollbar {
  box-shadow: 0rem 0rem 0.1rem 0.05rem #000000;
 }
 
+.title > div.header {
+ text-decoration: underline !important;
+}
+
+.disabled {
+ background: rgba(102, 102, 102, 0.9) !important;
+ cursor: default;
+}
+
 div > .text {
  flex-direction: column;
  font-size: 0.75rem;