foundation.dropdown.js.es6 in foundation-rails-6.3.0.0

- old
+ new

@@ -25,13 +25,11 @@
 
     Foundation.registerPlugin(this, 'Dropdown');
     Foundation.Keyboard.register('Dropdown', {
       'ENTER': 'open',
       'SPACE': 'open',
-      'ESCAPE': 'close',
-      'TAB': 'tab_forward',
-      'SHIFT_TAB': 'tab_backward'
+      'ESCAPE': 'close'
     });
   }
 
   /**
    * Initializes the plugin by setting/checking options and attributes, adding helper variables, and saving the anchor.
@@ -49,10 +47,15 @@
       'aria-haspopup': true,
       'aria-expanded': false
 
     });
 
+    if(this.options.parentClass){
+      this.$parent = this.$element.parents('.' + this.options.parentClass);
+    }else{
+      this.$parent = null;
+    }
     this.options.positionClass = this.getPositionClass();
     this.counter = 4;
     this.usedPositions = [];
     this.$element.attr({
       'aria-hidden': 'true',
@@ -132,24 +135,32 @@
         _this = this,
         direction = (position === 'left' ? 'left' : ((position === 'right') ? 'left' : 'top')),
         param = (direction === 'top') ? 'height' : 'width',
         offset = (param === 'height') ? this.options.vOffset : this.options.hOffset;
 
+    if(($eleDims.width >= $eleDims.windowDims.width) || (!this.counter && !Foundation.Box.ImNotTouchingYou(this.$element, this.$parent))){
+      var newWidth = $eleDims.windowDims.width,
+          parentHOffset = 0;
+      if(this.$parent){
+        var $parentDims = Foundation.Box.GetDimensions(this.$parent),
+            parentHOffset = $parentDims.offset.left;
+        if ($parentDims.width < newWidth){
+          newWidth = $parentDims.width;
+        }
+      }
 
-
-    if(($eleDims.width >= $eleDims.windowDims.width) || (!this.counter && !Foundation.Box.ImNotTouchingYou(this.$element))){
-      this.$element.offset(Foundation.Box.GetOffsets(this.$element, this.$anchor, 'center bottom', this.options.vOffset, this.options.hOffset, true)).css({
-        'width': $eleDims.windowDims.width - (this.options.hOffset * 2),
+      this.$element.offset(Foundation.Box.GetOffsets(this.$element, this.$anchor, 'center bottom', this.options.vOffset, this.options.hOffset + parentHOffset, true)).css({
+        'width': newWidth - (this.options.hOffset * 2),
         'height': 'auto'
       });
       this.classChanged = true;
       return false;
     }
 
     this.$element.offset(Foundation.Box.GetOffsets(this.$element, this.$anchor, position, this.options.vOffset, this.options.hOffset));
 
-    while(!Foundation.Box.ImNotTouchingYou(this.$element, false, true) && this.counter){
+    while(!Foundation.Box.ImNotTouchingYou(this.$element, this.$parent, true) && this.counter){
       this._reposition(position);
       this._setPosition();
     }
   }
 
@@ -168,24 +179,25 @@
     });
 
     if(this.options.hover){
       this.$anchor.off('mouseenter.zf.dropdown mouseleave.zf.dropdown')
       .on('mouseenter.zf.dropdown', function(){
-            if($('body[data-whatinput="mouse"]').is('*')) {
-              clearTimeout(_this.timeout);
-              _this.timeout = setTimeout(function(){
-                _this.open();
-                _this.$anchor.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.options.hoverDelay);
-          });
+        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.options.hoverDelay);
+        }
+      }).on('mouseleave.zf.dropdown', function(){
+        clearTimeout(_this.timeout);
+        _this.timeout = setTimeout(function(){
+          _this.close();
+          _this.$anchor.data('hover', false);
+        }, _this.options.hoverDelay);
+      });
       if(this.options.hoverPane){
         this.$element.off('mouseenter.zf.dropdown mouseleave.zf.dropdown')
             .on('mouseenter.zf.dropdown', function(){
               clearTimeout(_this.timeout);
             }).on('mouseleave.zf.dropdown', function(){
@@ -201,30 +213,10 @@
 
       var $target = $(this),
         visibleFocusableElements = Foundation.Keyboard.findFocusable(_this.$element);
 
       Foundation.Keyboard.handleKey(e, 'Dropdown', {
-        tab_forward: function() {
-          if (_this.$element.find(':focus').is(visibleFocusableElements.eq(-1))) { // left modal downwards, setting focus to first element
-            if (_this.options.trapFocus) { // if focus shall be trapped
-              visibleFocusableElements.eq(0).focus();
-              e.preventDefault();
-            } else { // if focus is not trapped, close dropdown on focus out
-              _this.close();
-            }
-          }
-        },
-        tab_backward: function() {
-          if (_this.$element.find(':focus').is(visibleFocusableElements.eq(0)) || _this.$element.is(':focus')) { // left modal upwards, setting focus to last element
-            if (_this.options.trapFocus) { // if focus shall be trapped
-              visibleFocusableElements.eq(-1).focus();
-              e.preventDefault();
-            } else { // if focus is not trapped, close dropdown on focus out
-              _this.close();
-            }
-          }
-        },
         open: function() {
           if ($target.is(_this.$anchor)) {
             _this.open();
             _this.$element.attr('tabindex', -1).focus();
             e.preventDefault();
@@ -286,10 +278,14 @@
       }
     }
 
     if(this.options.closeOnClick){ this._addBodyHandler(); }
 
+    if (this.options.trapFocus) {
+      Foundation.Keyboard.trapFocus(this.$element);
+    }
+
     /**
      * Fires once the dropdown is visible.
      * @event Dropdown#show
      */
     this.$element.trigger('show.zf.dropdown', [this.$element]);
@@ -320,10 +316,14 @@
       this.classChanged = false;
       this.counter = 4;
       this.usedPositions.length = 0;
     }
     this.$element.trigger('hide.zf.dropdown', [this.$element]);
+
+    if (this.options.trapFocus) {
+      Foundation.Keyboard.releaseFocus(this.$element);
+    }
   }
 
   /**
    * Toggles the dropdown pane's visibility.
    * @function
@@ -348,9 +348,15 @@
     Foundation.unregisterPlugin(this);
   }
 }
 
 Dropdown.defaults = {
+  /**
+   * Class that designates bounding container of Dropdown (Default: window)
+   * @option
+   * @example 'dropdown-parent'
+   */
+  parentClass: null,
   /**
    * Amount of time to delay opening a submenu on hover event.
    * @option
    * @example 250
    */