Skip to content

Commit 7211616

Browse files
thetthet
committed
fix(pat collapsible): Adapt to changed pat-scroll.
1 parent b62e6e0 commit 7211616

File tree

2 files changed

+46
-29
lines changed

2 files changed

+46
-29
lines changed

‎src/pat/collapsible/collapsible.js‎

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import $ from "jquery";
22
import "../../core/jquery-ext";
33
import { BasePattern } from "../../core/basepattern";
4+
import events from "../../core/events";
45
import inject from "../inject/inject";
56
import logging from "../../core/logging";
67
import Parser from "../../core/parser";
@@ -44,7 +45,7 @@ class Pattern extends BasePattern {
4445
"slide-horizontal": { closed: "slideOut", open: "slideIn" },
4546
};
4647

47-
init() {
48+
async init() {
4849
const $el = (this.$el = $(this.el));
4950

5051
let $content;
@@ -85,8 +86,9 @@ class Pattern extends BasePattern {
8586
$el.removeClass("open").addClass("closed");
8687
this.$panel.hide();
8788
} else {
88-
if (this.options.loadContent)
89+
if (this.options.loadContent) {
8990
this._loadContent($el, this.options.loadContent, this.$panel);
91+
}
9092
this.$trigger.removeClass("collapsible-closed").addClass("collapsible-open");
9193
$el.removeClass("closed").addClass("open");
9294
this.$panel.show();
@@ -104,15 +106,35 @@ class Pattern extends BasePattern {
104106
$(document).on("click", this.options.openTrigger, this.open.bind(this));
105107
}
106108

109+
// pat-scroll support
110+
if (this.options.scroll?.selector) {
111+
const Scroll = (await import("../scroll/scroll")).default;
112+
this.scroll = new Scroll(this.el, {
113+
trigger: "manual",
114+
selector: this.options.scroll.selector,
115+
offset: this.options.scroll?.offset,
116+
});
117+
await events.await_pattern_init(this.scroll);
118+
}
119+
120+
// scroll debouncer for later use.
107121
this.debounce_scroll = utils.debounce(
108-
() => this._scroll(),
122+
this._scroll.bind(this),
109123
10,
110124
debounce_scroll_timer
111-
); // scroll debouncer for later use.
125+
);
112126

113127
return $el;
114128
}
115129

130+
async _scroll() {
131+
const scroll_selector = this.options.scroll?.selector;
132+
if (!scroll_selector) {
133+
return;
134+
}
135+
await this.scroll.scrollTo();
136+
}
137+
116138
open() {
117139
if (!this.$el.hasClass("open")) this.toggle();
118140
return this.$el;
@@ -176,19 +198,6 @@ class Pattern extends BasePattern {
176198
return this.$el; // allow chaining
177199
}
178200

179-
async _scroll() {
180-
const scroll_selector = this.options.scroll?.selector;
181-
if (scroll_selector) {
182-
const pat_scroll = (await import("../scroll/scroll")).default;
183-
const scroll = new pat_scroll(this.el, {
184-
trigger: "manual",
185-
selector: scroll_selector,
186-
offset: this.options.scroll?.offset,
187-
});
188-
await scroll.smoothScroll();
189-
}
190-
}
191-
192201
async _transit($el, from_cls, to_cls) {
193202
if (to_cls === "open" && this.options.loadContent) {
194203
this._loadContent($el, this.options.loadContent, this.$panel);

‎src/pat/collapsible/collapsible.test.js‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ describe("pat-collapsible", function () {
1010
jest.restoreAllMocks();
1111
});
1212

13-
it("1- wraps the collapsible within a div.panel-content", async function () {
13+
it("1 - wraps the collapsible within a div.panel-content", async function () {
1414
document.body.innerHTML = `
1515
<div class="pat-collapsible">
1616
<h3>Trigger header</h3>
@@ -128,16 +128,27 @@ describe("pat-collapsible", function () {
128128
});
129129

130130
describe("8 - scrolling", function () {
131+
beforeEach(function () {
132+
// polyfill window.scrollTo for jsdom, which just runs but does not scroll.
133+
this.spy_scrollTo = jest
134+
.spyOn(window, "scrollTo")
135+
.mockImplementation(() => null);
136+
});
137+
138+
afterEach(function () {
139+
this.spy_scrollTo.mockRestore();
140+
});
141+
131142
it("8.1 - can scroll to itself when opened.", async function () {
132143
document.body.innerHTML = `
133144
<div class="pat-collapsible closed" data-pat-collapsible="scroll-selector: self">
134145
<p>Collapsible content</p>
135146
</div>
136-
`;
147+
`;
137148
const collapsible = document.querySelector(".pat-collapsible");
138149
const instance = new Pattern(collapsible, { transition: "none" });
139-
await events.await_pattern_init(instance);
140150
const spy_scroll = jest.spyOn(instance, "_scroll");
151+
await events.await_pattern_init(instance);
141152

142153
instance.toggle();
143154
await utils.timeout(10);
@@ -153,8 +164,8 @@ describe("pat-collapsible", function () {
153164
`;
154165
const collapsible = document.querySelector(".pat-collapsible");
155166
const instance = new Pattern(collapsible, { transition: "none" });
156-
await events.await_pattern_init(instance);
157167
const spy_scroll = jest.spyOn(instance, "_scroll");
168+
await events.await_pattern_init(instance);
158169

159170
instance.toggle();
160171
await utils.timeout(10);
@@ -182,7 +193,6 @@ describe("pat-collapsible", function () {
182193
await events.await_pattern_init(instance2);
183194
const instance3 = new Pattern(document.querySelector(".c3"));
184195
await events.await_pattern_init(instance3);
185-
const spy_animate = jest.spyOn($.fn, "animate");
186196

187197
document.querySelector("#open").click();
188198
await utils.timeout(30);
@@ -192,7 +202,7 @@ describe("pat-collapsible", function () {
192202
expect(document.querySelector(".c3").classList.contains("open")).toBeTruthy(); // prettier-ignore
193203

194204
// Other calls to _scroll resp. jQuery.animate should have been canceled.
195-
expect(spy_animate).toHaveBeenCalledTimes(1);
205+
expect(this.spy_scrollTo).toHaveBeenCalledTimes(1);
196206
});
197207

198208
it("8.4 - can scroll to itself when opened with an offset.", async function () {
@@ -204,13 +214,12 @@ describe("pat-collapsible", function () {
204214
const collapsible = document.querySelector(".pat-collapsible");
205215
const instance = new Pattern(collapsible);
206216
await events.await_pattern_init(instance);
207-
const spy_animate = jest.spyOn($.fn, "animate");
208217

209218
instance.toggle();
210219
await utils.timeout(10);
211220

212-
const arg_1 = spy_animate.mock.calls[0][0];
213-
expect(arg_1.scrollTop).toBe(-40); // the offset is substracted from the scroll position to stop BEFORE the target position.
221+
const arg_1 = this.spy_scrollTo.mock.calls[0][0];
222+
expect(arg_1.top).toBe(-40); // the offset is substracted from the scroll position to stop BEFORE the target position.
214223
});
215224

216225
it("8.5 - can scroll to itself when opened with a negative offset.", async function () {
@@ -222,13 +231,12 @@ describe("pat-collapsible", function () {
222231
const collapsible = document.querySelector(".pat-collapsible");
223232
const instance = new Pattern(collapsible);
224233
await events.await_pattern_init(instance);
225-
const spy_animate = jest.spyOn($.fn, "animate");
226234

227235
instance.toggle();
228236
await utils.timeout(10);
229237

230-
const arg_1 = spy_animate.mock.calls[0][0];
231-
expect(arg_1.scrollTop).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.
238+
const arg_1 = this.spy_scrollTo.mock.calls[0][0];
239+
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.
232240
});
233241
});
234242

0 commit comments

Comments
 (0)