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
|
export default {
contentDependencies: ['linkTrack'],
extraDependencies: ['getColors', 'html', 'language'],
relations(relation, album, track, trackSection) {
const relations = {};
relations.trackLinks =
trackSection.tracks.map(track =>
relation('linkTrack', track));
return relations;
},
data(album, track, trackSection) {
const data = {};
data.hasTrackNumbers = album.hasTrackNumbers;
data.isTrackPage = !!track;
data.name = trackSection.name;
data.color = trackSection.color;
data.isDefaultTrackSection = trackSection.isDefaultTrackSection;
data.firstTrackNumber = trackSection.startIndex + 1;
data.lastTrackNumber = trackSection.startIndex + trackSection.tracks.length;
if (track) {
const index = trackSection.tracks.indexOf(track);
if (index !== -1) {
data.includesCurrentTrack = true;
data.currentTrackIndex = index;
}
}
return data;
},
generate(data, relations, {getColors, html, language}) {
const sectionName =
html.tag('span', {class: 'group-name'},
(data.isDefaultTrackSection
? language.$('albumSidebar.trackList.fallbackSectionName')
: data.name));
let style;
if (data.color) {
const {primary} = getColors(data.color);
style = `--primary-color: ${primary}`;
}
const trackListItems =
relations.trackLinks.map((trackLink, index) =>
html.tag('li',
{
class:
data.includesCurrentTrack &&
index === data.currentTrackIndex &&
'current',
},
language.$('albumSidebar.trackList.item', {
track: trackLink,
})));
return html.tag('details',
{
class: data.includesCurrentTrack && 'current',
open: (
// Leave sidebar track sections collapsed on album info page,
// since there's already a view of the full track listing
// in the main content area.
data.isTrackPage &&
// Only expand the track section which includes the track
// currently being viewed by default.
data.includesCurrentTrack),
},
[
html.tag('summary', {style},
html.tag('span',
(data.hasTrackNumbers
? language.$('albumSidebar.trackList.group.withRange', {
group: sectionName,
range: `${data.firstTrackNumber}–${data.lastTrackNumber}`
})
: language.$('albumSidebar.trackList.group', {
group: sectionName,
})))),
(data.hasTrackNumbers
? html.tag('ol',
{start: data.firstTrackNumber},
trackListItems)
: html.tag('ul', trackListItems)),
]);
},
};
|
