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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
import {cssProp} from '../client-util.js';
import {stitchArrays} from '../../shared-util/sugar.js';
export const info = {
id: 'groupContributionsInfo',
tables: null,
lists: null,
groupLinks: null,
groupLinkDirectories: null,
chunkDTs: null,
chunkDDs: null,
chunkGroupDirectories: null,
};
export function getPageReferences() {
if (document.documentElement.dataset.urlKey !== 'localized.artist') {
return;
}
info.tables =
Array.from(document.querySelectorAll('.group-contributions-table'));
info.lists =
info.tables
.map(table => table.closest('dl'));
info.groupLinks =
info.tables
.map(table => Array.from(table.querySelectorAll('td.group a')));
info.groupLinkDirectories =
info.groupLinks
.map(links => links
.map(link => link.dataset.directory));
info.chunkDTs =
info.lists
.map(list => Array.from(list.querySelectorAll('dt')));
info.chunkDDs =
info.chunkDTs
.map(dts => dts
.map(dt => dt.nextElementSibling)
.map(el => el.tagName === 'DD' ? el : null));
info.chunkGroupDirectories =
info.chunkDTs
.map(dts => dts
.map(dt => dt.dataset.groups)
.map(string => string ? string.split(' ') : []));
}
export function addPageListeners() {
if (!info.tables) return;
stitchArrays({
table: info.tables,
groupLinks: info.groupLinks,
}).forEach(({table, groupLinks}) => {
groupLinks.forEach(groupLink => {
groupLink.addEventListener('click', domEvent => {
domEvent.preventDefault();
handleGroupLinkClicked(table, groupLink);
});
});
});
}
function handleGroupLinkClicked(table, groupLink) {
const i = info.tables.indexOf(table);
groupLink.classList.toggle('selected');
// For now, just disable having more than one link selected at a time.
for (const link of info.groupLinks[i]) {
if (link !== groupLink) {
link.classList.remove('selected');
}
}
updateVisibleChunks(table);
}
function updateVisibleChunks(table) {
const i = info.tables.indexOf(table);
const selectedGroupDirectories =
stitchArrays({
link: info.groupLinks[i],
directory: info.groupLinkDirectories[i],
}).filter(({link}) => link.classList.contains('selected'))
.map(({directory}) => directory);
stitchArrays({
chunkDT: info.chunkDTs[i],
chunkDD: info.chunkDDs[i],
chunkGroupDirectories: info.chunkGroupDirectories[i],
}).forEach(({
chunkDT,
chunkDD,
chunkGroupDirectories,
}) => {
if (selectedGroupDirectories.length >= 1) {
const included =
chunkGroupDirectories
.some(d => selectedGroupDirectories.includes(d));
if (included) {
cssProp(chunkDT, 'display', null);
cssProp(chunkDD, 'display', null);
} else {
cssProp(chunkDT, 'display', 'none');
cssProp(chunkDD, 'display', 'none');
}
} else {
cssProp(chunkDT, 'display', null);
cssProp(chunkDD, 'display', null);
}
});
}
|
