Skip to content

Commit 417b0d6

Browse files
thetthet
committed
maint(pat-collapsible): Switch to class based pattern.
1 parent 4302d6c commit 417b0d6

File tree

2 files changed

+72
-49
lines changed

2 files changed

+72
-49
lines changed

‎src/pat/collapsible/collapsible.js

Lines changed: 28 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import $ from "jquery";
22
import "../../core/jquery-ext";
3+
import { BasePattern } from "../../core/basepattern";
34
import inject from "../inject/inject";
45
import logging from "../../core/logging";
56
import Parser from "../../core/parser";
7+
import registry from "../../core/registry";
68
import store from "../../core/store";
7-
import Base from "../../core/base";
89
import utils from "../../core/utils";
910

1011
const log = logging.getLogger("pat.collapsible");
@@ -31,22 +32,23 @@ parser.addArgument("scroll-offset", 0);
3132

3233
const debounce_scroll_timer = { timer: null };
3334

34-
export default Base.extend({
35-
name: "collapsible",
36-
trigger: ".pat-collapsible",
37-
jquery_plugin: true,
38-
parser: parser,
35+
class Pattern extends BasePattern {
36+
static name = "collapsible";
37+
static trigger = ".pat-collapsible";
38+
static parser = parser;
39+
jquery_plugin = true;
3940

40-
transitions: {
41+
transitions = {
4142
"none": { closed: "hide", open: "show" },
4243
"fade": { closed: "fadeOut", open: "fadeIn" },
4344
"slide": { closed: "slideUp", open: "slideDown" },
4445
"slide-horizontal": { closed: "slideOut", open: "slideIn" },
45-
},
46+
};
47+
48+
init() {
49+
const $el = (this.$el = $(this.el));
4650

47-
init($el, opts) {
4851
let $content;
49-
this.options = store.updateOptions($el[0], parser.parse($el, opts));
5052

5153
if (this.options.trigger === "::first") {
5254
this.$trigger = $el.children(":first");
@@ -110,26 +112,26 @@ export default Base.extend({
110112
); // scroll debouncer for later use.
111113

112114
return $el;
113-
},
115+
}
114116

115117
open() {
116118
if (!this.$el.hasClass("open")) this.toggle();
117119
return this.$el;
118-
},
120+
}
119121

120122
close() {
121123
if (!this.$el.hasClass("closed")) this.toggle();
122124
return this.$el;
123-
},
125+
}
124126

125127
_onClick(event) {
126128
this.toggle(event.data);
127-
},
129+
}
128130

129131
_onKeyPress(event) {
130132
const keycode = event.keyCode ? event.keyCode : event.which;
131133
if (keycode === 13) this.toggle();
132-
},
134+
}
133135

134136
_loadContent($el, url, $target) {
135137
const components = url.split("#");
@@ -144,7 +146,7 @@ export default Base.extend({
144146
},
145147
];
146148
inject.execute(opts, $el);
147-
},
149+
}
148150

149151
// jQuery method to force loading of content.
150152
loadContent($el) {
@@ -154,7 +156,7 @@ export default Base.extend({
154156
this._loadContent($(el), this.options.loadContent, this.$panel);
155157
}.bind(this)
156158
);
157-
},
159+
}
158160

159161
toggle() {
160162
const new_state = this.$el.hasClass("closed") ? "open" : "closed";
@@ -173,7 +175,7 @@ export default Base.extend({
173175
this._transit(this.$el, "open", "closed");
174176
}
175177
return this.$el; // allow chaining
176-
},
178+
}
177179

178180
async _scroll() {
179181
const scroll_selector = this.options.scroll?.selector;
@@ -186,7 +188,7 @@ export default Base.extend({
186188
});
187189
await scroll.smoothScroll();
188190
}
189-
},
191+
}
190192

191193
async _transit($el, from_cls, to_cls) {
192194
if (to_cls === "open" && this.options.loadContent) {
@@ -229,5 +231,10 @@ export default Base.extend({
229231
}.bind(this)
230232
).promise();
231233
}
232-
},
233-
});
234+
}
235+
}
236+
237+
registry.register(Pattern);
238+
239+
export default Pattern;
240+
export { Pattern };

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

