blob: f13ac9059518ef822e99ee842eb5118e657e3fbb (
plain) (
blame)
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
94
95
96
97
98
99
100
101
102
103
104
105
106
|
import {getCookie} from "./cookies";
interface HTMLDetailsElement extends HTMLElement {
open: boolean
}
interface DetailsInfo {
element: HTMLDetailsElement
openByDefault: boolean
toggles: HTMLElement[]
}
// Global state
const detailsRegistry: { [id: string]: DetailsInfo } = {};
const toggled: { [id: string]: true } = {}; /* stores which <details> are not in their default state */
function lookupDetailsRegistry(id: string): DetailsInfo {
const info = detailsRegistry[id];
if (info == undefined) { throw new Error(`could not find <details> element with id '${id}'`); }
return info;
}
function onDetailsToggle(ev: Event) {
const element = ev.target as HTMLDetailsElement;
const id = element.id;
const info = lookupDetailsRegistry(id);
const isOpen = info.element.open;
for (const toggle of info.toggles) {
if (toggle.classList.contains('details-toggle-control')) {
toggle.classList.add(isOpen ? 'collapser' : 'expander');
toggle.classList.remove(isOpen ? 'expander' : 'collapser');
}
}
if (element.open == info.openByDefault) {
delete toggled[id];
} else {
toggled[id] = true;
}
rememberToggled();
}
function gatherDetailsElements() {
const els: HTMLDetailsElement[] = Array.prototype.slice.call(document.getElementsByTagName('details'));
for (const el of els) {
if (typeof el.id == "string" && el.id.length > 0) {
detailsRegistry[el.id] = {
element: el,
openByDefault: !!el.open,
toggles: [] // added later
};
el.addEventListener('toggle', onDetailsToggle);
}
}
}
function toggleDetails(id: string) {
const {element} = lookupDetailsRegistry(id);
element.open = !element.open;
}
function rememberToggled() {
const sections: string[] = Object.keys(toggled);
// cookie specific to this page; don't use setCookie which sets path=/
document.cookie = "toggled=" + encodeURIComponent(sections.join('+'));
}
function restoreToggled() {
const cookie = getCookie("toggled");
if (!cookie) { return; }
const ids = cookie.split('+');
for (const id of ids) {
const info = detailsRegistry[id];
toggled[id] = true;
if (info) {
info.element.open = !info.element.open;
}
}
}
function onToggleClick(ev: MouseEvent) {
ev.preventDefault();
const toggle = ev.currentTarget as HTMLElement;
const id = toggle.getAttribute('data-details-id');
if (!id) { throw new Error("element with class 'details-toggle' has no 'data-details-id' attribute!"); }
toggleDetails(id);
}
function initCollapseToggles() {
const toggles: HTMLElement[] = Array.prototype.slice.call(document.getElementsByClassName('details-toggle'));
toggles.forEach(toggle => {
const id = toggle.getAttribute('data-details-id');
if (!id) { throw new Error("element with class 'details-toggle' has no 'data-details-id' attribute!"); }
const info = lookupDetailsRegistry(id);
info.toggles.push(toggle);
toggle.addEventListener('click', onToggleClick);
if (toggle.classList.contains('details-toggle-control')) {
toggle.classList.add(info.element.open ? 'collapser' : 'expander');
}
});
}
export function init() {
gatherDetailsElements();
restoreToggled();
initCollapseToggles();
}
|
