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

bem · Sep 9, 2014 · 725b3a1 · 725b3a1
1 parent 9739588
commit 725b3a1
Show file tree

Hide file tree

Showing 8 changed files with 484 additions and 342 deletions.
diff --git a/common.blocks/popup/_autoclosable/popup_autoclosable.deps.js b/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' } }
+}]
diff --git a/common.blocks/popup/_autoclosable/popup_autoclosable.js b/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?

diff --git a/common.blocks/popup/_autoclosable/popup_autoclosable.spec.js b/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)
     };
 }
 

diff --git a/common.blocks/popup/_target/popup_target.js b/common.blocks/popup/_target/popup_target.js
@@ -96,8 +96,7 @@ provide(Popup.decl({ modName : 'target' }, /** @lends popup.prototype */{
     _calcDrawingCss : function(drawingParams) {
         return {
             left : drawingParams.left,
-            top : drawingParams.top,
-            zIndex : this._zIndex
+            top : drawingParams.top
         };
     },