fix: fix various component listeners on page load when the page is already loaded

Prevent bugs in Accordion, Magellan, OffCanvas, Reveal, Sticky, Tabs and trigger utilities when the component is dynamically added because the window `load` event they rely on would never be triggered.

Note: In addition to the bug fix, the following behaviors are changed:
* Accordion now smoothly scroll to the opened pane when the hash is changed

diff --git a/js/foundation.accordion.js b/js/foundation.accordion.js
index f49345d08a1a7820677e222399a229b90a2fc874..81d8f0aa82d749034948333e053e1589716e88d3 100644 (file)
--- a/js/foundation.accordion.js
+++ b/js/foundation.accordion.js
@@ -1,8 +1,8 @@
 'use strict';
 
 import $ from 'jquery';
+import { onLoad, GetYoDigits } from './foundation.util.core';
 import { Keyboard } from './foundation.util.keyboard';
-import { GetYoDigits } from './foundation.util.core';
 import { Plugin } from './foundation.plugin';
 
 /**
@@ -82,7 +82,7 @@ class Accordion extends Plugin {
           //roll up a little to show the titles
           if (this.options.deepLinkSmudge) {
             var _this = this;
-            $(window).on('load', function() {
+            onLoad(function() {
               var offset = _this.$element.offset();
               $('html, body').animate({ scrollTop: offset.top }, _this.options.deepLinkSmudgeDelay);
             });

diff --git a/js/foundation.magellan.js b/js/foundation.magellan.js
index d41a5ea10ae65b96fa26e405e2a8ef80373f69eb..7878a7ab99e9153ce74d15f0790411962f33c7d6 100644 (file)
--- a/js/foundation.magellan.js
+++ b/js/foundation.magellan.js
@@ -2,7 +2,7 @@
 
 
 import $ from 'jquery';
-import { GetYoDigits } from './foundation.util.core';
+import { onLoad, GetYoDigits } from './foundation.util.core';
 import { Plugin } from './foundation.plugin';
 import { SmoothScroll } from './foundation.smoothScroll';
 
@@ -83,6 +83,7 @@ class Magellan extends Plugin {
           duration: _this.options.animationDuration,
           easing:   _this.options.animationEasing
         };
+
     $(window).one('load', function(){
       if(_this.options.deepLinking){
         if(location.hash){
@@ -93,28 +94,17 @@ class Magellan extends Plugin {
       _this._updateActive();
     });
 
-    if (document.readyState === "complete") {
+    onLoad(function () {
       _this.$element.on({
         'resizeme.zf.trigger': _this.reflow.bind(_this),
         'scrollme.zf.trigger': _this._updateActive.bind(_this)
-      }).on('click.zf.magellan', 'a[href^="#"]', function(e) {
+      }).on('click.zf.magellan', 'a[href^="#"]', function (e) {
         e.preventDefault();
         var arrival   = _this.getAttribute('href');
         _this.scrollToLoc(arrival);
       });
-    } else {
-      $(window).one('load', function(){
-        _this.$element.on({
-          'resizeme.zf.trigger': _this.reflow.bind(_this),
-          'scrollme.zf.trigger': _this._updateActive.bind(_this)
-        }).on('click.zf.magellan', 'a[href^="#"]', function(e) {
-          e.preventDefault();
-          var arrival   = _this.getAttribute('href');
-          _this.scrollToLoc(arrival);
-        });
-      });
-    }
-    
+    });
+
     this._deepLinkScroll = function(e) {
       if(_this.options.deepLinking) {
         _this.scrollToLoc(window.location.hash);

diff --git a/js/foundation.offcanvas.js b/js/foundation.offcanvas.js
index 58424469cc949ebf23176396cad6e7a66d70bd16..12caff5093c075f34a6c0374aaa44f16e993eb1f 100644 (file)
--- a/js/foundation.offcanvas.js
+++ b/js/foundation.offcanvas.js
@@ -1,9 +1,9 @@
 'use strict';
 
 import $ from 'jquery';
+import { onLoad, transitionend, RegExpEscape } from './foundation.util.core';
 import { Keyboard } from './foundation.util.keyboard';
 import { MediaQuery } from './foundation.util.mediaQuery';
-import { transitionend, RegExpEscape } from './foundation.util.core';
 import { Plugin } from './foundation.plugin';
 
 import { Triggers } from './foundation.util.triggers';
@@ -166,15 +166,17 @@ class OffCanvas extends Plugin {
   _setMQChecker() {
     var _this = this;
 
-    $(window).on('changed.zf.mediaquery', function() {
+    onLoad(function () {
       if (MediaQuery.atLeast(_this.options.revealOn)) {
         _this.reveal(true);
-      } else {
-        _this.reveal(false);
       }
-    }).one('load.zf.offCanvas', function() {
+    });
+
+    $(window).on('changed.zf.mediaquery', function () {
       if (MediaQuery.atLeast(_this.options.revealOn)) {
         _this.reveal(true);
+      } else {
+        _this.reveal(false);
       }
     });
   }

diff --git a/js/foundation.reveal.js b/js/foundation.reveal.js
index f0d87b99ee721775a176cac930dc9361f3da96ac..85230af3e0419c62f5ead94a3798d4e6fc9a3871 100644 (file)
--- a/js/foundation.reveal.js
+++ b/js/foundation.reveal.js
@@ -1,6 +1,7 @@
 'use strict';
 
 import $ from 'jquery';
+import { onLoad } from './foundation.util.core';
 import { Keyboard } from './foundation.util.keyboard';
 import { MediaQuery } from './foundation.util.mediaQuery';
 import { Motion } from './foundation.util.motion';
@@ -78,7 +79,7 @@ class Reveal extends Plugin {
     }
     this._events();
     if (this.options.deepLink && window.location.hash === ( `#${this.id}`)) {
-      $(window).one('load.zf.reveal', this.open.bind(this));
+      onLoad(() => this.open());
     }
   }
 

diff --git a/js/foundation.sticky.js b/js/foundation.sticky.js
index e50f071ab4e2eb158b01bd22a789251171bdea9e..28c6a854800b82258a9dbccac76372d49efd5411 100644 (file)
--- a/js/foundation.sticky.js
+++ b/js/foundation.sticky.js
@@ -1,7 +1,7 @@
 'use strict';
 
 import $ from 'jquery';
-import { GetYoDigits } from './foundation.util.core';
+import { onLoad, GetYoDigits } from './foundation.util.core';
 import { MediaQuery } from './foundation.util.mediaQuery';
 import { Plugin } from './foundation.plugin';
 import { Triggers } from './foundation.util.triggers';
@@ -60,18 +60,18 @@ class Sticky extends Plugin {
 
     this.scrollCount = this.options.checkEvery;
     this.isStuck = false;
-    $(window).one('load.zf.sticky', function(){
+    onLoad(function () {
       //We calculate the container height to have correct values for anchor points offset calculation.
       _this.containerHeight = _this.$element.css("display") == "none" ? 0 : _this.$element[0].getBoundingClientRect().height;
       _this.$container.css('height', _this.containerHeight);
       _this.elemHeight = _this.containerHeight;
-      if(_this.options.anchor !== ''){
+      if (_this.options.anchor !== '') {
         _this.$anchor = $('#' + _this.options.anchor);
-      }else{
+      } else {
         _this._parsePoints();
       }
 
-      _this._setSizes(function(){
+      _this._setSizes(function () {
         var scroll = window.pageYOffset;
         _this._calc(false, scroll);
         //Unstick the element will ensure that proper classes are set.

diff --git a/js/foundation.tabs.js b/js/foundation.tabs.js
index 4382503f6d788d39964b40c0bc62b6379eb15d69..ab8b6a463cce7445ebead443f7ebc5c287a4b457 100644 (file)
--- a/js/foundation.tabs.js
+++ b/js/foundation.tabs.js
@@ -1,6 +1,7 @@
 'use strict';
 
 import $ from 'jquery';
+import { onLoad } from './foundation.util.core';
 import { Keyboard } from './foundation.util.keyboard';
 import { onImagesLoaded } from './foundation.util.imageLoader';
 import { Plugin } from './foundation.plugin';
@@ -77,7 +78,7 @@ class Tabs extends Plugin {
       }
 
       if(isActive && _this.options.autoFocus){
-        $(window).on('load', function() {
+        onLoad(function() {
           $('html, body').animate({ scrollTop: $elem.offset().top }, _this.options.deepLinkSmudgeDelay, () => {
             $link.focus();
           });

diff --git a/js/foundation.util.triggers.js b/js/foundation.util.triggers.js
index cbe9e642c94bc3a829771b18cb9c6a2f52e46420..1a59773e612f2592b441203d68fb00efee18485c 100644 (file)
--- a/js/foundation.util.triggers.js
+++ b/js/foundation.util.triggers.js
@@ -1,6 +1,7 @@
 'use strict';
 
 import $ from 'jquery';
+import { onLoad } from './foundation.util.core';
 import { Motion } from './foundation.util.motion';
 
 const MutationObserver = (function () {
@@ -244,16 +245,10 @@ Triggers.init = function($, Foundation) {
   if (typeof($.triggersInitialized) === 'undefined') {
     let $document = $(document);
 
-    if(document.readyState === "complete") {
+    onLoad(function () {
       Triggers.Initializers.addSimpleListeners();
       Triggers.Initializers.addGlobalListeners();
-    } else {
-      $(window).on('load', () => {
-        Triggers.Initializers.addSimpleListeners();
-        Triggers.Initializers.addGlobalListeners();
-      });
-    }
-
+    });
 
     $.triggersInitialized = true;
   }