ContextMenu interface component. It enables you to quickly and fluently construct a contextmenu from javascript. All behaviour users expect from a contextmenu is build it. When a user selects an item it emits an event on the context node (the one that had the contextmenu triggered within). Thats all. This is a departure from other implementations which will house a set of handlers internally. Emitting dom events is simpler and offers greater opportunity for composition.
$ {package mananger} install jkroso/contextmenu
then in your app:
var ContextMenu = require('contextmenu')
- events for composition
- structural CSS letting you decide on style
- fluent API
- arrow key navigation
- mouse navigation
- auto arranges to find space
- can nest menus as deep as you please
show
when shownhide
when hiddenselect
when an item is chosenfocused
when an item is focusblurred
when an item looses focusfocus
when the context menu starts receiving keyboard eventsblur
when the context menu stops receiving keyboard events
And on the context node the events are derived from the item titles
This is the code that rendered the screenshot
var ContextMenu = require('contextmenu')
new ContextMenu(document.body)
.item('Cut', 'images/cut.png')
.submenu('Copy', 'images/copy.png')
.item('title')
.item('body')
.item('image')
.pop()
.item('Paste', 'images/paste.png')
.show(100, 100)
- ContextMenu()
- ContextMenu.clear()
- ContextMenu.item()
- ContextMenu.submenu()
- ContextMenu.hasFocus()
- ContextMenu.up()
- ContextMenu.down()
- ContextMenu.navigate()
- ContextMenu.activate()
- ContextMenu.deactivate()
- ContextMenu.show()
- ContextMenu.target()
- ContextMenu.remove()
Create a new ContextMenu
new ContextMenu(document.body)
Remove all instances from the display
add an item
create a submenu
Check if the ContextMenu is currently focused and therefore receiving events
Shift focus to the item above the currently focused one
Shift focus to the item below the currently selected one
Convert a left or right command into the appropriate action
Ensure the ContextMenu has keyboard focus so it can receive keyboard events
Remove focus so the ContextMenu no longer receives keyboard events
Insert the context menu and show it
set location
Terminate the ContextMenu