Lines changed: 44 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import registry from "../../core/registry";
2-
import pattern from "./collapsible";
3-
import utils from "../../core/utils";
41
import $ from "jquery";
2+
import events from "../../core/events";
3+
import Pattern from "./collapsible";
4+
import utils from "../../core/utils";
55
import { jest } from "@jest/globals";
66

77
describe("pat-collapsible", function () {
@@ -10,7 +10,7 @@ describe("pat-collapsible", function () {
1010
jest.restoreAllMocks();
1111
});
1212

13-
it("1- wraps the collapsible within a div.panel-content", 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>
@@ -19,11 +19,12 @@ describe("pat-collapsible", function () {
1919
`;
2020

2121
const $collapsible = $(".pat-collapsible");
22-
pattern.init($collapsible);
22+
const instance = new Pattern($collapsible[0]);
23+
await events.await_pattern_init(instance);
2324
expect($collapsible.find(".panel-content").length).toBe(1);
2425
});
2526

26-
it("2 - is open by default", function () {
27+
it("2 - is open by default", async function () {
2728
document.body.innerHTML = `
2829
<div class="pat-collapsible">
2930
<h3>Trigger header</h3>
@@ -32,11 +33,12 @@ describe("pat-collapsible", function () {
3233
`;
3334

3435
const $collapsible = $(".pat-collapsible");
35-
pattern.init($collapsible);
36+
const instance = new Pattern($collapsible[0]);
37+
await events.await_pattern_init(instance);
3638
expect($collapsible.hasClass("open")).toBeTruthy();
3739
});
3840

39-
it("3 - can be explicitly closed by adding the class 'closed'", function () {
41+
it("3 - can be explicitly closed by adding the class 'closed'", async function () {
4042
document.body.innerHTML = `
4143
<div class="pat-collapsible closed">
4244
<h3>Trigger header</h3>
@@ -45,11 +47,12 @@ describe("pat-collapsible", function () {
4547
`;
4648

4749
const $collapsible = $(".pat-collapsible");
48-
pattern.init($collapsible);
50+
const instance = new Pattern($collapsible[0]);
51+
await events.await_pattern_init(instance);
4952
expect($collapsible.hasClass("open")).toBeFalsy();
5053
});
5154

52-
it("4 - can be toggled closed if it's open", function () {
55+
it("4 - can be toggled closed if it's open", async function () {
5356
document.body.innerHTML = `
5457
<div class="pat-collapsible">
5558
<h3>Trigger header</h3>
@@ -58,25 +61,27 @@ describe("pat-collapsible", function () {
5861
`;
5962

6063
const $collapsible = $(".pat-collapsible");
61-
const pat = pattern.init($collapsible, { transition: "none" });
62-
pat.toggle($collapsible);
64+
const instance = new Pattern($collapsible[0], { transition: "none" });
65+
await events.await_pattern_init(instance);
66+
instance.toggle($collapsible);
6367
expect($collapsible.hasClass("open")).toBe(false);
6468
expect($collapsible.hasClass("closed")).toBe(true);
6569
const $trigger = $("h3");
6670
expect($trigger.hasClass("collapsible-open")).toBe(false);
6771
expect($trigger.hasClass("collapsible-closed")).toBe(true);
6872
});
6973

70-
it("5 - can be toggled open if it's closed", function () {
74+
it("5 - can be toggled open if it's closed", async function () {
7175
document.body.innerHTML = `
7276
<div class="pat-collapsible closed">
7377
<h3>Trigger header</h3>
7478
<p>Collapsible content</p>
7579
</div>
7680
`;
7781
const $collapsible = $(".pat-collapsible");
78-
const pat = pattern.init($collapsible, { transition: "none" });
79-
pat.toggle($collapsible);
82+
const instance = new Pattern($collapsible[0], { transition: "none" });
83+
await events.await_pattern_init(instance);
84+
instance.toggle($collapsible);
8085
expect($collapsible.hasClass("open")).toBe(true);
8186
expect($collapsible.hasClass("closed")).toBe(false);
8287
const $trigger = $("h3");
@@ -93,7 +98,8 @@ describe("pat-collapsible", function () {
9398
</div>
9499
`;
95100
const $collapsible = $(".pat-collapsible");
96-
registry.scan($collapsible);
101+
const instance = new Pattern($collapsible[0], { transition: "none" });
102+
await events.await_pattern_init(instance);
97103
expect($collapsible.hasClass("open")).toBe(false);
98104
expect($collapsible.hasClass("closed")).toBe(true);
99105
$("#open").click();
@@ -111,7 +117,8 @@ describe("pat-collapsible", function () {
111117
</div>
112118
`;
113119
const $collapsible = $(".pat-collapsible");
114-
registry.scan($collapsible);
120+
const instance = new Pattern($collapsible[0], { transition: "none" });
121+
await events.await_pattern_init(instance);
115122
expect($collapsible.hasClass("closed")).toBe(false);
116123
expect($collapsible.hasClass("open")).toBe(true);
117124
$("#close").click();
@@ -128,10 +135,11 @@ describe("pat-collapsible", function () {
128135
</div>
129136
`;
130137
const collapsible = document.querySelector(".pat-collapsible");
131-
const pat = pattern.init(collapsible);
132-
const spy_scroll = jest.spyOn(pat, "_scroll");
138+
const instance = new Pattern(collapsible, { transition: "none" });
139+
await events.await_pattern_init(instance);
140+
const spy_scroll = jest.spyOn(instance, "_scroll");
133141

134-
pat.toggle();
142+
instance.toggle();
135143
await utils.timeout(10);
136144

137145
expect(spy_scroll).toHaveBeenCalledTimes(1);
@@ -144,10 +152,11 @@ describe("pat-collapsible", function () {
144152
</div>
145153
`;
146154
const collapsible = document.querySelector(".pat-collapsible");
147-
const pat = pattern.init(collapsible);
148-
const spy_scroll = jest.spyOn(pat, "_scroll");
155+
const instance = new Pattern(collapsible, { transition: "none" });
156+
await events.await_pattern_init(instance);
157+
const spy_scroll = jest.spyOn(instance, "_scroll");
149158

150-
pat.toggle();
159+
instance.toggle();
151160
await utils.timeout(10);
152161

153162
expect(spy_scroll).not.toHaveBeenCalled();
@@ -167,7 +176,12 @@ describe("pat-collapsible", function () {
167176
</div>
168177
`;
169178

170-
registry.scan(document.body);
179+
const instance1 = new Pattern(document.querySelector(".c1"));
180+
await events.await_pattern_init(instance1);
181+
const instance2 = new Pattern(document.querySelector(".c2"));
182+
await events.await_pattern_init(instance2);
183+
const instance3 = new Pattern(document.querySelector(".c3"));
184+
await events.await_pattern_init(instance3);
171185
const spy_animate = jest.spyOn($.fn, "animate");
172186

173187
document.querySelector("#open").click();
@@ -188,10 +202,11 @@ describe("pat-collapsible", function () {
188202
</div>
189203
`;
190204
const collapsible = document.querySelector(".pat-collapsible");
191-
const pat = pattern.init(collapsible);
205+
const instance = new Pattern(collapsible);
206+
await events.await_pattern_init(instance);
192207
const spy_animate = jest.spyOn($.fn, "animate");
193208

194-
pat.toggle();
209+
instance.toggle();
195210
await utils.timeout(10);
196211

197212
const arg_1 = spy_animate.mock.calls[0][0];
@@ -205,10 +220,11 @@ describe("pat-collapsible", function () {
205220
</div>
206221
`;
207222
const collapsible = document.querySelector(".pat-collapsible");
208-
const pat = pattern.init(collapsible);
223+
const instance = new Pattern(collapsible);
224+
await events.await_pattern_init(instance);
209225
const spy_animate = jest.spyOn($.fn, "animate");
210226

211-
pat.toggle();
227+
instance.toggle();
212228
await utils.timeout(10);
213229

214230
const arg_1 = spy_animate.mock.calls[0][0];

0 commit comments

Comments
 (0)