Merge pull request #411 from yandex-ui/fix-375

fix #375
yandex-ui · Aug 6, 2014 · 27b8231 · 27b8231
2 parents 4d0b81c + 18f551f
commit 27b8231
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 37 deletions.
diff --git a/blocks/popup/popup.js b/blocks/popup/popup.js
@@ -129,7 +129,6 @@
         tailOffset: 13,
 
         options: {
-            tail: 'center',
             height: 'auto',
             minHeight: 'auto',
             width: 'auto',
@@ -156,10 +155,12 @@
 
         _create: function() {
             this._super();
-            this.$tail = $('<div class="_nb-popup-tail"><i/></div>');
+            if (!this.options.withoutTail) {
+                this.$tail = $('<div class="_nb-popup-tail"><i/></div>');
+                //TODO: проверить, что вызывается один раз
+                this.$tail.prependTo(this.uiDialog);
+            }
 
-            //TODO: проверить, что вызывается один раз
-            this.$tail.prependTo(this.uiDialog);
         },
         _position: function() {
             var that = this;
@@ -187,36 +188,39 @@
                 // Позиционирование хвостика вдоль попапа, необходимо для того,
                 // чтобы хвостик указывал на центр целевого элемента.
 
-                var css = {};
-
-                if (_isDirectionVertical(tailDirection)) {
-                    if (targetCenter.x > ui.element.left + ui.element.width - 12) {
-                        css = {
-                            left: (ui.element.width - 12) + 'px'
-                        }
-                    } else {
-                        css = {
-                            left: Math.abs(targetCenter.x - ui.element.left) / ui.element.width * 100 + '%'
-                        }
-                    }
 
-                    that.$tail.css($.extend(defaultTailPosition, css));
-                } else {
+                if (!that.options.withoutTail) {
+                    var css = {};
 
-                    if (targetCenter.x > ui.element.top +  ui.element.height - 12) {
-                        css = {
-                            top: (ui.element.height - 12) + 'px'
+                    if (_isDirectionVertical(tailDirection)) {
+                        if (targetCenter.x > ui.element.left + ui.element.width - 12) {
+                            css = {
+                                left: (ui.element.width - 12) + 'px'
+                            }
+                        } else {
+                            css = {
+                                left: Math.abs(targetCenter.x - ui.element.left) / ui.element.width * 100 + '%'
+                            }
                         }
+
+                        that.$tail.css($.extend(defaultTailPosition, css));
                     } else {
-                        css = {
-                            top: Math.abs(targetCenter.y - ui.element.top) / ui.element.height * 100 + '%'
+
+                        if (targetCenter.x > ui.element.top + ui.element.height - 12) {
+                            css = {
+                                top: (ui.element.height - 12) + 'px'
+                            }
+                        } else {
+                            css = {
+                                top: Math.abs(targetCenter.y - ui.element.top) / ui.element.height * 100 + '%'
+                            }
                         }
-                    }
 
-                    that.$tail.css($.extend(defaultTailPosition, css));
+                        that.$tail.css($.extend(defaultTailPosition, css));
+                    }
                 }
 
-                props[tailDirection] += that.tailOffset;
+                props[tailDirection] += that.options.withoutTail ? 0 : that.tailOffset;
 
                 return using.call(el, props, ui);
             };
@@ -613,7 +617,6 @@
             }
 
             $(this.node).contextDialog({
-                tail: data.tail,
                 position: {
                     // где попап
                     at: (how.at ? how.at : 'center bottom'),// + ' center',
@@ -632,7 +635,8 @@
                 },
                 appendTo: params.appendTo || how.appendTo,
                 autoclose: autoclose,
-                autofocus: autofocus
+                autofocus: autofocus,
+                withoutTail: params.withoutTail || data.withouttail || false
             });
         }
     }, 'base');
