content: generateFlashActSidebar{CurrentAct,SideMap}Box

3 files changed, 159 insertions, 163 deletions

diff --git a/src/content/dependencies/generateFlashActSidebar.js b/src/content/dependencies/generateFlashActSidebar.js
index 7c1aae7d..1421dde9 100644
--- a/src/content/dependencies/generateFlashActSidebar.js
+++ b/src/content/dependencies/generateFlashActSidebar.js
@@ -1,182 +1,30 @@
-import {stitchArrays} from '#sugar';
-
 export default {
   contentDependencies: [
+    'generateFlashActSidebarCurrentActBox',
+    'generateFlashActSidebarSideMapBox',
     'generatePageSidebar',
-    'generatePageSidebarBox',
-    'linkFlash',
-    'linkFlashAct',
-    'linkFlashIndex',
   ],
 
-  extraDependencies: ['getColors', 'html', 'language', 'wikiData'],
-
-  sprawl: ({flashActData, flashSideData}) => ({flashActData, flashSideData}),
-
-  query(sprawl, act, flash) {
-    const sideNames =
-      sprawl.flashSideData
-        .map(side => side.name);
-
-    const sideColors =
-      sprawl.flashSideData
-        .map(side => side.color);
-
-    const sideActs =
-      sprawl.flashSideData
-        .map(side => side.acts);
-
-    const currentActFlashes =
-      act.flashes;
-
-    const currentFlashIndex =
-      currentActFlashes.indexOf(flash);
-
-    const currentSideIndex =
-      sideActs.findIndex(acts => acts.includes(act));
-
-    const currentSideActs =
-      sideActs[currentSideIndex];
-
-    const currentActIndex =
-      currentSideActs.indexOf(act);
-
-    const fallbackListTerminology =
-      'entriesInThisSection';
-
-    return {
-      sideNames,
-      sideColors,
-      sideActs,
-
-      currentSideIndex,
-      currentSideActs,
-      currentActIndex,
-      currentActFlashes,
-      currentFlashIndex,
-
-      fallbackListTerminology,
-    };
-  },
-
-  relations: (relation, query, sprawl, act, _flash) => ({
+  relations: (relation, act, flash) => ({
     sidebar:
       relation('generatePageSidebar'),
 
     currentActBox:
-      relation('generatePageSidebarBox'),
+      relation('generateFlashActSidebarCurrentActBox', act, flash),
 
     sideMapBox:
-      relation('generatePageSidebarBox'),
-
-    currentActLink:
-      relation('linkFlashAct', act),
-
-    flashIndexLink:
-      relation('linkFlashIndex'),
-
-    sideActLinks:
-      query.sideActs
-        .map(acts => acts
-          .map(act => relation('linkFlashAct', act))),
-
-    currentActFlashLinks:
-      act.flashes
-        .map(flash => relation('linkFlash', flash)),
+      relation('generateFlashActSidebarSideMapBox', act, flash),
   }),
 
-  data: (query, sprawl, act, flash) => ({
+  data: (_act, flash) => ({
     isFlashActPage: !flash,
-
-    sideColors: query.sideColors,
-    sideNames: query.sideNames,
-
-    currentSideIndex: query.currentSideIndex,
-    currentActIndex: query.currentActIndex,
-    currentFlashIndex: query.currentFlashIndex,
-
-    customListTerminology: act.listTerminology,
-    fallbackListTerminology: query.fallbackListTerminology,
   }),
 
-  generate(data, relations, {getColors, html, language}) {
-    const currentActBoxContent = html.tags([
-      html.tag('h1', relations.currentActLink),
-
-      html.tag('details',
-        (data.isFlashActPage
-          ? {}
-          : {class: 'current', open: true}),
-        [
-          html.tag('summary',
-            html.tag('span', {class: 'group-name'},
-              (data.customListTerminology
-                ? language.sanitize(data.customListTerminology)
-                : language.$('flashSidebar.flashList', data.fallbackListTerminology)))),
-
-          html.tag('ul',
-            relations.currentActFlashLinks
-              .map((flashLink, index) =>
-                html.tag('li',
-                  index === data.currentFlashIndex &&
-                    {class: 'current'},
-
-                  flashLink))),
-        ]),
-    ]);
-
-    const sideMapBoxContent = html.tags([
-      html.tag('h1', relations.flashIndexLink),
-
-      stitchArrays({
-        sideName: data.sideNames,
-        sideColor: data.sideColors,
-        actLinks: relations.sideActLinks,
-      }).map(({sideName, sideColor, actLinks}, sideIndex) =>
-          html.tag('details',
-            sideIndex === data.currentSideIndex &&
-              {class: 'current'},
-
-            data.isFlashActPage &&
-            sideIndex === data.currentSideIndex &&
-              {open: true},
-
-            sideColor &&
-              {style: `--primary-color: ${getColors(sideColor).primary}`},
-
-            [
-              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))),
-            ])),
-    ]);
-
-    const sideMapBox =
-      relations.sideMapBox.slots({
-        attributes: {class: 'flash-act-map-sidebar-box'},
-        content: sideMapBoxContent,
-      });
-
-    const currentActBox =
-      relations.currentActBox.slots({
-        attributes: {class: 'flash-current-act-sidebar-box'},
-        content: currentActBoxContent,
-      });
-
-    return relations.sidebar.slots({
+  generate: (data, relations) =>
+    relations.sidebar.slots({
       boxes:
         (data.isFlashActPage
-          ? [sideMapBox, currentActBox]
-          : [currentActBox, sideMapBox]),
-    });
-  },
+          ? [relations.sideMapBox, relations.currentActBox]
+          : [relations.currentActBox, relations.sideMapBox]),
+    }),
 };
