Convert accordion to ES6 class

diff --git a/js/foundation.accordion.js b/js/foundation.accordion.js
index 5b19bdc69a9d5c45d359eb3f8bb1b13c6f93226b..bfa60298ec674aed962f71f8f8d03c7444184a30 100644 (file)
--- a/js/foundation.accordion.js
+++ b/js/foundation.accordion.js
@@ -1,12 +1,13 @@
+'use strict';
+
 /**
  * Accordion module.
  * @module foundation.accordion
  * @requires foundation.util.keyboard
  * @requires foundation.util.motion
  */
-!function($, Foundation) {
-  'use strict';
 
+export default class Accordion {
   /**
    * Creates a new instance of an accordion.
    * @class
@@ -14,12 +15,12 @@
    * @param {jQuery} element - jQuery object to make into an accordion.
    * @param {Object} options - a plain object with settings to override the default options.
    */
-  function Accordion(element, options){
+  constructor(element, options) {
     this.$element = element;
     this.options = $.extend({}, Accordion.defaults, this.$element.data(), options);
 
     this._init();
-
+    
     Foundation.registerPlugin(this, 'Accordion');
     Foundation.Keyboard.register('Accordion', {
       'ENTER': 'toggle',
@@ -29,32 +30,11 @@
     });
   }
 
-  Accordion.defaults = {
-    /**
-     * Amount of time to animate the opening of an accordion pane.
-     * @option
-     * @example 250
-     */
-    slideSpeed: 250,
-    /**
-     * Allow the accordion to have multiple open panes.
-     * @option
-     * @example false
-     */
-    multiExpand: false,
-    /**
-     * Allow the accordion to close all panes.
-     * @option
-     * @example false
-     */
-    allowAllClosed: false
-  };
-
   /**
    * Initializes the accordion by animating the preset active pane(s).
    * @private
    */
-  Accordion.prototype._init = function() {
+  _init() {
     this.$element.attr('role', 'tablist');
     this.$tabs = this.$element.children('li');
     if (this.$tabs.length === 0) {
@@ -81,21 +61,21 @@
       this.down($initActive, true);
     }
     this._events();
-  };
+  }
 
   /**
    * Adds event handlers for items within the accordion.
    * @private
    */
-  Accordion.prototype._events = function() {
+  _events() {
     var _this = this;
 
-    this.$tabs.each(function(){
+    this.$tabs.each(function() {
       var $elem = $(this);
       var $tabContent = $elem.children('[data-tab-content]');
       if ($tabContent.length) {
         $elem.children('a').off('click.zf.accordion keydown.zf.accordion')
-               .on('click.zf.accordion', function(e){
+               .on('click.zf.accordion', function(e) {
         // $(this).children('a').on('click.zf.accordion', function(e) {
           e.preventDefault();
           if ($elem.hasClass('is-active')) {
@@ -125,21 +105,23 @@
         });
       }
     });
-  };
+  }
+
   /**
    * Toggles the selected content pane's open/close state.
    * @param {jQuery} $target - jQuery object of the pane to toggle.
    * @function
    */
-  Accordion.prototype.toggle = function($target){
-    if($target.parent().hasClass('is-active')){
+  toggle($target) {
+    if($target.parent().hasClass('is-active')) {
       if(this.options.allowAllClosed || $target.parent().siblings().hasClass('is-active')){
         this.up($target);
-      }else{ return; }
-    }else{
+      } else { return; }
+    } else {
       this.down($target);
     }
-  };
+  }
+
   /**
    * Opens the accordion tab defined by `$target`.
    * @param {jQuery} $target - Accordion pane to open.
@@ -147,7 +129,7 @@
    * @fires Accordion#down
    * @function
    */
-  Accordion.prototype.down = function($target, firstTime) {
+  down($target, firstTime) {
     var _this = this;
     if(!this.options.multiExpand && !firstTime){
       var $currentActive = this.$element.find('.is-active').children('[data-tab-content]');
@@ -179,7 +161,7 @@
       'aria-expanded': true,
       'aria-selected': true
     });
-  };
+  }
 
   /**
    * Closes the tab defined by `$target`.
@@ -187,12 +169,12 @@
    * @fires Accordion#up
    * @function
    */
-  Accordion.prototype.up = function($target) {
+  up($target) {
     var $aunts = $target.parent().siblings(),
         _this = this;
     var canClose = this.options.multiExpand ? $aunts.hasClass('is-active') : $target.parent().hasClass('is-active');
 
-    if(!this.options.allowAllClosed && !canClose){
+    if(!this.options.allowAllClosed && !canClose) {
       return;
     }
 
@@ -213,19 +195,43 @@
      'aria-expanded': false,
      'aria-selected': false
    });
-  };
+  }
 
   /**
    * Destroys an instance of an accordion.
    * @fires Accordion#destroyed
    * @function
    */
-  Accordion.prototype.destroy = function() {
+  destroy() {
     this.$element.find('[data-tab-content]').slideUp(0).css('display', '');
     this.$element.find('a').off('.zf.accordion');
 
     Foundation.unregisterPlugin(this);
-  };
+  }
+}
+
+Accordion.defaults = {
+  /**
+   * Amount of time to animate the opening of an accordion pane.
+   * @option
+   * @example 250
+   */
+  slideSpeed: 250,
+  /**
+   * Allow the accordion to have multiple open panes.
+   * @option
+   * @example false
+   */
+  multiExpand: false,
+  /**
+   * Allow the accordion to close all panes.
+   * @option
+   * @example false
+   */
+  allowAllClosed: false
+};
 
-  Foundation.plugin(Accordion, 'Accordion');
-}(jQuery, window.Foundation);
+// Window exports
+if (window.Foundation) {
+  window.Foundation.plugin(Accordion, 'Accordion');
+}