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
|
import {empty} from '#sugar';
export default {
contentDependencies: [
'generateAbsoluteDatetimestamp',
'generateColorStyleAttribute',
'linkAlbum',
'linkGroup',
],
extraDependencies: ['html', 'language'],
query: (album, group) => {
const otherCategory =
album.groups
.map(group => group.category)
.find(category => category !== group.category);
const otherGroups =
album.groups
.filter(group => group.category === otherCategory);
return {otherGroups};
},
relations: (relation, query, album) => ({
colorStyle:
relation('generateColorStyleAttribute', album.color),
albumLink:
relation('linkAlbum', album),
datetimestamp:
(album.date
? relation('generateAbsoluteDatetimestamp', album.date)
: null),
otherGroupLinks:
query.otherGroups
.map(group => relation('linkGroup', group)),
}),
generate: (relations, {html, language}) =>
html.tag('li',
relations.colorStyle,
language.encapsulate('groupInfoPage.albumList.item', itemCapsule =>
language.encapsulate(itemCapsule, workingCapsule => {
const workingOptions = {};
workingOptions.album =
relations.albumLink.slot('color', false);
if (relations.datetimestamp) {
workingCapsule += '.withYear';
workingOptions.yearAccent =
language.$(itemCapsule, 'yearAccent', {
year:
relations.datetimestamp.slots({style: 'year', tooltip: true}),
});
}
if (!empty(relations.otherGroupLinks)) {
workingCapsule += '.withOtherGroup';
workingOptions.otherGroupAccent =
html.tag('span', {class: 'other-group-accent'},
language.$(itemCapsule, 'otherGroupAccent', {
groups:
language.formatConjunctionList(
relations.otherGroupLinks.map(groupLink =>
groupLink.slot('color', false))),
}));
}
return language.$(workingCapsule, workingOptions);
}))),
};
|
