From: Nicolas Coden Date: Sun, 18 Mar 2018 20:27:26 +0000 (+0100) Subject: fix: fix various component listeners on page load when the page is already loaded X-Git-Tag: v6.6.0~3^2~266^2~2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=f353fc2f1;p=thirdparty%2Ffoundation%2Ffoundation-sites.git 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 f49345d08..81d8f0aa8 100644 --- 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 d41a5ea10..7878a7ab9 100644 --- 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 58424469c..12caff509 100644 --- 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 f0d87b99e..85230af3e 100644 --- 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 e50f071ab..28c6a8548 100644 --- 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 4382503f6..ab8b6a463 100644 --- 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 cbe9e642c..1a59773e6 100644 --- 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; }