« get me outta code hell

generateListingPage.js « dependencies « content « src - hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/src/content/dependencies/generateListingPage.js
blob: cab80a7f3c2c89ea80bfcca5911834da12398111 (plain)
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,
    });
  },
};