Convert dropdown to ES6 class

diff --git a/js/foundation.dropdown.js b/js/foundation.dropdown.js
index dfb18ee8b9753b667e52d40d045572a242f26fa0..21c311c49fb3e1d6beab7e4dcf2bc21fd8727484 100644 (file)
--- a/js/foundation.dropdown.js
+++ b/js/foundation.dropdown.js
@@ -1,3 +1,5 @@
+'use strict';
+
 /**
  * Dropdown module.
  * @module foundation.dropdown
@@ -5,8 +7,8 @@
  * @requires foundation.util.box
  * @requires foundation.util.triggers
  */
-!function($, Foundation){
-  'use strict';
+
+export default class Dropdown {  
   /**
    * Creates a new instance of a dropdown.
    * @class
@@ -14,7 +16,7 @@
    *        Object should be of the dropdown panel, rather than its anchor.
    * @param {Object} options - Overrides to the default plugin settings.
    */
-  function Dropdown(element, options){
+  constructor(element, options) {
     this.$element = element;
     this.options = $.extend({}, Dropdown.defaults, this.$element.data(), options);
     this._init();
@@ -28,69 +30,13 @@
       'SHIFT_TAB': 'tab_backward'
     });
   }
-
-  Dropdown.defaults = {
-    /**
-     * Amount of time to delay opening a submenu on hover event.
-     * @option
-     * @example 250
-     */
-    hoverDelay: 250,
-    /**
-     * Allow submenus to open on hover events
-     * @option
-     * @example false
-     */
-    hover: false,
-    /**
-     * Don't close dropdown when hovering over dropdown pane
-     * @option
-     * @example true
-     */
-    hoverPane: false,
-    /**
-     * Number of pixels between the dropdown pane and the triggering element on open.
-     * @option
-     * @example 1
-     */
-    vOffset: 1,
-    /**
-     * Number of pixels between the dropdown pane and the triggering element on open.
-     * @option
-     * @example 1
-     */
-    hOffset: 1,
-    /**
-     * Class applied to adjust open position. JS will test and fill this in.
-     * @option
-     * @example 'top'
-     */
-    positionClass: '',
-    /**
-     * Allow the plugin to trap focus to the dropdown pane if opened with keyboard commands.
-     * @option
-     * @example false
-     */
-    trapFocus: false,
-    /**
-     * Allow the plugin to set focus to the first focusable element within the pane, regardless of method of opening.
-     * @option
-     * @example true
-     */
-    autoFocus: false,
-    /**
-     * Allows a click on the body to close the dropdown.
-     * @option
-     * @example false
-     */
-    closeOnClick: false
-  };
+  
   /**
    * Initializes the plugin by setting/checking options and attributes, adding helper variables, and saving the anchor.
    * @function
    * @private
    */
-  Dropdown.prototype._init = function(){
+  _init() {
     var $id = this.$element.attr('id');
 
     this.$anchor = $(`[data-toggle="${$id}"]`) || $(`[data-open="${$id}"]`);
@@ -113,24 +59,26 @@
       'aria-labelledby': this.$anchor[0].id || Foundation.GetYoDigits(6, 'dd-anchor')
     });
     this._events();
-  };
+  }
+
   /**
    * Helper function to determine current orientation of dropdown pane.
    * @function
    * @returns {String} position - string value of a position class.
    */
-  Dropdown.prototype.getPositionClass = function(){
+  getPositionClass() {
     var position = this.$element[0].className.match(/\b(top|left|right)\b/g);
         position = position ? position[0] : '';
     return position;
-  };
+  }
+
   /**
    * Adjusts the dropdown panes orientation by adding/removing positioning classes.
    * @function
    * @private
    * @param {String} position - position class to remove.
    */
-  Dropdown.prototype._reposition = function(position){
+  _reposition(position) {
     this.usedPositions.push(position ? position : 'bottom');
     //default, try switching to opposite side
     if(!position && (this.usedPositions.indexOf('top') < 0)){
@@ -162,14 +110,15 @@
     }
     this.classChanged = true;
     this.counter--;
-  };
+  }
+
   /**
    * Sets the position and orientation of the dropdown pane, checks for collisions.
    * Recursively calls itself if a collision is detected, with a new position class.
    * @function
    * @private
    */
