Merge pull request #1393 from /issues/1392@v2

dropdown: get rid of wrapping root `div` node (close #1392)
bem · Aug 14, 2015 · 085fd81 · 085fd81
2 parents 0e96345 + 0ee5704
commit 085fd81
Show file tree

Hide file tree

Showing 32 changed files with 177 additions and 89 deletions.
diff --git a/common.blocks/dropdown/__switcher/dropdown__switcher.bemhtml b/common.blocks/dropdown/__switcher/dropdown__switcher.bemhtml
diff --git a/common.blocks/dropdown/__switcher/dropdown__switcher.bh.js b/common.blocks/dropdown/__switcher/dropdown__switcher.bh.js
diff --git a/common.blocks/dropdown/_switcher/dropdown_switcher_button.bemhtml b/common.blocks/dropdown/_switcher/dropdown_switcher_button.bemhtml
@@ -1,18 +1,22 @@
-block('dropdown').mod('switcher', 'button').elem('switcher').content()(function() {
-    var content = this.ctx.content;
-    if(Array.isArray(content)) return content;
+block('dropdown').mod('switcher', 'button').elem('switcher').def()(function() {
+    var dropdown = this._dropdown,
+        switcher = dropdown.switcher;
 
-    var res = this.isSimple(content)?
-        { block : 'button', text : content } :
-        content;
+    if(Array.isArray(switcher)) return switcher;
+
+    var res = this.isSimple(switcher)?
+        { block : 'button', text : switcher } :
+        switcher;
 
     if(res.block === 'button') {
         var resMods = res.mods || (res.mods = {}),
             dropdownMods = this.mods;
         resMods.size || (resMods.size = dropdownMods.size);
         resMods.theme || (resMods.theme = dropdownMods.theme);
         resMods.disabled = dropdownMods.disabled;
+
+        res.mix = apply('mix');
     }
 
-    return res;
+    return applyCtx(res);
 });
diff --git a/common.blocks/dropdown/_switcher/dropdown_switcher_button.bh.js b/common.blocks/dropdown/_switcher/dropdown_switcher_button.bh.js
@@ -1,19 +1,23 @@
 module.exports = function(bh) {
 
     bh.match('dropdown_switcher_button__switcher', function(ctx, json) {
-        var content = ctx.content();
-        if(Array.isArray(content)) return content;
+        var dropdown = ctx.tParam('dropdown'),
+            switcher = dropdown.switcher;
 
-        var res = ctx.isSimple(content)?
-            { block : 'button', text : content } :
-            content;
+        if(Array.isArray(switcher)) return switcher;
+
+        var res = ctx.isSimple(switcher)?
+            { block : 'button', text : switcher } :
+            switcher;
 
         if(res.block === 'button') {
             var resMods = res.mods || (res.mods = {}),
                 dropdownMods = json.blockMods || json.mods;
             resMods.size || (resMods.size = dropdownMods.size);
             resMods.theme || (resMods.theme = dropdownMods.theme);
             resMods.disabled = dropdownMods.disabled;
+
+            res.mix = ctx.tParam('mix');
         }
 
         return res;

diff --git a/common.blocks/dropdown/_switcher/dropdown_switcher_button.js b/common.blocks/dropdown/_switcher/dropdown_switcher_button.js
@@ -19,7 +19,7 @@ provide(Dropdown.decl({ modName : 'switcher', modVal : 'button' }, /** @lends dr
     }
 }, /** @lends dropdown */{
     live : function() {
-        this.liveInitOnBlockInsideEvent('click', 'button', this.onSwitcherClick);
+        this.liveInitOnBlockEvent('click', 'button', this.onSwitcherClick);
         return this.__base.apply(this, arguments);
     }
 }));

diff --git a/common.blocks/dropdown/_switcher/dropdown_switcher_link.bemhtml b/common.blocks/dropdown/_switcher/dropdown_switcher_link.bemhtml
@@ -1,17 +1,21 @@
-block('dropdown').mod('switcher', 'link').elem('switcher').content()(function() {
-    var content = this.ctx.content;
-    if(Array.isArray(content)) return content;
+block('dropdown').mod('switcher', 'link').elem('switcher').def()(function() {
+    var dropdown = this._dropdown,
+        switcher = dropdown.switcher;
 
-    var res = this.isSimple(content)?
-        { block : 'link', mods : { pseudo : true }, content : content } :
-        content;
+    if(Array.isArray(switcher)) return switcher;
+
+    var res = this.isSimple(switcher)?
+        { block : 'link', mods : { pseudo : true }, content : switcher } :
+        switcher;
 
     if(res.block === 'link') {
         var resMods = res.mods || (res.mods = {}),
             dropdownMods = this.mods;
         resMods.theme || (resMods.theme = dropdownMods.theme);
         resMods.disabled = dropdownMods.disabled;
+
+        res.mix = apply('mix');
     }
 
-    return res;
+    return applyCtx(res);
 });
diff --git a/common.blocks/dropdown/_switcher/dropdown_switcher_link.bh.js b/common.blocks/dropdown/_switcher/dropdown_switcher_link.bh.js
@@ -1,18 +1,22 @@
 module.exports = function(bh) {
 
     bh.match('dropdown_switcher_link__switcher', function(ctx, json) {
-        var content = ctx.content();
-        if(Array.isArray(content)) return content;
+        var dropdown = ctx.tParam('dropdown'),
+            switcher = dropdown.switcher;
 
-        var res = ctx.isSimple(content)?
-            { block : 'link', mods : { pseudo : true }, content : content } :
-            content;
+        if(Array.isArray(switcher)) return switcher;
+
+        var res = ctx.isSimple(switcher)?
+            { block : 'link', mods : { pseudo : true }, content : switcher } :
+            switcher;
 
         if(res.block === 'link') {
             var resMods = res.mods || (res.mods = {}),
                 dropdownMods = json.blockMods || json.mods;
             resMods.theme || (resMods.theme = dropdownMods.theme);
             resMods.disabled = dropdownMods.disabled;
+
+            res.mix = ctx.tParam('mix');
         }
 
         return res;

diff --git a/common.blocks/dropdown/_switcher/dropdown_switcher_link.js b/common.blocks/dropdown/_switcher/dropdown_switcher_link.js
@@ -11,7 +11,7 @@ modules.define('dropdown', ['link'], function(provide, _, Dropdown) {
  */
 provide(Dropdown.decl({ modName : 'switcher', modVal : 'link' }, null, /** @lends dropdown */{
     live : function() {
-        this.liveInitOnBlockInsideEvent('click', 'link', this.onSwitcherClick);
+        this.liveInitOnBlockEvent('click', 'link', this.onSwitcherClick);
         return this.__base.apply(this, arguments);
     }
 }));

diff --git a/common.blocks/dropdown/dropdown.bemhtml b/common.blocks/dropdown/dropdown.bemhtml
@@ -1,8 +1,32 @@
 block('dropdown')(
-    js()(true),
+    def()(function() {
+        return applyCtx([{ elem : 'switcher' }, { elem : 'popup' }]);
+    }),
+    def()(function() {
+        var ctx = this.ctx;
 
-    content()(function() {
-        var popup = this.ctx.popup;
+        ctx.js = this.extend(apply('js'), ctx.js);
+        return applyNext({ _dropdown : ctx });
+    }),
+    js()(function() {
+        return { id : this.generateId() };
+    }),
+    elem('switcher').def()(function() {
+        var dropdown = this._dropdown,
+            switcher = dropdown.switcher;
+
+        switcher.block && (switcher.mix = apply('mix'));
+
+        return applyCtx(switcher);
+    }),
+    elem('switcher').mix()(function() {
+        var dropdown = this._dropdown;
+
+        return [dropdown].concat(dropdown.switcher.mix || [], dropdown.mix || []);
+    }),
+    elem('popup').def()(function() {
+        var dropdown = this._dropdown,
+            popup = dropdown.popup;
 
         if(this.isSimple(popup) || popup.block !== 'popup') {
             popup = { block : 'popup', content : popup };
@@ -14,9 +38,8 @@ block('dropdown')(
 
         popupMods.target = 'anchor';
 
-        return [
-            { elem : 'switcher', content : this.ctx.switcher },
-            popup
-        ];
+        popup.mix = [dropdown].concat(popup.mix || []);
+
+        return applyCtx(popup);
     })
 );
diff --git a/common.blocks/dropdown/dropdown.bh.js b/common.blocks/dropdown/dropdown.bh.js
@@ -1,24 +1,47 @@
 module.exports = function(bh) {
 
-    bh.match('dropdown', function(ctx, json) {
-        ctx.js(true);
+    bh.match({
+        'dropdown' : function(ctx) {
+            var dropdown = ctx.json();
 
-        var popup = json.popup;
+            ctx
+                .js(ctx.extend({ id : ctx.generateId() }, ctx.js()))
+                .tParam('dropdown', dropdown)
+                .tParam('theme', ctx.mod('theme'))
+                .tParam('mix', [dropdown].concat(
+                    dropdown.switcher.mix || [],
+                    dropdown.mix || []));
 
-        if(ctx.isSimple(popup) || popup.block !== 'popup') {
-            popup = { block : 'popup', content : popup };
-        }
+            return [{ elem : 'switcher' }, { elem : 'popup' }];
+        },
+
+        'dropdown__popup' : function(ctx) {
+            var dropdown = ctx.tParam('dropdown'),
+                popup = dropdown.popup;
+
+            if(ctx.isSimple(popup) || popup.block !== 'popup') {
+                popup = { block : 'popup', content : popup };
+            }
+
+            var popupMods = popup.mods || (popup.mods = {});
+            popupMods.theme || (popupMods.theme = ctx.tParam('theme'));
+            popupMods.hasOwnProperty('autoclosable') || (popupMods.autoclosable = true);
 
-        var popupMods = popup.mods || (popup.mods = {});
-        popupMods.theme || (popupMods.theme = ctx.mod('theme'));
-        popupMods.hasOwnProperty('autoclosable') || (popupMods.autoclosable = true);
+            popupMods.target = 'anchor';
 
-        popupMods.target = 'anchor';
+            popup.mix = [dropdown].concat(popup.mix || []);
 
-        ctx.content([
-           { elem : 'switcher', content : json.switcher },
-           popup
-        ], true);
+            return popup;
+        },
+
+        'dropdown__switcher' : function(ctx) {
+            var dropdown = ctx.tParam('dropdown'),
+                switcher = dropdown.switcher;
+
+            switcher.block && (switcher.mix = ctx.tParam('mix'));
+
+            return switcher;
+        }
     });
 
 };
diff --git a/common.blocks/dropdown/dropdown.deps.js b/common.blocks/dropdown/dropdown.deps.js
@@ -1,7 +1,6 @@
 [{
     mustDeps : { block : 'i-bem', elem : 'dom' },
     shouldDeps : [
-        { elem : 'switcher' },
         {
             block : 'popup',
             mods : {

diff --git a/common.blocks/dropdown/dropdown.js b/common.blocks/dropdown/dropdown.js
@@ -52,7 +52,7 @@ provide(BEMDOM.decl(this.name, /** @lends dropdown.prototype */{
      */
     getPopup : function() {
         return this._popup ||
-            (this._popup = this.findBlockInside('popup')
+            (this._popup = this.findBlockOn('popup')
                 .setAnchor(this.getSwitcher())
                 .on({ modName : 'visible', modVal : '*' }, this._onPopupVisibilityChange, this));
     },
@@ -63,7 +63,7 @@ provide(BEMDOM.decl(this.name, /** @lends dropdown.prototype */{
      */
     getSwitcher : function() {
         return this._switcher ||
-            (this._switcher = this.findBlockInside(this.getMod('switcher')));
+            (this._switcher = this.findBlockOn(this.getMod('switcher')));
     },
 
     _onPopupVisibilityChange : function(_, data) {

diff --git a/common.blocks/dropdown/dropdown.spec.js b/common.blocks/dropdown/dropdown.spec.js
@@ -1,7 +1,7 @@
 modules.define(
     'spec',
-    ['dropdown', 'i-bem__dom', 'jquery', 'BEMHTML'],
-    function(provide, Dropdown, BEMDOM, $, BEMHTML) {
+    ['dropdown', 'i-bem__dom', 'jquery', 'BEMHTML', 'sinon'],
+    function(provide, Dropdown, BEMDOM, $, BEMHTML, sinon) {
 
 describe('dropdown', function() {
     var body = $('body'),
@@ -69,6 +69,18 @@ describe('dropdown', function() {
                 .hasMod('opened').should.be.false;
         });
     });
+
+    describe('destruct', function() {
+        it('should destruct properly', function() {
+            var spy = sinon.spy();
+
+            dropdown.getPopup().on({ modName : 'js', modVal : '' }, spy);
+            dropdown.setMod('opened');
+            BEMDOM.destruct(dropdown.domElem);
+
+            spy.should.have.been.calledOnce;
+        });
+    });
 });
 
 provide();

diff --git a/common.blocks/dropdown/dropdown.tests/gemini.bemjson.js b/common.blocks/dropdown/dropdown.tests/gemini.bemjson.js
@@ -13,19 +13,17 @@
             content : {
                 block : 'dropdown',
                 mods : { switcher : 'link', theme : 'islands' },
-                switcher : 'link',
-                popup : { block : 'popup', mods : { autoclosable : true, 'islands-link' : true }, content : 'popup' },
-                cls : 'islands-link'
+                switcher : { block : 'link', content : 'link', cls : 'islands-link' },
+                popup : { block : 'popup', mods : { autoclosable : true, 'islands-link' : true }, content : 'popup' }
             }
         },
         {
             block : 'test',
             content : {
                 block : 'dropdown',
                 mods : { switcher : 'button', theme : 'islands', size : 's' },
-                switcher : 'link',
-                popup : { block : 'popup', mods : { autoclosable : true, 'islands-button' : true }, content : 'popup' },
-                cls : 'islands-button'
+                switcher : { block : 'button', text : 'link', cls : 'islands-button' },
+                popup : { block : 'popup', mods : { autoclosable : true, 'islands-button' : true }, content : 'popup' }
             }
         }
     ]

diff --git a/common.blocks/dropdown/dropdown.tests/simple.bemjson.js b/common.blocks/dropdown/dropdown.tests/simple.bemjson.js
@@ -40,7 +40,7 @@
                     switcher : 'disabled',
                     popup : 'bemjson'
                 }
-            ].map(function(content) { return { tag : 'p', content : content }; })
+            ].map(function(content) { return { tag : 'div', attrs : { style : 'margin: 1em 0' }, content : content }; })
         },
 
         { tag : 'hr' },
@@ -73,7 +73,7 @@
                     switcher : 'disabled',
                     popup : 'bemjson'
                 }
-            ].map(function(content) { return { tag : 'p', content : content }; })
+            ].map(function(content) { return { tag : 'div', attrs : { style : 'margin: 1em 0' }, content : content }; })
         },
 
         { tag : 'hr' },
@@ -100,15 +100,6 @@
                     switcher : 'button',
                     popup : { block : 'popup', mods : { autoclosable : true, theme : 'islands' }, content : 'custom popup' }
                 },
-                {
-                    block : 'dropdown',
-                    mods : { switcher : 'button', theme : 'islands' },
-                    switcher : {
-                        block : 'bla',
-                        content : { block : 'button', mods : { theme : 'islands', size : 'm' }, text : 'wrapped button' }
-                    },
-                    popup : 'bemjson'
-                },
                 {
                     block : 'dropdown',
                     mods : { switcher : 'button', theme : 'islands', size : 'l' },

diff --git a/common.blocks/dropdown/dropdown.tmpl-specs/10-default_link.bemjson.js b/common.blocks/dropdown/dropdown.tmpl-specs/10-default_link.bemjson.js
@@ -1,5 +1,6 @@
 ({
     block : 'dropdown',
+    js : { id : 'uniq14257605137441' },
     mods : { switcher : 'link', theme : 'islands', disabled : true },
     switcher : 'link',
     popup : 'bemjson'

diff --git a/common.blocks/dropdown/dropdown.tmpl-specs/10-default_link.html b/common.blocks/dropdown/dropdown.tmpl-specs/10-default_link.html
@@ -1 +1 @@
-<div class="dropdown dropdown_switcher_link dropdown_theme_islands dropdown_disabled i-bem" data-bem="{&quot;dropdown&quot;:{}}"><span class="link link_pseudo link_theme_islands link_disabled link__control i-bem" data-bem="{&quot;link&quot;:{}}">link</span><div class="popup popup_theme_islands popup_autoclosable popup_target_anchor i-bem" data-bem="{&quot;popup&quot;:{}}">bemjson</div></div>
+<span class="link link_pseudo link_theme_islands link_disabled link__control dropdown dropdown_switcher_link dropdown_theme_islands dropdown_disabled i-bem" data-bem="{&quot;link&quot;:{},&quot;dropdown&quot;:{&quot;id&quot;:&quot;uniq14257605137441&quot;}}">link</span><div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_link dropdown_theme_islands dropdown_disabled i-bem" data-bem="{&quot;popup&quot;:{},&quot;dropdown&quot;:{&quot;id&quot;:&quot;uniq14257605137441&quot;}}">bemjson</div>
diff --git a/common.blocks/dropdown/dropdown.tmpl-specs/20-default_button.bemjson.js b/common.blocks/dropdown/dropdown.tmpl-specs/20-default_button.bemjson.js
@@ -1,5 +1,6 @@
 ({
     block : 'dropdown',
+    js : { id : 'uniq14257605137441' },
     mods : { switcher : 'button', theme : 'islands', size : 'm', disabled : true },
     switcher : 'button',
     popup : 'bemjson'

diff --git a/common.blocks/dropdown/dropdown.tmpl-specs/20-default_button.html b/common.blocks/dropdown/dropdown.tmpl-specs/20-default_button.html
@@ -1 +1 @@
-<div class="dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m dropdown_disabled i-bem" data-bem="{&quot;dropdown&quot;:{}}"><button class="button button_size_m button_theme_islands button_disabled button__control i-bem" data-bem="{&quot;button&quot;:{}}" role="button" type="button" disabled="disabled"><span class="button__text">button</span></button><div class="popup popup_theme_islands popup_autoclosable popup_target_anchor i-bem" data-bem="{&quot;popup&quot;:{}}">bemjson</div></div>
+<button class="button button_size_m button_theme_islands button_disabled button__control dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m dropdown_disabled i-bem" data-bem="{&quot;button&quot;:{},&quot;dropdown&quot;:{&quot;id&quot;:&quot;uniq14257605137441&quot;}}" role="button" type="button" disabled="disabled"><span class="button__text">button</span></button><div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m dropdown_disabled i-bem" data-bem="{&quot;popup&quot;:{},&quot;dropdown&quot;:{&quot;id&quot;:&quot;uniq14257605137441&quot;}}">bemjson</div>
diff --git a/common.blocks/dropdown/dropdown.tmpl-specs/30-switcher_link_custom_popup.bemjson.js b/common.blocks/dropdown/dropdown.tmpl-specs/30-switcher_link_custom_popup.bemjson.js
@@ -1,5 +1,6 @@
 ({
     block : 'dropdown',
+    js : { id : 'uniq14257605137441' },
     mods : { switcher : 'link' },
     switcher : { block : 'link', mods : { theme : 'islands', disabled : true }, content : 'link' },
     popup : { block : 'link', mods : { theme : 'islands' }, content : 'link' }

diff --git a/common.blocks/dropdown/dropdown.tmpl-specs/30-switcher_link_custom_popup.html b/common.blocks/dropdown/dropdown.tmpl-specs/30-switcher_link_custom_popup.html
@@ -1 +1 @@
-<div class="dropdown dropdown_switcher_link i-bem" data-bem="{&quot;dropdown&quot;:{}}"><a class="link link_theme_islands link__control i-bem" data-bem="{&quot;link&quot;:{}}" tabindex="0">link</a><div class="popup popup_autoclosable popup_target_anchor i-bem" data-bem="{&quot;popup&quot;:{}}"><a class="link link_theme_islands link__control i-bem" data-bem="{&quot;link&quot;:{}}" tabindex="0">link</a></div></div>
+<a class="link link_theme_islands dropdown dropdown_switcher_link link__control i-bem" tabindex="0" data-bem="{&quot;link&quot;:{},&quot;dropdown&quot;:{&quot;id&quot;:&quot;uniq14257605137441&quot;}}">link</a><div class="popup popup_autoclosable popup_target_anchor dropdown dropdown_switcher_link i-bem" data-bem="{&quot;popup&quot;:{},&quot;dropdown&quot;:{&quot;id&quot;:&quot;uniq14257605137441&quot;}}"><a class="link link_theme_islands link__control i-bem" tabindex="0" data-bem="{&quot;link&quot;:{}}">link</a></div>