Permalink
Browse files

Replace jquery with component/dom

Note triggering focus event doesnt quite work yet
  • Loading branch information...
1 parent 6dfe233 commit e7ecf9bc21d9884ad7efa33df57211be32eb31ce @ericgj ericgj committed Feb 14, 2013
Showing with 32 additions and 27 deletions.
  1. +2 −2 component.json
  2. +30 −25 index.js
View
@@ -8,7 +8,7 @@
],
"dependencies": {
"component/emitter": "*",
- "component/jquery": "*"
+ "component/dom": "*"
},
"styles": [
"menu.css"
@@ -17,4 +17,4 @@
"index.js"
],
"license": "MIT"
-}
+}
View
@@ -4,7 +4,7 @@
*/
var Emitter = require('emitter')
- , o = require('jquery');
+ , dom = require('dom')
/**
* Expose `Menu`.
@@ -30,9 +30,10 @@ function Menu() {
if (!(this instanceof Menu)) return new Menu;
Emitter.call(this);
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.el = dom('<ul class=menu>').css('display','none');
+ document.body.appendChild(this.el.get(0));
+ this.el.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));
}
@@ -60,7 +61,7 @@ Menu.prototype.deselect = function(){
*/
Menu.prototype.bindKeyboardEvents = function(){
- o(document).bind('keydown.menu', this.onkeydown.bind(this));
+ dom(document).on('keydown', this._fnKeyDown = this.onkeydown.bind(this));
return this;
};
@@ -71,7 +72,7 @@ Menu.prototype.bindKeyboardEvents = function(){
*/
Menu.prototype.unbindKeyboardEvents = function(){
- o(document).unbind('keydown.menu');
+ if (this._fnKeyDown) dom(document).off('keydown', this._fnKeyDown);
return this;
};
@@ -89,12 +90,14 @@ Menu.prototype.onkeydown = function(e){
break;
// up
case 38:
- e.preventDefault();
- this.move('prev');
+ e.preventDefault();
+ e.stopImmediatePropagation();
+ this.move('previous');
break;
// down
case 40:
e.preventDefault();
+ e.stopImmediatePropagation();
this.move('next');
break;
}
@@ -103,21 +106,24 @@ Menu.prototype.onkeydown = function(e){
/**
* Focus on the next menu item in `direction`.
*
- * @param {String} direction "prev" or "next"
+ * @param {String} direction "previous" or "next"
* @api public
*/
Menu.prototype.move = function(direction){
- var prev = this.el.find('.selected').eq(0);
+ var prev = this.el.find('.selected');
- var next = prev.length
- ? prev[direction]()
- : this.el.find('li:first-child');
+ var next = prev.length()
+ ? prev.get(0)[direction + 'ElementSibling']
+ : this.el.find('li:first-child').get(0);
- if (next.length) {
+ next = next ? dom(next) : dom([]);
+ if (next.length()) {
prev.removeClass('selected');
next.addClass('selected');
- next.find('a').focus();
+ var ev = document.createEvent("UIEvents");
+ ev.initUIEvent("focus",true,true);
+ next.find('a').get(0).dispatchEvent(ev);
}
};
@@ -148,10 +154,9 @@ Menu.prototype.add = function(text, fn){
}
var self = this
- , el = o('<li><a href="#">' + text + '</a></li>')
+ , el = dom('<li><a href="#">' + text + '</a></li>')
.addClass('menu-item-' + slug)
- .appendTo(this.el)
- .click(function(e){
+ .on('click', function(e){
e.preventDefault();
e.stopPropagation();
self.hide();
@@ -160,6 +165,7 @@ Menu.prototype.add = function(text, fn){
fn && fn();
});
+ this.el.get(0).appendChild(el.get(0));
this.items[slug] = el;
return this;
};
@@ -176,7 +182,7 @@ 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();
+ this.el.get(0).removeChild(item.get(0));
delete this.items[slug];
delete this.items[createSlug(slug)];
return this;
@@ -204,10 +210,7 @@ Menu.prototype.has = function(slug){
*/
Menu.prototype.moveTo = function(x, y){
- this.el.css({
- top: y,
- left: x
- });
+ this.el.css('top', y).css('left',x);
return this;
};
@@ -220,7 +223,7 @@ Menu.prototype.moveTo = function(x, y){
Menu.prototype.show = function(){
this.emit('show');
- this.el.show();
+ this.el.css('display','block');
return this;
};
@@ -233,7 +236,7 @@ Menu.prototype.show = function(){
Menu.prototype.hide = function(){
this.emit('hide');
- this.el.hide();
+ this.el.css('display','none');
return this;
};
@@ -251,3 +254,5 @@ function createSlug(str) {
.replace(/ +/g, '-')
.replace(/[^a-z0-9-]/g, '');
}
+
+

0 comments on commit e7ecf9b

Please sign in to comment.