-  Dropdown.prototype._setPosition = function(){
+  _setPosition() {
     if(this.$anchor.attr('aria-expanded') === 'false'){ return false; }
     var position = this.getPositionClass(),
         $eleDims = Foundation.Box.GetDimensions(this.$element),
@@ -194,13 +143,14 @@
       this._reposition(position);
       this._setPosition();
     }
-  };
+  }
+
   /**
    * Adds event listeners to the element utilizing the triggers utility library.
    * @function
    * @private
    */
-  Dropdown.prototype._events = function(){
+  _events() {
     var _this = this;
     this.$element.on({
       'open.zf.trigger': this.open.bind(this),
@@ -276,13 +226,14 @@
         }
       });
     });
-  };
+  }
+
   /**
    * Adds an event handler to the body to close any dropdowns on a click.
    * @function
    * @private
    */
-  Dropdown.prototype._addBodyHandler = function(){
+  _addBodyHandler() {
      var $body = $(document.body).not(this.$element),
          _this = this;
      $body.off('click.zf.dropdown')
@@ -296,14 +247,15 @@
             _this.close();
             $body.off('click.zf.dropdown');
           });
-  };
+  }
+
   /**
    * Opens the dropdown pane, and fires a bubbling event to close other dropdowns.
    * @function
    * @fires Dropdown#closeme
    * @fires Dropdown#show
    */
-  Dropdown.prototype.open = function(){
+  open() {
     // var _this = this;
     /**
      * Fires to close other open dropdowns
@@ -334,14 +286,14 @@
     //why does this not work correctly for this plugin?
     // Foundation.reflow(this.$element, 'dropdown');
     // Foundation._reflow(this.$element.attr('data-dropdown'));
-  };
+  }
 
   /**
    * Closes the open dropdown pane.
    * @function
    * @fires Dropdown#hide
    */
-  Dropdown.prototype.close = function(){
+  close() {
     if(!this.$element.hasClass('is-open')){
       return false;
     }
@@ -364,29 +316,91 @@
     }
     this.$element.trigger('hide.zf.dropdown', [this.$element]);
     // Foundation.reflow(this.$element, 'dropdown');
-  };
+  }
+
   /**
    * Toggles the dropdown pane's visibility.
    * @function
    */
-  Dropdown.prototype.toggle = function(){
+  toggle() {
     if(this.$element.hasClass('is-open')){
       if(this.$anchor.data('hover')) return;
       this.close();
     }else{
       this.open();
     }
-  };
+  }
+
   /**
    * Destroys the dropdown.
    * @function
    */
-  Dropdown.prototype.destroy = function(){
+  destroy() {
     this.$element.off('.zf.trigger').hide();
     this.$anchor.off('.zf.dropdown');
 
     Foundation.unregisterPlugin(this);
-  };
+  }
+}
+
+Dropdown.defaults = {
+  /**
+   * Amount of time to delay opening a submenu on hover event.
+   * @option
+   * @example 250
+   */
+  hoverDelay: 250,
+  /**
+   * Allow submenus to open on hover events
+   * @option
+   * @example false
+   */
+  hover: false,
+  /**
+   * Don't close dropdown when hovering over dropdown pane
+   * @option
+   * @example true
+   */
+  hoverPane: false,
+  /**
+   * Number of pixels between the dropdown pane and the triggering element on open.
+   * @option
+   * @example 1
+   */
+  vOffset: 1,
+  /**
+   * Number of pixels between the dropdown pane and the triggering element on open.
+   * @option
+   * @example 1
+   */
+  hOffset: 1,
+  /**
+   * Class applied to adjust open position. JS will test and fill this in.
+   * @option
+   * @example 'top'
+   */
+  positionClass: '',
+  /**
+   * Allow the plugin to trap focus to the dropdown pane if opened with keyboard commands.
+   * @option
+   * @example false
+   */
+  trapFocus: false,
+  /**
+   * Allow the plugin to set focus to the first focusable element within the pane, regardless of method of opening.
+   * @option
+   * @example true
+   */
+  autoFocus: false,
+  /**
+   * Allows a click on the body to close the dropdown.
+   * @option
+   * @example false
+   */
+  closeOnClick: false
+};
 
-  Foundation.plugin(Dropdown, 'Dropdown');
-}(jQuery, window.Foundation);
+// Window exports
+if (window.Foundation) {
+  window.Foundation.plugin(Dropdown, 'Dropdown');
+}