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
|
/* eslint-env browser */
import {cssProp} from '../client-util.js';
import {stitchArrays} from '../../shared-util/sugar.js';
export const info = {
id: 'galleryStyleSelectorInfo',
selectors: null,
sections: null,
selectorStyleInputs: null,
selectorStyleInputStyles: null,
selectorReleaseItems: null,
selectorReleaseItemStyles: null,
selectorCountAll: null,
selectorCountFiltered: null,
selectorCountFilteredCount: null,
selectorCountNone: null,
};
export function getPageReferences() {
info.selectors =
Array.from(document.querySelectorAll('.gallery-style-selector'));
info.sections =
info.selectors
.map(selector => selector.closest('section'));
info.selectorStyleInputs =
info.selectors
.map(selector => selector.querySelectorAll('.styles input'))
.map(inputs => Array.from(inputs));
info.selectorStyleInputStyles =
info.selectorStyleInputs
.map(inputs => inputs
.map(input => input.closest('label').dataset.style));
info.selectorReleaseItems =
info.sections
.map(section => section.querySelectorAll('.grid-item'))
.map(items => Array.from(items));
info.selectorReleaseItemStyles =
info.selectorReleaseItems
.map(items => items
.map(item => item.dataset.style));
info.selectorCountAll =
info.selectors
.map(selector => selector.querySelector('.count.all'));
info.selectorCountFiltered =
info.selectors
.map(selector => selector.querySelector('.count.filtered'));
info.selectorCountFilteredCount =
info.selectorCountFiltered
.map(selector => selector.querySelector('span'));
info.selectorCountNone =
info.selectors
.map(selector => selector.querySelector('.count.none'));
}
export function addPageListeners() {
for (const index of info.selectors.keys()) {
for (const input of info.selectorStyleInputs[index]) {
input.addEventListener('input', () => updateVisibleReleases(index));
}
}
}
function updateVisibleReleases(index) {
const inputs = info.selectorStyleInputs[index];
const inputStyles = info.selectorStyleInputStyles[index];
const selectedStyles =
stitchArrays({input: inputs, style: inputStyles})
.filter(({input}) => input.checked)
.map(({style}) => style);
const releases = info.selectorReleaseItems[index];
const releaseStyles = info.selectorReleaseItemStyles[index];
let visible = 0;
stitchArrays({
release: releases,
style: releaseStyles,
}).forEach(({release, style}) => {
if (selectedStyles.includes(style)) {
release.classList.remove('hidden-by-style-mismatch');
visible++;
} else {
release.classList.add('hidden-by-style-mismatch');
}
});
const countAll = info.selectorCountAll[index];
const countFiltered = info.selectorCountFiltered[index];
const countFilteredCount = info.selectorCountFilteredCount[index];
const countNone = info.selectorCountNone[index];
if (visible === releases.length) {
cssProp(countAll, 'display', null);
cssProp(countFiltered, 'display', 'none');
cssProp(countNone, 'display', 'none');
} else if (visible === 0) {
cssProp(countAll, 'display', 'none');
cssProp(countFiltered, 'display', 'none');
cssProp(countNone, 'display', null);
} else {
cssProp(countAll, 'display', 'none');
cssProp(countFiltered, 'display', null);
cssProp(countNone, 'display', 'none');
countFilteredCount.innerHTML = visible;
}
}
|
