diff --git a/common.blocks/menu-item/menu-item.js b/common.blocks/menu-item/menu-item.js index c5f9ec8f0..9d4780f92 100644 --- a/common.blocks/menu-item/menu-item.js +++ b/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); } })); diff --git a/common.blocks/menu-item/menu-item.spec.js b/common.blocks/menu-item/menu-item.spec.js index bc1ad4df9..c0ff70d84 100644 --- a/common.blocks/menu-item/menu-item.spec.js +++ b/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(); diff --git a/desktop.blocks/menu-item/menu-item.js b/desktop.blocks/menu-item/menu-item.js deleted file mode 100644 index ed1a629f4..000000000 --- a/desktop.blocks/menu-item/menu-item.js +++ /dev/null @@ -1,36 +0,0 @@ -modules.define('menu-item', function(provide, MenuItem) { - -provide(MenuItem.decl({ - onSetMod : { - 'js' : { - 'inited' : function() { - this.bindTo('mouseleave', this._onMouseLeave); - } - }, - - 'disabled' : { - 'true' : function() { - this.__base.apply(this, arguments); - this.delMod('hovered'); - } - } - }, - - _onMouseOver : function() { - this.setMod('hovered'); - }, - - _onMouseLeave : function() { - this.delMod('hovered'); - } -}, { - live : function() { - this.liveBindTo('mouseover', function() { - this._onMouseOver(); - }); - - return this.__base.apply(this, arguments); - } -})); - -}); diff --git a/desktop.blocks/menu-item/menu-item.spec.js b/desktop.blocks/menu-item/menu-item.spec.js deleted file mode 100644 index daf756739..000000000 --- a/desktop.blocks/menu-item/menu-item.spec.js +++ /dev/null @@ -1,46 +0,0 @@ -modules.define( - 'spec', - ['menu-item', 'i-bem__dom', 'jquery', 'BEMHTML'], - function(provide, MenuItem, BEMDOM, $, BEMHTML) { - -describe('menu-item', function() { - var menuItem; - - beforeEach(function() { - menuItem = BEMDOM - .init($(BEMHTML.apply({ block : 'menu-item', content : 'item' })).appendTo('body')) - .bem('menu-item'); - }); - - afterEach(function() { - BEMDOM.destruct(menuItem.domElem); - }); - - describe('hovered', function() { - it('should be hovered/unhovered on mouseover/mouseleave', function() { - menuItem.hasMod('hovered').should.be.false; - - menuItem.domElem.trigger('mouseover'); - menuItem.hasMod('hovered').should.be.true; - - menuItem.domElem.trigger('mouseleave'); - 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; - }); - }); - -}); - -provide(); - -});