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
124
125
126
127
128
129
130
131
132
|
import {empty} from '#sugar';
import {stitchArrays} from '#sugar';
export default {
contentDependencies: [
'generateAbsoluteDatetimestamp',
'generateColorStyleAttribute',
'generateContentHeading',
'linkAlbum',
'linkGroupGallery',
'linkGroup',
],
extraDependencies: ['html', 'language'],
query(group) {
const albums =
group.albums;
const albumGroups =
albums
.map(album => album.groups);
const albumOtherCategory =
albumGroups
.map(groups => groups
.map(group => group.category)
.find(category => category !== group.category));
const albumOtherGroups =
stitchArrays({
groups: albumGroups,
category: albumOtherCategory,
}).map(({groups, category}) =>
groups
.filter(group => group.category === category));
return {albums, albumOtherGroups};
},
relations: (relation, query, group) => ({
contentHeading:
relation('generateContentHeading'),
galleryLink:
relation('linkGroupGallery', group),
albumColorStyles:
query.albums
.map(album => relation('generateColorStyleAttribute', album.color)),
albumLinks:
query.albums
.map(album => relation('linkAlbum', album)),
otherGroupLinks:
query.albumOtherGroups
.map(groups => groups
.map(group => relation('linkGroup', group))),
datetimestamps:
group.albums.map(album =>
(album.date
? relation('generateAbsoluteDatetimestamp', album.date)
: null)),
}),
generate: (relations, {html, language}) =>
html.tags([
relations.contentHeading
.slots({
tag: 'h2',
title: language.$('groupInfoPage.albumList.title'),
}),
html.tag('p',
{[html.onlyIfSiblings]: true},
language.$('groupInfoPage.viewAlbumGallery', {
link:
relations.galleryLink
.slot('content', language.$('groupInfoPage.viewAlbumGallery.link')),
})),
html.tag('ul',
{[html.onlyIfContent]: true},
stitchArrays({
albumLink: relations.albumLinks,
otherGroupLinks: relations.otherGroupLinks,
datetimestamp: relations.datetimestamps,
albumColorStyle: relations.albumColorStyles,
}).map(({
albumLink,
otherGroupLinks,
datetimestamp,
albumColorStyle,
}) => {
const prefix = 'groupInfoPage.albumList.item';
const parts = [prefix];
const options = {};
options.album =
albumLink.slot('color', false);
if (datetimestamp) {
parts.push('withYear');
options.yearAccent =
language.$(prefix, 'yearAccent', {
year:
datetimestamp.slots({style: 'year', tooltip: true}),
});
}
if (!empty(otherGroupLinks)) {
parts.push('withOtherGroup');
options.otherGroupAccent =
html.tag('span', {class: 'other-group-accent'},
language.$(prefix, 'otherGroupAccent', {
groups:
language.formatConjunctionList(
otherGroupLinks.map(groupLink =>
groupLink.slot('color', false))),
}));
}
return (
html.tag('li',
albumColorStyle,
language.$(...parts, options)));
})),
]),
};
|
