Use pull request foundation#11077 from ncoden/fix/on-load-listeners f…

…or v6.5.0 f59e95c feat: add utility to wait for page load even after it is already loaded f353fc2 fix: fix various component listeners on page load when the page is already loaded 13d9ca2 fix: refactor the uility to allow to unbind the created listenner Signed-off-by: Nicolas Coden <nicolas@ncoden.fr>
ncoden · Jun 16, 2018 · 12822b4 · 12822b4
1 parent f3b48d1
commit 12822b4
Show file tree

Hide file tree

Showing 12 changed files with 82 additions and 48 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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() {
   });
 });