Use pull request #11077 from ncoden/fix/on-load-listeners for v6.5.0

f59e95c91 feat: add  utility to wait for page load even after it is already loaded
f353fc2f1 fix: fix various component listeners on page load when the page is already loaded
13d9ca205 fix: refactor the  uility to allow to unbind the created listenner

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

diff --git a/gulp/tasks/javascript.js b/gulp/tasks/javascript.js
index d30607908c74e1d42ee3e667e883a8d826fd785d..44cca920ef43136dab1c5e289d275c36b1ad90fb 100644 (file)
--- a/gulp/tasks/javascript.js
+++ b/gulp/tasks/javascript.js
@@ -21,7 +21,7 @@ gulp.task('javascript', ['javascript:foundation', 'javascript:deps', 'javascript
 var pluginsAsExternals = {
   'jquery': 'jQuery',
   './foundation.core': '{Foundation: window.Foundation}',
-  './foundation.util.core' : '{rtl: window.Foundation.rtl, GetYoDigits: window.Foundation.GetYoDigits, transitionend: window.Foundation.transitionend, RegExpEscape: window.Foundation.RegExpEscape}',
+  './foundation.util.core' : '{rtl: window.Foundation.rtl, GetYoDigits: window.Foundation.GetYoDigits, transitionend: window.Foundation.transitionend, RegExpEscape: window.Foundation.RegExpEscape, onLoad: window.Foundation.onLoad}',
   './foundation.util.imageLoader' : '{onImagesLoaded: window.Foundation.onImagesLoaded}',
   './foundation.util.keyboard' : '{Keyboard: window.Foundation.Keyboard}',
   './foundation.util.mediaQuery' : '{MediaQuery: window.Foundation.MediaQuery}',

diff --git a/js/entries/foundation.js b/js/entries/foundation.js
index cc312ad183a7bd1a212a11dceb5c1e7b23f517ee..3a6ff58f4e9db6d6d96a93071078e6aab07aeed7 100644 (file)
--- a/js/entries/foundation.js
+++ b/js/entries/foundation.js
@@ -41,6 +41,7 @@ Foundation.rtl = CoreUtils.rtl;
 Foundation.GetYoDigits = CoreUtils.GetYoDigits;
 Foundation.transitionend = CoreUtils.transitionend;
 Foundation.RegExpEscape = CoreUtils.RegExpEscape;
+Foundation.onLoad = CoreUtils.onLoad;
 
 Foundation.Box = Box;
 Foundation.onImagesLoaded = onImagesLoaded;

diff --git a/js/entries/plugins/foundation.core.js b/js/entries/plugins/foundation.core.js
index cf4afd9cb0774d433ba42041d01edb9ff07b9f35..06bc55e24d5b3b02affa62910a2498aa8d3b25b6 100644 (file)
--- a/js/entries/plugins/foundation.core.js
+++ b/js/entries/plugins/foundation.core.js
@@ -6,11 +6,12 @@ Foundation.addToJquery($);
 // These are now separated out, but historically were a part of this module,
 // and since this is here for backwards compatibility we include them in
 // this entry.
-import {rtl, GetYoDigits, transitionend, RegExpEscape} from '../../foundation.util.core';
+import {rtl, GetYoDigits, transitionend, RegExpEscape, onLoad} from '../../foundation.util.core';
 Foundation.rtl = rtl;
 Foundation.GetYoDigits = GetYoDigits;
 Foundation.transitionend = transitionend;
 Foundation.RegExpEscape = RegExpEscape;
+Foundation.onLoad = onLoad;
 
 // Every plugin depends on plugin now, we can include that on the core for the
 // script inclusion path.

diff --git a/js/foundation.accordion.js b/js/foundation.accordion.js
index e647a1ea84185e6012ca307750087fadb38bc736..63618b31efd2fb73a6ae36dd0031ced89da5b941 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($(window), 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 ed43448598bf6c76fa1d611cfb13f570c9966c65..382e3709128516e85ef158a251ecc3d70dd2c9b9 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,19 @@ class Magellan extends Plugin {
       _this._updateActive();
     });
 
-    if (document.readyState === "complete") {
-      _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);
-      });
-    } else {
-      $(window).one('load', function(){
-        _this.$element.on({
+    _this.onLoadListener = onLoad($(window), 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');
+          var arrival   = _this.getAttribute('href');
           _this.scrollToLoc(arrival);
         });
-      });
-    }
-    
+    });
+
     this._deepLinkScroll = function(e) {
       if(_this.options.deepLinking) {
         _this.scrollToLoc(window.location.hash);
@@ -230,7 +222,10 @@ class Magellan extends Plugin {
       var hash = this.$active[0].getAttribute('href');
       window.location.hash.replace(hash, '');
     }
-    $(window).off('hashchange', this._deepLinkScroll);
+
+    $(window)
+      .off('hashchange', this._deepLinkScroll)
+      .off(this.onLoadListener);
   }
 }
 

diff --git a/js/foundation.offcanvas.js b/js/foundation.offcanvas.js
index 080a18536072b7cca3a8f2e0094fda7e087bd005..fe49e47d049a067065a7440491772ee681ccdc8c 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() {
+    this.onLoadListener = onLoad($(window), 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);
       }
     });
   }
