From e2c853da525be849496c8fc648240996952d8163 Mon Sep 17 00:00:00 2001
From: George Stagas <gstagas@gmail.com>
Date: Thu, 13 Dec 2012 16:12:09 +0200
Subject: [PATCH 01/13] allow menu item to be handled before `hide`

---
 index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.js b/index.js
index fd19118..0e51d2d 100644
--- a/index.js
+++ b/index.js
@@ -154,10 +154,10 @@ Menu.prototype.add = function(text, fn){
     .click(function(e){
       e.preventDefault();
       e.stopPropagation();
-      self.hide();
       self.emit('select', slug);
       self.emit(slug);
       fn && fn();
+      self.hide();
     });
 
   this.items[slug] = el;

From 756bef3288cde0b061ad3fdeff30e33e26910e9c Mon Sep 17 00:00:00 2001
From: George Stagas <gstagas@gmail.com>
Date: Tue, 5 Mar 2013 23:12:48 +0200
Subject: [PATCH 02/13] bunch of improvements

---
 Makefile        |   6 +-
 component.json  |   6 +-
 index.js        | 414 +++++++++++++++++++++++++++++++++++++++++++-----
 menu.css        |   1 +
 test/index.html |  39 ++++-
 5 files changed, 415 insertions(+), 51 deletions(-)

diff --git a/Makefile b/Makefile
index 00bb7f9..4d6f783 100644
--- a/Makefile
+++ b/Makefile
@@ -1,9 +1,9 @@
 
 build: index.js components
-	@component build
+	@component build --dev
 
-components:
-	@component install
+components: component.json
+	@component install --dev
 
 clean:
 	rm -fr build components
diff --git a/component.json b/component.json
index 6042766..e2d0859 100644
--- a/component.json
+++ b/component.json
@@ -8,7 +8,11 @@
   ],
   "dependencies": {
     "component/emitter": "*",
-    "component/jquery": "*"
+    "component/jquery": "*",
+    "pazguille/viewport": "*"
+  },
+  "development": {
+    "stagas/watch-js": "*"
   },
   "styles": [
     "menu.css"
diff --git a/index.js b/index.js
index 0e51d2d..07f71f6 100644
--- a/index.js
+++ b/index.js
@@ -4,6 +4,7 @@
  */
 
 var Emitter = require('emitter')
+  , viewport = require('viewport')
   , o = require('jquery');
 
 /**
@@ -29,12 +30,11 @@ module.exports = Menu;
 function Menu() {
   if (!(this instanceof Menu)) return new Menu;
   Emitter.call(this);
-  this.items = {};
+  this.items = [];
   this.el = o('<ul class=menu>').hide().appendTo('body');
-  this.el.hover(this.deselect.bind(this));
-  o('html').click(this.hide.bind(this));
-  this.on('show', this.bindKeyboardEvents.bind(this));
-  this.on('hide', this.unbindKeyboardEvents.bind(this));
+  this.on('show', this.bindEvents.bind(this));
+  this.on('hide', this.unbindEvents.bind(this));
+  this._isOpen = false;
 }
 
 /**
@@ -49,10 +49,56 @@ Menu.prototype = new Emitter;
  * @api private
  */
 
-Menu.prototype.deselect = function(){
+Menu.prototype.deselect = function(ev){
   this.el.find('.selected').removeClass('selected');
 };
 
+/**
+ * Bind event listeners.
+ *
+ * @api private
+ */
+
+Menu.prototype.bindEvents = function(){
+  this.bindKeyboardEvents();
+  this.bindMouseEvents();
+};
+
+/**
+ * Unbind event listeners.
+ *
+ * @api private
+ */
+
+Menu.prototype.unbindEvents = function(){
+  this.unbindKeyboardEvents();
+  this.unbindMouseEvents();
+};
+
+/**
+ * Bind mouse events.
+ *
+ * @api private
+ */
+
+Menu.prototype.bindMouseEvents = function(){
+  this.onbodyclickBound = this.onbodyclick.bind(this)
+  this.deselectBound = this.deselect.bind(this);
+  o('html').bind('mouseup', this.onbodyclickBound);
+  this.el.on('mouseover', 'a', this.deselectBound);
+};
+
+/**
+ * Unbind mouse events.
+ *
+ * @api private
+ */
+
+Menu.prototype.unbindMouseEvents = function(){
+  o('html').unbind('mouseup', this.onbodyclickBound);
+  this.el.off('mouseover', 'a', this.deselectBound);
+};
+
 /**
  * Bind keyboard events.
  *
@@ -83,23 +129,56 @@ Menu.prototype.unbindKeyboardEvents = function(){
 
 Menu.prototype.onkeydown = function(e){
   switch (e.keyCode) {
+    // enter
+    case 13:
+      this.emit('select', this.selected);
+      this.emit(this.selected.slug, this.selected.text, this.selected.meta);
+      this.selected.fn && this.selected.fn();
+      this.hide();
+    break;
+
     // esc
     case 27:
       this.hide();
-      break;
+    break;
+
     // up
     case 38:
       e.preventDefault();
       this.move('prev');
-      break;
+    break;
+
     // down
     case 40:
       e.preventDefault();
       this.move('next');
-      break;
+    break;
   }
 };
 
+/**
+ * Handle body click event.
+ *
+ * @api private
+ */
+
+Menu.prototype.onbodyclick = function() {
+  if (this._isOpen) this.hide();
+};
+
+/**
+ * Select (highlight) an item.
+ *
+ * @param {MenuItem} item
+ * @api private
+ */
+
+Menu.prototype.select = function(item){
+  this.selected = item;
+  this.selected.el.addClass('selected');
+  this.selected.el.find('a').focus();
+};
+
 /**
  * Focus on the next menu item in `direction`.
  *
@@ -108,17 +187,50 @@ Menu.prototype.onkeydown = function(e){
  */
 
 Menu.prototype.move = function(direction){
-  var prev = this.el.find('.selected').eq(0);
+  var sel = this.selected;
 
-  var next = prev.length
-    ? prev[direction]()
-    : this.el.find('li:first-child');
+  var items = this.items.slice();
+  items = items.filter(function (item) {
+    return ! item.hidden;
+  });
 
-  if (next.length) {
-    prev.removeClass('selected');
-    next.addClass('selected');
-    next.find('a').focus();
+  if (!sel) {
+    if ('next' == direction)
+      sel = items[items.length-1];
+    else sel = items[0];
+  }
+  else {
+    sel.el.removeClass('selected');
   }
+
+  var index = items.indexOf(sel);
+
+  if ('next' == direction){
+    if (++index >= items.length) index = 0;
+    sel = items[index];
+  }
+  else if ('prev' == direction){
+    if (--index < 0) index = items.length-1;
+    sel = items[index];
+  }
+
+  this.select(sel);
+};
+
+/**
+ * Gets a menu item named `slug`.
+ *
+ * @param {String} slug
+ * @return {Element}
+ * @api public
+ */
+
+Menu.prototype.get = function(slug){
+  slug = createSlug(slug);
+  var item = this.items.filter(function(item){
+    return item.slug === slug;
+  })[0];
+  return item;
 };
 
 /**
@@ -136,7 +248,7 @@ Menu.prototype.move = function(direction){
  */
 
 Menu.prototype.add = function(text, fn){
-  var slug;
+  var slug, meta;
 
   // slug, text, [fn]
   if ('string' == typeof fn) {
@@ -147,25 +259,48 @@ Menu.prototype.add = function(text, fn){
     slug = createSlug(text);
   }
 
+  if ('object' == typeof fn) {
+    meta = fn;
+    fn = arguments[2];
+  }
+
   var self = this
-    , el = o('<li><a href="#">' + text + '</a></li>')
-    .addClass('menu-item-' + slug)
-    .appendTo(this.el)
-    .click(function(e){
-      e.preventDefault();
-      e.stopPropagation();
-      self.emit('select', slug);
-      self.emit(slug);
-      fn && fn();
-      self.hide();
-    });
-
-  this.items[slug] = el;
+    , el = o('<li><a href="#">' + text + '</a></li>');
+
+  el
+  .addClass('menu-item-' + slug)
+  .appendTo(this.el)
+  .on('click', function(e){
+    e.preventDefault();
+  })
+  .on('mouseup', function(e){
+    e.preventDefault();
+    e.stopPropagation();
+    self.emit('select', item);
+    self.emit(slug, text, meta);
+    fn && fn();
+    self.hide();
+  });
+
+  if (this.has(slug)) {
+    this.hideItem(el);
+  }
+
+  var item = new MenuItem({
+    el: el
+  , text: text
+  , slug: slug
+  , meta: meta
+  , fn: fn
+  });
+
+  this.items.push(item);
+
   return this;
 };
 
 /**
- * Remove menu item with the given `slug`.
+ * Remove menu item by `slug`.
  *
  * @param {String} slug
  * @return {Menu}
@@ -173,27 +308,78 @@ Menu.prototype.add = function(text, fn){
  */
 
 Menu.prototype.remove = function(slug){
-  var item = this.items[slug] || this.items[createSlug(slug)];
-  if (!item) throw new Error('no menu item named "' + slug + '"');
-  this.emit('remove', slug);
-  item.remove();
-  delete this.items[slug];
-  delete this.items[createSlug(slug)];
+  var item = this.get(slug);
+  if (!(item instanceof MenuItem)) {
+    throw new Error('Not a MenuItem: "'+slug+'"');
+  }
+  var i = this.indexOf(item);
+  if (!~i) {
+    throw new Error('Not in Menu.items: "'+slug+'"');
+  }
+  item.el.remove();
+  this.emit('remove', this.items.splice(i, 1));
   return this;
 };
 
 /**
- * Check if this menu has an item with the given `slug`.
+ * Change menu item with `slug`.
  *
  * @param {String} slug
- * @return {Boolean}
+ * @return {Menu}
  * @api public
  */
 
-Menu.prototype.has = function(slug){
-  return !! (this.items[slug] || this.items[createSlug(slug)]);
+Menu.prototype.change = function(slug){
+  this.add.apply(this, [].slice.call(arguments, 1));
+  var item = this.items[this.items.length-1];
+  var old = this.get(slug);
+  this.el[0].insertBefore(item.el[0], old.el[0]);
+  old.el.remove();
+  old.el = item.el;
+  old.slug = item.slug;
+  old.text = item.text;
+  old.meta = item.meta;
+  old.fn = item.fn;
+  return this;
 };
 
+/**
+ * Clear menu.
+ *
+ * @return {Menu}
+ * @api public
+ */
+
+Menu.prototype.clear = function(){
+  this.el.empty();
+  this.items.length = 0;
+  return this;
+};
+
+/**
+ * Check if this menu has `item`.
+ *
+ * @param {MenuItem} item
+ * @return {Boolean}
+ * @api public
+ */
+
+Menu.prototype.has = function(item){
+  return !!~this.items.indexOf(item);
+}
+
+/**
+ * Find index of menu `item`.
+ *
+ * @param {MenuItem} item
+ * @return {Number}
+ * @api public
+ */
+
+Menu.prototype.indexOf = function(item){
+  return this.items.indexOf(item);
+}
+
 /**
  * Move context menu to `(x, y)`.
  *
@@ -204,10 +390,47 @@ Menu.prototype.has = function(slug){
  */
 
 Menu.prototype.moveTo = function(x, y){
+  viewport.refresh();
+
+  var height = o(this.el).outerHeight();
+  var width = o(this.el).outerWidth();
+
+  if (y+height > viewport.bottom) {
+    y = viewport.bottom-height;
+  }
+
+  if (y < viewport.top) {
+    y = viewport.top;
+  }
+
+  if (x+width > viewport.right) {
+    x = viewport.right-width;
+  }
+
+  if (x < viewport.left) {
+    x = viewport.left;
+  }
+
   this.el.css({
     top: y,
     left: x
   });
+
+  return this;
+};
+
+/**
+ * Move context menu to `(x, y)`.
+ *
+ * @param {Number} x
+ * @param {Number} y
+ * @return {Menu}
+ * @api public
+ */
+
+Menu.prototype.moveToCenter = function(x, y){
+  y -= this.el.outerHeight(true)/2
+  this.moveTo(x, y);
   return this;
 };
 
@@ -221,6 +444,7 @@ Menu.prototype.moveTo = function(x, y){
 Menu.prototype.show = function(){
   this.emit('show');
   this.el.show();
+  this._isOpen = true;
   return this;
 };
 
@@ -232,11 +456,115 @@ Menu.prototype.show = function(){
  */
 
 Menu.prototype.hide = function(){
-  this.emit('hide');
+  this._isOpen = false;
   this.el.hide();
+  this.emit('hide');
+  return this;
+};
+
+/**
+ * Show a menu item.
+ *
+ * @param {Element} item
+ * @return {Menu}
+ * @api public
+ */
+
+Menu.prototype.showItem = function(item){
+  item.hidden = false;
+  item.el.css({ display: 'block' });
+  return this;
+};
+
+/**
+ * Hide a menu item.
+ *
+ * @param {Element} item
+ * @return {Menu}
+ * @api public
+ */
+
+Menu.prototype.hideItem = function(item){
+  item.hidden = true;
+  item.el.css({ display: 'none' });
+  return this;
+};
+
+/**
+ * Unhide all items.
+ *
+ * @return {Menu}
+ * @api public
+ */
+
+Menu.prototype.unhideAll = function(){
+  var self = this;
+  this.items.forEach(function(item){
+    self.showItem(item);
+  });
   return this;
 };
 
+/**
+ * Toggle the menu.
+ *
+ * @return {Menu}
+ * @api public
+ */
+
+Menu.prototype.toggle = function(){
+  if (this.isOpen()) this.hide();
+  else this.show();
+  return this;
+};
+
+/**
+ * Filter menu using `fn`.
+ *
+ * @param {Function} fn
+ * @return {Menu}
+ * @api public
+ */
+
+Menu.prototype.filter = function(fn){
+  var self = this;
+  this.items.forEach(function (item) {
+    if (fn(item)) {
+      self.showItem(item);
+    }
+    else {
+      self.hideItem(item);
+    }
+  });
+  return this;
+};
+
+/**
+ * Check if menu is visible.
+ *
+ * @return {Boolean}
+ * @api public
+ */
+
+Menu.prototype.isOpen = function(){
+  return this._isOpen;
+};
+
+/**
+ * MenuItem class.
+ *
+ * @param {Object} item
+ * @api public
+ */
+
+function MenuItem(item) {
+  this.el = item.el
+  this.text = item.text
+  this.slug = item.slug
+  this.meta = item.meta
+  this.fn = item.fn
+}
+
 /**
  * Generate a slug from `str`.
  *
diff --git a/menu.css b/menu.css
index 97b3bd7..c85a767 100644
--- a/menu.css
+++ b/menu.css
@@ -19,6 +19,7 @@
   text-decoration: none;
   border-top: 1px solid #eee;
   color: #2e2e2e;
+  min-width: 120px;
   outline: none;
 }
 
diff --git a/test/index.html b/test/index.html
index 4c2d08e..1e684a9 100644
--- a/test/index.html
+++ b/test/index.html
@@ -3,23 +3,54 @@
   <head>
     <title>Menu</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="stylesheet" href="../build/build.css" />
+    <style>
+
+    html {
+      width: 100%;
+      height: 100%;
+    }
+
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    </style>
   </head>
   <body>
     <title>Menu</title>
+    <p>some<p>really<p>long<p>content
+    <p>some<p>really<p>long<p>content
+    <p>some<p>really<p>long<p>content
+    <p>some<p>really<p>long<p>content
+    <p>some<p>really<p>long<p>content
+    <p>some<p>really<p>long<p>content
+    <p>some<p>really<p>long<p>content
     <script src="../build/build.js"></script>
     <script>
+      require('stagas-watch-js');
       var menu = require('menu');
-  
+
       menu = menu();
-  
+
       menu
-      .add('add-item', 'Add <em>item</em>')
+      .add('add-item', 'Add <em>item</em>', function(){ menu.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"');
+      })
+      .add('Filter', function filterItem (){
+        menu.filter(function(item){
+          return item.slug.substr(0,1) !== 'r'
+        });
+        menu.change('Filter', 'Show all', function(){
+          menu.unhideAll();
+          menu.change('Show all', 'Filter', filterItem);
+        });
       });
 
       menu.on('select', function(item){
@@ -32,7 +63,7 @@
 
       oncontextmenu = function(e){
         e.preventDefault();
-        menu.moveTo(e.pageX, e.pageY);
+        menu.moveToCenter(e.pageX, e.pageY);
         menu.show();
       };
     </script>

From 104bbb131afe2fc8d3d1abb18172568332d55a5a Mon Sep 17 00:00:00 2001
From: George Stagas <gstagas@gmail.com>
Date: Wed, 6 Mar 2013 23:29:45 +0200
Subject: [PATCH 03/13] various fixes

---
 index.js | 79 +++++++++++++++++++++++++++++++++++++-------------------
 menu.css |  7 ++++-
 2 files changed, 58 insertions(+), 28 deletions(-)

diff --git a/index.js b/index.js
index 07f71f6..fe03361 100644
--- a/index.js
+++ b/index.js
@@ -50,7 +50,9 @@ Menu.prototype = new Emitter;
  */
 
 Menu.prototype.deselect = function(ev){
-  this.el.find('.selected').removeClass('selected');
+  if (!this.selected) return;
+  this.selected.el.removeClass('selected');
+  this.selected = null;
 };
 
 /**
@@ -62,6 +64,13 @@ Menu.prototype.deselect = function(ev){
 Menu.prototype.bindEvents = function(){
   this.bindKeyboardEvents();
   this.bindMouseEvents();
+  this.once('hide', function () {
+    if (this.selected) {
+      this.emit('select', this.selected)
+      this.emit(this.selected.slug, this.selected.text, this.selected.meta)
+      this.selected.fn && this.selected.fn()
+    }
+  })
 };
 
 /**
@@ -84,8 +93,11 @@ Menu.prototype.unbindEvents = function(){
 Menu.prototype.bindMouseEvents = function(){
   this.onbodyclickBound = this.onbodyclick.bind(this)
   this.deselectBound = this.deselect.bind(this);
-  o('html').bind('mouseup', this.onbodyclickBound);
-  this.el.on('mouseover', 'a', this.deselectBound);
+  var self = this;
+  setTimeout(function () {
+    o('html').bind('mouseup', self.onbodyclickBound);
+  }, 0)
+  this.el.one('mouseover', 'a', this.deselectBound);
 };
 
 /**
@@ -96,7 +108,6 @@ Menu.prototype.bindMouseEvents = function(){
 
 Menu.prototype.unbindMouseEvents = function(){
   o('html').unbind('mouseup', this.onbodyclickBound);
-  this.el.off('mouseover', 'a', this.deselectBound);
 };
 
 /**
@@ -106,7 +117,8 @@ Menu.prototype.unbindMouseEvents = function(){
  */
 
 Menu.prototype.bindKeyboardEvents = function(){
-  o(document).bind('keydown.menu', this.onkeydown.bind(this));
+  this.onkeydownBound = this.onkeydown.bind(this);
+  o('html').bind('keydown', this.onkeydownBound);
   return this;
 };
 
@@ -117,7 +129,7 @@ Menu.prototype.bindKeyboardEvents = function(){
  */
 
 Menu.prototype.unbindKeyboardEvents = function(){
-  o(document).unbind('keydown.menu');
+  o('html').unbind('keydown', this.onkeydownBound);
   return this;
 };
 
@@ -131,14 +143,17 @@ Menu.prototype.onkeydown = function(e){
   switch (e.keyCode) {
     // enter
     case 13:
-      this.emit('select', this.selected);
-      this.emit(this.selected.slug, this.selected.text, this.selected.meta);
-      this.selected.fn && this.selected.fn();
       this.hide();
     break;
 
     // esc
     case 27:
+      this.deselect();
+      this.hide();
+    break;
+
+    // tab
+    case 9:
       this.hide();
     break;
 
@@ -146,12 +161,14 @@ Menu.prototype.onkeydown = function(e){
     case 38:
       e.preventDefault();
       this.move('prev');
+      this._isSelecting = true;
     break;
 
     // down
     case 40:
       e.preventDefault();
       this.move('next');
+      this._isSelecting = true;
     break;
   }
 };
@@ -163,7 +180,7 @@ Menu.prototype.onkeydown = function(e){
  */
 
 Menu.prototype.onbodyclick = function() {
-  if (this._isOpen) this.hide();
+  if (this.isOpen()) this.hide();
 };
 
 /**
@@ -273,13 +290,12 @@ Menu.prototype.add = function(text, fn){
   .on('click', function(e){
     e.preventDefault();
   })
+  .on('mousedown', function(e){
+    self._isSelecting = true;
+  })
   .on('mouseup', function(e){
     e.preventDefault();
-    e.stopPropagation();
-    self.emit('select', item);
-    self.emit(slug, text, meta);
-    fn && fn();
-    self.hide();
+    self.select(item);
   });
 
   if (this.has(slug)) {
@@ -331,15 +347,12 @@ Menu.prototype.remove = function(slug){
 
 Menu.prototype.change = function(slug){
   this.add.apply(this, [].slice.call(arguments, 1));
-  var item = this.items[this.items.length-1];
+  var item = this.items.pop();
   var old = this.get(slug);
   this.el[0].insertBefore(item.el[0], old.el[0]);
-  old.el.remove();
-  old.el = item.el;
-  old.slug = item.slug;
-  old.text = item.text;
-  old.meta = item.meta;
-  old.fn = item.fn;
+  old.el.remove()
+  this.items.splice(this.indexOf(old), 1, item);
+  this.select(item);
   return this;
 };
 
@@ -390,8 +403,6 @@ Menu.prototype.indexOf = function(item){
  */
 
 Menu.prototype.moveTo = function(x, y){
-  viewport.refresh();
-
   var height = o(this.el).outerHeight();
   var width = o(this.el).outerWidth();
 
@@ -442,9 +453,10 @@ Menu.prototype.moveToCenter = function(x, y){
  */
 
 Menu.prototype.show = function(){
-  this.emit('show');
+  if (this.isOpen()) return this;
   this.el.show();
   this._isOpen = true;
+  this.emit('show');
   return this;
 };
 
@@ -456,9 +468,11 @@ Menu.prototype.show = function(){
  */
 
 Menu.prototype.hide = function(){
-  this._isOpen = false;
-  this.el.hide();
+  if (!this.isOpen()) return this;
   this.emit('hide');
+  this.el.hide();
+  this._isOpen = false;
+  this._isSelecting = false
   return this;
 };
 
@@ -550,6 +564,17 @@ Menu.prototype.isOpen = function(){
   return this._isOpen;
 };
 
+/**
+ * Check if user is selecting.
+ *
+ * @return {Boolean}
+ * @api public
+ */
+
+Menu.prototype.isSelecting = function(){
+  return this._isSelecting;
+};
+
 /**
  * MenuItem class.
  *
diff --git a/menu.css b/menu.css
index c85a767..36f941b 100644
--- a/menu.css
+++ b/menu.css
@@ -1,3 +1,4 @@
+
 .menu {
   position: absolute;
   top: 0;
@@ -5,8 +6,13 @@
   z-index: 100;
   margin: 0;
   padding: 0;
+  min-width: 120px;
   background: white;
   border: 1px solid rgba(0,0,0,0.2);
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .menu li {
@@ -19,7 +25,6 @@
   text-decoration: none;
   border-top: 1px solid #eee;
   color: #2e2e2e;
-  min-width: 120px;
   outline: none;
 }
 

From a6a485ad60631c9e0a1e2142cdfb913b70f991eb Mon Sep 17 00:00:00 2001
From: George Stagas <gstagas@gmail.com>
Date: Thu, 7 Mar 2013 00:16:29 +0200
Subject: [PATCH 04/13] docs and fixes

---
 Readme.md | 153 ++++++++++++++++++++++++++++++++++++++++++++++--------
 index.js  |  98 ++++++++++++++++++++++++++++------
 2 files changed, 213 insertions(+), 38 deletions(-)

diff --git a/Readme.md b/Readme.md
index d8fb49a..9a2b170 100644
--- a/Readme.md
+++ b/Readme.md
@@ -57,11 +57,15 @@ oncontextmenu = function(e){
 };
 ```
 
+## License
+
+MIT
+
 ## API
-  
+
 ### Menu()
 
-  Create a new `Menu`:
+Initialize a new `Menu`.
 
 ```js
 var Menu = require('menu');
@@ -69,11 +73,40 @@ var menu = new Menu();
 var menu = Menu();
 ```
 
-### Menu#add([slug], text, [fn])
+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`.
+Add a new menu item with the given `text`, optional `slug` and callback `fn`.
 
-  Using events to handle selection:
+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:
 
 ```js
 menu.add('Hello');
@@ -83,7 +116,7 @@ menu.on('Hello', function(){
 });
 ```
 
-  Using callbacks:
+Using callbacks:
 
 ```js
 menu.add('Hello', function(){
@@ -91,9 +124,9 @@ menu.add('Hello', function(){
 });
 ```
 
-  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.
+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');
@@ -107,25 +140,39 @@ menu.add('add-item', 'Add Item', function(){
 });
 ```
 
-### Menu#remove(slug)
+### Menu.remove(`slug`:`String`)
+> _returns_ Menu
 
-  Remove an item by the given `slug`:
+Remove an item by the given `slug`:
 
 ```js
 menu.add('Add item');
 menu.remove('Add item');
 ```
 
-  Or with custom slugs:
+Or with custom slugs:
 
 ```js
 menu.add('add-item', 'Add item');
 menu.remove('add-item');
 ```
 
-### Menu#has(slug)
+### 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.
+Check if a menu item is present.
 
 ```js
 menu.add('Add item');
@@ -140,18 +187,80 @@ menu.has('Foo');
 // => false
 ```
 
-### Menu#moveTo(x, y)
+### Menu.indexOf(`item`:`MenuItem`)
+> _returns_ Number
 
-  Move the menu to `(x, y)`.
+Find index of menu `item`.
 
-### Menu#show()
 
-  Show the menu.
+### Menu.moveTo(`x`:`Number`, `y`:`Number`)
+> _returns_ Menu
 
-### Menu#hide()
+Move context menu to `(x, y)`.
 
-  Hide the menu.
 
-## License
+### 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.
+
 
-  MIT
\ No newline at end of file
diff --git a/index.js b/index.js
index fe03361..d0eb3dd 100644
--- a/index.js
+++ b/index.js
@@ -16,13 +16,19 @@ module.exports = Menu;
 /**
  * Initialize a new `Menu`.
  *
+ * ```js
+ * 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
+ * - "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
  *
  * @api public
  */
@@ -67,7 +73,8 @@ Menu.prototype.bindEvents = function(){
   this.once('hide', function () {
     if (this.selected) {
       this.emit('select', this.selected)
-      this.emit(this.selected.slug, this.selected.text, this.selected.meta)
+      this.emit(this.selected.slug, this.selected)
+      this.emit(this.selected.text, this.selected)
       this.selected.fn && this.selected.fn()
     }
   })
@@ -238,7 +245,7 @@ Menu.prototype.move = function(direction){
  * Gets a menu item named `slug`.
  *
  * @param {String} slug
- * @return {Element}
+ * @return {MenuItem}
  * @api public
  */
 
@@ -251,13 +258,47 @@ Menu.prototype.get = function(slug){
 };
 
 /**
- * Add menu item with the given `text` and optional callback `fn`.
+ * 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:
+ *
+ * ```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"');
+ * });
+ * ```
+ *
  * @param {String} text
  * @param {Function} fn
  * @return {Menu}
@@ -298,10 +339,6 @@ Menu.prototype.add = function(text, fn){
     self.select(item);
   });
 
-  if (this.has(slug)) {
-    this.hideItem(el);
-  }
-
   var item = new MenuItem({
     el: el
   , text: text
@@ -310,13 +347,29 @@ Menu.prototype.add = function(text, fn){
   , fn: fn
   });
 
+  if (this.has(slug)) {
+    this.hideItem(item);
+  }
+
   this.items.push(item);
 
   return this;
 };
 
 /**
- * Remove menu item by `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');
+ * ```
  *
  * @param {String} slug
  * @return {Menu}
@@ -370,7 +423,20 @@ Menu.prototype.clear = function(){
 };
 
 /**
- * Check if this menu has `item`.
+ * 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
+ * ```
  *
  * @param {MenuItem} item
  * @return {Boolean}
@@ -479,7 +545,7 @@ Menu.prototype.hide = function(){
 /**
  * Show a menu item.
  *
- * @param {Element} item
+ * @param {MenuItem} item
  * @return {Menu}
  * @api public
  */
@@ -493,7 +559,7 @@ Menu.prototype.showItem = function(item){
 /**
  * Hide a menu item.
  *
- * @param {Element} item
+ * @param {MenuItem} item
  * @return {Menu}
  * @api public
  */

From ccfa63715310a8f008eea6e62c9ad99b497691dc Mon Sep 17 00:00:00 2001
From: George Stagas <gstagas@gmail.com>
Date: Thu, 7 Mar 2013 08:50:55 +0200
Subject: [PATCH 05/13] emit selected from various sources

---
 index.js | 45 ++++++++++++++++++++++++---------------------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/index.js b/index.js
index d0eb3dd..23f329c 100644
--- a/index.js
+++ b/index.js
@@ -70,14 +70,6 @@ Menu.prototype.deselect = function(ev){
 Menu.prototype.bindEvents = function(){
   this.bindKeyboardEvents();
   this.bindMouseEvents();
-  this.once('hide', function () {
-    if (this.selected) {
-      this.emit('select', this.selected)
-      this.emit(this.selected.slug, this.selected)
-      this.emit(this.selected.text, this.selected)
-      this.selected.fn && this.selected.fn()
-    }
-  })
 };
 
 /**
@@ -140,6 +132,21 @@ Menu.prototype.unbindKeyboardEvents = function(){
   return this;
 };
 
+/**
+ * Emit selected if any.
+ *
+ * @api private
+ */
+
+Menu.prototype.emitSelected = function(){
+  if (this.selected) {
+    this.emit('select', this.selected);
+    this.emit(this.selected.slug, this.selected);
+    this.emit(this.selected.text, this.selected);
+    this.selected.fn && this.selected.fn();
+  }
+};
+
 /**
  * Handle keydown events.
  *
@@ -148,31 +155,26 @@ Menu.prototype.unbindKeyboardEvents = function(){
 
 Menu.prototype.onkeydown = function(e){
   switch (e.keyCode) {
-    // enter
-    case 13:
+    case 13: // enter
+    case 39: // right
+    case 9: // tab
+      this.emitSelected();
       this.hide();
     break;
 
-    // esc
-    case 27:
+    case 27: // tab
+    case 37: // left
       this.deselect();
       this.hide();
     break;
 
-    // tab
-    case 9:
-      this.hide();
-    break;
-
-    // up
-    case 38:
+    case 38: // up
       e.preventDefault();
       this.move('prev');
       this._isSelecting = true;
     break;
 
-    // down
-    case 40:
+    case 40: // down
       e.preventDefault();
       this.move('next');
       this._isSelecting = true;
@@ -337,6 +339,7 @@ Menu.prototype.add = function(text, fn){
   .on('mouseup', function(e){
     e.preventDefault();
     self.select(item);
+    self.emitSelected();
   });
 
   var item = new MenuItem({

From b7de67fdc87e788adc4711892a6b3012849c7dd3 Mon Sep 17 00:00:00 2001
From: George Stagas <gstagas@gmail.com>
Date: Thu, 7 Mar 2013 08:51:47 +0200
Subject: [PATCH 06/13] add .hasVisibleItems

---
 index.js | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/index.js b/index.js
index 23f329c..74fa9c9 100644
--- a/index.js
+++ b/index.js
@@ -523,9 +523,14 @@ Menu.prototype.moveToCenter = function(x, y){
 
 Menu.prototype.show = function(){
   if (this.isOpen()) return this;
+
+  if (!this.hasVisibleItems()) return this;
+
   this.el.show();
   this._isOpen = true;
+
   this.emit('show');
+
   return this;
 };
 
@@ -538,10 +543,14 @@ Menu.prototype.show = function(){
 
 Menu.prototype.hide = function(){
   if (!this.isOpen()) return this;
+
   this.emit('hide');
+
   this.el.hide();
   this._isOpen = false;
+
   this._isSelecting = false
+
   return this;
 };
 
@@ -611,6 +620,7 @@ Menu.prototype.toggle = function(){
 
 Menu.prototype.filter = function(fn){
   var self = this;
+
   this.items.forEach(function (item) {
     if (fn(item)) {
       self.showItem(item);
@@ -619,9 +629,25 @@ Menu.prototype.filter = function(fn){
       self.hideItem(item);
     }
   });
+
+  if (!this.hasVisibleItems()) this.hide();
+
   return this;
 };
 
+/**
+ * Check if there are visible items.
+ *
+ * @return {Boolean}
+ * @api private
+ */
+
+Menu.prototype.hasVisibleItems = function(){
+  return this.items.filter(function (item) {
+    return !item.hidden;
+  }).length!=0
+};
+
 /**
  * Check if menu is visible.
  *

From e1dff6605a32ccab475391e5e05c688f01af57be Mon Sep 17 00:00:00 2001
From: George Stagas <gstagas@gmail.com>
Date: Thu, 7 Mar 2013 09:38:55 +0200
Subject: [PATCH 07/13] use own viewport fork for now

---
 component.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/component.json b/component.json
index e2d0859..65768ee 100644
--- a/component.json
+++ b/component.json
@@ -9,7 +9,7 @@
   "dependencies": {
     "component/emitter": "*",
     "component/jquery": "*",
-    "pazguille/viewport": "*"
+    "stagas/viewport": "*"
   },
   "development": {
     "stagas/watch-js": "*"

From 5b17f8cb0128b11127a242db508f13a6f78d2076 Mon Sep 17 00:00:00 2001
From: George Stagas <gstagas@gmail.com>
Date: Fri, 8 Mar 2013 12:31:22 +0200
Subject: [PATCH 08/13] special case enter key

---
 index.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/index.js b/index.js
index 74fa9c9..fc488af 100644
--- a/index.js
+++ b/index.js
@@ -155,13 +155,19 @@ Menu.prototype.emitSelected = function(){
 
 Menu.prototype.onkeydown = function(e){
   switch (e.keyCode) {
-    case 13: // enter
     case 39: // right
     case 9: // tab
       this.emitSelected();
       this.hide();
     break;
 
+    case 13: // enter
+      e.preventDefault();
+      this.emitSelected();
+      this.hide();
+      return false;
+    break;
+
     case 27: // tab
     case 37: // left
       this.deselect();

From 1f39018268eef6b1d2f0b0c9492fa162c10f4890 Mon Sep 17 00:00:00 2001
From: George Stagas <gstagas@gmail.com>
Date: Fri, 8 Mar 2013 12:32:35 +0200
Subject: [PATCH 09/13] fix parsing arguments

---
 index.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/index.js b/index.js
index fc488af..5fdf5d5 100644
--- a/index.js
+++ b/index.js
@@ -321,6 +321,10 @@ Menu.prototype.add = function(text, fn){
     slug = text;
     text = fn;
     fn = arguments[2];
+    if ('function' != typeof fn) {
+      meta = fn;
+      fn = arguments[3];
+    }
   } else {
     slug = createSlug(text);
   }

From 40f10f8473b6d5299ba3471ce5c354910c7e61d3 Mon Sep 17 00:00:00 2001
From: George Stagas <gstagas@gmail.com>
Date: Fri, 8 Mar 2013 12:33:17 +0200
Subject: [PATCH 10/13] fix positioning

---
 index.js | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/index.js b/index.js
index 5fdf5d5..d3e407f 100644
--- a/index.js
+++ b/index.js
@@ -482,16 +482,9 @@ Menu.prototype.indexOf = function(item){
  */
 
 Menu.prototype.moveTo = function(x, y){
-  var height = o(this.el).outerHeight();
   var width = o(this.el).outerWidth();
 
-  if (y+height > viewport.bottom) {
-    y = viewport.bottom-height;
-  }
-
-  if (y < viewport.top) {
-    y = viewport.top;
-  }
+  viewport.refresh();
 
   if (x+width > viewport.right) {
     x = viewport.right-width;
@@ -502,10 +495,25 @@ Menu.prototype.moveTo = function(x, y){
   }
 
   this.el.css({
-    top: y,
     left: x
   });
 
+  viewport.refresh();
+
+  var height = o(this.el).outerHeight();
+
+  if (y+height > viewport.bottom) {
+    y = viewport.bottom-height;
+  }
+
+  if (y < viewport.top) {
+    y = viewport.top;
+  }
+
+  this.el.css({
+    top: y
+  });
+
   return this;
 };
 

From ae805b5e33341d66947b8ad5abd7770ca6624ae1 Mon Sep 17 00:00:00 2001
From: George Stagas <gstagas@gmail.com>
Date: Fri, 8 Mar 2013 12:34:23 +0200
Subject: [PATCH 11/13] default style tweaks

---
 menu.css | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/menu.css b/menu.css
index 36f941b..5ef2122 100644
--- a/menu.css
+++ b/menu.css
@@ -8,7 +8,9 @@
   padding: 0;
   min-width: 120px;
   background: white;
-  border: 1px solid rgba(0,0,0,0.2);
+  border: 1px solid rgba(0,0,0,.3);
+  font-family: sans-serif;
+  font-size: 14px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -o-box-sizing: border-box;
@@ -21,7 +23,7 @@
 
 .menu li a {
   display: block;
-  padding: 5px 30px 5px 12px;
+  padding: 7.5px 15px 7.5px;
   text-decoration: none;
   border-top: 1px solid #eee;
   color: #2e2e2e;
@@ -34,5 +36,6 @@
 
 .menu li a:hover,
 .menu li.selected a {
-  background: #f1faff;
+  color: #fff;
+  background: #46a;
 }

From 85d57bec506a87b0eaa447c0af38cfa1370cddf0 Mon Sep 17 00:00:00 2001
From: George Stagas <gstagas@gmail.com>
Date: Fri, 8 Mar 2013 12:34:57 +0200
Subject: [PATCH 12/13] test page account for scroll

---
 test/index.html | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/test/index.html b/test/index.html
index 1e684a9..ba180ee 100644
--- a/test/index.html
+++ b/test/index.html
@@ -10,24 +10,24 @@
     html {
       width: 100%;
       height: 100%;
+      font-family: sans-serif;
     }
 
     body {
       margin: 0;
-      padding: 0;
+      padding: 50px;
     }
 
+    .bigbox {
+      width: 2000px;
+      height: 2000px;
+    }
     </style>
   </head>
   <body>
     <title>Menu</title>
-    <p>some<p>really<p>long<p>content
-    <p>some<p>really<p>long<p>content
-    <p>some<p>really<p>long<p>content
-    <p>some<p>really<p>long<p>content
-    <p>some<p>really<p>long<p>content
-    <p>some<p>really<p>long<p>content
-    <p>some<p>really<p>long<p>content
+    Try right clicking anywhere on this page
+    <div class="bigbox"></div>
     <script src="../build/build.js"></script>
     <script>
       require('stagas-watch-js');

From f3c6c1d1b018f68aaf349f7dd7f77d8a7d6c05fc Mon Sep 17 00:00:00 2001
From: George Stagas <gstagas@gmail.com>
Date: Fri, 8 Mar 2013 12:36:43 +0200
Subject: [PATCH 13/13] version 0.2.0

---
 component.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/component.json b/component.json
index 65768ee..afc05c9 100644
--- a/component.json
+++ b/component.json
@@ -1,7 +1,7 @@
 {
   "name": "menu",
   "description": "Menu component",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "keywords": [
     "menu",
     "ui"