Merge pull request #978 from Patternslib/fix-bumper

Fix bumper

Author: thet

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 = {

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 = `
               <div
                   id="div1"
@@ -679,7 +679,7 @@ describe("core.dom tests", () => {
               </div>
             `;
             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();
         });
     });

src/pat/bumper/bumper.js

@@ -43,37 +43,45 @@ 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),
             right: dom.get_css_value(this.el, "right", true),
             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);
         }

src/pat/bumper/index.html

@@ -88,7 +88,7 @@
             <div id="spacer">
                 Making some space to the left
             </div>
-            <div class="pat-bumper bumper-2" data-pat-bumper="margin: 20; side: all">
+            <div class="pat-bumper bumper-2">
                 Sticky bar.
             </div>
             <p>