Use pull request #11519 from ncoden/fix/clean-smoothscroll-events-on-destroy for...

7d717bfb2 refactor: move SmoothScroll to ES6+ and fix linting issues
fd14999f1 refactor: move SmoothScroll click event handling to its own function
e0fbd09c8 fix: clean SmoothScroll events when destroyed
65c26b102 docs: fix typo in SmoothScroll click handler

Signed-off-by: Nicolas Coden <nicolas@ncoden.fr>

diff --git a/js/foundation.smoothScroll.js b/js/foundation.smoothScroll.js
index da3c1539b6ef6651b0733a862d76ec13e851f220..4674061c1f9b667e0308a0ead41508f0eb0d948f 100644 (file)
--- a/js/foundation.smoothScroll.js
+++ b/js/foundation.smoothScroll.js
@@ -1,5 +1,3 @@
-'use strict';
-
 import $ from 'jquery';
 import { GetYoDigits } from './foundation.core.utils';
 import { Plugin } from './foundation.core.plugin';
@@ -30,11 +28,8 @@ class SmoothScroll extends Plugin {
      * @private
      */
     _init() {
-        var id = this.$element[0].id || GetYoDigits(6, 'smooth-scroll');
-        var _this = this;
-        this.$element.attr({
-            'id': id
-        });
+        const id = this.$element[0].id || GetYoDigits(6, 'smooth-scroll');
+        this.$element.attr({ id });
 
         this._events();
     }
@@ -44,27 +39,30 @@ class SmoothScroll extends Plugin {
      * @private
      */
     _events() {
-        var _this = this;
-
-        // click handler function.
-        var handleLinkClick = function(e) {
-            // Follow the link it does not point to an anchor.
-            if (!$(this).is('a[href^="#"]')) return;
+        this.$element.on('click.zf.smoothScroll', this._handleLinkClick)
+        this.$element.on('click.zf.smoothScroll', 'a[href^="#"]', this._handleLinkClick);
+    }
 
-            var arrival = this.getAttribute('href');
+    /**
+     * Handle the given event to smoothly scroll to the anchor pointed by the event target.
+     * @param {*} e - event
+     * @function
+     * @private
+     */
+    _handleLinkClick(e) {
+        // Follow the link if it does not point to an anchor.
+        if (!$(e.currentTarget).is('a[href^="#"]')) return;
 
-            _this._inTransition = true;
+        const arrival = e.currentTarget.getAttribute('href');
 
-            SmoothScroll.scrollToLoc(arrival, _this.options, function() {
-                _this._inTransition = false;
-            });
+        this._inTransition = true;
 
-            e.preventDefault();
-        };
+        SmoothScroll.scrollToLoc(arrival, this.options, () => {
+            this._inTransition = false;
+        });
 
-        this.$element.on('click.zf.smoothScroll', handleLinkClick)
-        this.$element.on('click.zf.smoothScroll', 'a[href^="#"]', handleLinkClick);
-    }
+        e.preventDefault();
+    };
 
     /**
      * Function to scroll to a given location on the page.
@@ -75,24 +73,33 @@ class SmoothScroll extends Plugin {
      * @function
      */
     static scrollToLoc(loc, options = SmoothScroll.defaults, callback) {
+        const $loc = $(loc);
+
         // Do nothing if target does not exist to prevent errors
-        if (!$(loc).length) {
-            return false;
-        }
+        if (!$loc.length) return false;
 
-        var scrollPos = Math.round($(loc).offset().top - options.threshold / 2 - options.offset);
+        var scrollPos = Math.round($loc.offset().top - options.threshold / 2 - options.offset);
 
         $('html, body').stop(true).animate(
             { scrollTop: scrollPos },
             options.animationDuration,
             options.animationEasing,
-            function() {
-                if(callback && typeof callback == "function"){
+            () => {
+                if (typeof callback === 'function'){
                     callback();
                 }
             }
         );
     }
+
+    /**
+     * Destroys the SmoothScroll instance.
+     * @function
+     */
+    _destroy() {
+        this.$element.off('click.zf.smoothScroll', this._handleLinkClick)
+        this.$element.off('click.zf.smoothScroll', 'a[href^="#"]', this._handleLinkClick);
+    }
 }
 
 /**