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
|
import {empty, stitchArrays} from '../../util/sugar.js';
export default {
contentDependencies: [
'generateListingSidebar',
'generatePageLayout',
'linkListing',
'linkListingIndex',
],
extraDependencies: ['html', 'language', 'wikiData'],
relations(relation, listing) {
const relations = {};
relations.layout =
relation('generatePageLayout');
relations.sidebar =
relation('generateListingSidebar', listing);
relations.listingsIndexLink =
relation('linkListingIndex');
if (listing.target.listings.length > 1) {
relations.sameTargetListingLinks =
listing.target.listings
.map(listing => relation('linkListing', listing));
}
if (!empty(listing.seeAlso)) {
relations.seeAlsoLinks =
listing.seeAlso
.map(listing => relation('linkListing', listing));
}
return relations;
},
data(listing) {
return {
stringsKey: listing.stringsKey,
targetStringsKey: listing.target.stringsKey,
sameTargetListingStringsKeys:
listing.target.listings
.map(listing => listing.stringsKey),
sameTargetListingsCurrentIndex:
listing.target.listings
.indexOf(listing),
};
},
slots: {
type: {
validate: v => v.is('rows'),
},
rows: {
validate: v => v.arrayOf(v.isObject),
},
},
generate(data, relations, slots, {html, language}) {
return relations.layout.slots({
title: language.$(`listingPage.${data.stringsKey}.title`),
headingMode: 'sticky',
mainContent: [
relations.sameTargetListingLinks &&
html.tag('p',
language.$('listingPage.listingsFor', {
target: language.$(`listingPage.target.${data.targetStringsKey}`),
listings:
language.formatUnitList(
stitchArrays({
link: relations.sameTargetListingLinks,
stringsKey: data.sameTargetListingStringsKeys,
}).map(({link, stringsKey}, index) =>
html.tag('span',
{class: index === data.sameTargetListingsCurrentIndex && 'current'},
link.slots({
attributes: {class: 'nowrap'},
content: language.$(`listingPage.${stringsKey}.title.short`),
})))),
})),
relations.seeAlsoLinks &&
html.tag('p',
language.$('listingPage.seeAlso', {
listings: language.formatUnitList(relations.seeAlsoLinks),
})),
slots.type === 'rows' &&
html.tag('ul',
slots.rows.map(row =>
html.tag('li',
language.$(`listingPage.${data.stringsKey}.item`, row)))),
],
navLinkStyle: 'hierarchical',
navLinks: [
{auto: 'home'},
{html: relations.listingsIndexLink},
{auto: 'current'},
],
...relations.sidebar,
});
},
};
|
