foundation-rails 6.1.2.0 → 6.2.0.0

data/vendor/assets/js/{foundation.drilldown.js → foundation.drilldown.js.es6}

@@ -1,3 +1,7 @@
+'use strict';
+
+!function($) {
+
 /**
  * Drilldown module.
  * @module foundation.drilldown
@@ -5,16 +9,15 @@
  * @requires foundation.util.motion
  * @requires foundation.util.nest
  */
-!function($, Foundation){
-  'use strict';
 
+class Drilldown {
   /**
    * Creates a new instance of a drilldown menu.
    * @class
    * @param {jQuery} element - jQuery object to make into an accordion menu.
    * @param {Object} options - Overrides to the default plugin settings.
    */
-  function Drilldown(element, options){
+  constructor(element, options) {
     this.$element = element;
     this.options = $.extend({}, Drilldown.defaults, this.$element.data(), options);
 
@@ -35,32 +38,12 @@
       'SHIFT_TAB': 'up'
     });
   }
-  Drilldown.defaults = {
-    /**
-     * Markup used for JS generated back button. Prepended to submenu lists and deleted on `destroy` method, 'js-drilldown-back' class required. Remove the backslash (`\`) if copy and pasting.
-     * @option
-     * @example '<\li><\a>Back<\/a><\/li>'
-     */
-    backButton: '<li class="js-drilldown-back"><a>Back</a></li>',
-    /**
-     * Markup used to wrap drilldown menu. Use a class name for independent styling; the JS applied class: `is-drilldown` is required. Remove the backslash (`\`) if copy and pasting.
-     * @option
-     * @example '<\div class="is-drilldown"><\/div>'
-     */
-    wrapper: '<div></div>',
-    /**
-     * Allow the menu to return to root list on body click.
-     * @option
-     * @example false
-     */
-    closeOnClick: false
-    // holdOpen: false
-  };
+
   /**
    * Initializes the drilldown by creating jQuery collections of elements
    * @private
    */
-  Drilldown.prototype._init = function(){
+  _init() {
     this.$submenuAnchors = this.$element.find('li.is-drilldown-submenu-parent');
     this.$submenus = this.$submenuAnchors.children('[data-submenu]');
     this.$menuItems = this.$element.find('li').not('.js-drilldown-back').attr('role', 'menuitem');
@@ -68,7 +51,8 @@
     this._prepareMenu();
 
     this._keyboardEvents();
-  };
+  }
+
   /**
    * prepares drilldown menu by setting attributes to links and elements
    * sets a min height to prevent content jumping
@@ -76,7 +60,7 @@
    * @private
    * @function
    */
-  Drilldown.prototype._prepareMenu = function(){
+  _prepareMenu() {
     var _this = this;
     // if(!this.options.holdOpen){
     //   this._menuLinkEvents();
@@ -84,6 +68,9 @@
     this.$submenuAnchors.each(function(){
       var $sub = $(this);
       var $link = $sub.find('a:first');
+      if(_this.options.parentLink){
+        $link.clone().prependTo($sub.children('[data-submenu]')).wrap('<li class="is-submenu-parent-item is-submenu-item is-drilldown-submenu-item" role="menu-item"></li>');
+      }
       $link.data('savedHref', $link.attr('href')).removeAttr('href');
       $sub.children('[data-submenu]')
           .attr({
@@ -105,15 +92,15 @@
       this.$wrapper = $(this.options.wrapper).addClass('is-drilldown').css(this._getMaxDims());
       this.$element.wrap(this.$wrapper);
     }
+  }
 
-  };
   /**
    * Adds event handlers to elements in the menu.
    * @function
    * @private
    * @param {jQuery} $elem - the current menu item to add handlers to.
    */
-  Drilldown.prototype._events = function($elem){
+  _events($elem) {
     var _this = this;
 
     $elem.off('click.zf.drilldown')
@@ -137,12 +124,13 @@
         });
       }
     });
-  };
+  }
+
   /**
    * Adds keydown event listener to `li`'s in the menu.
    * @private
    */
-  Drilldown.prototype._keyboardEvents = function() {
+  _keyboardEvents() {
     var _this = this;
     this.$menuItems.add(this.$element.find('.js-drilldown-back')).on('keydown.zf.drilldown', function(e){
       var $element = $(this),
@@ -199,14 +187,14 @@
         }
       });
     }); // end keyboardAccess
-  };
+  }
 
   /**
    * Closes all open elements, and returns to root menu.
    * @function
    * @fires Drilldown#closed
    */
