Web context menu

Fully skinnable context menu library for web applications.

Status

This library is almost satisfactory, but it includes the following bugs:

• Bug: Actions only work when clicked with Enter
  • Bug: After the action executes successfully, next time the context menu opens it is inaccessible until you figure out how to make it accessible again.
• Bug: Actions do not work when clicking with the device pointer
• Bug: Click on a list item closes the context menu modal

Desired features:

• Menu bar navigation while opening the context menu

Documentation

Refer to the TypeDoc documentation for full details.

Getting started

import { ContextMenu, ContextMenuItem } from "com.hydroper.webcontextmenu";

const menu = new ContextMenu({
    items: [
        new ContextMenuItem({
            title: "Greet",
            action: () => {
                alert("Hello, world!");
            },
        }),
    ],
    // Place it "at" a [x, y] position or "below" an element.
    at: [100, 100],
});

Shortcuts

Shortcuts are handled through the com.hydroper.webinputaction package.

Skinning

Context menus created via the ContextMenu constructor contribute the following elements:

• body > .context-menu-modal — Consists of all displayed context menus, placed at absolute positions.
  • .context-menu — Represents a single context menu at an arbitrary position.
    • .context-menu > button — Represents a clickable item, possibly disabled.
      • ul
        • .title — Item title.
        • .right
          • .shortcut — Consists of the list shortcut combination in characters.
          • .list — Consists of the list indicator icon.