Initial commit

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+test/*.js
+test/*.css

.npmignore

@@ -0,0 +1 @@
+test

History.md

@@ -0,0 +1,5 @@
+
+0.0.2 / 2012-07-05 
+==================
+
+  * fix dialog.effect support

Makefile

@@ -0,0 +1,8 @@
+
+test/out.js: menu.js menu.css
+	component build package.json test/out
+
+clean:
+	rm -f test/out.{js,css}
+
+.PHONY: clean

Readme.md

@@ -0,0 +1,157 @@
+
+# Menu
+
+  Menu component with structural styling to give you a clean slate.
+
+  ![js menu component](http://f.cl.ly/items/1Z1d3B1j283y3e200g3E/Screen%20Shot%202012-07-31%20at%203.57.10%20PM.png)
+
+## 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
+
+```js
+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();
+};
+```
+
+## API
+
+### Menu()
+
+  Create a new `Menu`:
+
+```js
+var Menu = require('menu');
+var menu = new Menu();
+var menu = Menu();
+```
+
+### Menu#add([slug], text, [fn])
+
+  Add a new menu item with the given `text`, optional `slug` and callback `fn`.
+
+  Using events to handle selection:
+
+```js
+menu.add('Hello');
+
+menu.on('Hello', function(){
+  console.log('clicked hello');
+});
+```
+
+  Using callbacks:
+
+```js
+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.
+
+```js
+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)
+
+  Remove an item by the given `slug`:
+
+```js
+menu.add('Add item');
+menu.remove('Add item');
+```
+
+  Or with custom slugs:
+
+```js
+menu.add('add-item', 'Add item');
+menu.remove('add-item');
+```
+
+### Menu#has(slug)
+
+  Check if a menu item is present.
+
+```js
+menu.add('Add item');
+
+menu.has('Add item');
+// => true
+
+menu.has('add-item');
+// => true
+
+menu.has('Foo');
+// => false
+```
+
+### Menu#moveTo(x, y)
+
+  Move the menu to `(x, y)`.
+
+### Menu#show()
+
+  Show the menu.
+
+### Menu#hide()
+
+  Hide the menu.
+
+## License
+
+  MIT

menu.css

@@ -0,0 +1,32 @@
+.menu {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  margin: 0;
+  padding: 0;
+  background: white;
+  border: 1px solid rgba(0,0,0,0.2);
+}
+
+.menu li {
+  list-style: none;
+}
+
+.menu li a {
+  display: block;
+  padding: 5px 30px 5px 12px;
+  text-decoration: none;
+  border-top: 1px solid #eee;
+  color: #2e2e2e;
+  outline: none;
+}
+
+.menu li:first-child a {
+  border-top: none;
+}
+
+.menu li a:hover,
+.menu li.selected a {
+  background: #f1faff;
+}