-  Drilldown.prototype._hideAll = function(){
+  _hideAll() {
     var $elem = this.$element.find('.is-drilldown-submenu.is-active').addClass('is-closing');
     $elem.one(Foundation.transitionend($elem), function(e){
       $elem.removeClass('is-active is-closing');
@@ -216,14 +204,15 @@
          * @event Drilldown#closed
          */
     this.$element.trigger('closed.zf.drilldown');
-  };
+  }
+
   /**
    * Adds event listener for each `back` button, and closes open menus.
    * @function
    * @fires Drilldown#back
    * @param {jQuery} $elem - the current sub-menu to add `back` event.
    */
-  Drilldown.prototype._back = function($elem){
+  _back($elem) {
     var _this = this;
     $elem.off('click.zf.drilldown');
     $elem.children('.js-drilldown-back')
@@ -232,13 +221,14 @@
         // console.log('mouseup on back');
         _this._hide($elem);
       });
-  };
+  }
+
   /**
    * Adds event listener to menu items w/o submenus to close open menus on click.
    * @function
    * @private
    */
-  Drilldown.prototype._menuLinkEvents = function(){
+  _menuLinkEvents() {
     var _this = this;
     this.$menuItems.not('.is-drilldown-submenu-parent')
         .off('click.zf.drilldown')
@@ -248,64 +238,68 @@
             _this._hideAll();
           }, 0);
       });
-  };
+  }
+
   /**
    * Opens a submenu.
    * @function
    * @fires Drilldown#open
    * @param {jQuery} $elem - the current element with a submenu to open.
    */
-  Drilldown.prototype._show = function($elem){
+  _show($elem) {
     $elem.children('[data-submenu]').addClass('is-active');
 
     this.$element.trigger('open.zf.drilldown', [$elem]);
   };
+
   /**
    * Hides a submenu
    * @function
    * @fires Drilldown#hide
    * @param {jQuery} $elem - the current sub-menu to hide.
    */
-  Drilldown.prototype._hide = function($elem){
+  _hide($elem) {
     var _this = this;
     $elem.addClass('is-closing')
          .one(Foundation.transitionend($elem), function(){
            $elem.removeClass('is-active is-closing');
+           $elem.blur();
          });
     /**
      * Fires when the submenu is has closed.
      * @event Drilldown#hide
      */
     $elem.trigger('hide.zf.drilldown', [$elem]);
+  }
 
-  };
   /**
    * Iterates through the nested menus to calculate the min-height, and max-width for the menu.
    * Prevents content jumping.
    * @function
    * @private
    */
-  Drilldown.prototype._getMaxDims = function(){
+  _getMaxDims() {
     var max = 0, result = {};
     this.$submenus.add(this.$element).each(function(){
       var numOfElems = $(this).children('li').length;
       max = numOfElems > max ? numOfElems : max;
     });
 
-    result.height = max * this.$menuItems[0].getBoundingClientRect().height + 'px';
-    result.width = this.$element[0].getBoundingClientRect().width + 'px';
+    result['min-height'] = `${max * this.$menuItems[0].getBoundingClientRect().height}px`;
+    result['max-width'] = `${this.$element[0].getBoundingClientRect().width}px`;
 
     return result;
-  };
+  }
+
   /**
    * Destroys the Drilldown Menu
    * @function
    */
-  Drilldown.prototype.destroy = function(){
+  destroy() {
     this._hideAll();
     Foundation.Nest.Burn(this.$element, 'drilldown');
     this.$element.unwrap()
-                 .find('.js-drilldown-back').remove()
+                 .find('.js-drilldown-back, .is-submenu-parent-item').remove()
                  .end().find('.is-active, .is-closing, .is-drilldown-submenu').removeClass('is-active is-closing is-drilldown-submenu')
                  .end().find('[data-submenu]').removeAttr('aria-hidden tabindex role')
                  .off('.zf.drilldown').end().off('zf.drilldown');
@@ -317,5 +311,37 @@
     });
     Foundation.unregisterPlugin(this);
   };
-  Foundation.plugin(Drilldown, 'Drilldown');
-}(jQuery, window.Foundation);
+}
+
+Drilldown.defaults = {
+  /**
+   * Markup used for JS generated back button. Prepended to submenu lists and deleted on `destroy` method, 'js-drilldown-back' class required. Remove the backslash (`\`) if copy and pasting.
+   * @option
+   * @example '<\li><\a>Back<\/a><\/li>'
+   */
+  backButton: '<li class="js-drilldown-back"><a>Back</a></li>',
+  /**
+   * Markup used to wrap drilldown menu. Use a class name for independent styling; the JS applied class: `is-drilldown` is required. Remove the backslash (`\`) if copy and pasting.
+   * @option
+   * @example '<\div class="is-drilldown"><\/div>'
+   */
+  wrapper: '<div></div>',
+  /**
+   * Adds the parent link to the submenu.
+   * @option
+   * @example false
+   */
+  parentLink: false,
+  /**
+   * Allow the menu to return to root list on body click.
+   * @option
+   * @example false
+   */
+  closeOnClick: false
+  // holdOpen: false
+};
+
+// Window exports
+Foundation.plugin(Drilldown, 'Drilldown');
+
+}(jQuery);

