foundation.magellan.js.es6 in foundation-rails-6.4.1.0

- old
+ new

@@ -1,38 +1,43 @@
 'use strict';
 
-!function($) {
 
+import $ from 'jquery';
+import { GetYoDigits } from './foundation.util.core';
+import { Plugin } from './foundation.plugin';
+import { SmoothScroll } from './foundation.smoothScroll';
+
 /**
  * Magellan module.
  * @module foundation.magellan
+ * @requires foundation.smoothScroll
  */
 
-class Magellan {
+class Magellan extends Plugin {
   /**
    * Creates a new instance of Magellan.
    * @class
+   * @name Magellan
    * @fires Magellan#init
    * @param {Object} element - jQuery object to add the trigger to.
    * @param {Object} options - Overrides to the default plugin settings.
    */
-  constructor(element, options) {
+  _setup(element, options) {
     this.$element = element;
     this.options  = $.extend({}, Magellan.defaults, this.$element.data(), options);
+    this.className = 'Magellan'; // ie9 back compat
 
     this._init();
     this.calcPoints();
-
-    Foundation.registerPlugin(this, 'Magellan');
   }
 
   /**
    * Initializes the Magellan plugin and calls functions to get equalizer functioning on load.
    * @private
    */
   _init() {
-    var id = this.$element[0].id || Foundation.GetYoDigits(6, 'magellan');
+    var id = this.$element[0].id || GetYoDigits(6, 'magellan');
     var _this = this;
     this.$targets = $('[data-magellan-target]');
     this.$links = this.$element.find('a');
     this.$element.attr({
       'data-resize': id,
@@ -94,35 +99,40 @@
     }).on('click.zf.magellan', 'a[href^="#"]', function(e) {
         e.preventDefault();
         var arrival   = this.getAttribute('href');
         _this.scrollToLoc(arrival);
       });
-    $(window).on('popstate', function(e) {
+
+    this._deepLinkScroll = function(e) {
       if(_this.options.deepLinking) {
         _this.scrollToLoc(window.location.hash);
       }
-    });
+    };
+
+    $(window).on('popstate', this._deepLinkScroll);
   }
 
   /**
    * Function to scroll to a given location on the page.
    * @param {String} loc - a properly formatted jQuery id selector. Example: '#foo'
    * @function
    */
   scrollToLoc(loc) {
-    // Do nothing if target does not exist to prevent errors
-    if (!$(loc).length) {return false;}
     this._inTransition = true;
-    var _this = this,
-        scrollPos = Math.round($(loc).offset().top - this.options.threshold / 2 - this.options.barOffset);
+    var _this = this;
 
-    $('html, body').stop(true).animate(
-      { scrollTop: scrollPos },
-      this.options.animationDuration,
-      this.options.animationEasing,
-      function() {_this._inTransition = false; _this._updateActive()}
-    );
+    var options = {
+      animationEasing: this.options.animationEasing,
+      animationDuration: this.options.animationDuration,
+      threshold: this.options.threshold,
+      offset: this.options.offset
+    };
+
+    SmoothScroll.scrollToLoc(loc, options, function() {
+      _this._inTransition = false;
+      _this._updateActive();
+    })
   }
 
   /**
    * Calls necessary functions to update Magellan upon DOM change
    * @function
@@ -147,11 +157,11 @@
     else if(winPos < this.points[0]){ curIdx = undefined; }
     else{
       var isDown = this.scrollPos < winPos,
           _this = this,
           curVisible = this.points.filter(function(p, i){
-            return isDown ? p - _this.options.barOffset <= winPos : p - _this.options.barOffset - _this.options.threshold <= winPos;
+            return isDown ? p - _this.options.offset <= winPos : p - _this.options.offset - _this.options.threshold <= winPos;
           });
       curIdx = curVisible.length ? curVisible.length - 1 : 0;
     }
 
     this.$active.removeClass(this.options.activeClass);
@@ -181,20 +191,19 @@
 
   /**
    * Destroys an instance of Magellan and resets the url of the window.
    * @function
    */
-  destroy() {
+  _destroy() {
     this.$element.off('.zf.trigger .zf.magellan')
         .find(`.${this.options.activeClass}`).removeClass(this.options.activeClass);
 
     if(this.options.deepLinking){
       var hash = this.$active[0].getAttribute('href');
       window.location.hash.replace(hash, '');
     }
-
-    Foundation.unregisterPlugin(this);
+    $(window).off('popstate', this._deepLinkScroll);
   }
 }
 
 /**
  * Default settings for plugin
@@ -224,13 +233,13 @@
   threshold: 50,
   /**
    * Class applied to the active locations link on the magellan container.
    * @option
    * @type {string}
-   * @default 'active'
+   * @default 'is-active'
    */
-  activeClass: 'active',
+  activeClass: 'is-active',
   /**
    * Allows the script to manipulate the url of the current page, and if supported, alter the history.
    * @option
    * @type {boolean}
    * @default false
@@ -240,12 +249,9 @@
    * Number of pixels to offset the scroll of the page on item click if using a sticky nav bar.
    * @option
    * @type {number}
    * @default 0
    */
-  barOffset: 0
+  offset: 0
 }
 
-// Window exports
-Foundation.plugin(Magellan, 'Magellan');
-
-}(jQuery);
+export {Magellan};