Track of the triggering anchor

Changed Dropdown panes so that it is arranged with the position of primary anchor as a reference.

diff --git a/js/foundation.dropdown.js b/js/foundation.dropdown.js
index ed32aa836115628b530f6e77dc149ac9822cceb1..dff3708cf86eef015f6aeafcdb435e2658113cfe 100644 (file)
--- a/js/foundation.dropdown.js
+++ b/js/foundation.dropdown.js
@@ -49,14 +49,13 @@ class Dropdown extends Positionable {
   _init() {
     var $id = this.$element.attr('id');
 
-    this.$anchor = $(`[data-toggle="${$id}"]`).length ? $(`[data-toggle="${$id}"]`) : $(`[data-open="${$id}"]`);
-    this.$anchor.attr({
+    this.$anchors = $(`[data-toggle="${$id}"]`).length ? $(`[data-toggle="${$id}"]`) : $(`[data-open="${$id}"]`);
+    this.$anchors.attr({
       'aria-controls': $id,
       'data-is-focus': false,
       'data-yeti-box': $id,
       'aria-haspopup': true,
       'aria-expanded': false
-
     });
 
     if(this.options.parentClass){
@@ -69,7 +68,7 @@ class Dropdown extends Positionable {
       'aria-hidden': 'true',
       'data-yeti-box': $id,
       'data-resize': $id,
-      'aria-labelledby': this.$anchor[0].id || GetYoDigits(6, 'dd-anchor')
+      'aria-labelledby': this.$anchors[0].id || GetYoDigits(6, 'dd-anchor')
     });
     super._init();
     this._events();
@@ -87,7 +86,7 @@ class Dropdown extends Positionable {
 
   _getDefaultAlignment() {
     // handle legacy float approach
-    var horizontalPosition = /float-(\S+)/.exec(this.$anchor[0].className);
+    var horizontalPosition = /float-(\S+)/.exec(this.$anchors[0].className);
     if(horizontalPosition) {
       return horizontalPosition[1];
     }
@@ -104,7 +103,19 @@ class Dropdown extends Positionable {
    * @private
    */
   _setPosition() {
-    super._setPosition(this.$anchor, this.$element, this.$parent);
+    super._setPosition(this.$anchors.filter('[data-is-primary]').first(), this.$element, this.$parent);
+  }
+
+  /**
+   * Make it a primary anchor.
+   * primary anchor as the reference for the position of Dropdown panes.
+   * @param {HTML} el - DOM element of the anchor.
+   * @function
+   * @private
+   */
+  _setPrimaryAnchor(el) {
+    this.$anchors.removeAttr('data-is-primary');
+    $(el).attr('data-is-primary', true);
   }
 
   /**
@@ -121,22 +132,27 @@ class Dropdown extends Positionable {
       'resizeme.zf.trigger': this._setPosition.bind(this)
     });
 
+    this.$anchors.off('click.zf.trigger')
+      .on('click.zf.trigger', function() { _this._setPrimaryAnchor(this); });
+
     if(this.options.hover){
-      this.$anchor.off('mouseenter.zf.dropdown mouseleave.zf.dropdown')
+      this.$anchors.off('mouseenter.zf.dropdown mouseleave.zf.dropdown')
       .on('mouseenter.zf.dropdown', function(){
+        _this._setPrimaryAnchor(this);
+
         var bodyData = $('body').data();
         if(typeof(bodyData.whatinput) === 'undefined' || bodyData.whatinput === 'mouse') {
           clearTimeout(_this.timeout);
           _this.timeout = setTimeout(function(){
             _this.open();
-            _this.$anchor.data('hover', true);
+            _this.$anchors.data('hover', true);
           }, _this.options.hoverDelay);
         }
       }).on('mouseleave.zf.dropdown', function(){
         clearTimeout(_this.timeout);
         _this.timeout = setTimeout(function(){
           _this.close();
-          _this.$anchor.data('hover', false);
+          _this.$anchors.data('hover', false);
         }, _this.options.hoverDelay);
       });
       if(this.options.hoverPane){
@@ -147,19 +163,19 @@ class Dropdown extends Positionable {
               clearTimeout(_this.timeout);
               _this.timeout = setTimeout(function(){
                 _this.close();
-                _this.$anchor.data('hover', false);
+                _this.$anchors.data('hover', false);
               }, _this.options.hoverDelay);
             });
       }
     }
-    this.$anchor.add(this.$element).on('keydown.zf.dropdown', function(e) {
+    this.$anchors.add(this.$element).on('keydown.zf.dropdown', function(e) {
 
       var $target = $(this),
         visibleFocusableElements = Keyboard.findFocusable(_this.$element);
 
       Keyboard.handleKey(e, 'Dropdown', {
         open: function() {
-          if ($target.is(_this.$anchor)) {
+          if ($target.is(_this.$anchors)) {
             _this.open();
             _this.$element.attr('tabindex', -1).focus();
             e.preventDefault();
@@ -167,7 +183,7 @@ class Dropdown extends Positionable {
         },
         close: function() {
           _this.close();
-          _this.$anchor.focus();
+          _this.$anchors.focus();
         }
       });
     });
@@ -183,7 +199,7 @@ class Dropdown extends Positionable {
          _this = this;
      $body.off('click.zf.dropdown')
           .on('click.zf.dropdown', function(e){
-            if(_this.$anchor.is(e.target) || _this.$anchor.find(e.target).length) {
+            if(_this.$anchors.is(e.target) || _this.$anchors.find(e.target).length) {
               return;
             }
             if(_this.$element.find(e.target).length) {
@@ -207,7 +223,7 @@ class Dropdown extends Positionable {
      * @event Dropdown#closeme
      */
     this.$element.trigger('closeme.zf.dropdown', this.$element.attr('id'));
-    this.$anchor.addClass('hover')
+    this.$anchors.addClass('hover')
         .attr({'aria-expanded': true});
     // this.$element/*.show()*/;
 
@@ -248,7 +264,7 @@ class Dropdown extends Positionable {
     this.$element.removeClass('is-open')
         .attr({'aria-hidden': true});
 
-    this.$anchor.removeClass('hover')
+    this.$anchors.removeClass('hover')
         .attr('aria-expanded', false);
 
     /**
@@ -268,7 +284,7 @@ class Dropdown extends Positionable {
    */
   toggle() {
     if(this.$element.hasClass('is-open')){
-      if(this.$anchor.data('hover')) return;
+      if(this.$anchors.data('hover')) return;
       this.close();
     }else{
       this.open();
@@ -281,7 +297,7 @@ class Dropdown extends Positionable {
    */
   _destroy() {
     this.$element.off('.zf.trigger').hide();
-    this.$anchor.off('.zf.dropdown');
+    this.$anchors.off('.zf.dropdown');
     $(document.body).off('click.zf.dropdown');
 
   }