@@ -445,6 +447,7 @@ class OffCanvas extends Plugin {
     this.close();
     this.$element.off('.zf.trigger .zf.offcanvas');
     this.$overlay.off('.zf.offcanvas');
+    $(window).off(this.onLoadListener);
   }
 }
 

diff --git a/js/foundation.reveal.js b/js/foundation.reveal.js
index 49bb872730a80534b01dc7be95a963ca4b0b4299..02fe2b950c43e57676ec2064dc149021adeca72d 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));
+      this.onLoadListener = onLoad($(window), () => this.open());
     }
   }
 
@@ -471,7 +472,9 @@ class Reveal extends Plugin {
     }
     this.$element.hide().off();
     this.$anchor.off('.zf');
-    $(window).off(`.zf.reveal:${this.id}`);
+    $(window)
+      .off(`.zf.reveal:${this.id}`)
+      .off(this.onLoadListener);
 
     if ($('.reveal:visible').length  === 0) {
       this._removeRevealOpenClasses(); // also remove .is-reveal-open from the html element when there is no opened reveal

diff --git a/js/foundation.sticky.js b/js/foundation.sticky.js
index e50f071ab4e2eb158b01bd22a789251171bdea9e..b95eccd8a6197a0c648a9f966374cdef2cdbf810 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(){
+    this.onLoadListener = onLoad($(window), 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.
@@ -403,7 +403,9 @@ class Sticky extends Plugin {
     if (this.$anchor && this.$anchor.length) {
       this.$anchor.off('change.zf.sticky');
     }
-    $(window).off(this.scrollListener);
+    $(window)
+      .off(this.scrollListener)
+      .off(this.onLoadListener);
 
     if (this.wasWrapped) {
       this.$element.unwrap();

diff --git a/js/foundation.tabs.js b/js/foundation.tabs.js
index 824e2278200d6e9640e4444d4654d8551c24b030..4ad8de9d9d4e09abb656f8e823b60dbc260950a3 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() {
+        _this.onLoadListener = onLoad($(window), function() {
           $('html, body').animate({ scrollTop: $elem.offset().top }, _this.options.deepLinkSmudgeDelay, () => {
             $link.focus();
           });
@@ -393,6 +394,7 @@ class Tabs extends Plugin {
       $(window).off('hashchange', this._checkDeepLink);
     }
 
+    $(window).off(this.onLoadListener);
   }
 }
 

diff --git a/js/foundation.util.core.js b/js/foundation.util.core.js
index 23099a57fb51629da0cd9d6bdaeb740e6203d5f5..c70f989d5c3167d1bea4c19b8faaf3602afc6d68 100644 (file)
--- a/js/foundation.util.core.js
+++ b/js/foundation.util.core.js
@@ -61,4 +61,33 @@ function transitionend($elem){
   }
 }
 
-export {rtl, GetYoDigits, RegExpEscape, transitionend};
+/**
+ * Return an event type to listen for window load.
+ *
+ * If `$elem` is passed, an event will be triggered on `$elem`. If window is already loaded, the event will still be triggered.
+ * If `handler` is passed, attach it to the event on `$elem`.
+ * Calling `onLoad` without handler allows you to get the event type that will be triggered before attaching the handler by yourself.
+ * @function
+ *
+ * @param {Object} [] $elem - jQuery element on which the event will be triggered if passed.
+ * @param {Function} [] handler - function to attach to the event.
+ * @returns {String} - event type that should or will be triggered.
+ */
+function onLoad($elem, handler) {
+  const didLoad = document.readyState === 'complete';
+  const eventType = (didLoad ? '_didLoad' : 'load') + '.zf.util.onLoad';
+  const cb = () => $elem.triggerHandler(eventType);
+
+  if ($elem) {
+    if (handler) $elem.one(eventType, handler);
+
+    if (didLoad)
+      setTimeout(cb);
+    else
+      $(window).one('load', cb);
+  }
+
+  return eventType;
+}
+
+export {rtl, GetYoDigits, RegExpEscape, transitionend, onLoad};

diff --git a/js/foundation.util.triggers.js b/js/foundation.util.triggers.js
index cbe9e642c94bc3a829771b18cb9c6a2f52e46420..ed717f14f0d1769a2eea095c29067029ed655f6a 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($(window), function () {
       Triggers.Initializers.addSimpleListeners();
       Triggers.Initializers.addGlobalListeners();
-    } else {
-      $(window).on('load', () => {
-        Triggers.Initializers.addSimpleListeners();
-        Triggers.Initializers.addGlobalListeners();
-      });
-    }
-
+    });
 
     $.triggersInitialized = true;
   }

diff --git a/test/javascript/util/core.js b/test/javascript/util/core.js
index 53419238b5f8daa3c5c438c9e04a1f6bc41264b7..984b8f7f8b2da6cf4064de51249eac4a22e03493 100644 (file)
--- a/test/javascript/util/core.js
+++ b/test/javascript/util/core.js
@@ -100,7 +100,7 @@ describe('Foundation core', function() {
       name.should.be.a('string');
       name.should.be.equal('');
     });
-    
+
     it('should handle a named function expression', function() {
       var D = function foo(){};
       var name = Foundation.getFnName(D);
@@ -109,10 +109,13 @@ describe('Foundation core', function() {
       name.should.be.equal('foo');
     });
   });
-  
+
   describe('transitionEnd()', function() {
   });
 
+  describe('onLoad()', function (done) {
+  });
+
   describe('throttle()', function() {
   });
 });