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
|
import {stitchArrays} from '../../util/sugar.js';
export default {
contentDependencies: ['generateColorStyleVariables', 'linkGroup'],
extraDependencies: ['html', 'language', 'wikiData'],
sprawl: ({albumData}) => ({albumData}),
query: (sprawl, group) => ({
albums:
sprawl.albumData
.filter(album => album.groups.includes(group)),
}),
relations: (relation, query, sprawl, group) => ({
groupLink:
relation('linkGroup', group),
albumColorVariables:
query.albums
.map(() => relation('generateColorStyleVariables')),
}),
data: (query, sprawl, group) => ({
groupDirectory:
group.directory,
albumColors:
query.albums
.map(album => album.color),
albumDirectories:
query.albums
.map(album => album.directory),
albumNames:
query.albums
.map(album => album.name),
}),
generate: (data, relations, {html, language}) =>
html.tags([
html.tag('dt',
language.$('listingPage.other.randomPages.group', {
group: relations.groupLink,
randomAlbum:
html.tag('a',
{href: '#', 'data-random': 'album-in-' + data.groupDirectory},
language.$('listingPage.other.randomPages.group.randomAlbum')),
randomTrack:
html.tag('a',
{href: '#', 'data-random': 'track-in-' + data.groupDirectory},
language.$('listingPage.other.randomPages.group.randomTrack')),
})),
html.tag('dd',
html.tag('ul',
stitchArrays({
colorVariables: relations.albumColorVariables,
color: data.albumColors,
directory: data.albumDirectories,
name: data.albumNames,
}).map(({colorVariables, color, directory, name}) =>
html.tag('li',
language.$('listingPage.other.randomPages.album', {
album:
html.tag('a', {
href: '#',
'data-random': 'track-in-album',
style:
colorVariables.slot('color', color).content +
'; ' +
`--album-directory: ${directory}`,
}, name),
}))))),
]),
};
|
