popup: split own functionality into target modifiers (close #968)

common.blocks/dropdown/_switcher/dropdown_switcher_link.spec.js

@@ -22,7 +22,7 @@ describe('dropdown', function() {
         BEMDOM.destruct(dropdown.domElem);
     });
 
-    it('should open on button click', function() {
+    it('should open on link click', function() {
         dropdown.getSwitcher().emit('click');
         dropdown.hasMod('opened').should.be.true;
     });

common.blocks/dropdown/dropdown.bemhtml

@@ -12,6 +12,8 @@ block('dropdown')(
         popupMods.theme || (popupMods.theme = this.mods.theme);
         popupMods.hasOwnProperty('autoclosable') || (popupMods.autoclosable = true);
 
+        popupMods.target = 'anchor';
+
         return [
             { elem : 'switcher', content : this.ctx.switcher },
             popup

common.blocks/dropdown/dropdown.bh.js

@@ -13,6 +13,8 @@ module.exports = function(bh) {
         popupMods.theme || (popupMods.theme = ctx.mod('theme'));
         popupMods.hasOwnProperty('autoclosable') || (popupMods.autoclosable = true);
 
+        popupMods.target = 'anchor';
+
         ctx.content([
            { elem : 'switcher', content : json.switcher },
            popup

common.blocks/dropdown/dropdown.deps.js

@@ -2,7 +2,13 @@
     mustDeps : { block : 'i-bem', elem : 'dom' },
     shouldDeps : [
         { elem : 'switcher' },
-        { block : 'popup', mods : { autoclosable : true } }
+        {
+            block : 'popup',
+            mods : {
+                autoclosable : true,
+                target : 'anchor'
+            }
+        }
     ]
 },
 {

common.blocks/dropdown/dropdown.js

@@ -53,7 +53,7 @@ provide(BEMDOM.decl(this.name, /** @lends dropdown.prototype */{
     getPopup : function() {
         return this._popup ||
             (this._popup = this.findBlockInside('popup')
-                .setTarget(this.getSwitcher())
+                .setAnchor(this.getSwitcher())
                 .on({ modName : 'visible', modVal : '*' }, this._onPopupVisibilityChange, this));
     },
 

common.blocks/dropdown/dropdown.tmpl-specs/10-default_link.html

@@ -1 +1 @@
-<div class="dropdown dropdown_switcher_link dropdown_theme_normal dropdown_disabled i-bem" data-bem="{&quot;dropdown&quot;:{}}"><span class="link link_pseudo link_theme_normal link_disabled link__control i-bem" data-bem="{&quot;link&quot;:{}}">link</span><div class="popup popup_theme_normal popup_autoclosable i-bem" data-bem="{&quot;popup&quot;:{}}">bemjson</div></div>
+<div class="dropdown dropdown_switcher_link dropdown_theme_normal dropdown_disabled i-bem" data-bem="{&quot;dropdown&quot;:{}}"><span class="link link_pseudo link_theme_normal link_disabled link__control i-bem" data-bem="{&quot;link&quot;:{}}">link</span><div class="popup popup_theme_normal popup_autoclosable popup_target_anchor i-bem" data-bem="{&quot;popup&quot;:{}}">bemjson</div></div>

common.blocks/dropdown/dropdown.tmpl-specs/20-default_button.html

@@ -1 +1 @@
-<div class="dropdown dropdown_switcher_button dropdown_theme_normal dropdown_size_m dropdown_disabled i-bem" data-bem="{&quot;dropdown&quot;:{}}"><button class="button button_size_m button_theme_normal 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_normal popup_autoclosable i-bem" data-bem="{&quot;popup&quot;:{}}">bemjson</div></div>
+<div class="dropdown dropdown_switcher_button dropdown_theme_normal dropdown_size_m dropdown_disabled i-bem" data-bem="{&quot;dropdown&quot;:{}}"><button class="button button_size_m button_theme_normal 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_normal popup_autoclosable popup_target_anchor i-bem" data-bem="{&quot;popup&quot;:{}}">bemjson</div></div>

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_normal link__control i-bem" data-bem="{&quot;link&quot;:{}}" tabindex="0">link</a><div class="popup popup_autoclosable i-bem" data-bem="{&quot;popup&quot;:{}}"><a class="link link_theme_normal link__control i-bem" data-bem="{&quot;link&quot;:{}}" tabindex="0">link</a></div></div>
+<div class="dropdown dropdown_switcher_link i-bem" data-bem="{&quot;dropdown&quot;:{}}"><a class="link link_theme_normal 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_normal link__control i-bem" data-bem="{&quot;link&quot;:{}}" tabindex="0">link</a></div></div>

common.blocks/dropdown/dropdown.tmpl-specs/40-switcher_button_block_popup.html

@@ -1 +1 @@
-<div class="dropdown dropdown_switcher_button i-bem" data-bem="{&quot;dropdown&quot;:{}}"><button class="button button_theme_normal button_size_m button__control i-bem" data-bem="{&quot;button&quot;:{}}" role="button" type="button"><span class="button__text">button</span></button><div class="popup popup_theme_normal popup_autoclosable i-bem" data-bem="{&quot;popup&quot;:{}}">custom link</div></div>
+<div class="dropdown dropdown_switcher_button i-bem" data-bem="{&quot;dropdown&quot;:{}}"><button class="button button_theme_normal button_size_m button__control i-bem" data-bem="{&quot;button&quot;:{}}" role="button" type="button"><span class="button__text">button</span></button><div class="popup popup_theme_normal popup_autoclosable popup_target_anchor i-bem" data-bem="{&quot;popup&quot;:{}}">custom link</div></div>

common.blocks/dropdown/dropdown.tmpl-specs/50-switcher_array.html

@@ -1 +1 @@
-<div class="dropdown i-bem" data-bem="{&quot;dropdown&quot;:{}}"><button class="button button__control i-bem" data-bem="{&quot;button&quot;:{}}" role="button" type="button"><span class="button__text">button</span></button><a class="link link__control i-bem" data-bem="{&quot;link&quot;:{}}" tabindex="0">link</a><div class="popup popup_autoclosable i-bem" data-bem="{&quot;popup&quot;:{}}">popup</div></div>
+<div class="dropdown i-bem" data-bem="{&quot;dropdown&quot;:{}}"><button class="button button__control i-bem" data-bem="{&quot;button&quot;:{}}" role="button" type="button"><span class="button__text">button</span></button><a class="link 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;:{}}">popup</div></div>

common.blocks/popup/_autoclosable/popup_autoclosable.deps.js

@@ -1,8 +1,13 @@
-({
+[{
     shouldDeps : [
+        { mods : { target : 'anchor' } }, // should be removed after bem-pr and enb-specs will fix depsByTech
         { block : 'jquery', elems : { elem : 'event', mods : { type : 'pointer' } } },
         { block : 'keyboard', elem : 'codes' },
         'ua',
         'dom'
     ]
-})
+},
+{
+    tech : 'spec.js',
+    shouldDeps : { tech : 'js', mods : { target : 'anchor' } }
+}]

common.blocks/popup/_autoclosable/popup_autoclosable.js

@@ -38,7 +38,7 @@ provide(Popup.decl({ modName : 'autoclosable', modVal : true }, /** @lends popup
     },
 
     _onDocPointerClick : function(e) {
-        if(this._owner && dom.contains(this._owner, $(e.target)))
+        if(this.hasMod('target', 'anchor') && dom.contains(this._anchor, $(e.target)))
             return;
 
         this._inPopupPointerPress?

common.blocks/popup/_autoclosable/popup_autoclosable.spec.js

@@ -16,7 +16,7 @@ describe('popup_autoclosable', function() {
 
     describe('pointer reactions', function() {
         it('should be visible on click inside', function(done) {
-            var popup = buildPopupWithOwner(rootDomElem, true).popup.setMod('visible');
+            var popup = buildPopupWithAnchor(rootDomElem, true).popup.setMod('visible');
 
             nextTick(function() {
                 doPointerClick(popup.domElem);
@@ -27,7 +27,7 @@ describe('popup_autoclosable', function() {
         });
 
         it('should be hidden on click outside', function(done) {
-            var popup = buildPopupWithOwner(rootDomElem, true).popup.setMod('visible');
+            var popup = buildPopupWithAnchor(rootDomElem, true).popup.setMod('visible');
 
             nextTick(function() {
                 doPointerClick(rootDomElem);
@@ -37,24 +37,24 @@ describe('popup_autoclosable', function() {
             });
         });
 
-        it('should not be hidden on owner click', function(done) {
-            var popupWithOwner = buildPopupWithOwner(rootDomElem, true),
-                ownerDomElem = popupWithOwner.ownerDomElem,
+        it('should not be hidden on anchor click', function(done) {
+            var popupWithOwner = buildPopupWithAnchor(rootDomElem, true),
+                anchorDomElem = popupWithOwner.anchorDomElem,
                 popup = popupWithOwner.popup.setMod('visible');
 
             nextTick(function() {
-                doPointerClick(ownerDomElem);
+                doPointerClick(anchorDomElem);
                 popup.hasMod('visible').should.be.true;
 
                 done();
             });
         });
 
         it('should not be hidden on click on child popup', function(done) {
-            var popup1 = buildPopupWithOwner(rootDomElem, true).popup.setMod('visible'),
-                popup2 = buildPopupWithOwner(popup1.domElem).popup.setMod('visible'),
-                popup3 = buildPopupWithOwner(popup2.domElem, true).popup.setMod('visible'),
-                popup4 = buildPopupWithOwner(rootDomElem, true).popup.setMod('visible');
+            var popup1 = buildPopupWithAnchor(rootDomElem, true).popup.setMod('visible'),
+                popup2 = buildPopupWithAnchor(popup1.domElem).popup.setMod('visible'),
+                popup3 = buildPopupWithAnchor(popup2.domElem, true).popup.setMod('visible'),
+                popup4 = buildPopupWithAnchor(rootDomElem, true).popup.setMod('visible');
 
             nextTick(function() {
                 doPointerClick(popup3.domElem);
@@ -77,15 +77,15 @@ describe('popup_autoclosable', function() {
 
     describe('on escape key reactions', function() {
         it('should be hidden on press escape', function() {
-            var popup = buildPopupWithOwner(rootDomElem, true).popup.setMod('visible');
+            var popup = buildPopupWithAnchor(rootDomElem, true).popup.setMod('visible');
             rootDomElem.trigger($.Event('keydown', { keyCode : keyCodes.ESC }));
             popup.hasMod('visible').should.be.false;
         });
 
         it('should hide popups in back order of its showing', function() {
-            var popup1 = buildPopupWithOwner(rootDomElem, true).popup.setMod('visible'),
-                popup2 = buildPopupWithOwner(rootDomElem, true).popup.setMod('visible'),
-                popup3 = buildPopupWithOwner(rootDomElem, true).popup.setMod('visible'),
+            var popup1 = buildPopupWithAnchor(rootDomElem, true).popup.setMod('visible'),
+                popup2 = buildPopupWithAnchor(rootDomElem, true).popup.setMod('visible'),
+                popup3 = buildPopupWithAnchor(rootDomElem, true).popup.setMod('visible'),
                 event = $.Event('keydown', { keyCode : keyCodes.ESC });
 
             rootDomElem.trigger(event);
@@ -108,19 +108,23 @@ describe('popup_autoclosable', function() {
 
 provide();
 
-function buildPopupWithOwner(parentDomElem, isAutoclosable) {
-    var ownerDomElem = $(BEMHTML.apply({
+function buildPopupWithAnchor(parentDomElem, isAutoclosable) {
+    var anchorDomElem = $(BEMHTML.apply({
             tag : 'span',
-            content : 'owner'
+            content : 'anchor'
         })).appendTo(parentDomElem);
 
     return {
-        ownerDomElem : ownerDomElem,
+        anchorDomElem : anchorDomElem,
         popup : BEMDOM.init(
-            $(BEMHTML.apply({ block : 'popup', content : 'content', mods : { autoclosable : isAutoclosable } }))
+            $(BEMHTML.apply({
+                block : 'popup',
+                mods : { target : 'anchor', autoclosable : isAutoclosable },
+                content : 'content'
+            }))
                 .appendTo(parentDomElem))
-            .bem('popup')
-            .setTarget(ownerDomElem)
+                .bem('popup')
+                .setAnchor(anchorDomElem)
     };
 }