Class Menu

menu.js:1–102

export class Menu{
    constructor( app, links ){
        this.menu = document.querySelector(".context-menu");
        this.menuState = 0;
        this.contextMenuActive = "block";
        this.app = app;

        this.addLinks( links );

        document.addEventListener("contextmenu", (e) => {
            e.preventDefault();
            this.show(e);
          });

        // Event Listener for Close Context Menu when outside of menu clicked
        document.addEventListener("click", (e) => {
            this.hide();
        });
        
        // Close Context Menu on Esc key press
        window.onkeyup =  (e) => {
            if (e.keyCode === 27) this.hide();
        }
    }

    addLinks( links = [] ){
      let html = "";

      /*<div class="flex hover:bg-gray-100 py-1 px-2 rounded cursor-pointer">
                    <button class="ml-4" onclick="alert('Delete');">Delete</button>
      </div>*/

      const prefix = '<div class="flex hover:bg-gray-100 py-1 px-2 rounded cursor-pointer"><button class="ml-4" onclick="';

      links.forEach( link => {
        html = `${html + prefix}window.app.${link.code};">${link.name}</button></div>`;
      });

      const elm = document.getElementById("menu-links");
      elm.innerHTML = html;
    }

    show(e) {
        if (this.menuState !== 1) {
            this.positionMenu(e);
          this.menuState = 1;
          this.menu.style.display = "block";
        }
    }

    hide(){
        if (this.menuState !== 0) {
            this.menuState = 0;
            this.menu.style.display = "none";
        }
    }

    getPosition(e) {
        let posx = 0;
        let posy = 0;