IE8 Compatibility

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

component.json

@@ -7,8 +7,13 @@
     "ui"
   ],
   "dependencies": {
+    "component/bind": "*",
+    "component/dom": "*",
     "component/emitter": "*",
-    "component/dom": "*"
+    "stephenmathieson/normalize": "*"
+  },
+  "development": {
+    "yields/prevent": "*"
   },
   "styles": [
     "menu.css"

index.js

@@ -3,8 +3,10 @@
  * Module dependencies.
  */
 
-var Emitter = require('emitter')
-  , dom     = require('dom')
+var bind      = require('bind')
+  , Emitter   = require('emitter')
+  , dom       = require('dom')
+  , normalize = require('normalize')
 
 /**
  * Expose `Menu`.
@@ -33,10 +35,10 @@ function Menu() {
   this.menu = dom('<ul class=menu>').css('display','none');
   this.el = this.menu[0];
   document.body.appendChild(this.el);
-  this.menu.on('hover', this.deselect.bind(this));
-  document.getElementsByTagName('html')[0].onclick = this.hide.bind(this);
-  this.on('show', this.bindKeyboardEvents.bind(this));
-  this.on('hide', this.unbindKeyboardEvents.bind(this));
+  this.menu.on('hover', bind(this, this.deselect));
+  document.getElementsByTagName('html')[0].onclick = bind(this, this.hide);
+  this.on('show', bind(this, this.bindKeyboardEvents));
+  this.on('hide', bind(this, this.unbindKeyboardEvents));
 }
 
 /**
@@ -62,7 +64,7 @@ Menu.prototype.deselect = function(){
  */
 
 Menu.prototype.bindKeyboardEvents = function(){
-  dom(document).on('keydown', this._fnKeyDown = this.onkeydown.bind(this));
+  dom(document).on('keydown', this._fnKeyDown = bind(this, this.onkeydown));
   return this;
 };
 
@@ -157,14 +159,14 @@ Menu.prototype.add = function(text, fn){
              .addClass('menu-item-' + slug)
 
   el.find('a')
-    .on('click', function(e){
+    .on('click', normalize(function(e){
       e.preventDefault();
       e.stopPropagation();
       self.hide();
       self.emit('select', slug);
       self.emit(slug);
       fn && fn();
-    });
+    }));
 
   this.el.appendChild(el[0]);
   this.items[slug] = el[0];
@@ -225,7 +227,8 @@ Menu.prototype.has = function(slug){
  */
 
 Menu.prototype.moveTo = function(x, y){
-  this.menu.css('top', y).css('left',x);
+  this.menu.css('top', y);
+  this.menu.css('left', x);
   return this;
 };
 

test/index.html

@@ -10,14 +10,17 @@
     <script src="../build/build.js"></script>
     <script>
       var menu = require('menu');
+      var bind = require('bind');
+      var normalize = require('normalize');
+      var prevent = require('prevent');
 
       menu = menu();
 
       menu
       .add('add-item', 'Add <em>item</em>')
       .add('Edit item', function(){ console.log('edit'); })
       .add('Remove item', function(){ console.log('remove'); })
-      .add('Clear Menu', menu.clear.bind(menu))
+      .add('Clear Menu', bind(menu, menu.clear))
       .add('Remove "Add item"', function(){
         menu.remove('add-item');
         menu.remove('Remove "Add item"');
@@ -36,11 +39,11 @@
         menu.add('born-again', '<em>Born Again</em>');
       });
 
-      oncontextmenu = function(e){
-        e.preventDefault();
-        menu.moveTo(e.pageX, e.pageY);
+      document.oncontextmenu = normalize(function(e) {
+        prevent(e);
+        menu.moveTo(e.clientX, e.clientY);
         menu.show();
-      };
+      });
     </script>
   </body>
 </html>