fix hover and mouse events.

lib/widget.js

@@ -42,12 +42,21 @@ function Node(options) {
   if (this._isScreen && !this.focused) {
     this.focused = this.children[0];
   }
+
+  var self = this;
+  this.on('keypress', function(ch, key) {
+    self.emit('key ' + key.name, key);
+  });
 }
 
 Node.prototype.__proto__ = EventEmitter.prototype;
 
 Node.prototype.type = 'node';
 
+Node.prototype.key = function(name, listener) {
+  return this.on('key ' + name, listener);
+};
+
 Node.prototype.prepend = function(element) {
   var old = element.parent;
 
@@ -308,6 +317,7 @@ Screen.prototype._listenMouse = function(el) {
       , ret;
 
     for (; i < self.clickable.length; i++) {
+    //for (i = self.clickable.length - 1; i >= 0; i--) {
       el = self.clickable[i];
       if (!el.visible) continue;
 
@@ -350,7 +360,8 @@ Screen.prototype._listenMouse = function(el) {
       }
     }
 
-    if (data.action === 'mousemove' && self.hover && !set) {
+    //if (data.action === 'mousemove' && self.hover && !set) {
+    if ((data.action === 'mousemove' || data.action === 'mousedown' || data.action === 'mouseup') && self.hover && !set) {
       self.hover.emit('mouseout', data);
       self.emit('element mouseout', self.hover, data);
       self.hover = null;
@@ -371,7 +382,9 @@ Screen.prototype._listenKeys = function(el) {
       var lm = this._listenedMouse;
       this._listenedMouse = true;
       //this._listenMouse(el);
-      el.on('click', el.focus.bind(el));
+      if (el.options.autoFocus !== false) {
+        el.on('click', el.focus.bind(el));
+      }
       this._listenedMouse = lm;
 
       this.input.push(el);
@@ -859,6 +872,49 @@ function Element(options) {
   this.on('attach', function() {
     self.parseContent();
   });
+
+  if (this.options.hoverBg != null) {
+    var hoverBg = convert(this.options.hoverBg);
+
+    this.on('mouseover', function() {
+      if (self._bg == null) self._bg = self.bg;
+      self.bg = hoverBg;
+      self.screen.render();
+    });
+
+    this.on('mouseout', function() {
+      if (self._bg != null) self.bg = self._bg;
+      self.screen.render();
+    });
+  }
+
+  if (this.options.hoverEffects) {
+    var effects = this.options.hoverEffects;
+    Object.keys(effects).forEach(function(key) {
+      var val = effects[key];
+      if (typeof val === 'string') {
+        effects[key] = convert(val);
+      }
+    });
+
+    this.on('mouseover', function() {
+      Object.keys(effects).forEach(function(key) {
+        var val = effects[key];
+        if (self['__h_' + key] == null) self['__h_' + key] = self[key];
+        self[key] = val;
+      });
+      self.screen.render();
+    });
+
+    this.on('mouseout', function() {
+      if (self._bg != null) self.bg = self._bg;
+      Object.keys(effects).forEach(function(key) {
+        var val = effects[key];
+        if (self['__h_' + key] != null) self[key] = self['__h_' + key];
+      });
+      self.screen.render();
+    });
+  }
 }
 
 Element.prototype.__proto__ = Node.prototype;
@@ -1920,12 +1976,14 @@ List.prototype.add = function(item) {
     screen: this.screen,
     fg: this.fg,
     bg: this.bg,
-    content: item.content || item,
+    content: item,
     align: this.align || 'left',
     top: this.items.length + (this.border ? 1 : 0),
     left: (this.border ? 1 : 0) + 1,
     right: (this.border ? 1 : 0) + 1,
-    height: 1
+    tags: this.tags,
+    height: 1,
+    hoverBg: this.mouse ? this.options.itemHoverBg : null
   });
 
   this.append(item);
@@ -2369,15 +2427,17 @@ function Button(options) {
     self.press();
   });
 
-  this.on('mouseover', function() {
-    self.inverse = !self.options.inverse;
-    self.screen.render();
-  });
+  if (this.options.effects) {
+    this.on('mouseover', function() {
+      self.inverse = !self.options.inverse;
+      self.screen.render();
+    });
 
-  this.on('mouseout', function() {
-    self.inverse = self.options.inverse;
-    self.screen.render();
-  });
+    this.on('mouseout', function() {
+      self.inverse = self.options.inverse;
+      self.screen.render();
+    });
+  }
 }
 
 Button.prototype.__proto__ = Input.prototype;
@@ -2387,12 +2447,12 @@ Button.prototype.type = 'button';
 Button.prototype.press = function() {
   var self = this;
   this.emit('press');
-  if (this.border) {
-    var color = this.border.color;
-    this.border.color = 2;
+  if (this.border && this.options.effects) {
+    var color = this.border.fg;
+    this.border.fg = 2;
     this.screen.render();
     setTimeout(function() {
-      self.border.color = color;
+      self.border.fg = color;
       self.screen.render();
     }, 300);
   }