Convert magellan to ES6 class

diff --git a/js/foundation.magellan.js b/js/foundation.magellan.js
index 17aa1542bc6c80fa253ef4c52177f2ad784517d2..b552784c5ab142b00e8ea4f77966ad56f2cbcdf1 100644 (file)
--- a/js/foundation.magellan.js
+++ b/js/foundation.magellan.js
@@ -1,10 +1,11 @@
+'use strict';
+
 /**
  * Magellan module.
  * @module foundation.magellan
  */
-!function(Foundation, $) {
-  'use strict';
 
+export default class Magellan {
   /**
    * Creates a new instance of Magellan.
    * @class
@@ -12,7 +13,7 @@
    * @param {Object} element - jQuery object to add the trigger to.
    * @param {Object} options - Overrides to the default plugin settings.
    */
-  function Magellan(element, options) {
+  constructor(element, options) {
     this.$element = element;
     this.options  = $.extend({}, Magellan.defaults, this.$element.data(), options);
 
@@ -21,55 +22,13 @@
     Foundation.registerPlugin(this, 'Magellan');
   }
 
-  /**
-   * Default settings for plugin
-   */
-  Magellan.defaults = {
-    /**
-     * Amount of time, in ms, the animated scrolling should take between locations.
-     * @option
-     * @example 500
-     */
-    animationDuration: 500,
-    /**
-     * Animation style to use when scrolling between locations.
-     * @option
-     * @example 'ease-in-out'
-     */
-    animationEasing: 'linear',
-    /**
-     * Number of pixels to use as a marker for location changes.
-     * @option
-     * @example 50
-     */
-    threshold: 50,
-    /**
-     * Class applied to the active locations link on the magellan container.
-     * @option
-     * @example 'active'
-     */
-    activeClass: 'active',
-    /**
-     * Allows the script to manipulate the url of the current page, and if supported, alter the history.
-     * @option
-     * @example true
-     */
-    deepLinking: false,
-    /**
-     * Number of pixels to offset the scroll of the page on item click if using a sticky nav bar.
-     * @option
-     * @example 25
-     */
-    barOffset: 0
-  };
-
   /**
    * Initializes the Magellan plugin and calls functions to get equalizer functioning on load.
    * @private
    */
-  Magellan.prototype._init = function() {
-    var id = this.$element[0].id || Foundation.GetYoDigits(6, 'magellan'),
-        _this = this;
+  _init() {
+    var id = this.$element[0].id || Foundation.GetYoDigits(6, 'magellan');
+    var _this = this;
     this.$targets = $('[data-magellan-target]');
     this.$links = this.$element.find('a');
     this.$element.attr({
@@ -81,13 +40,14 @@
     this.scrollPos = parseInt(window.pageYOffset, 10);
 
     this._events();
-  };
+  }
+
   /**
    * Calculates an array of pixel values that are the demarcation lines between locations on the page.
    * Can be invoked if new elements are added or the size of a location changes.
    * @function
    */
-  Magellan.prototype.calcPoints = function(){
+  calcPoints() {
     var _this = this,
         body = document.body,
         html = document.documentElement;
@@ -102,12 +62,13 @@
       $tar.targetPoint = pt;
       _this.points.push(pt);
     });
-  };
+  }
+
   /**
    * Initializes events for Magellan.
    * @private
    */
-  Magellan.prototype._events = function() {
+  _events() {
     var _this = this,
         $body = $('html, body'),
         opts = {
@@ -132,14 +93,15 @@
         var arrival   = this.getAttribute('href');
         _this.scrollToLoc(arrival);
     });
-  };
+  }
+
   /**
    * Function to scroll to a given location on the page.
    * @param {String} loc - a properly formatted jQuery id selector.
    * @example '#foo'
    * @function
    */
-  Magellan.prototype.scrollToLoc = function(loc){
+  scrollToLoc(loc) {
     var scrollPos = $(loc).offset().top - this.options.threshold / 2 - this.options.barOffset;
 
     $(document.body).stop(true).animate({
@@ -149,22 +111,24 @@
         duration: this.options.animationDuration,
         easiing: this.options.animationEasing
      });
-  };
+  }
+
   /**
    * Calls necessary functions to update Magellan upon DOM change
    * @function
    */
-  Magellan.prototype.reflow = function(){
+  reflow() {
     this.calcPoints();
     this._updateActive();
-  };
+  }
+
   /**
    * Updates the visibility of an active location link, and updates the url hash for the page, if deepLinking enabled.
    * @private
    * @function
    * @fires Magellan#update
    */
-  Magellan.prototype._updateActive = function(/*evt, elem, scrollPos*/){
+  _updateActive(/*evt, elem, scrollPos*/) {
     var winPos = /*scrollPos ||*/ parseInt(window.pageYOffset, 10),
         curIdx;
 
@@ -197,12 +161,13 @@
      * @event Magellan#update
      */
     this.$element.trigger('update.zf.magellan', [this.$active]);
-  };
+  }
+
   /**
    * Destroys an instance of Magellan and resets the url of the window.
    * @function
    */
-  Magellan.prototype.destroy = function(){
+  destroy() {
     this.$element.off('.zf.trigger .zf.magellan')
         .find(`.${this.options.activeClass}`).removeClass(this.options.activeClass);
 
@@ -212,15 +177,60 @@
     }
 
     Foundation.unregisterPlugin(this);
-  };
-  Foundation.plugin(Magellan, 'Magellan');
-
-  // Exports for AMD/Browserify
-  if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
-    module.exports = Magellan;
-  if (typeof define === 'function')
-    define(['foundation'], function() {
-      return Magellan;
-    });
+  }
+}
 
-}(Foundation, jQuery);
+/**
+ * Default settings for plugin
+ */
+Magellan.defaults = {
+  /**
+   * Amount of time, in ms, the animated scrolling should take between locations.
+   * @option
+   * @example 500
+   */
+  animationDuration: 500,
+  /**
+   * Animation style to use when scrolling between locations.
+   * @option
+   * @example 'ease-in-out'
+   */
+  animationEasing: 'linear',
+  /**
+   * Number of pixels to use as a marker for location changes.
+   * @option
+   * @example 50
+   */
+  threshold: 50,
+  /**
+   * Class applied to the active locations link on the magellan container.
+   * @option
+   * @example 'active'
+   */
+  activeClass: 'active',
+  /**
+   * Allows the script to manipulate the url of the current page, and if supported, alter the history.
+   * @option
+   * @example true
+   */
+  deepLinking: false,
+  /**
+   * Number of pixels to offset the scroll of the page on item click if using a sticky nav bar.
+   * @option
+   * @example 25
+   */
+  barOffset: 0
+};
+
+// Window exports
+if (window.Foundation) {
+  window.Foundation.plugin(Magellan, 'Magellan');
+}
+
+// Exports for AMD/Browserify
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
+  module.exports = Magellan;
+if (typeof define === 'function')
+  define(['foundation'], function() {
+    return Magellan;
+  });