my-context-menu v2.0.0

This package allows you to create your own context menu with various functions.

What it looks like.

Remark. The hotkey property is just visual text without functionality.

How to use

To begin with, exports the necessary functions and button types.

import { disableDefaultMenu, execute, ItemType, useContextMenu } from "my-context-menu";

After that you can use disableDefaultMenu() to disable the default context menu.

disableDefaultMenu();

You can use the execute function to call the context menu instantly.

execute(document.querySelector("textarea"), { x: 20, y: 20 }, [{
    type: ItemType.Submenu,
    value: "menu",
    items: [{
        type: ItemType.Button,
        value: e => e.value
    }]
}]);

And with the function useContextMenu you can put an event on the elements that will call the context menu (execute) when you click on them.

useContextMenu(document.querySelectorAll("textarea"), [{
    type: ItemType.Button,
    value: "If first char is \"W\"",
    if: e => e.value.startsWith("W"),
    onclick: console.log
}, {
    type: ItemType.Button,
    value: e => e.value.substring(0, 10),
    hotkey: "Ctrl + K",
    onclick: console.log
}]);



let icon = new Image();
icon.src = "./icon.png";

useContextMenu(document.querySelectorAll("li"), [
    {
        type: ItemType.Button,
        value: "Button 1",
        icon,
        onclick(e) { console.log(1, e) }
    },
    {
        type: ItemType.Button,
        value: "Button 2",
        onclick(e) { console.log(2, e) }
    },
    {
        type: ItemType.Line,
        icon: new Image(),
    },
    {
        value: "Submenu 1",
        type: ItemType.Submenu,
        icon,
        items: [
            {
                value: "Button 1",
                type: ItemType.Button,
                onclick: () => { console.log(1); }
            },
            {
                value: "Submenu 1",
                type: ItemType.Submenu,
                icon,
                items: [
                    {
                        value: "Button 1",
                        type: ItemType.Button,
                        onclick: () => { console.log(1); }
                    }
                ]
            }
        ]
    },
]);