« get me outta code hell

generateFlashActSidebarSideMapBox.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/generateFlashActSidebarSideMapBox.js
blob: 3d261ec316b2322f2d1c74bcba136beba9db69de (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
import {stitchArrays} from '#sugar';

export default {
  contentDependencies: [
    'generateColorStyleAttribute',
    'generatePageSidebarBox',
    'linkFlashAct',
    'linkFlashIndex',
  ],

  extraDependencies: ['html', 'wikiData'],

  sprawl: ({flashSideData}) => ({flashSideData}),

  relations: (relation, sprawl, _act, _flash) => ({
    box:
      relation('generatePageSidebarBox'),

    flashIndexLink:
      relation('linkFlashIndex'),

    sideColorStyles:
      sprawl.flashSideData
        .map(side => relation('generateColorStyleAttribute', side.color)),

    sideActLinks:
      sprawl.flashSideData
        .map(side => side.acts
          .map(act => relation('linkFlashAct', act))),
  }),

  data: (sprawl, act, flash) => ({
    isFlashActPage:
      !flash,

    sideNames:
      sprawl.flashSideData
        .map(side => side.name),

    currentSideIndex:
      sprawl.flashSideData.indexOf(act.side),

    currentActIndex:
      act.side.acts.indexOf(act),
  }),

  generate: (data, relations, {html}) =>
    relations.box.slots({
      attributes: {class: 'flash-act-map-sidebar-box'},

      content: [
        html.tag('h1', relations.flashIndexLink),

        stitchArrays({
          sideName: data.sideNames,
          sideColorStyle: relations.sideColorStyles,
          actLinks: relations.sideActLinks,
        }).map(({sideName, sideColorStyle, actLinks}, sideIndex) =>
            html.tag('details',
              sideIndex === data.currentSideIndex &&
                {class: 'current'},

              data.isFlashActPage &&
              sideIndex === data.currentSideIndex &&
                {open: true},

              sideColorStyle.slot('context', 'primary-only'),

              [
                html.tag('summary',
                  html.tag('span', {class: 'group-name'},
                    sideName)),

                html.tag('ul',
                  actLinks.map((actLink, actIndex) =>
                    html.tag('li',
                      sideIndex === data.currentSideIndex &&
                      actIndex === data.currentActIndex &&
                        {class: 'current'},

                      actLink))),
              ])),
      ],
    }),
};