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
|
/* eslint-env browser */
// TODO: Combine this and quick-description.js
import {cssProp} from '../client-util.js';
import {stitchArrays} from '../../shared-util/sugar.js';
export const info = {
id: 'expandableGallerySectionInfo',
sections: null,
sectionContentBelowCut: null,
sectionExpandoToggles: null,
sectionExpandCues: null,
sectionCollapseCues: null,
};
export function getPageReferences() {
info.sections =
Array.from(document.querySelectorAll('.expandable-gallery-section'))
.filter(section => section.querySelector('.section-expando-toggle'));
info.sectionContentBelowCut =
info.sections
.map(section => section.querySelector('.section-content-below-cut'));
info.sectionExpandoToggles =
info.sections
.map(section => section.querySelector('.section-expando-toggle'));
info.sectionExpandCues =
info.sections
.map(section => section.querySelector('.section-expand-cue'));
info.sectionCollapseCues =
info.sections
.map(section => section.querySelector('.section-collapse-cue'));
}
export function addPageListeners() {
for (const {
section,
contentBelowCut,
expandoToggle,
expandCue,
collapseCue,
} of stitchArrays({
section: info.sections,
contentBelowCut: info.sectionContentBelowCut,
expandoToggle: info.sectionExpandoToggles,
expandCue: info.sectionExpandCues,
collapseCue: info.sectionCollapseCues,
})) {
expandoToggle.addEventListener('click', domEvent => {
domEvent.preventDefault();
const collapsed =
cssProp(contentBelowCut, 'display') === 'none';
if (collapsed) {
section.classList.add('expanded');
cssProp(contentBelowCut, 'display', null);
cssProp(expandCue, 'display', 'none');
cssProp(collapseCue, 'display', null);
} else {
section.classList.remove('expanded');
cssProp(contentBelowCut, 'display', 'none');
cssProp(expandCue, 'display', null);
cssProp(collapseCue, 'display', 'none');
}
});
}
}
|