data/vendor/assets/js/{foundation.dropdown.js → foundation.dropdown.js.es6}

@@ -1,3 +1,7 @@
+'use strict';
+
+!function($) {
+
 /**
  * Dropdown module.
  * @module foundation.dropdown
@@ -5,8 +9,8 @@
  * @requires foundation.util.box
  * @requires foundation.util.triggers
  */
-!function($, Foundation){
-  'use strict';
+
+class Dropdown {
   /**
    * Creates a new instance of a dropdown.
    * @class
@@ -14,7 +18,7 @@
    *        Object should be of the dropdown panel, rather than its anchor.
    * @param {Object} options - Overrides to the default plugin settings.
    */
-  function Dropdown(element, options){
+  constructor(element, options) {
     this.$element = element;
     this.options = $.extend({}, Dropdown.defaults, this.$element.data(), options);
     this._init();
@@ -29,78 +33,22 @@
     });
   }
 
-  Dropdown.defaults = {
-    /**
-     * Amount of time to delay opening a submenu on hover event.
-     * @option
-     * @example 250
-     */
-    hoverDelay: 250,
-    /**
-     * Allow submenus to open on hover events
-     * @option
-     * @example false
-     */
-    hover: false,
-    /**
-     * Don't close dropdown when hovering over dropdown pane
-     * @option
-     * @example true
-     */
-    hoverPane: false,
-    /**
-     * Number of pixels between the dropdown pane and the triggering element on open.
-     * @option
-     * @example 1
-     */
-    vOffset: 1,
-    /**
-     * Number of pixels between the dropdown pane and the triggering element on open.
-     * @option
-     * @example 1
-     */
-    hOffset: 1,
-    /**
-     * Class applied to adjust open position. JS will test and fill this in.
-     * @option
-     * @example 'top'
-     */
-    positionClass: '',
-    /**
-     * Allow the plugin to trap focus to the dropdown pane if opened with keyboard commands.
-     * @option
-     * @example false
-     */
-    trapFocus: false,
-    /**
-     * Allow the plugin to set focus to the first focusable element within the pane, regardless of method of opening.
-     * @option
-     * @example true
-     */
-    autoFocus: false,
-    /**
-     * Allows a click on the body to close the dropdown.
-     * @option
-     * @example false
-     */
-    closeOnClick: false
-  };
   /**
    * Initializes the plugin by setting/checking options and attributes, adding helper variables, and saving the anchor.
    * @function
    * @private
    */
-  Dropdown.prototype._init = function(){
+  _init() {
     var $id = this.$element.attr('id');
 
-    this.$anchor = $('[data-toggle="' + $id + '"]') || $('[data-open="' + $id + '"]');
+    this.$anchor = $(`[data-toggle="${$id}"]`) || $(`[data-open="${$id}"]`);
     this.$anchor.attr({
       'aria-controls': $id,
       'data-is-focus': false,
       'data-yeti-box': $id,
       'aria-haspopup': true,
       'aria-expanded': false
-      // 'data-resize': $id
+
     });
 
     this.options.positionClass = this.getPositionClass();
@@ -113,24 +61,26 @@
       'aria-labelledby': this.$anchor[0].id || Foundation.GetYoDigits(6, 'dd-anchor')
     });
     this._events();
-  };
+  }
+
   /**
    * Helper function to determine current orientation of dropdown pane.
    * @function
    * @returns {String} position - string value of a position class.
    */
-  Dropdown.prototype.getPositionClass = function(){
+  getPositionClass() {
     var position = this.$element[0].className.match(/\b(top|left|right)\b/g);
         position = position ? position[0] : '';
     return position;
-  };
+  }
+
   /**
    * Adjusts the dropdown panes orientation by adding/removing positioning classes.
    * @function
    * @private
    * @param {String} position - position class to remove.
    */
-  Dropdown.prototype._reposition = function(position){
+  _reposition(position) {
     this.usedPositions.push(position ? position : 'bottom');
     //default, try switching to opposite side
     if(!position && (this.usedPositions.indexOf('top') < 0)){
@@ -162,14 +112,15 @@
     }
     this.classChanged = true;
     this.counter--;
-  };
+  }
+
   /**
    * Sets the position and orientation of the dropdown pane, checks for collisions.
    * Recursively calls itself if a collision is detected, with a new position class.
    * @function
    * @private
    */
