Convert drilldown to ES6 class

diff --git a/js/foundation.drilldown.js b/js/foundation.drilldown.js
index ed7dfa906f3ba92c8739a09b61035653d11e21dd..f7ebd69e4a3434040b81c28bfb0f8025249c6d76 100644 (file)
--- a/js/foundation.drilldown.js
+++ b/js/foundation.drilldown.js
@@ -1,3 +1,5 @@
+'use strict';
+
 /**
  * Drilldown module.
  * @module foundation.drilldown
@@ -5,16 +7,15 @@
  * @requires foundation.util.motion
  * @requires foundation.util.nest
  */
-!function($, Foundation){
-  'use strict';
 
+export default 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 +36,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 +49,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 +58,7 @@
    * @private
    * @function
    */
-  Drilldown.prototype._prepareMenu = function(){
+  _prepareMenu() {
     var _this = this;
     // if(!this.options.holdOpen){
     //   this._menuLinkEvents();
@@ -105,15 +87,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 +119,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 +182,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 +199,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 +216,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,25 +233,27 @@
             _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(){
@@ -277,15 +264,15 @@
      * @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;
@@ -296,12 +283,13 @@
     result.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()
@@ -317,5 +305,31 @@
     });
     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>',
+  /**
+   * Allow the menu to return to root list on body click.
+   * @option
+   * @example false
+   */
+  closeOnClick: false
+  // holdOpen: false
+};
+
+// Window exports
+if (window.Foundation) {
+  window.Foundation.plugin(Drilldown, 'Drilldown');
+}