blob: f3105cad3cdc3058069af4675e5561b6654b1710 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
"use strict";
const ICON_CLASS_OPENED = "fa-chevron-down";
const ICON_CLASS_CLOSED = "fa-chevron-up";
const views = require("../util/views.js");
const template = views.getTemplate("expander");
class ExpanderControl {
constructor(name, title, nodes) {
this._name = name;
nodes = Array.from(nodes).filter((n) => n);
if (!nodes.length) {
return;
}
const expanderNode = template({ title: title });
const toggleLinkNode = expanderNode.querySelector("a");
const toggleIconNode = expanderNode.querySelector("i");
const expanderContentNode = expanderNode.querySelector("div");
toggleLinkNode.addEventListener("click", (e) =>
this._evtToggleClick(e)
);
nodes[0].parentNode.insertBefore(expanderNode, nodes[0]);
for (let node of nodes) {
expanderContentNode.appendChild(node);
}
this._expanderNode = expanderNode;
this._toggleIconNode = toggleIconNode;
expanderNode.classList.toggle(
"collapsed",
this._allStates[this._name] === undefined
? false
: !this._allStates[this._name]
);
this._syncIcon();
}
get containerNode() {
return this._expanderNode;
}
// eslint-disable-next-line accessor-pairs
set title(newTitle) {
if (this._expanderNode) {
this._expanderNode.querySelector("header span").textContent =
newTitle;
}
}
get _isOpened() {
return !this._expanderNode.classList.contains("collapsed");
}
get _allStates() {
try {
return JSON.parse(localStorage.getItem("expander")) || {};
} catch (e) {
return {};
}
}
_save() {
const newStates = Object.assign({}, this._allStates);
newStates[this._name] = this._isOpened;
localStorage.setItem("expander", JSON.stringify(newStates));
}
_evtToggleClick(e) {
e.preventDefault();
this._expanderNode.classList.toggle("collapsed");
this._save();
this._syncIcon();
}
_syncIcon() {
if (this._isOpened) {
this._toggleIconNode.classList.add(ICON_CLASS_OPENED);
this._toggleIconNode.classList.remove(ICON_CLASS_CLOSED);
} else {
this._toggleIconNode.classList.add(ICON_CLASS_CLOSED);
this._toggleIconNode.classList.remove(ICON_CLASS_OPENED);
}
}
}
module.exports = ExpanderControl;
|