diff --git a/src/content/dependencies/generateFlashActSidebarCurrentActBox.js b/src/content/dependencies/generateFlashActSidebarCurrentActBox.js
new file mode 100644
index 00000000..c5426a41
--- /dev/null
+++ b/src/content/dependencies/generateFlashActSidebarCurrentActBox.js
@@ -0,0 +1,63 @@
+export default {
+  contentDependencies: [
+    'generatePageSidebarBox',
+    'linkFlash',
+    'linkFlashAct',
+  ],
+
+  extraDependencies: ['html', 'language'],
+
+  relations: (relation, act, _flash) => ({
+    box:
+      relation('generatePageSidebarBox'),
+
+    actLink:
+      relation('linkFlashAct', act),
+
+    flashLinks:
+      act.flashes
+        .map(flash => relation('linkFlash', flash)),
+  }),
+
+  data: (act, flash) => ({
+    isFlashActPage:
+      !flash,
+
+    currentFlashIndex:
+      act.flashes.indexOf(flash),
+
+    customListTerminology:
+      act.listTerminology,
+  }),
+
+  generate: (data, relations, {html, language}) =>
+    relations.box.slots({
+      attributes: {class: 'flash-act-map-sidebar-box'},
+
+      content: [
+        html.tag('h1', relations.actLink),
+
+        html.tag('details',
+          (data.isFlashActPage
+            ? {}
+            : {class: 'current', open: true}),
+
+          [
+            html.tag('summary',
+              html.tag('span', {class: 'group-name'},
+                (data.customListTerminology
+                  ? language.sanitize(data.customListTerminology)
+                  : language.$('flashSidebar.flashList.entriesInThisSection')))),
+
+            html.tag('ul',
+              relations.flashLinks
+                .map((flashLink, index) =>
+                  html.tag('li',
+                    index === data.currentFlashIndex &&
+                      {class: 'current'},
+
+                    flashLink))),
+          ]),
+        ],
+    }),
+};
diff --git a/src/content/dependencies/generateFlashActSidebarSideMapBox.js b/src/content/dependencies/generateFlashActSidebarSideMapBox.js
new file mode 100644
index 00000000..7e41ae0a
--- /dev/null
+++ b/src/content/dependencies/generateFlashActSidebarSideMapBox.js
@@ -0,0 +1,85 @@
+import {stitchArrays} from '#sugar';
+
+export default {
+  contentDependencies: [
+    'generatePageSidebarBox',
+    'linkFlashAct',
+    'linkFlashIndex',
+  ],
+
+  extraDependencies: ['getColors', 'html', 'wikiData'],
+
+  sprawl: ({flashSideData}) => ({flashSideData}),
+
+  relations: (relation, sprawl, _act, _flash) => ({
+    box:
+      relation('generatePageSidebarBox'),
+
+    flashIndexLink:
+      relation('linkFlashIndex'),
+
+    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),
+
+    sideColors:
+      sprawl.flashSideData
+        .map(side => side.color),
+
+    currentSideIndex:
+      sprawl.flashSideData.indexOf(act.side),
+
+    currentActIndex:
+      act.side.acts.indexOf(act),
+  }),
+
+  generate: (data, relations, {getColors, html}) =>
+    relations.box.slots({
+      attributes: {class: 'flash-act-map-sidebar-box'},
+
+      content: [
+        html.tag('h1', relations.flashIndexLink),
+
+        stitchArrays({
+          sideName: data.sideNames,
+          sideColor: data.sideColors,
+          actLinks: relations.sideActLinks,
+        }).map(({sideName, sideColor, actLinks}, sideIndex) =>
+            html.tag('details',
+              sideIndex === data.currentSideIndex &&
+                {class: 'current'},
+
+              data.isFlashActPage &&
+              sideIndex === data.currentSideIndex &&
+                {open: true},
+
+              sideColor &&
+                {style: `--primary-color: ${getColors(sideColor).primary}`},
+
+              [
+                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))),
+              ])),
+      ],
+    }),
+};