From ac220fd2a38c50acc27b0abe6f900077d4fa9bbb Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Thu, 17 Mar 2022 11:58:51 +0100 Subject: [PATCH 1/3] feat(core dom): Add a fallback option to find_scroll_container to return something else than document.body if no other scroll container can be found. --- src/core/dom.js | 6 ++++-- src/core/dom.test.js | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/core/dom.js b/src/core/dom.js index ee5c3480b..cf9d7c1a4 100644 --- a/src/core/dom.js +++ b/src/core/dom.js @@ -177,11 +177,13 @@ function get_css_value(el, property, as_pixels = false, as_float = false) { * @param {String} [direction=] - Not given: Search for any scrollable element up in the DOM tree. * ``x``: Search for a horizontally scrollable element. * ``y``: Search for a vertically scrollable element. + * @param {(DOM Node|null)} [fallback=document.body] - Fallback, if no scroll container can be found. + * The default is to use document.body. * * @returns {Node} - Return the first scrollable element. * If no other element could be found, document.body would be returned. */ -const find_scroll_container = (el, direction) => { +const find_scroll_container = (el, direction, fallback = document.body) => { while (el && el !== document.body) { if (!direction || direction === "y") { let overflow_y = get_css_value(el, "overflow-y"); @@ -197,7 +199,7 @@ const find_scroll_container = (el, direction) => { } el = el.parentElement; } - return el; + return fallback; }; const dom = { diff --git a/src/core/dom.test.js b/src/core/dom.test.js index f8f9ca8b4..34f39a228 100644 --- a/src/core/dom.test.js +++ b/src/core/dom.test.js @@ -668,7 +668,7 @@ describe("core.dom tests", () => { expect(dom.find_scroll_container(div3, "x")).toBe(div1); done(); }); - it("returns document.body if nothing else is found", function (done) { + it("returns a fallback if given, if nothing else is found", function (done) { document.body.innerHTML = `
{
`; const div2 = document.querySelector("#div2"); - expect(dom.find_scroll_container(div2, "y")).toBe(document.body); + expect(dom.find_scroll_container(div2, "y", null)).toBe(null); done(); }); }); From c04ea752f47609f06368b73b6ca3783bc108b55f Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Thu, 17 Mar 2022 12:02:11 +0100 Subject: [PATCH 2/3] fix(pat bumper): Fallback to null if no scroll container can be found. Fixes a problem with initalization of the IntersectionObserver introduced in 7.2.0. --- src/pat/bumper/bumper.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/pat/bumper/bumper.js b/src/pat/bumper/bumper.js index 05ef6e8a7..e4da2314f 100644 --- a/src/pat/bumper/bumper.js +++ b/src/pat/bumper/bumper.js @@ -43,8 +43,16 @@ export default Base.extend({ }, _init() { - const scroll_container_y = dom.find_scroll_container(this.el.parentElement, "y"); - const scroll_container_x = dom.find_scroll_container(this.el.parentElement, "x"); + const scroll_container_y = dom.find_scroll_container( + this.el.parentElement, + "y", + null + ); + const scroll_container_x = dom.find_scroll_container( + this.el.parentElement, + "x", + null + ); const pos = { top: dom.get_css_value(this.el, "top", true), From edfec619e7c54786b5a82914dce8efaf7fd2c3c8 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Thu, 17 Mar 2022 12:16:41 +0100 Subject: [PATCH 3/3] maint(pat bumper): Minor code cleanup. --- src/pat/bumper/bumper.js | 18 +++++++++--------- src/pat/bumper/index.html | 2 +- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/pat/bumper/bumper.js b/src/pat/bumper/bumper.js index e4da2314f..bf9f894f9 100644 --- a/src/pat/bumper/bumper.js +++ b/src/pat/bumper/bumper.js @@ -60,28 +60,28 @@ export default Base.extend({ bottom: dom.get_css_value(this.el, "bottom", true), left: dom.get_css_value(this.el, "left", true), }; - const intersection_observer_config_y = { + const intersection_observer_config = { threshold: [1, 0.99, 0.97, 0.96, 0.95, 0.94, 0.93, 0.92, 0.91, 0.9], - root: scroll_container_y, // add margin as inverted sticky positions. rootMargin: `${-pos.top - 1}px ${-pos.right - 1}px ${-pos.bottom - 1}px ${-pos.left - 1}px`, // prettier-ignore }; const observer_y = new IntersectionObserver( this._intersection_observer_callback.bind(this), - intersection_observer_config_y + { + ...intersection_observer_config, + root: scroll_container_y, + } ); observer_y.observe(this.el); if (scroll_container_x !== scroll_container_y) { - const intersection_observer_config_x = Object.assign( - {}, - intersection_observer_config_y, - { root: scroll_container_x } - ); const observer_x = new IntersectionObserver( this._intersection_observer_callback.bind(this), - intersection_observer_config_x + { + ...intersection_observer_config, + root: scroll_container_x, + } ); observer_x.observe(this.el); } diff --git a/src/pat/bumper/index.html b/src/pat/bumper/index.html index 5b3c73776..d18b50e78 100644 --- a/src/pat/bumper/index.html +++ b/src/pat/bumper/index.html @@ -88,7 +88,7 @@
Making some space to the left
-
+
Sticky bar.