hi-menu

ContextMenu Library Documentation

Overview

The ContextMenu library provides an easy way to create customizable and responsive context menus for web applications. This library supports both desktop and mobile devices, ensuring a smooth user experience.

Installation

Import the ContextMenu library and its associated styles and assets into your project:

import "./hi-menu.css";
import ContextMenu from "./hi-menu";

Usage

Basic Initialization

Create a new context menu for a specific element by providing its selector ID:

const menu = new ContextMenu("#myElement", (event) => {
  console.log("Context menu triggered", event);
});

This code will initialize a context menu on the element with the ID myElement.

Adding Menu Items

Add items to the context menu using the add method:

menu.add("Option 1", (event) => {
  alert("Option 1 clicked");
});

menu.add("Option 2", () => {
  console.log("Option 2 clicked");
});

Each menu item can have a label and an action callback.

Adding Submenus

To create submenus, pass an array of items as the submenuItems parameter:

menu.add("Parent Option", null, [
  { label: "Child Option 1", action: () => alert("Child 1") },
  { label: "Child Option 2", action: () => alert("Child 2") },
]);

Adding Titles

Set a title for the menu using the title method:

menu.title("My Custom Menu", "left");

The second parameter defines the text alignment (left, center, right).

Handling Focus and Blur Events

You can listen to focus and blur events on the context menu elements:

menu.onFocus((event) => {
  console.log("Element focused", event.target);
});

menu.onBlur((event) => {
  console.log("Element blurred", event.target);
});

Mobile Support

For devices with smaller screens, the context menu is centered on the screen and includes a backdrop to enhance usability.

Example

Here is a complete example of creating a custom context menu:

const contextMenu = new ContextMenu(".clickable-item", (event) => {
  console.log("Context menu opened for", event.target);
});

contextMenu.title("Options");

contextMenu.add("Edit", () => {
  alert("Edit option clicked");
});

contextMenu.add("Delete", () => {
  alert("Delete option clicked");
});

contextMenu.add("More", null, [
  { label: "Sub Option 1", action: () => alert("Sub Option 1 clicked") },
  { label: "Sub Option 2", action: () => alert("Sub Option 2 clicked") },
]);

Methods

hideMenu()

Hides the context menu and the backdrop.

setLongpressEvent()

Enables long-press event handling for mobile devices.

setToElement(callback)

Applies the provided callback function to all elements targeted by the context menu.

Conclusion

The ContextMenu library is a versatile tool for adding custom context menus to your web application, offering rich features and customization options to suit a variety of use cases.