Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">
var menuData = {
  menu: [
    {
      name: "language",
      icon: "icon-switcher",
      display: false,
      alias: "Language",
      value: "Change the language",
      menus: [
        {
          name: "English",
          icon: "",
          display: false,
          alias: "/SwithtoEnglish"
        },
        {
          name: "Spanish",
          icon: "",
          display: false,
          alias: "/SwithtoSpanish"
        }
      ]
    },
    {
      name: "panic",
      icon: "icon-panic",
      display: false,
      alias: "/help"
    }
  ]
};
var menuDiv = "";
var buildChatMenu = function(menu) {
  var dropDownLi;
  if (!menu.menus) {
    dropDownLi = `<li><span class="${
      menu.icon ? menu.icon : ""
    }"></span><a tabindex="-1" href="#" data-display=${
      menu.display ? menu.display : true
    } data-alias=${menu.alias ? menu.alias : ""}>${menu.name}</a></li>`;
  } else {
    dropDownLi = `<li class="dropdown-submenu"><span class="${menu.icon}"></span>
        <a class="submenu" tabindex="-1" href="#"><span class="caret"></span></a>`
  }
};
for (var key in menuData.menu) {
  menuDiv = `<ul id="chatMenuDropdown" class="dropdown-menu"></ul`;
  buildChatMenu(menuData.menu[key]);
}

// var setListenersMenu = function() {
//   $(".chatActionIcons")
//     .off("click")
//     .on("click", function() {
//       $(this)
//         .find("#chatMenuDropdown")
//         .get(0)
//         .classList.toggle("show");
//     });
// };

// $("body").on("click", function(event) {
//   if (!event.target.matches("#panicButton")) {
//     var dropdowns = document.getElementsByClassName("dropdown-content");
//     var i;
//     for (i = 0; i < dropdowns.length; i++) {
//       var openDropdown = dropdowns[i];
//       console.log("clicked:::", openDropdown.classList.contains("show"));
//       if (openDropdown.classList.contains("show")) {
//         openDropdown.classList.remove("show");
//       }
//     }
//   }
// });
// var buildMenuButton = function(menuList) {
//   var list = menuList
//     .map((menu, i) => {
//       return `<a href="#" data-value="${
//         menu.value ? menu.value : ""
//       }" data-alias="${menu.alias ? menu.alias : ""}">${menu.name}</a>`;
//     })
//     .join("");
//   var div = `<div id="chatMenuDropdown" class="dropdown-content">
//           ${list}
//   </div>`;
//   $("#chatMenuDropdown").remove();
//   $(div).appendTo("header .chatActionIcons");
//   $("#panicButton").off("click");
//   setListenersMenu();
// };

// $("body").on("click", "#chatMenuDropdown a", function(event) {
//   var msgObj = getMsgObj(this);
//   SentMessage_Func(msgObj);
// });
</script>


<script id="jsbin-source-javascript" type="text/javascript">var menuData = {
  menu: [
    {
      name: "language",
      icon: "icon-switcher",
      display: false,
      alias: "Language",
      value: "Change the language",
      menus: [
        {
          name: "English",
          icon: "",
          display: false,
          alias: "/SwithtoEnglish"
        },
        {
          name: "Spanish",
          icon: "",
          display: false,
          alias: "/SwithtoSpanish"
        }
      ]
    },
    {
      name: "panic",
      icon: "icon-panic",
      display: false,
      alias: "/help"
    }
  ]
};
var menuDiv = "";
var buildChatMenu = function(menu) {
  var dropDownLi;
  if (!menu.menus) {
    dropDownLi = `<li><span class="${
      menu.icon ? menu.icon : ""
    }"></span><a tabindex="-1" href="#" data-display=${
      menu.display ? menu.display : true
    } data-alias=${menu.alias ? menu.alias : ""}>${menu.name}</a></li>`;
  } else {
    dropDownLi = `<li class="dropdown-submenu"><span class="${menu.icon}"></span>
        <a class="submenu" tabindex="-1" href="#"><span class="caret"></span></a>`
  }
};
for (var key in menuData.menu) {
  menuDiv = `<ul id="chatMenuDropdown" class="dropdown-menu"></ul`;
  buildChatMenu(menuData.menu[key]);
}

// var setListenersMenu = function() {
//   $(".chatActionIcons")
//     .off("click")
//     .on("click", function() {
//       $(this)
//         .find("#chatMenuDropdown")
//         .get(0)
//         .classList.toggle("show");
//     });
// };

// $("body").on("click", function(event) {
//   if (!event.target.matches("#panicButton")) {
//     var dropdowns = document.getElementsByClassName("dropdown-content");
//     var i;
//     for (i = 0; i < dropdowns.length; i++) {
//       var openDropdown = dropdowns[i];
//       console.log("clicked:::", openDropdown.classList.contains("show"));
//       if (openDropdown.classList.contains("show")) {
//         openDropdown.classList.remove("show");
//       }
//     }
//   }
// });
// var buildMenuButton = function(menuList) {
//   var list = menuList
//     .map((menu, i) => {
//       return `<a href="#" data-value="${
//         menu.value ? menu.value : ""
//       }" data-alias="${menu.alias ? menu.alias : ""}">${menu.name}</a>`;
//     })
//     .join("");
//   var div = `<div id="chatMenuDropdown" class="dropdown-content">
//           ${list}
//   </div>`;
//   $("#chatMenuDropdown").remove();
//   $(div).appendTo("header .chatActionIcons");
//   $("#panicButton").off("click");
//   setListenersMenu();
// };

// $("body").on("click", "#chatMenuDropdown a", function(event) {
//   var msgObj = getMsgObj(this);
//   SentMessage_Func(msgObj);
// });


</script></body>
</html>