ContextMenu

ContextMenu

Display a right-click activated Context Menu which provides a dropdown menu of options A ContextMenu is constructed by designating a parent HTML container and a target selector An Array of menuItems defines the entries of the menu which is displayed

Constructor

new ContextMenu(element, selector, menuItems, eventName, menuItem)

Parameters:
Name Type Description
element HTMLElement | jQuery

The containing HTML element within which the menu is positioned
selector string

A CSS selector which activates the context menu.
menuItems Array.<object>

An Array of entries to display in the menu
eventName string

Optionally override the triggering event which can spawn the menu
menuItem Object

Menu items in the array can have the following properties

Properties
Name Type Description
name string

The displayed item name
icon string

An icon glyph HTML string
condition function

A function which returns a Boolean for whether or not to display the item
callback function

A callback function to trigger when the entry of the menu is clicked

Members

_expandUp :boolean

Track which direction the menu is expanded in

Type:
  • boolean

element :HTMLElement

The target HTMLElement being selected

Type:
  • HTMLElement

eventName :string

An interaction event name which activates the menu

Type:
  • string

A convenience accessor to the context menu HTML object

The array of menu items being rendered

Type:

selector :string

The target CSS selector which activates the menu

Type:
  • string

Methods

bind()

Attach a ContextMenu instance to an HTML selector

(async) close()

Animate closing the menu by sliding up and removing from the DOM

render(target)

Render the Context Menu by iterating over the menuItems it contains. Check the visibility of each menu item, and only render ones which are allowed by the item's logical condition. Attach a click handler to each item which is rendered.

Parameters:
Name Type Description
target jQuery

The target element to which the context menu is attached