@@ -657,6 +661,14 @@ nb.define('popup-toggler', {
 
             //  Как позиционировать попап.
             how: this.data.how,
+            // Без хвоста
+            withoutTail: this.data.withoutTail,
+
+            // Закрывать ли автоматически
+            autoclose: this.data.autoclose,
+
+            // Фокусировать ли автоматически
+            autofocus: this.data.autofocus,
 
             // Куда его вставлять
             appendTo: this.data.appendTo

diff --git a/blocks/popup/popup.md b/blocks/popup/popup.md
@@ -42,7 +42,7 @@
 * `id` {string}
 * `class` {array} — additional classes
 * `attrs` {object} — custom DOM attributes
-* `tail` {string} — position of 'tail' widget — left|right|top|bottom
+* `withoutTail` {boolean}  
 * `static` {boolean} — `true()` to prevent initialisation
 * `menu` {array} — array of objects:
     * Object for menu element:
@@ -184,6 +184,7 @@ Arguments:
         * `appendTo` {string} —  selector where append to
         * `autoclose` {boolean} 
         * `autofocus` {boolean} 
+        * `withoutTail` {boolean}  
         * `how` {object} – http://api.jqueryui.com/position/
         ```
         {
@@ -239,7 +240,8 @@ Arguments:
 * `id` {string} — id of connecte popup
 * `appendTo` {string} —  selector where append to
 * `autoclose` {boolean} 
-* `autofocus` {boolean} 
+* `autofocus` {boolean}
+* `withoutTail` {boolean} 
 * `how` {object} – http://api.jqueryui.com/position/
 ```
 {
@@ -248,7 +250,6 @@ Arguments:
     collision: '..',
     using: '..',
     within '..',
-
 }
 ```
 

diff --git a/blocks/popup/popup.yate b/blocks/popup/popup.yate
@@ -22,8 +22,8 @@ match .popupMenu nb {
 
         apply . nb-main-attrs
 
-        if .tail {
-            @data-nb-tail = .tail
+        if(.withoutTail) {
+            @data-nb-withoutTail = 'true'
         }
 
         <ul class="_nb-popup-menu">
@@ -61,8 +61,8 @@ match .popup nb {
 
         apply . nb-main-attrs
 
-        if .tail {
-            @data-nb-tail = .tail
+        if( .withoutTail ) {
+           @data-nb-withoutTail = 'true'
         }
 
         if .titleContent {

diff --git a/demo/popups.yate b/demo/popups.yate
@@ -30,6 +30,14 @@ func toggle-to-top() {
     </a>
 }
 
+func toggle-w-t() {
+    <a id="popup-toggler4" class="nb link link_wrapper link_pseudo" data-nb="popup-toggler" data-nb-popup-toggler="{{id: 'popup-without-tail'}}" href="#top">
+        <span class="link__inner">
+            "Попап без хвостика"
+        </span>
+    </a>
+}
+
 func toggle-modal() {
     <a class="nb link link_wrapper link_pseudo" data-nb="popup-toggler" data-nb-popup-toggler="{{id: 'popup4'}}" href="#modal">
         <span class="link__inner">
@@ -100,7 +108,6 @@ func popups() {
 
     toLeft = {
         'id': 'popup2'
-        'tail': 'top'
         'menu': [
             {
                 'href': '#'
@@ -119,7 +126,6 @@ func popups() {
 
     toTop = {
         'id': 'popup3'
-        'tail': 'left'
         'menu': [
             {
                 'href': '#'
@@ -136,6 +142,25 @@ func popups() {
         ]
     }
 
+    withoutTail = {
+      'id': 'popup-without-tail'
+      'withoutTail': true()
+      'menu': [
+          {
+              'href': '#'
+              'content': 'Скопировать'
+          }
+          {
+              'href': '#'
+              'content': 'Переместить'
+          }
+          {
+              'href': '#'
+              'content': 'Удалить'
+          }
+      ]
+    }
+
     modal = {
        'id': 'popup4'
        'titleContent': 'Some modal popup'
@@ -301,6 +326,15 @@ func popups() {
 
         nb-popup-menu(toTop)
     </div>
+    <div class="demo-section">
+        <div class="demo-group">
+            podium(toggle-w-t())
+            code(toggle-w-t())
+            code(nb-popup-menu(withoutTail))
+        </div>
+
+        nb-popup-menu(withoutTail)
+    </div>
     <div class="demo-section">
         <div class="demo-group">
             podium(toggle-modal())

diff --git a/unittests/spec/popup/popup.js b/unittests/spec/popup/popup.js
@@ -15,6 +15,20 @@ describe("Popup Tests", function() {
         this.toggler.destroy();
     });
 
+    describe("YATE API", function() {
+        it("Popup Without tail", function() {
+            var toggler = nb.find('popup-toggler-w-t');
+            toggler.open();
+            expect(nb.find('popup1').$node.parent().find('._nb-popup-tail').length).to.equal(0);
+        });
+
+        it("Toggler Without tail", function() {
+            var toggler = nb.find('popup-toggler-w-t1');
+            toggler.open();
+            expect(nb.find('popup-w-t').$node.parent().find('._nb-popup-tail').length).to.equal(0);
+        });
+
+    });
     describe("Init", function() {
         it("Init popup", function() {
             expect(this.popup).to.not.equal(null);

diff --git a/unittests/spec/popup/popup.yate b/unittests/spec/popup/popup.yate
@@ -5,6 +5,18 @@ match .popup {
         </span>
     </a>
 
+    <a id="popup-toggler-w-t" class="_init" data-nb="popup-toggler" data-nb-popup-toggler="{{id: 'popup1', appendTo: '.content', withoutTail: true}}" href="#default">
+        <span class="link__inner">
+            "popup"
+        </span>
+    </a>
+
+    <a id="popup-toggler-w-t1" class="_init" data-nb="popup-toggler" data-nb-popup-toggler="{{id: 'popup-w-t', appendTo: '.content'}}" href="#default">
+        <span class="link__inner">
+            "popup"
+        </span>
+    </a>
+
  nb-popup({
     'id': 'popup'
     'content': 'Удалить'
@@ -14,4 +26,10 @@ match .popup {
     'id': 'popup1'
     'content': 'Удалить'
  })
+
+ nb-popup({
+    'id': 'popup-w-t'
+    'withoutTail': true()
+    'content': 'Удалить'
+ })
 }