Convert tabs to ES6 class

diff --git a/js/foundation.tabs.js b/js/foundation.tabs.js
index 90b6ed3e7e50ff65a8512b9945d8a1d9b3fb1ea4..3ef0304e38765daf465040b2217956a4b712c636 100644 (file)
--- a/js/foundation.tabs.js
+++ b/js/foundation.tabs.js
@@ -1,12 +1,13 @@
+'use strict';
+
 /**
  * Tabs module.
  * @module foundation.tabs
  * @requires foundation.util.keyboard
  * @requires foundation.util.timerAndImageLoader if tabs contain images
  */
-!function($, Foundation) {
-  'use strict';
 
+export default class Tabs {  
   /**
    * Creates a new instance of tabs.
    * @class
@@ -14,7 +15,7 @@
    * @param {jQuery} element - jQuery object to make into tabs.
    * @param {Object} options - Overrides to the default plugin settings.
    */
-  function Tabs(element, options){
+  constructor(element, options) {
     this.$element = element;
     this.options = $.extend({}, Tabs.defaults, this.$element.data(), options);
 
@@ -32,53 +33,11 @@
     });
   }
 
-  Tabs.defaults = {
-    // /**
-    //  * Allows the JS to alter the url of the window. Not yet implemented.
-    //  */
-    // deepLinking: false,
-    // /**
-    //  * If deepLinking is enabled, allows the window to scroll to content if window is loaded with a hash including a tab-pane id
-    //  */
-    // scrollToContent: false,
-    /**
-     * Allows the window to scroll to content of active pane on load if set to true.
-     * @option
-     * @example false
-     */
-    autoFocus: false,
-    /**
-     * Allows keyboard input to 'wrap' around the tab links.
-     * @option
-     * @example true
-     */
-    wrapOnKeys: true,
-    /**
-     * Allows the tab content panes to match heights if set to true.
-     * @option
-     * @example false
-     */
-    matchHeight: false,
-    /**
-     * Class applied to `li`'s in tab link list.
-     * @option
-     * @example 'tabs-title'
-     */
-    linkClass: 'tabs-title',
-    // contentClass: 'tabs-content',
-    /**
-     * Class applied to the content containers.
-     * @option
-     * @example 'tabs-panel'
-     */
-    panelClass: 'tabs-panel'
-  };
-
   /**
    * Initializes the tabs by showing and focusing (if autoFocus=true) the preset active tab.
    * @private
    */
-  Tabs.prototype._init = function(){
+  _init() {
     var _this = this;
 
     this.$tabTitles = this.$element.find(`.${this.options.linkClass}`);
@@ -120,24 +79,25 @@
       }
     }
     this._events();
-  };
+  }
+
   /**
    * Adds event handlers for items within the tabs.
    * @private
    */
-   Tabs.prototype._events = function(){
+  _events() {
     this._addKeyHandler();
     this._addClickHandler();
     if(this.options.matchHeight){
       $(window).on('changed.zf.mediaquery', this._setHeight.bind(this));
     }
-  };
+  }
 
   /**
    * Adds click handlers for items within the tabs.
    * @private
    */
-  Tabs.prototype._addClickHandler = function(){
+  _addClickHandler() {
     var _this = this;
     this.$element.off('click.zf.tabs')
                    .on('click.zf.tabs', `.${this.options.linkClass}`, function(e){
@@ -148,13 +108,13 @@
                      }
                      _this._handleTabChange($(this));
                    });
-  };
+  }
 
   /**
    * Adds keyboard event handlers for items within the tabs.
    * @private
    */
-  Tabs.prototype._addKeyHandler = function(){
+  _addKeyHandler() {
     var _this = this;
     var $firstTab = _this.$element.find('li:first-of-type');
     var $lastTab = _this.$element.find('li:last-of-type');
@@ -198,8 +158,7 @@
         }
       });
     });
-  };
-
+  }
 
   /**
    * Opens the tab `$targetContent` defined by `$target`.
@@ -207,7 +166,7 @@
    * @fires Tabs#change
    * @function
    */
-  Tabs.prototype._handleTabChange = function($target){
+  _handleTabChange($target) {
     var $tabLink = $target.find('[role="tab"]'),
         hash = $tabLink[0].hash,
         $targetContent = $(hash),
@@ -231,14 +190,14 @@
      */
     this.$element.trigger('change.zf.tabs', [$target]);
     // Foundation.reflow(this.$element, 'tabs');
-  };
+  }
 
   /**
    * Public method for selecting a content pane to display.
    * @param {jQuery | String} elem - jQuery object or string of the id of the pane to display.
    * @function
    */
-  Tabs.prototype.selectTab = function(elem){
+  selectTab(elem) {
     var idStr;
     if(typeof elem === 'object'){
       idStr = elem[0].id;
@@ -260,7 +219,7 @@
    * @function
    * @private
    */
-  Tabs.prototype._setHeight = function(){
+  _setHeight() {
     var max = 0;
     this.$tabContent.find(`.${this.options.panelClass}`)
                     .css('height', '')
@@ -280,13 +239,13 @@
                       max = temp > max ? temp : max;
                     })
                     .css('height', `${max}px`);
-  };
+  }
 
   /**
    * Destroys an instance of an tabs.
    * @fires Tabs#destroyed
    */
-  Tabs.prototype.destroy = function() {
+  destroy() {
     this.$element.find(`.${this.options.linkClass}`)
                  .off('.zf.tabs').hide().end()
                  .find(`.${this.options.panelClass}`)
@@ -296,10 +255,58 @@
     }
     Foundation.unregisterPlugin(this);
   };
+}
+
+Tabs.defaults = {
+  // /**
+  //  * Allows the JS to alter the url of the window. Not yet implemented.
+  //  */
+  // deepLinking: false,
+  // /**
+  //  * If deepLinking is enabled, allows the window to scroll to content if window is loaded with a hash including a tab-pane id
+  //  */
+  // scrollToContent: false,
+  /**
+   * Allows the window to scroll to content of active pane on load if set to true.
+   * @option
+   * @example false
+   */
+  autoFocus: false,
+  /**
+   * Allows keyboard input to 'wrap' around the tab links.
+   * @option
+   * @example true
+   */
+  wrapOnKeys: true,
+  /**
+   * Allows the tab content panes to match heights if set to true.
+   * @option
+   * @example false
+   */
+  matchHeight: false,
+  /**
+   * Class applied to `li`'s in tab link list.
+   * @option
+   * @example 'tabs-title'
+   */
+  linkClass: 'tabs-title',
+  // contentClass: 'tabs-content',
+  /**
+   * Class applied to the content containers.
+   * @option
+   * @example 'tabs-panel'
+   */
+  panelClass: 'tabs-panel'
+};
+
+function checkClass($elem){
+  return $elem.hasClass('is-active');
+}
+
+// Window exports
+if (window.Foundation) {
+  window.Foundation.plugin(Tabs, 'Tabs');
+}
+  
 
-  Foundation.plugin(Tabs, 'Tabs');
 
-  function checkClass($elem){
-    return $elem.hasClass('is-active');
-  }
-}(jQuery, window.Foundation);