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
133
134
135
136
137
138
139
140
141
142
|
import {empty, stitchArrays} from '../../util/sugar.js';
export default {
contentDependencies: [
'generateContentHeading',
'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');
relations.chunkHeading =
relation('generateContentHeading');
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', 'chunks', 'custom')},
rows: {validate: v => v.arrayOf(v.isObject)},
chunkTitles: {validate: v => v.arrayOf(v.isObject)},
chunkRows: {validate: v => v.arrayOf(v.isObject)},
content: {type: 'html'},
},
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)))),
slots.type === 'chunks' &&
html.tag('dl',
stitchArrays({
title: slots.chunkTitles,
rows: slots.chunkRows,
}).map(({title, rows}) => [
relations.chunkHeading
.clone()
.slots({
tag: 'dt',
title:
language.$(`listingPage.${data.stringsKey}.chunk.title`, title),
}),
html.tag('dd',
html.tag('ul',
rows.map(row =>
html.tag('li',
language.$(`listingPage.${data.stringsKey}.chunk.item`, row))))),
])),
slots.type === 'custom' &&
slots.content,
],
navLinkStyle: 'hierarchical',
navLinks: [
{auto: 'home'},
{html: relations.listingsIndexLink},
{auto: 'current'},
],
...relations.sidebar,
});
},
};
|
