Convert accordion menu to ES6 class

diff --git a/js/foundation.accordionMenu.js b/js/foundation.accordionMenu.js
index 4a4a082dae22cf0969fb10b1b06d6de279aa9f38..105dbcad75b6146f21d35a8291a929153ab27256 100644 (file)
--- a/js/foundation.accordionMenu.js
+++ b/js/foundation.accordionMenu.js
@@ -1,3 +1,5 @@
+'use strict';
+
 /**
  * AccordionMenu module.
  * @module foundation.accordionMenu
@@ -5,9 +7,8 @@
  * @requires foundation.util.motion
  * @requires foundation.util.nest
  */
-!function($) {
-  'use strict';
 
+export default class AccordionMenu {
   /**
    * Creates a new instance of an accordion menu.
    * @class
@@ -15,7 +16,7 @@
    * @param {jQuery} element - jQuery object to make into an accordion menu.
    * @param {Object} options - Overrides to the default plugin settings.
    */
-  function AccordionMenu(element, options) {
+  constructor(element, options) {  
     this.$element = element;
     this.options = $.extend({}, AccordionMenu.defaults, this.$element.data(), options);
 
@@ -37,26 +38,13 @@
     });
   }
 
-  AccordionMenu.defaults = {
-    /**
-     * Amount of time to animate the opening of a submenu in ms.
-     * @option
-     * @example 250
-     */
-    slideSpeed: 250,
-    /**
-     * Allow the menu to have multiple open panes.
-     * @option
-     * @example true
-     */
-    multiOpen: true
-  };
+  
 
   /**
    * Initializes the accordion menu by hiding all nested menus.
    * @private
    */
-  AccordionMenu.prototype._init = function() {
+  _init() {
     this.$element.find('[data-submenu]').not('.is-active').slideUp(0);//.find('a').css('padding-left', '1rem');
     this.$element.attr({
       'role': 'tablist',
@@ -91,13 +79,13 @@
       });
     }
     this._events();
-  };
+  }
 
   /**
    * Adds event handlers for items within the menu.
    * @private
    */
-  AccordionMenu.prototype._events = function() {
+  _events() {
     var _this = this;
 
     this.$element.find('li').each(function() {
@@ -172,20 +160,22 @@
         }
       });
     });//.attr('tabindex', 0);
-  };
+  }
+
   /**
    * Closes all panes of the menu.
    * @function
    */
-  AccordionMenu.prototype.hideAll = function(){
+  hideAll() {
     this.$element.find('[data-submenu]').slideUp(this.options.slideSpeed);
-  };
+  }
+
   /**
    * Toggles the open/close state of a submenu.
    * @function
    * @param {jQuery} $target - the submenu to toggle
    */
-  AccordionMenu.prototype.toggle = function($target){
+  toggle($target){
     if(!$target.is(':animated')) {
       if (!$target.is(':hidden')) {
         this.up($target);
@@ -194,23 +184,24 @@
         this.down($target);
       }
     }
-  };
+  }
+
   /**
    * Opens the sub-menu defined by `$target`.
    * @param {jQuery} $target - Sub-menu to open.
    * @fires AccordionMenu#down
    */
-  AccordionMenu.prototype.down = function($target) {
+  down($target) {
     var _this = this;
 
-    if(!this.options.multiOpen){
+    if(!this.options.multiOpen) {
       this.up(this.$element.find('.is-active').not($target.parentsUntil(this.$element).add($target)));
     }
 
     $target.addClass('is-active').attr({'aria-hidden': false})
       .parent('.is-accordion-submenu-parent').attr({'aria-expanded': true});
 
-      Foundation.Move(this.options.slideSpeed, $target, function(){
+      Foundation.Move(this.options.slideSpeed, $target, function() {
         $target.slideDown(_this.options.slideSpeed, function () {
           /**
            * Fires when the menu is done opening.
@@ -219,14 +210,14 @@
           _this.$element.trigger('down.zf.accordionMenu', [$target]);
         });
       });
-  };
+  }
 
   /**
    * Closes the sub-menu defined by `$target`. All sub-menus inside the target will be closed as well.
    * @param {jQuery} $target - Sub-menu to close.
    * @fires AccordionMenu#up
    */
-  AccordionMenu.prototype.up = function($target) {
+  up($target) {
     var _this = this;
     Foundation.Move(this.options.slideSpeed, $target, function(){
       $target.slideUp(_this.options.slideSpeed, function () {
@@ -241,19 +232,37 @@
     var $menus = $target.find('[data-submenu]').slideUp(0).addBack().attr('aria-hidden', true);
 
     $menus.parent('.is-accordion-submenu-parent').attr('aria-expanded', false);
-  };
+  }
 
   /**
    * Destroys an instance of accordion menu.
    * @fires AccordionMenu#destroyed
    */
-  AccordionMenu.prototype.destroy = function(){
+  destroy() {
     this.$element.find('[data-submenu]').slideDown(0).css('display', '');
     this.$element.find('a').off('click.zf.accordionMenu');
 
     Foundation.Nest.Burn(this.$element, 'accordion');
     Foundation.unregisterPlugin(this);
-  };
+  }
+}
+
+AccordionMenu.defaults = {
+  /**
+   * Amount of time to animate the opening of a submenu in ms.
+   * @option
+   * @example 250
+   */
+  slideSpeed: 250,
+  /**
+   * Allow the menu to have multiple open panes.
+   * @option
+   * @example true
+   */
+  multiOpen: true
+};
 
-  Foundation.plugin(AccordionMenu, 'AccordionMenu');
-}(jQuery, window.Foundation);
+// Window exports
+if (window.Foundation) {
+  window.Foundation.plugin(AccordionMenu, 'AccordionMenu');
+}