Added optional callback support to Menu items

an event is now emitted on click

build/ui.js

@@ -1148,10 +1148,12 @@ function Menu() {
 Menu.prototype = new ui.Emitter;
 
 /**
- * Add menu item with the given `text` and callback `fn`.
+ * Add menu item with the given `text` and optional callback `fn`.
  *
  * When the item is clicked `fn()` will be invoked
- * and the `Menu` is immediately closed. 
+ * and the `Menu` is immediately closed. When clicked
+ * an event of the name `text` is emitted regardless of
+ * the callback function being present.
  *
  * @param {String} text
  * @param {Function} fn
@@ -1160,7 +1162,6 @@ Menu.prototype = new ui.Emitter;
  */
 
 Menu.prototype.add = function(text, fn){
-  if (1 == arguments.length) return this.items[text];
   var self = this
     , el = $('<li><a href="#">' + text + '</a></li>')
     .addClass(slug(text))
@@ -1169,7 +1170,8 @@ Menu.prototype.add = function(text, fn){
       e.preventDefault();
       e.stopPropagation();
       self.hide();
-      fn();
+      self.emit(text);
+      fn && fn();
     });
 
   this.items[text] = el;

docs/index.html

@@ -11,14 +11,18 @@
     <script>
       $(function(){
         var menu = ui.menu()
-          .add('Add item', function(){ console.log('add'); })
+          .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')
               .remove('Remove "Add item"');
-          })
+          });
+
+        menu.on('Add item', function(){
+          console.log('added an item');
+        });
 
         oncontextmenu = function(e){
           e.preventDefault();
@@ -523,7 +527,7 @@ <h3>Example</h3>
           <p>A <code>Menu</code> is comprised of textual menu items and optional arbitrary callback functions. To add an item invoke <code>Menu#add()</code>, and to remove pass the same text to <code>Menu#remove()</code>. Give it a try! right click on this page.</p>
 
           <pre><code>var menu = ui.menu()
-.add('Add item', function(){ console.log('add'); })
+.add('Add item')
 .add('Edit item', function(){ console.log('edit'); })
 .add('Remove item', function(){ console.log('remove'); })
 .add('Remove "Add item"', function(){
@@ -532,6 +536,10 @@ <h3>Example</h3>
     .remove('Remove "Add item"');
 });
 
+menu.on('Add item', function(){
+  console.log('item added');
+});
+
 oncontextmenu = function(e){
   e.preventDefault();
   menu.moveTo(e.pageX, e.pageY).show();

lib/components/menu/menu.js

@@ -24,6 +24,7 @@ exports.menu = function(){
  *   - "show" when shown
  *   - "hide" when hidden
  *   - "remove" with the item name when an item is removed
+ *   - * menu item events are emitted when clicked
  *
  * @api public
  */
@@ -43,10 +44,12 @@ function Menu() {
 Menu.prototype = new ui.Emitter;
 
 /**
- * Add menu item with the given `text` and callback `fn`.
+ * Add menu item with the given `text` and optional callback `fn`.
  *
  * When the item is clicked `fn()` will be invoked
- * and the `Menu` is immediately closed. 
+ * and the `Menu` is immediately closed. When clicked
+ * an event of the name `text` is emitted regardless of
+ * the callback function being present.
  *
  * @param {String} text
  * @param {Function} fn
@@ -55,7 +58,6 @@ Menu.prototype = new ui.Emitter;
  */
 
 Menu.prototype.add = function(text, fn){
-  if (1 == arguments.length) return this.items[text];
   var self = this
     , el = $('<li><a href="#">' + text + '</a></li>')
     .addClass(slug(text))
@@ -64,7 +66,8 @@ Menu.prototype.add = function(text, fn){
       e.preventDefault();
       e.stopPropagation();
       self.hide();
-      fn();
+      self.emit(text);
+      fn && fn();
     });
 
   this.items[text] = el;