From 7d717bfb2db219aac07e38572a8ae2a3d59e6869 Mon Sep 17 00:00:00 2001 From: Nicolas Coden Date: Fri, 28 Sep 2018 22:46:23 +0200 Subject: [PATCH 1/4] refactor: move SmoothScroll to ES6+ and fix linting issues --- js/foundation.smoothScroll.js | 36 ++++++++++++++--------------------- 1 file changed, 14 insertions(+), 22 deletions(-) diff --git a/js/foundation.smoothScroll.js b/js/foundation.smoothScroll.js index a90e0965ad..3ec58c84a1 100644 --- 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,19 +39,16 @@ class SmoothScroll extends Plugin { * @private */ _events() { - var _this = this; - - // click handler function. - var handleLinkClick = function(e) { + const handleLinkClick = (e) => { // Follow the link it does not point to an anchor. - if (!$(this).is('a[href^="#"]')) return; + if (!$(e.currentTarget).is('a[href^="#"]')) return; - var arrival = this.getAttribute('href'); + const arrival = e.currentTarget.getAttribute('href'); - _this._inTransition = true; + this._inTransition = true; - SmoothScroll.scrollToLoc(arrival, _this.options, function() { - _this._inTransition = false; + SmoothScroll.scrollToLoc(arrival, this.options, () => { + this._inTransition = false; }); e.preventDefault(); @@ -75,19 +67,19 @@ 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(); } } From fd14999f1bd3d28d20e92d8bb13005bdde7610de Mon Sep 17 00:00:00 2001 From: Nicolas Coden Date: Fri, 28 Sep 2018 22:47:22 +0200 Subject: [PATCH 2/4] refactor: move SmoothScroll click event handling to its own function --- js/foundation.smoothScroll.js | 32 +++++++++++++++++++------------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/js/foundation.smoothScroll.js b/js/foundation.smoothScroll.js index 3ec58c84a1..9d5f9c656b 100644 --- a/js/foundation.smoothScroll.js +++ b/js/foundation.smoothScroll.js @@ -39,24 +39,30 @@ class SmoothScroll extends Plugin { * @private */ _events() { - const handleLinkClick = (e) => { - // Follow the link it does not point to an anchor. - if (!$(e.currentTarget).is('a[href^="#"]')) return; + this.$element.on('click.zf.smoothScroll', this._handleLinkClick) + this.$element.on('click.zf.smoothScroll', 'a[href^="#"]', this._handleLinkClick); + } - const arrival = e.currentTarget.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 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, () => { - 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. From e0fbd09c8f403f66ed566de24b5e45b22797cf75 Mon Sep 17 00:00:00 2001 From: Nicolas Coden Date: Fri, 28 Sep 2018 22:50:10 +0200 Subject: [PATCH 3/4] fix: clean SmoothScroll events when destroyed --- js/foundation.smoothScroll.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/js/foundation.smoothScroll.js b/js/foundation.smoothScroll.js index 9d5f9c656b..ce8eda9195 100644 --- a/js/foundation.smoothScroll.js +++ b/js/foundation.smoothScroll.js @@ -91,6 +91,15 @@ class SmoothScroll extends Plugin { } ); } + + /** + * Destroys the SmoothScroll instance. + * @function + */ + _destroy() { + this.$element.off('click.zf.smoothScroll', this._handleLinkClick) + this.$element.off('click.zf.smoothScroll', 'a[href^="#"]', this._handleLinkClick); + } } /** From 65c26b102db09ef880eae3bf37249bd74ba67db6 Mon Sep 17 00:00:00 2001 From: Nicolas Coden Date: Fri, 28 Sep 2018 23:01:00 +0200 Subject: [PATCH 4/4] docs: fix typo in SmoothScroll click handler --- js/foundation.smoothScroll.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/foundation.smoothScroll.js b/js/foundation.smoothScroll.js index ce8eda9195..0cd211fe19 100644 --- a/js/foundation.smoothScroll.js +++ b/js/foundation.smoothScroll.js @@ -50,7 +50,7 @@ class SmoothScroll extends Plugin { * @private */ _handleLinkClick(e) { - // Follow the link it does not point to an anchor. + // Follow the link if it does not point to an anchor. if (!$(e.currentTarget).is('a[href^="#"]')) return; const arrival = e.currentTarget.getAttribute('href');