« get me outta code hell

generateContributionTooltipChronologySection.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/generateContributionTooltipChronologySection.js
blob: 4ee9bb359081b29aa563ce69dfc1dd191ca4c7d3 (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
function getName(thing) {
  if (!thing) {
    return null;
  }

  if (thing.isArtwork) {
    return thing.thing.name;
  }

  return thing.name;
}

function getSiblings(contribution) {
  let previous = contribution;
  while (previous && previous.thing === contribution.thing) {
    previous = previous.previousBySameArtist;
  }

  let next = contribution;
  while (next && next.thing === contribution.thing) {
    next = next.nextBySameArtist;
  }

  return {previous, next};
}

export default {
  contentDependencies: ['linkAnythingMan'],
  extraDependencies: ['html', 'language'],

  query: (contribution) => ({
    ...getSiblings(contribution),
  }),

  relations: (relation, query, _contribution) => ({
    previousLink:
      (query.previous
        ? relation('linkAnythingMan', query.previous.thing)
        : null),

    nextLink:
      (query.next
        ? relation('linkAnythingMan', query.next.thing)
        : null),
  }),

  data: (query, _contribution) => ({
    previousName:
      getName(query.previous?.thing),

    nextName:
      getName(query.next?.thing),
  }),

  slots: {
    heading: {type: 'html', mutable: false},
    kind: {type: 'string'},
  },

  generate: (data, relations, slots, {html, language}) =>
    language.encapsulate('misc.artistLink.chronology', capsule =>
      html.tags([
        html.tag('span', {class: 'chronology-heading'},
          {[html.onlyIfContent]: true},
          {[html.onlyIfSiblings]: true},

          slots.heading),

        html.tags([
          relations.previousLink?.slots({
            attributes: {class: 'chronology-link'},
            content: [
              html.tag('span', {class: 'chronology-symbol'},
                language.$(capsule, 'previous.symbol')),

              html.tag('span', {class: 'chronology-text'},
                language.sanitize(data.previousName)),
            ],
          }),

          html.tag('span', {class: 'chronology-info'},
            {[html.onlyIfSiblings]: true},

            language.encapsulate(capsule, 'previous.info', workingCapsule => {
              const workingOptions = {};

              if (slots.kind) {
                workingCapsule += '.withKind';
                workingOptions.kind =
                  language.$(capsule, 'kind', slots.kind);
              }

              return language.$(workingCapsule, workingOptions);
            })),
        ]),

        html.tags([
          relations.nextLink?.slots({
            attributes: {class: 'chronology-link'},
            content: [
              html.tag('span', {class: 'chronology-symbol'},
                language.$(capsule, 'next.symbol')),

              html.tag('span', {class: 'chronology-text'},
                language.sanitize(data.nextName)),
            ],
          }),

          html.tag('span', {class: 'chronology-info'},
            {[html.onlyIfSiblings]: true},

            language.encapsulate(capsule, 'next.info', workingCapsule => {
              const workingOptions = {};

              if (slots.kind) {
                workingCapsule += '.withKind';
                workingOptions.kind =
                  language.$(capsule, 'kind', slots.kind);
              }

              return language.$(workingCapsule, workingOptions);
            }))
        ]),
      ])),
};