Convert responsive toggle to ES6 class

Convert responsive toggle to ES6 class

diff --git a/js/foundation.responsiveToggle.js b/js/foundation.responsiveToggle.js
index 38bac6b27c54fb2a71c55cd062ac97eca63cf1a1..22060134fb5399afb91e9a7902564461a82cad30 100644 (file)
--- a/js/foundation.responsiveToggle.js
+++ b/js/foundation.responsiveToggle.js
@@ -1,106 +1,110 @@
+'use strict';
+
 /**
  * ResponsiveToggle module.
  * @module foundation.responsiveToggle
  * @requires foundation.util.mediaQuery
  */
-!function($, Foundation) {
-
-'use strict';
-
-/**
- * Creates a new instance of Tab Bar.
- * @class
- * @fires ResponsiveToggle#init
- * @param {jQuery} element - jQuery object to attach tab bar functionality to.
- * @param {Object} options - Overrides to the default plugin settings.
- */
-function ResponsiveToggle(element, options) {
-  this.$element = $(element);
-  this.options = $.extend({}, ResponsiveToggle.defaults, this.$element.data(), options);
-
-  this._init();
-  this._events();
-
-  Foundation.registerPlugin(this, 'ResponsiveToggle');
-}
 
-ResponsiveToggle.defaults = {
+ export default class ResponsiveToggle {
   /**
-   * The breakpoint after which the menu is always shown, and the tab bar is hidden.
-   * @option
-   * @example 'medium'
+   * Creates a new instance of Tab Bar.
+   * @class
+   * @fires ResponsiveToggle#init
+   * @param {jQuery} element - jQuery object to attach tab bar functionality to.
+   * @param {Object} options - Overrides to the default plugin settings.
    */
-  hideFor: 'medium'
-};
+  constructor(element, options) {
+    this.$element = $(element);
+    this.options = $.extend({}, ResponsiveToggle.defaults, this.$element.data(), options);
 
-/**
- * Initializes the tab bar by finding the target element, toggling element, and running update().
- * @function
- * @private
- */
-ResponsiveToggle.prototype._init = function() {
-  var targetID = this.$element.data('responsive-toggle');
-  if (!targetID) {
-    console.error('Your tab bar needs an ID of a Menu as the value of data-tab-bar.');
+    this._init();
+    this._events();
+
+    Foundation.registerPlugin(this, 'ResponsiveToggle');
   }
 
-  this.$targetMenu = $(`#${targetID}`);
-  this.$toggler = this.$element.find('[data-toggle]');
+  /**
+   * Initializes the tab bar by finding the target element, toggling element, and running update().
+   * @function
+   * @private
+   */
+  _init() {
+    var targetID = this.$element.data('responsive-toggle');
+    if (!targetID) {
+      console.error('Your tab bar needs an ID of a Menu as the value of data-tab-bar.');
+    }
 
-  this._update();
-};
+    this.$targetMenu = $(`#${targetID}`);
+    this.$toggler = this.$element.find('[data-toggle]');
 
-/**
- * Adds necessary event handlers for the tab bar to work.
- * @function
- * @private
- */
-ResponsiveToggle.prototype._events = function() {
-  var _this = this;
+    this._update();
+  }
 
-  $(window).on('changed.zf.mediaquery', this._update.bind(this));
+  /**
+   * Adds necessary event handlers for the tab bar to work.
+   * @function
+   * @private
+   */
+  _events() {
+    var _this = this;
 
-  this.$toggler.on('click.zf.responsiveToggle', this.toggleMenu.bind(this));
-};
+    $(window).on('changed.zf.mediaquery', this._update.bind(this));
 
-/**
- * Checks the current media query to determine if the tab bar should be visible or hidden.
- * @function
- * @private
- */
-ResponsiveToggle.prototype._update = function() {
-  // Mobile
-  if (!Foundation.MediaQuery.atLeast(this.options.hideFor)) {
-    this.$element.show();
-    this.$targetMenu.hide();
+    this.$toggler.on('click.zf.responsiveToggle', this.toggleMenu.bind(this));
   }
 
-  // Desktop
-  else {
-    this.$element.hide();
-    this.$targetMenu.show();
+  /**
+   * Checks the current media query to determine if the tab bar should be visible or hidden.
+   * @function
+   * @private
+   */
+  _update() {
+    // Mobile
+    if (!Foundation.MediaQuery.atLeast(this.options.hideFor)) {
+      this.$element.show();
+      this.$targetMenu.hide();
+    }
+
+    // Desktop
+    else {
+      this.$element.hide();
+      this.$targetMenu.show();
+    }
   }
-};
 
-/**
- * Toggles the element attached to the tab bar. The toggle only happens if the screen is small enough to allow it.
- * @function
- * @fires ResponsiveToggle#toggled
- */
-ResponsiveToggle.prototype.toggleMenu = function() {
-  if (!Foundation.MediaQuery.atLeast(this.options.hideFor)) {
-    this.$targetMenu.toggle(0);
-
-    /**
-     * Fires when the element attached to the tab bar toggles.
-     * @event ResponsiveToggle#toggled
-     */
-    this.$element.trigger('toggled.zf.responsiveToggle');
+  /**
+   * Toggles the element attached to the tab bar. The toggle only happens if the screen is small enough to allow it.
+   * @function
+   * @fires ResponsiveToggle#toggled
+   */
+  toggleMenu() {
+    if (!Foundation.MediaQuery.atLeast(this.options.hideFor)) {
+      this.$targetMenu.toggle(0);
+
+      /**
+       * Fires when the element attached to the tab bar toggles.
+       * @event ResponsiveToggle#toggled
+       */
+      this.$element.trigger('toggled.zf.responsiveToggle');
+    }
+  };
+
+  destroy() {
+    //TODO this...
   }
+}
+
+ResponsiveToggle.defaults = {
+  /**
+   * The breakpoint after which the menu is always shown, and the tab bar is hidden.
+   * @option
+   * @example 'medium'
+   */
+  hideFor: 'medium'
 };
-ResponsiveToggle.prototype.destroy = function(){
-  //TODO this...
-};
-Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle');
 
-}(jQuery, Foundation);
+// Window exports
+if (window.Foundation) {
+  window.Foundation.plugin(ResponsiveToggle, 'ResponsiveToggle');
+}