Skip to content

Commit a7a77f3

Browse files
thetthet
committed
maint(pat slides): Modernize pat-slides.
1 parent 022b2c1 commit a7a77f3

File tree

2 files changed

+79
-77
lines changed

2 files changed

+79
-77
lines changed

‎src/pat/slides/slides.js

+38-53
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,38 @@
11
/**
22
* Patterns slides - Automatic and customised slideshows.
3-
*
4-
* Copyright 2013 Simplon B.V. - Wichert Akkerman
53
*/
64
import $ from "jquery";
5+
import Base from "../../core/base";
76
import registry from "../../core/registry";
87
import utils from "../../core/utils";
98

10-
var slides = {
9+
export default Base.extend({
1110
name: "slides",
1211
trigger: ".pat-slides",
1312

14-
setup: function () {
15-
$(document).on("patterns-injected", utils.debounce(slides._reset, 100));
16-
},
17-
18-
async init($el) {
19-
if (!$el[0].querySelector(".slide")) {
20-
// no slides, nothing to do.
21-
return;
22-
}
13+
async init() {
2314
await import("slides/src/slides"); // loads ``Presentation`` globally.
2415

2516
const slides_filter = new URL(window.location).searchParams.get("slides");
2617
if (slides_filter) {
27-
const requested_ids = slides._collapse_ids(slides_filter);
18+
const requested_ids = this._collapse_ids(slides_filter);
2819
if (requested_ids) {
29-
slides._remove_slides($el, requested_ids);
20+
this._remove_slides(requested_ids);
3021
}
3122
}
32-
$el.each(function () {
33-
var presentation = new window.Presentation(this),
34-
$container = $(this);
35-
$container
36-
.data("pat-slide", presentation)
37-
.on("SlideDisplay", slides._onSlideDisplay)
38-
.on("SlideHide", slides._onSlideHide);
39-
});
40-
return slides._hook($el);
23+
this.presentation = new window.Presentation(this.el);
24+
this.$el
25+
.on("SlideDisplay", this._on_slide_display.bind(this))
26+
.on("SlideHide", this._on_slide_hide.bind(this));
27+
28+
$(document).on("patterns-injected", utils.debounce(this._reset.bind(this), 100));
29+
30+
this._hook();
4131
},
4232

43-
_onSlideDisplay: function (event) {
44-
var slide = event.originalEvent.detail.slide.element,
45-
$videos = $("video", slide);
33+
_on_slide_display(event) {
34+
const slide = event.originalEvent.detail.slide.element;
35+
const $videos = $("video", slide);
4636

4737
$videos.each(function () {
4838
if (this.paused) {
@@ -52,45 +42,40 @@ var slides = {
5242
});
5343
},
5444

55-
_onSlideHide: function (event) {
56-
var slide = event.originalEvent.detail.slide.element,
57-
$videos = $("video", slide);
45+
_on_slide_hide(event) {
46+
const slide = event.originalEvent.detail.slide.element;
47+
const $videos = $("video", slide);
5848

5949
$videos.each(function () {
60-
if (!this.paused) this.pause();
50+
if (!this.paused) {
51+
this.pause();
52+
}
6153
});
6254
},
6355

64-
_collapse_ids: function (id_string) {
56+
_collapse_ids(id_string) {
6557
return (id_string || "").split(",").filter((it) => !!it);
6658
},
6759

68-
_remove_slides: function ($shows, ids) {
69-
var has_bad_id = function (idx, el) {
70-
return ids.indexOf(el.id) === -1;
71-
};
72-
73-
for (var i = 0; i < $shows.length; i++) {
74-
var $show = $shows.eq(i),
75-
$bad_slides = $show.find(".slide[id]").filter(has_bad_id);
76-
$bad_slides.remove();
60+
_remove_slides(keep_ids) {
61+
for (const slide of this.el.querySelectorAll(".slide[id]")) {
62+
if (keep_ids.indexOf(slide.id) !== -1) {
63+
// Not an id to remove
64+
continue;
65+
}
66+
console.log("remove slide", slide);
67+
slide.remove();
7768
}
7869
},
7970

80-
_hook: function ($el) {
81-
return $el
71+
_hook() {
72+
this.$el
8273
.off("destroy.pat-slide")
83-
.on("destroy.pat-slide", utils.debounce(slides._reset, 100));
74+
.on("destroy.pat-slide", utils.debounce(this._reset.bind(this), 100));
8475
},
8576

86-
_reset: function () {
87-
var $container = $(this).closest(".pat-slides"),
88-
presentation = $container.data("pat-slide");
89-
if (presentation) presentation.scan();
90-
slides._hook($(this.trigger));
77+
_reset() {
78+
this.presentation.scan();
79+
this._hook();
9180
},
92-
};
93-
94-
slides.setup();
95-
registry.register(slides);
96-
export default slides;
81+
});

‎src/pat/slides/slides.test.js

+41-24
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import pattern from "./slides";
1+
import Pattern from "./slides";
22
import $ from "jquery";
33
import utils from "../../core/utils";
44
import { jest } from "@jest/globals";
@@ -8,62 +8,79 @@ describe("pat-slides", function () {
88
jest.restoreAllMocks();
99
});
1010

11-
describe("_collapse_ids", function () {
11+
describe("1 - _collapse_ids", function () {
1212
it("Single id", function () {
13-
expect(pattern._collapse_ids("foo")).toEqual(["foo"]);
13+
const instance = new Pattern(document.createElement("div"));
14+
expect(instance._collapse_ids("foo")).toEqual(["foo"]);
1415
});
1516

1617
it("Comma-separated list of ids", function () {
17-
expect(pattern._collapse_ids("foo,bar")).toEqual(["foo", "bar"]);
18+
const instance = new Pattern(document.createElement("div"));
19+
expect(instance._collapse_ids("foo,bar")).toEqual(["foo", "bar"]);
1820
});
1921

2022
it("Skip empty ids", function () {
21-
expect(pattern._collapse_ids("foo,,bar")).toEqual(["foo", "bar"]);
23+
const instance = new Pattern(document.createElement("div"));
24+
expect(instance._collapse_ids("foo,,bar")).toEqual(["foo", "bar"]);
2225
});
2326

2427
it("Parameter without value", function () {
25-
expect(pattern._collapse_ids(null)).toEqual([]);
28+
const instance = new Pattern(document.createElement("div"));
29+
expect(instance._collapse_ids(null)).toEqual([]);
2630
});
2731

2832
it("Parameter with empty value", function () {
29-
expect(pattern._collapse_ids("")).toEqual([]);
33+
const instance = new Pattern(document.createElement("div"));
34+
expect(instance._collapse_ids("")).toEqual([]);
3035
});
3136
});
3237

33-
describe("_remove_slides", function () {
34-
it("Remove slides from DOM", function () {
35-
var $show = $("<div/>", { class: "pat-slides" });
36-
for (var i = 1; i <= 4; i++)
38+
describe("2 - _remove_slides", function () {
39+
it("Remove slides from DOM", async function () {
40+
const $show = $("<div/>", { class: "pat-slides" });
41+
for (const i = 1; i <= 4; i++)
3742
$("<div/>", { class: "slide", id: "slide" + i }).appendTo($show);
38-
pattern._remove_slides($show, ["slide1", "slide3"]);
39-
var ids = $.makeArray(
43+
44+
const instance = new Pattern($show);
45+
await utils.timeout(1); // wait a tick for async to settle.
46+
47+
instance._remove_slides(["slide1", "slide3"]);
48+
const ids = $.makeArray(
4049
$show.find(".slide").map(function (idx, el) {
4150
return el.id;
4251
})
4352
);
4453
expect(ids).toEqual(["slide1", "slide3"]);
4554
});
4655

47-
it.skip("Trigger reset when removing slides", function () {
48-
var $show = $("<div/>", { class: "pat-slides" });
49-
for (var i = 1; i <= 4; i++) {
56+
it.skip("Trigger reset when removing slides", async function () {
57+
const $show = $("<div/>", { class: "pat-slides" });
58+
for (const i = 1; i <= 4; i++) {
5059
$("<div/>", { class: "slide", id: "slide" + i }).appendTo($show);
5160
}
5261
jest.spyOn(utils, "debounce").mockImplementation((func) => {
5362
return func;
5463
});
55-
var spy_reset = jest.spyOn(pattern, "_reset");
56-
pattern._hook($show);
57-
pattern._remove_slides($show, ["slide1", "slide3"]);
64+
65+
const instance = new Pattern($show);
66+
await utils.timeout(1); // wait a tick for async to settle.
67+
68+
const spy_reset = jest.spyOn(instance, "_reset");
69+
instance._hook();
70+
instance._remove_slides(["slide1", "slide3"]);
5871
expect(spy_reset).toHaveBeenCalled();
5972
});
6073

61-
it("Do not trigger reset when not doing anything", function () {
62-
var $show = $("<div/>", { class: "pat-slides" });
63-
for (var i = 1; i <= 2; i++)
74+
it("Do not trigger reset when not doing anything", async function () {
75+
const $show = $("<div/>", { class: "pat-slides" });
76+
for (const i = 1; i <= 2; i++)
6477
$("<div/>", { class: "slide", id: "slide" + i }).appendTo($show);
65-
var spy_reset = jest.spyOn(pattern, "_reset");
66-
pattern._remove_slides($show, ["slide1", "slide2"]);
78+
79+
const instance = new Pattern($show);
80+
await utils.timeout(1); // wait a tick for async to settle.
81+
82+
const spy_reset = jest.spyOn(instance, "_reset");
83+
instance._remove_slides(["slide1", "slide2"]);
6784
expect(spy_reset).not.toHaveBeenCalled();
6885
});
6986
});

0 commit comments

Comments
 (0)