menu-item: use pointer events for hover instead of mouse events (close …

…#739)

common.blocks/menu-item/menu-item.js

@@ -20,6 +20,21 @@ provide(BEMDOM.decl(this.name, /** @lends menu-item.prototype */{
         }
     },
 
+    onSetMod : {
+        'js' : {
+            'inited' : function() {
+                this.bindTo('pointerleave', this._onPointerLeave);
+            }
+        },
+
+        'disabled' : {
+            'true' : function() {
+                this.__base.apply(this, arguments);
+                this.delMod('hovered');
+            }
+        }
+    },
+
     /**
      * Checks whether given value is equal to current value
      * @param {*} val
@@ -48,12 +63,23 @@ provide(BEMDOM.decl(this.name, /** @lends menu-item.prototype */{
         return this.params.text || this.domElem.text();
     },
 
+    _onPointerOver : function() {
+        this.setMod('hovered');
+    },
+
+    _onPointerLeave : function() {
+        this.delMod('hovered');
+    },
+
     _onPointerClick : function() {
         this.hasMod('disabled') || this.emit('click', { source : 'pointer' });
     }
 }, /** @lends menu-item */{
     live : function() {
-        this.liveBindTo('pointerclick', this.prototype._onPointerClick);
+        var ptp = this.prototype;
+        this
+            .liveBindTo('pointerover', ptp._onPointerOver)
+            .liveBindTo('pointerclick', ptp._onPointerClick);
     }
 }));
 

common.blocks/menu-item/menu-item.spec.js

@@ -14,6 +14,29 @@ describe('menu-item', function() {
         BEMDOM.destruct(menuItem.domElem);
     });
 
+    describe('hovered', function() {
+        it('should be hovered/unhovered on pointerover/pointerleave', function() {
+            menuItem.hasMod('hovered').should.be.false;
+
+            menuItem.domElem.trigger('pointerover');
+            menuItem.hasMod('hovered').should.be.true;
+
+            menuItem.domElem.trigger('pointerleave');
+            menuItem.hasMod('hovered').should.be.false;
+        });
+
+        it('should not set hovered state if disabled', function() {
+            menuItem
+                .setMod('hovered')
+                .setMod('disabled')
+                .hasMod('hovered').should.be.false;
+
+            menuItem
+                .setMod('hovered')
+                .hasMod('hovered').should.be.false;
+        });
+    });
+
     describe('events', function() {
         it('emit event on pointer click if it is not disabled', function() {
             var spy = sinon.spy();