Skip to content

Commit 6904bd4

Browse files
thetthet
committed
maint(pat slides): Modernize pat-slides.
1 parent 884a1bf commit 6904bd4

File tree

2 files changed

+79
-78
lines changed

2 files changed

+79
-78
lines changed

‎src/pat/slides/slides.js‎

Lines changed: 38 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,38 @@
11
/**
22
* Patterns slides - Automatic and customised slideshows.
3-
*
4-
* Copyright 2013 Simplon B.V. - Wichert Akkerman
53
*/
64
import $ from "jquery";
7-
import registry from "../../core/registry";
5+
import Base from "../../core/base";
86
import utils from "../../core/utils";
97
import "../../core/remove";
108

11-
var slides = {
9+
export default Base.extend({
1210
name: "slides",
1311
trigger: ".pat-slides",
1412

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

2616
const slides_filter = new URL(window.location).searchParams.get("slides");
2717
if (slides_filter) {
28-
const requested_ids = slides._collapse_ids(slides_filter);
18+
const requested_ids = this._collapse_ids(slides_filter);
2919
if (requested_ids) {
30-
slides._remove_slides($el, requested_ids);
20+
this._remove_slides(requested_ids);
3121
}
3222
}
33-
$el.each(function () {
34-
var presentation = new window.Presentation(this),
35-
$container = $(this);
36-
$container
37-
.data("pat-slide", presentation)
38-
.on("SlideDisplay", slides._onSlideDisplay)
39-
.on("SlideHide", slides._onSlideHide);
40-
});
41-
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();
4231
},
4332

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

4837
$videos.each(function () {
4938
if (this.paused) {
@@ -53,45 +42,40 @@ var slides = {
5342
});
5443
},
5544

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

6049
$videos.each(function () {
61-
if (!this.paused) this.pause();
50+
if (!this.paused) {
51+
this.pause();
52+
}
6253
});
6354
},
6455

65-
_collapse_ids: function (id_string) {
56+
_collapse_ids(id_string) {
6657
return (id_string || "").split(",").filter((it) => !!it);
6758
},
6859

69-
_remove_slides: function ($shows, ids) {
70-
var has_bad_id = function (idx, el) {
71-
return ids.indexOf(el.id) === -1;
72-
};
73-
74-
for (var i = 0; i < $shows.length; i++) {
75-
var $show = $shows.eq(i),
76-
$bad_slides = $show.find(".slide[id]").filter(has_bad_id);
77-
$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();
7868
}
7969
},
8070

81-
_hook: function ($el) {
82-
return $el
71+
_hook() {
72+
this.$el
8373
.off("destroy.pat-slide")
84-
.on("destroy.pat-slide", utils.debounce(slides._reset, 100));
74+
.on("destroy.pat-slide", utils.debounce(this._reset.bind(this), 100));
8575
},
8676

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

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

Lines changed: 41 additions & 24 deletions
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 (let 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 (let 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 (let 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)