var menuitems = [
  {
    "text": "Item 1",
    "icon": "♛",
    "sub": [
      {
        "text": "Item 1.1",
        "enabled": false
      }
    ]
  },
  {
    "text": "Item 2"
  }
];

var menu = new ContextMenu(menuitems);

document.addEventListener("contextmenu", function(e){
  menu.display(e);
});

menu.reload(); // Always use this, when you change the menu

new ContextMenu(menu_structure, options);

menu.reload();                    // Reloads/Renders the contextmenu inside of a container (id: cm_<num>)
menu.display(e, target);          // Displays the contextmenu on the location present in the contextmenu-event (e)
                                  // and executes e.preventDefault();
                                  // if target is set, the contextTarget is set to that
menu.hide();                      // Hides the menu, if shown
                            
menu.setOptions(options);         // Resets the options (object)
menu.changeOption(option, value); // Changes one option (string, object)
menu.getOptions();                // Returns the options

menu.menu                         // The menu structure; change this, or the parameter, to change the menu (no setter)
menu.contextTarget                // The target, where the contextmenu was last opened

ContextMenu.count                 // Number of contextmenus created (for the id's)
ContextMenu.DIVIDER               // Constant, that is used to mark a item as a divider ("type": ContextMenu.DIVIDER)

var menustructure = [
  {
    "text": "Item1",                         // Text to display
    "icon": '<img src="images/item.png" />', // Icon to display next to the text
    "sub": [                                 // Item has nested items
      {
        "text": "Item1.1",
        "enabled": false                     // Item is disabled (if it has nested items, they won't show)
      }
    ]
  },
  {
    "type": ContextMenu.DIVIDER              // This item is a divider (shows only gray line, no text etc.)
  },
  {
    "text": "Item2",
    "events": {                              // Adds eventlisteners to the item (you can use any event there is)
      "click": function(e){
        console.log("clicked");
      },
      "mouseover": function(e){
        console.log("mouse is over menuitem");
      }
    }
  }
];

ContextUtil.getProperty(opt, o, def);        // Returns the value of 'o' in the array/object opt, if it is set;
                                             // else it returns def (object, string, object)

ContextUtil.getSizes(obj);                   // Recursively gets the size of a DOM-List (ul), that has absolute positioned
                                             // children (dom-element)

var menu = new ContextMenu(
  [
    {
      "text": "Item 1",
      "sub": [
        {
          "text": "Item 11"
        },
        {
          "text": "Item 12"
        },
        {
          "type": ContextMenu.DIVIDER
        },
        {
          "text": "Item 13",
          "enabled": false,
          "sub": [
            {
              "text": "Item 131"
            }
          ]
        }
      ]
    },
    {
      "text": "Item 2",
      "icon": '<i class="fas fa-exclamation-circle"></i>',
      "events": {
        "click": function(e){
          alert(e);
        }
      }
    }
  ]
);