-  Dropdown.prototype._setPosition = function(){
+  _setPosition() {
     if(this.$anchor.attr('aria-expanded') === 'false'){ return false; }
     var position = this.getPositionClass(),
         $eleDims = Foundation.Box.GetDimensions(this.$element),
@@ -194,13 +145,14 @@
       this._reposition(position);
       this._setPosition();
     }
-  };
+  }
+
   /**
    * Adds event listeners to the element utilizing the triggers utility library.
    * @function
    * @private
    */
-  Dropdown.prototype._events = function(){
+  _events() {
     var _this = this;
     this.$element.on({
       'open.zf.trigger': this.open.bind(this),
@@ -276,13 +228,14 @@
         }
       });
     });
-  };
+  }
+
   /**
    * Adds an event handler to the body to close any dropdowns on a click.
    * @function
    * @private
    */
-  Dropdown.prototype._addBodyHandler = function(){
+  _addBodyHandler() {
      var $body = $(document.body).not(this.$element),
          _this = this;
      $body.off('click.zf.dropdown')
@@ -296,14 +249,15 @@
             _this.close();
             $body.off('click.zf.dropdown');
           });
-  };
+  }
+
   /**
    * Opens the dropdown pane, and fires a bubbling event to close other dropdowns.
    * @function
    * @fires Dropdown#closeme
    * @fires Dropdown#show
    */
-  Dropdown.prototype.open = function(){
+  open() {
     // var _this = this;
     /**
      * Fires to close other open dropdowns
@@ -330,18 +284,15 @@
      * Fires once the dropdown is visible.
      * @event Dropdown#show
      */
-     this.$element.trigger('show.zf.dropdown', [this.$element]);
-    //why does this not work correctly for this plugin?
-    // Foundation.reflow(this.$element, 'dropdown');
-    // Foundation._reflow(this.$element.attr('data-dropdown'));
-  };
+    this.$element.trigger('show.zf.dropdown', [this.$element]);
+  }
 
   /**
    * Closes the open dropdown pane.
    * @function
    * @fires Dropdown#hide
    */
-  Dropdown.prototype.close = function(){
+  close() {
     if(!this.$element.hasClass('is-open')){
       return false;
     }
@@ -363,30 +314,91 @@
       this.usedPositions.length = 0;
     }
     this.$element.trigger('hide.zf.dropdown', [this.$element]);
-    // Foundation.reflow(this.$element, 'dropdown');
-  };
+  }
+
   /**
    * Toggles the dropdown pane's visibility.
    * @function
    */
-  Dropdown.prototype.toggle = function(){
+  toggle() {
     if(this.$element.hasClass('is-open')){
       if(this.$anchor.data('hover')) return;
       this.close();
     }else{
       this.open();
     }
-  };
+  }
+
   /**
    * Destroys the dropdown.
    * @function
    */
-  Dropdown.prototype.destroy = function(){
+  destroy() {
     this.$element.off('.zf.trigger').hide();
     this.$anchor.off('.zf.dropdown');
 
     Foundation.unregisterPlugin(this);
-  };
+  }
+}
+
+Dropdown.defaults = {
+  /**
+   * Amount of time to delay opening a submenu on hover event.
+   * @option
+   * @example 250
+   */
+  hoverDelay: 250,
+  /**
+   * Allow submenus to open on hover events
+   * @option
+   * @example false
+   */
+  hover: false,
+  /**
+   * Don't close dropdown when hovering over dropdown pane
+   * @option
+   * @example true
+   */
+  hoverPane: false,
+  /**
+   * Number of pixels between the dropdown pane and the triggering element on open.
+   * @option
+   * @example 1
+   */
+  vOffset: 1,
+  /**
+   * Number of pixels between the dropdown pane and the triggering element on open.
+   * @option
+   * @example 1
+   */
+  hOffset: 1,
+  /**
+   * Class applied to adjust open position. JS will test and fill this in.
+   * @option
+   * @example 'top'
+   */
+  positionClass: '',
+  /**
+   * Allow the plugin to trap focus to the dropdown pane if opened with keyboard commands.
+   * @option
+   * @example false
+   */
+  trapFocus: false,
+  /**
+   * Allow the plugin to set focus to the first focusable element within the pane, regardless of method of opening.
+   * @option
+   * @example true
+   */
+  autoFocus: false,
+  /**
+   * Allows a click on the body to close the dropdown.
+   * @option
+   * @example false
+   */
+  closeOnClick: false
+}
+
+// Window exports
+Foundation.plugin(Dropdown, 'Dropdown');
 
-  Foundation.plugin(Dropdown, 'Dropdown');
-}(jQuery, window.Foundation);
+}(jQuery);