menu: Pass disabled mod to every nested menu-item

bem · Jul 1, 2014 · 848ab57 · 848ab57
1 parent 5002f8c
commit 848ab57
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 5 deletions.
diff --git a/common.blocks/menu/menu.bemhtml b/common.blocks/menu/menu.bemhtml
@@ -1,6 +1,11 @@
 block('menu')(
     def()(function() {
-        applyNext({ _menuTheme : this.mods.theme });
+        applyNext({
+            _menuMods : {
+                theme : this.mods.theme,
+                disabled : this.mods.disabled
+            }
+        });
         delete this._menuTheme;
     }),
     attrs()(function() {
@@ -12,7 +17,8 @@ block('menu')(
     mix()([{ elem : 'control' }])
 )
 
-block('menu-item').match(this._menuTheme).def()(function() {
-    this.mods.theme = this._menuTheme;
+block('menu-item').match(this._menuMods).def()(function() {
+    this.mods.theme = this._menuMods.theme;
+    this.mods.disabled = this.mods.disabled || this._menuMods.disabled;
     applyNext();
 });
diff --git a/common.blocks/menu/menu.bh.js b/common.blocks/menu/menu.bh.js
@@ -1,9 +1,14 @@
 module.exports = function(bh) {
 
     bh.match('menu', function(ctx) {
+        var menuMods = {
+            theme : ctx.mod('theme'),
+            disabled : ctx.mod('disabled')
+        };
+
         ctx
             .js(true)
-            .tParam('_menuTheme', ctx.mod('theme'))
+            .tParam('_menuMods', menuMods)
             .mix({ elem : 'control' });
 
         var attrs = { role : 'menu' };
@@ -12,7 +17,12 @@ module.exports = function(bh) {
     });
 
     bh.match('menu-item', function(ctx) {
-        ctx.mod('theme', ctx.tParam('_menuTheme'));
+        var menuMods = ctx.tParam('_menuMods');
+
+        ctx.mods({
+            theme : menuMods.theme,
+            disabled : menuMods.disabled
+        });
     });
 
 };
diff --git a/common.blocks/menu/menu.js b/common.blocks/menu/menu.js
@@ -37,6 +37,12 @@ provide(BEMDOM.decl({ block : this.name, baseBlock : Control }, /** @lends menu.
                     .__base.apply(this, arguments);
                 this._hoveredItem && this._hoveredItem.delMod('hovered');
             }
+        },
+
+        'disabled' : function(modName, modVal) {
+            this.getItems().forEach(function(menuItem){
+                menuItem.setMod(modName, modVal);
+            });
         }
     },
 

diff --git a/common.blocks/menu/menu.spec.js b/common.blocks/menu/menu.spec.js
@@ -49,6 +49,17 @@ describe('menu', function() {
             menu.delMod('disabled');
             control.attr('tabindex').should.be.equal('0');
         });
+
+        it('should pass disabled mod to menu items', function() {
+            menu.setMod('disabled');
+            menuItems.forEach(function(menuItem) {
+                menuItem.hasMod('disabled').should.be.true;
+            });
+            menu.delMod('disabled');
+            menuItems.forEach(function(menuItem) {
+                menuItem.hasMod('disabled').should.be.false;
+            });
+        });
     });
 
     describe('hover on items', function() {

diff --git a/common.blocks/menu/menu.tests/simple.bemjson.js b/common.blocks/menu/menu.tests/simple.bemjson.js
@@ -263,6 +263,35 @@
                             }
                         ]
                     }
+                ],
+                [
+                    { tag : 'h3', content : 'disabled' },
+                    {
+                        block : 'menu',
+                        mods : { select : 'radio', theme : theme, size : 'm', disabled : true },
+                        content : [
+                            {
+                                block : 'menu-item',
+                                val : 1,
+                                content : 'item 1'
+                            },
+                            {
+                                block : 'menu-item',
+                                val : 2,
+                                content : 'item 2'
+                            },
+                            {
+                                block : 'menu-item',
+                                val : 3,
+                                content : 'item 3'
+                            },
+                            {
+                                block : 'menu-item',
+                                val : 4,
+                                content : 'item 4'
+                            }
+                        ]
+                    }
                 ]
             ].map(function(test) {
                 return {