Menu component
JavaScript
Pull request Compare This branch is 13 commits ahead, 18 commits behind component:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.gitignore
.npmignore
History.md
Makefile
Readme.md
component.json
index.js
menu.css
package.json

Readme.md

Menu

Menu component with structural styling to give you a clean slate.

js menu component

Installation

$ npm install menu-component

Features

  • events for composition
  • structural CSS letting you decide on style
  • fluent API
  • arrow key navigation

Events

  • show when shown
  • hide when hidden
  • remove (item) when an item is removed
  • select (item) when an item is selected
  • * menu item events are emitted when clicked

Example

var Menu = require('menu');

var menu = new Menu;

menu
.add('Add item')
.add('Edit item', function(){ console.log('edit'); })
.add('Remove item', function(){ console.log('remove'); })
.add('Remove "Add item"', function(){
  menu.remove('Add item');
  menu.remove('Remove "Add item"');
});

menu.on('select', function(item){
  console.log('selected "%s"', item);
});

menu.on('Add item', function(){
  console.log('added an item');
});

oncontextmenu = function(e){
  e.preventDefault();
  menu.moveTo(e.pageX, e.pageY);
  menu.show();
};

License

MIT

API

Menu()

Initialize a new Menu.

var Menu = require('menu');
var menu = new Menu();
var menu = Menu();

Emits:

  • "show" when shown
  • "hide" when hidden
  • "remove" with the item name when an item is removed
  • "select" (item) when an item is selected
  • * menu item events are emitted when clicked

Menu.prototype()

Inherit from Emitter.prototype.

Menu.move(direction:String)

Focus on the next menu item in direction.

Menu.get(slug:String)

returns MenuItem

Gets a menu item named slug.

Menu.add(text:String, fn:Function)

returns Menu

Add a new menu item with the given text, optional slug and callback fn.

When the item is clicked fn() will be invoked and the Menu is immediately closed. When clicked an event of the name text is emitted regardless of the callback function being present.

Using events to handle selection:

menu.add('Hello');

menu.on('Hello', function(){
  console.log('clicked hello');
});

Using callbacks:

menu.add('Hello', function(){
  console.log('clicked hello');
});

Using a custom slug, otherwise "hello" is generated from the text given, which may conflict with "rich" styling like icons within menu items, or i18n.

menu.add('add-item', 'Add Item');

menu.on('add-item', function(){
  console.log('clicked "Add Item"');
});

menu.add('add-item', 'Add Item', function(){
  console.log('clicked "Add Item"');
});

Menu.remove(slug:String)

returns Menu

Remove an item by the given slug:

menu.add('Add item');
menu.remove('Add item');

Or with custom slugs:

menu.add('add-item', 'Add item');
menu.remove('add-item');

Menu.change(slug:String)

returns Menu

Change menu item with slug.

Menu.clear()

returns Menu

Clear menu.

Menu.has(item:MenuItem)

returns Boolean

Check if a menu item is present.

menu.add('Add item');

menu.has('Add item');
// => true

menu.has('add-item');
// => true

menu.has('Foo');
// => false

Menu.indexOf(item:MenuItem)

returns Number

Find index of menu item.

Menu.moveTo(x:Number, y:Number)

returns Menu

Move context menu to (x, y).

Menu.moveToCenter(x:Number, y:Number)

returns Menu

Move context menu to (x, y).

Menu.show()

returns Menu

Show the menu.

Menu.hide()

returns Menu

Hide the menu.

Menu.showItem(item:Element)

returns Menu

Show a menu item.

Menu.hideItem(item:Element)

returns Menu

Hide a menu item.

Menu.unhideAll()

returns Menu

Unhide all items.

Menu.toggle()

returns Menu

Toggle the menu.

Menu.filter(fn:Function)

returns Menu

Filter menu using fn.

Menu.isOpen()

returns Boolean

Check if menu is visible.

Menu.isSelecting()

returns Boolean

Check if user is selecting.

MenuItem(item:Object)

MenuItem class.