Skip to content

Commit 7928880

Browse files
thetthet
committed
maint(pat stacks): Modernize code.
1 parent 9b788a0 commit 7928880

File tree

2 files changed

+63
-74
lines changed

2 files changed

+63
-74
lines changed

‎src/pat/stacks/stacks.js‎

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
/**
2-
* Stacks pattern
3-
*
4-
* Copyright 2013 Simplon B.V. - Wichert Akkerman
5-
*/
61
import $ from "jquery";
72
import Parser from "../../core/parser";
83
import Base from "../../core/base";
@@ -22,54 +17,56 @@ export default Base.extend({
2217
trigger: ".pat-stacks",
2318
document: document,
2419

25-
init: function ($el, opts) {
20+
init($el, opts) {
2621
this.options = parser.parse(this.$el, opts);
2722
this._setupStack();
2823
$(this.document).on("click", "a", this._onClick.bind(this));
2924
return $el;
3025
},
3126

32-
_setupStack: function () {
33-
var selected = this._currentFragment(),
34-
$sheets = this.$el.find(this.options.selector),
35-
$visible = [],
36-
$invisible;
27+
_setupStack() {
28+
let selected = this._currentFragment();
29+
const $sheets = this.$el.find(this.options.selector);
30+
let $visible = [];
31+
3732
if ($sheets.length < 2) {
3833
log.warn("Stacks pattern: must have more than one sheet.", this.$el[0]);
3934
return;
4035
}
36+
4137
if (selected) {
4238
try {
4339
$visible = $sheets.filter("#" + selected);
4440
} catch (e) {
4541
selected = undefined;
4642
}
4743
}
44+
4845
if (!$visible.length) {
4946
$visible = $sheets.first();
5047
selected = $visible[0].id;
5148
}
52-
$invisible = $sheets.not($visible);
49+
const $invisible = $sheets.not($visible);
5350
utils.hideOrShow($visible, true, { transition: "none" }, this.name);
5451
utils.hideOrShow($invisible, false, { transition: "none" }, this.name);
5552
this._updateAnchors(selected);
5653
},
5754

58-
_base_URL: function () {
55+
_base_URL() {
5956
return this.document.URL.split("#")[0];
6057
},
6158

62-
_currentFragment: function () {
63-
var parts = this.document.URL.split("#");
59+
_currentFragment() {
60+
const parts = this.document.URL.split("#");
6461
if (parts.length === 1) {
6562
return null;
6663
}
6764
return parts[parts.length - 1];
6865
},
6966

70-
_onClick: function (e) {
71-
var base_url = this._base_URL(),
72-
href_parts = e.currentTarget.href.split("#");
67+
_onClick(e) {
68+
const base_url = this._base_URL();
69+
const href_parts = e.currentTarget.href.split("#");
7370
// Check if this is an in-document link and has a fragment
7471
if (base_url !== href_parts[0] || !href_parts[1]) {
7572
return;
@@ -86,9 +83,9 @@ export default Base.extend({
8683
});
8784
},
8885

89-
_updateAnchors: function (selected) {
90-
var $sheets = this.$el.find(this.options.selector),
91-
base_url = this._base_URL();
86+
_updateAnchors(selected) {
87+
const $sheets = this.$el.find(this.options.selector);
88+
const base_url = this._base_URL();
9289
$sheets.each(function (idx, sheet) {
9390
// This may appear odd, but: when querying a browser uses the
9491
// original href of an anchor as it appeared in the document
@@ -105,12 +102,12 @@ export default Base.extend({
105102
});
106103
},
107104

108-
_switch: function (sheet_id) {
109-
var $sheet = this.$el.find("#" + sheet_id);
105+
_switch(sheet_id) {
106+
const $sheet = this.$el.find("#" + sheet_id);
110107
if (!$sheet.length || $sheet.hasClass("visible")) {
111108
return;
112109
}
113-
var $invisible = this.$el.find(this.options.selector).not($sheet);
110+
const $invisible = this.$el.find(this.options.selector).not($sheet);
114111
utils.hideOrShow($invisible, false, this.options, this.name);
115112
utils.hideOrShow($sheet, true, this.options, this.name);
116113
},

‎src/pat/stacks/stacks.test.js‎

Lines changed: 42 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import Stacks from "./stacks";
21
import $ from "jquery";
2+
import Stacks from "./stacks";
33
import { jest } from "@jest/globals";
44

55
describe("pat-stacks", function () {
@@ -11,90 +11,82 @@ describe("pat-stacks", function () {
1111
$("#lab").remove();
1212
});
1313

14-
describe("The init method", function () {
15-
it("Returns the jQuery-wrapped DOM node", function () {
16-
var $el = $('<div class="pat-stacks"></div>');
17-
var pattern = new Stacks($el);
18-
expect(pattern.init($el)).toBe($el);
19-
});
20-
});
21-
22-
describe("_base_URL", function () {
23-
it("URL without fragment", function () {
24-
var $el = $('<div class="pat-stacks"></div>');
25-
var pattern = new Stacks($el);
14+
describe("1 - _base_URL", function () {
15+
it("1.1 - URL without fragment", function () {
16+
const $el = $('<div class="pat-stacks"></div>');
17+
const pattern = new Stacks($el);
2618
pattern.document = { URL: document.URL };
2719
pattern.document.URL = "http://www.example.com/folder/file.png";
2820
expect(pattern._base_URL()).toBe("http://www.example.com/folder/file.png");
2921
});
3022

31-
it("URL with fragment", function () {
32-
var $el = $('<div class="pat-stacks"></div>');
33-
var pattern = new Stacks($el);
23+
it("1.2 - URL with fragment", function () {
24+
const $el = $('<div class="pat-stacks"></div>');
25+
const pattern = new Stacks($el);
3426
pattern.document = { URL: document.URL };
3527
pattern.document.URL = "http://www.example.com/folder/file.png#fragment";
3628
expect(pattern._base_URL()).toBe("http://www.example.com/folder/file.png");
3729
});
3830
});
3931

40-
describe("_currentFragment", function () {
41-
it(" without fragment", function () {
42-
var $el = $('<div class="pat-stacks"></div>');
43-
var pattern = new Stacks($el);
32+
describe("2 - _currentFragment", function () {
33+
it("2.1 - without fragment", function () {
34+
const $el = $('<div class="pat-stacks"></div>');
35+
const pattern = new Stacks($el);
4436
pattern.document = { URL: document.URL };
4537
pattern.document.URL = "http://www.example.com/folder/file.png";
4638
expect(pattern._currentFragment()).toBeNull();
4739
});
4840

49-
it("URL with fragment", function () {
50-
var $el = $('<div class="pat-stacks"></div>');
51-
var pattern = new Stacks($el);
41+
it("2.2 - URL with fragment", function () {
42+
const $el = $('<div class="pat-stacks"></div>');
43+
const pattern = new Stacks($el);
5244
pattern.document = { URL: document.URL };
5345
pattern.document.URL = "http://www.example.com/folder/file.png#fragment";
5446
expect(pattern._currentFragment()).toBe("fragment");
5547
});
5648
});
5749

58-
describe("The _onClick method", function () {
50+
describe("3 - The _onClick method", function () {
5951
beforeEach(function () {
6052
$("#lab").html(
6153
"<a id='l1' href='#s1'>1</a><a id='l2' href='#s2'>2</a>" +
6254
"<article class='pat-stacks' id='stack'><section id='s1'></section><section id='s2'></section></article>"
6355
);
6456
});
6557

66-
it("gets triggered when you click on an external link", function () {
67-
var e = { currentTarget: { href: "http://other.domain#s1" } };
68-
var pattern = new Stacks($(".pat-stacks"));
69-
var spy_update = jest.spyOn(pattern, "_updateAnchors");
58+
it("3.1 - gets triggered when you click on an external link", function () {
59+
const e = { currentTarget: { href: "http://other.domain#s1" } };
60+
const pattern = new Stacks($(".pat-stacks"));
61+
const spy_update = jest.spyOn(pattern, "_updateAnchors");
7062
pattern._onClick(e);
7163
expect(spy_update).not.toHaveBeenCalled();
7264
});
7365

74-
it("gets triggered when you click on a link without fragment", function () {
75-
var pattern = new Stacks($(".pat-stacks"));
66+
it("3.2 - gets triggered when you click on a link without fragment", function () {
67+
const pattern = new Stacks($(".pat-stacks"));
7668
pattern.document = { URL: document.URL };
7769
pattern.document.URL = "http://www.example.com";
78-
var e = { currentTarget: { href: "http://www.example.com" } };
79-
var spy_update = jest.spyOn(pattern, "_updateAnchors");
70+
const e = { currentTarget: { href: "http://www.example.com" } };
71+
const spy_update = jest.spyOn(pattern, "_updateAnchors");
8072
pattern._onClick(e);
8173
expect(spy_update).not.toHaveBeenCalled();
8274
});
8375

84-
it("gets tirggered when you click on a non-stack link", function () {
85-
var pattern = new Stacks($(".pat-stacks"));
76+
it("3.3 - gets tirggered when you click on a non-stack link", function () {
77+
const pattern = new Stacks($(".pat-stacks"));
8678
pattern.document = { URL: document.URL };
8779
pattern.document.URL = "http://www.example.com";
88-
var e = {
80+
const e = {
8981
currentTarget: { href: "http://www.example.com#other" },
9082
};
91-
var spy_update = jest.spyOn(pattern, "_updateAnchors");
83+
const spy_update = jest.spyOn(pattern, "_updateAnchors");
9284
pattern._onClick(e);
9385
expect(spy_update).not.toHaveBeenCalled();
9486
});
9587

96-
it("gets called when you click on the stack link", function () {
97-
var pattern = new Stacks($(".pat-stacks"));
88+
it("3.4 - gets called when you click on the stack link", function () {
89+
const pattern = new Stacks($(".pat-stacks"));
9890
pattern.document = { URL: document.URL };
9991
pattern.document.URL = "http://www.example.com";
10092
const e_mock = {
@@ -110,13 +102,13 @@ describe("pat-stacks", function () {
110102
expect(spy_switch).toHaveBeenCalled();
111103
});
112104

113-
it("triggers a pat-update event, which other patterns can listen for", function () {
114-
var $el = $(".pat-stacks");
115-
var pattern = new Stacks($el);
105+
it("3.5 - triggers a pat-update event, which other patterns can listen for", function () {
106+
const $el = $(".pat-stacks");
107+
const pattern = new Stacks($el);
116108
pattern.document = { URL: document.URL };
117109
pattern.document.URL = "http://www.example.com";
118-
var spy_trigger = jest.spyOn($.fn, "trigger");
119-
var e = {
110+
const spy_trigger = jest.spyOn($.fn, "trigger");
111+
const e = {
120112
target: $el,
121113
type: "click",
122114
preventDefault: function () {},
@@ -130,25 +122,25 @@ describe("pat-stacks", function () {
130122
});
131123
});
132124

133-
describe("The _updateAnchors method", function () {
125+
describe("4 - The _updateAnchors method", function () {
134126
beforeEach(function () {
135127
$("#lab").html(
136128
"<a id='l1' href='#s1'>1</a><a id='l2' href='#s2'>2</a>" +
137129
"<article class='pat-stacks' id='stack'><section id='s1'></section><section id='s2'></section></article>"
138130
);
139131
});
140132

141-
it("adds a selected class", function () {
142-
var $container = $("#stack");
143-
var pattern = new Stacks($container);
133+
it("4.1 - adds a selected class", function () {
134+
const $container = $("#stack");
135+
const pattern = new Stacks($container);
144136
pattern._updateAnchors("s1");
145137
expect($("#l1").hasClass("current")).toBe(true);
146138
expect($("#l2").hasClass("current")).toBe(false);
147139
});
148140

149-
it("removes a selected class", function () {
150-
var $container = $("#stack");
151-
var pattern = new Stacks($container);
141+
it("4.2 - removes a selected class", function () {
142+
const $container = $("#stack");
143+
const pattern = new Stacks($container);
152144
$("#l1").addClass("selected");
153145
pattern._updateAnchors("s2");
154146
expect($("#l1").hasClass("current")).toBe(false);

0 commit comments

Comments
 (0)