fix(pat-collapsible): Allow to explicitly clear the scroll selector.

In case of nested pat-collapsible elements, child elements inherit the
options from parent elements, including the scroll-selector. If the
child element should do no scrolling, it needs to explicitly be reset.
This can be done by adding th following options to the collapsible data
attribute:
data-pat-collapsible="scroll-selector: none"

Author: thet

src/pat/collapsible/collapsible.js

@@ -106,35 +106,27 @@ class Pattern extends BasePattern {
             $(document).on("click", this.options.openTrigger, this.open.bind(this));
         }
 
-        // scroll debouncer for later use.
-        this.debounce_scroll = utils.debounce(
-            this._scroll.bind(this),
-            10,
-            debounce_scroll_timer
-        );
-
         // pat-scroll support
-        if (this.options.scroll?.selector) {
+        if (this.options.scroll?.selector && this.options.scroll.selector !== "none") {
             const Scroll = (await import("../scroll/scroll")).default;
             this.scroll = new Scroll(this.el, {
                 trigger: "manual",
                 selector: this.options.scroll.selector,
                 offset: this.options.scroll?.offset,
             });
             await events.await_pattern_init(this.scroll);
+
+            // scroll debouncer for later use.
+            this.debounce_scroll = utils.debounce(
+                this.scroll.scrollTo.bind(this.scroll),
+                10,
+                debounce_scroll_timer
+            );
         }
 
         return $el;
     }
 
-    async _scroll() {
-        const scroll_selector = this.options.scroll?.selector;
-        if (!scroll_selector) {
-            return;
-        }
-        await this.scroll.scrollTo();
-    }
-
     open() {
         if (!this.$el.hasClass("open")) {
             this.toggle();
@@ -196,7 +188,7 @@ class Pattern extends BasePattern {
         if (new_state === "open") {
             this.$el.trigger("patterns-collapsible-open");
             this._transit(this.$el, "closed", "open");
-            this.debounce_scroll();
+            this.debounce_scroll?.(); // debounce scroll, if available.
         } else {
             this.$el.trigger("patterns-collapsible-close");
             this._transit(this.$el, "open", "closed");

src/pat/collapsible/collapsible.test.js

@@ -147,13 +147,12 @@ describe("pat-collapsible", function () {
             `;
             const collapsible = document.querySelector(".pat-collapsible");
             const instance = new Pattern(collapsible, { transition: "none" });
-            const spy_scroll = jest.spyOn(instance, "_scroll");
             await events.await_pattern_init(instance);
 
             instance.toggle();
             await utils.timeout(10);
 
-            expect(spy_scroll).toHaveBeenCalledTimes(1);
+            expect(this.spy_scrollTo).toHaveBeenCalledTimes(1);
         });
 
         it("8.2 - does not scroll when being closed.", async function () {
@@ -164,13 +163,12 @@ describe("pat-collapsible", function () {
         `;
             const collapsible = document.querySelector(".pat-collapsible");
             const instance = new Pattern(collapsible, { transition: "none" });
-            const spy_scroll = jest.spyOn(instance, "_scroll");
             await events.await_pattern_init(instance);
 
             instance.toggle();
             await utils.timeout(10);
 
-            expect(spy_scroll).not.toHaveBeenCalled();
+            expect(this.spy_scrollTo).not.toHaveBeenCalled();
         });
 
         it("8.3 - only scrolls once even if multiple collapsible are opened at once.", async function () {
@@ -238,6 +236,29 @@ describe("pat-collapsible", function () {
             const arg_1 = this.spy_scrollTo.mock.calls[0][0];
             expect(arg_1.top).toBe(40); // the offset is substracted from the scroll position, so a negative offset is added to the scroll position and stops AFTER the target position.
         });
+
+        it("8.6 - disables scrolling if a parent pat-collapsible has enabled it.", async function () {
+            document.body.innerHTML = `
+                <div id="id1" class="pat-collapsible closed" data-pat-collapsible="scroll-selector: self; transition: none">
+                    <p>Collapsible content</p>
+                    <div id="id2" class="pat-collapsible closed" data-pat-collapsible="scroll-selector: none">
+                        <p>Collapsible content</p>
+                    </div>
+                </div>
+            `;
+            const collapsible_1 = document.querySelector("#id1");
+            const instance_1 = new Pattern(collapsible_1);
+            await events.await_pattern_init(instance_1);
+
+            const collapsible_2 = document.querySelector("#id2");
+            const instance_2 = new Pattern(collapsible_2);
+            await events.await_pattern_init(instance_2);
+
+            instance_2.toggle();
+            await utils.timeout(10);
+
+            expect(this.spy_scrollTo).not.toHaveBeenCalled();
+        });
     });
 
     it("9 - triggers the pat-update event.", async function () {

src/pat/collapsible/documentation.md

@@ -169,5 +169,5 @@ attribute. The available options are:
 | `transition`      | `slide`   | Transition effect when opening or closing a collapsinble. Must be one of `none`, `css`, `fade`, `slide` or `slide-horizontal`.                                       |
 | `effect-duration` | `fast`    | Duration of transition. This is ignored if the transition is `none` or `css`.                                                                                        |
 | `effect-easing`   | `swing`   | Easing to use for the open/close animation. This must be a known jQuery easing method. jQuery includes `swing` and `linear`, but more can be included via jQuery UI. |
-| `scroll-selector` |           | CSS selector or `self`. Defines which element will be scrolled into view. `self` if it is the collapsible element itself.                                            |
+| `scroll-selector` |           | CSS selector, `self` or `none`. Defines which element will be scrolled into view. `self` if it is the collapsible element itself. `none` to disable scrolling if a scrolling selector is inherited from a parent pat-collapsible element. |
 | `scroll-offset`   |           | `offset` in pixels to stop scrolling before the target position defines by `scroll-selector`. Can also be a negative number.                                         |