Themeable Context Menu Library – Contextify

Preview:

Description:

Contextify is a lightweight, customizable, themeable, multi-level context menu library to override the default browser context menu.

Allows for the menu items to be defined in a JSON format for maximum customization.

How to use it:

1. Load the Font Awesome Iconic Font for the menu icons.

<script src="https://kit.fontawesome.com/df7df855c2.js" crossorigin="anonymous"></script>

2. Load the Contextify JavaScript library.

<script src="Contextify.js"> </script>

3. Define your menu items in a JS array as follows:

let mainMenu = [
    { 
      icon: 'fa-home', 
      type: 'button', 
      hotkey: 'Ctrl + 1', 
      text: 'Home', 
      enabled: false 
    },
    { type: 'separator'},
    { 
      icon: 'fa-share', 
      type: 'button', 
      text: 'Social', 
      child: subMenu 
    },
    { 
      icon: 'fa-times-circle', 
      type: 'button', 
      text: 'Cancel', 
      click: function() { 
        // Do something
      } 
    }
];
let subMenu = [
    { 
      icon: 'fa-twitter', 
      type: 'button', 
      hotkey: 'Alt + 1', 
      text: 'Twitter', 
      click: function(event) { 
        // Do something
      } 
    },
    { 
      icon: 'fa-facebook', 
      type: 'button', 
      hotkey: 'Alt + 1', 
      text: 'Facebook', 
      click: function(event) { 
        // Do something
      } 
    },
    { 
      icon: 'fa-instagram', 
      type: 'button', 
      hotkey: 'Alt + 1', 
      text: 'Instagram', 
      click: function(event) { 
        // Do something
      } 
    },
];

4. Initialize the context menu, define the theme you want to use and determine in which container you want to display the context menu. Passing in the parent object will allow you to specify which objects on the webpage will have this custom context menu, either assigning it to `document.body` or leaving it undefined will completely override the default context menu for the entire page. Available themes:

• dark
• light
• acid
• min
• soft
• simple

const contextMenu = new Contextify(mainMenu, "dark", document.body);

5. Show the context menu at a particular X, Y coordinate position on the screen, by default this will be called whenever the user right-clicks the parent and it will open the menu at the users cursor position. This can also be called to show the menu at different places on the screen from a button click etc.

contextMenu.show(x, y);

6. Hide the menu by setting the active state to false and removing each of the child components including the children context menu objects.

contextMenu.hide(hideParent);

7. Change the theme manually.

assignTheme(themeName);