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
|
import {accumulateSum, empty} from '../../util/sugar.js';
export default {
extraDependencies: ['html', 'language'],
generate({html, language}) {
return html.template({
annotation: `generateChronologyLinks`,
slots: {
chronologyInfoSets: {
validate: v =>
v.arrayOf(
v.validateProperties({
headingString: v.isString,
contributions: v.arrayOf(v.validateProperties({
index: v.isCountingNumber,
artistLink: v.isHTML,
previousLink: v.isHTML,
nextLink: v.isHTML,
})),
})),
}
},
content(slots) {
if (empty(slots.chronologyInfoSets)) {
return html.blank();
}
const totalContributionCount =
accumulateSum(
slots.chronologyInfoSets,
({contributions}) => contributions.length);
if (totalContributionCount === 0) {
return html.blank();
}
if (totalContributionCount > 8) {
return html.tag('div', {class: 'chronology'},
language.$('misc.chronology.seeArtistPages'));
}
return html.tags(
slots.chronologyInfoSets.map(({
headingString,
contributions,
}) =>
contributions.map(({
index,
artistLink,
previousLink,
nextLink,
}) => {
const heading =
html.tag('span', {class: 'heading'},
language.$(headingString, {
index: language.formatIndex(index),
artist: artistLink,
}));
const navigation =
(previousLink || nextLink) &&
html.tag('span', {class: 'buttons'},
language.formatUnitList([
previousLink?.slots({
tooltip: true,
color: false,
content: language.$('misc.nav.previous'),
}),
nextLink?.slots({
tooltip: true,
color: false,
content: language.$('misc.nav.next'),
}),
].filter(Boolean)));
return html.tag('div', {class: 'chronology'},
(navigation
? language.$('misc.chronology.withNavigation', {heading, navigation})
: heading));
})));
},
});
},
};
|
