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
|
import {accumulateSum, empty} from '#sugar';
export default {
extraDependencies: ['html', 'language'],
slots: {
allowCollapsing: {
type: 'boolean',
default: true,
},
showOnly: {
type: 'boolean',
default: false,
},
chronologyInfoSets: {
validate: v =>
v.strictArrayOf(
v.validateProperties({
headingString: v.isString,
contributions: v.strictArrayOf(v.validateProperties({
index: v.isCountingNumber,
only: v.isBoolean,
artistDirectory: v.isDirectory,
artistLink: v.isHTML,
previousLink: v.isHTML,
nextLink: v.isHTML,
})),
})),
}
},
generate(slots, {html, language}) {
if (empty(slots.chronologyInfoSets)) {
return html.blank();
}
let infoSets = slots.chronologyInfoSets;
if (!slots.showOnly) {
infoSets = infoSets
.map(({contributions, ...entry}) => ({
...entry,
contributions:
contributions
.filter(({only}) => !only),
}))
.filter(({contributions}) => !empty(contributions));
}
const totalContributionCount =
accumulateSum(
infoSets,
({contributions}) => contributions.length);
if (totalContributionCount === 0) {
return html.blank();
}
if (slots.allowCollapsing && totalContributionCount > 8) {
return html.tag('div', {class: 'chronology'},
language.$('misc.chronology.seeArtistPages'));
}
return html.tags(
infoSets.map(({
headingString,
contributions,
}) =>
contributions.map(({
index,
artistLink,
previousLink,
nextLink,
only,
}) => {
const heading =
html.tag('span', {class: 'heading'},
language.$(headingString, {
index:
(only
? language.formatString('misc.chronology.heading.onlyIndex')
: language.formatIndex(index)),
artist: artistLink,
}));
const navigation =
!only &&
html.tag('span', {class: 'buttons'},
language.formatUnitList([
previousLink?.slots({
tooltipStyle: 'browser',
color: false,
content: language.$('misc.nav.previous'),
}),
nextLink?.slots({
tooltipStyle: 'browser',
color: false,
content: language.$('misc.nav.next'),
}),
].filter(Boolean)));
return html.tag('div', {class: 'chronology'},
(navigation
? language.$('misc.chronology.withNavigation', {heading, navigation})
: heading));
})));
},
};
|
