content: generateFlashIndexPage

1 files changed, 155 insertions, 12 deletions

diff --git a/src/content/dependencies/generateFlashIndexPage.js b/src/content/dependencies/generateFlashIndexPage.js
index 24f9c861..662a64a2 100644
--- a/src/content/dependencies/generateFlashIndexPage.js
+++ b/src/content/dependencies/generateFlashIndexPage.js
@@ -1,22 +1,166 @@
+import {stitchArrays} from '../../util/sugar.js';
+
 export default {
-  contentDependencies: ['generatePageLayout'],
-  extraDependencies: ['html', 'language'],
+  contentDependencies: [
+    'generateColorStyleVariables',
+    'generateCoverGrid',
+    'generatePageLayout',
+    'image',
+    'linkFlash',
+  ],
+
+  extraDependencies: ['html', 'language', 'wikiData'],
 
-  relations(relation) {
-    const relations = {};
+  sprawl: ({flashActData}) => ({flashActData}),
 
-    relations.layout =
-      relation('generatePageLayout');
+  query(sprawl) {
+    const flashActs =
+      sprawl.flashActData.slice();
 
-    return relations;
+    const jumpActs =
+      flashActs
+        .filter(act => act.jump);
+
+    return {flashActs, jumpActs};
   },
 
-  generate(relations, {html, language}) {
-    return relations.layout.slots({
+  relations: (relation, query) => ({
+    layout:
+      relation('generatePageLayout'),
+
+    jumpLinkColorVariables:
+      query.jumpActs
+        .map(() => relation('generateColorStyleVariables')),
+
+    actColorVariables:
+      query.flashActs
+        .map(() => relation('generateColorStyleVariables')),
+
+    actFirstFlashLinks:
+      query.flashActs
+        .map(act => relation('linkFlash', act.flashes[0])),
+
+    actCoverGrids:
+      query.flashActs
+        .map(() => relation('generateCoverGrid')),
+
+    actCoverGridLinks:
+      query.flashActs
+        .map(act => act.flashes
+          .map(flash => relation('linkFlash', flash))),
+
+    actCoverGridImages:
+      query.flashActs
+        .map(act => act.flashes
+          .map(() => relation('image'))),
+  }),
+
+  data: (query) => ({
+    jumpLinkAnchors:
+      query.jumpActs
+        .map(act => act.anchor),
+
+    jumpLinkColors:
+      query.jumpActs
+        .map(act => act.jumpColor),
+
+    jumpLinkLabels:
+      query.jumpActs
+        .map(act => act.jump),
+
+    actAnchors:
+      query.flashActs
+        .map(act => act.anchor),
+
+    actColors:
+      query.flashActs
+        .map(act => act.color),
+
+    actNames:
+      query.flashActs
+        .map(act => act.name),
+
+    actCoverGridNames:
+      query.flashActs
+        .map(act => act.flashes
+          .map(flash => flash.name)),
+
+    actCoverGridPaths:
+      query.flashActs
+        .map(act => act.flashes
+          .map(flash => ['media.flashArt', flash.directory, flash.coverArtFileExtension])),
+  }),
+
+  generate: (data, relations, {html, language}) =>
+    relations.layout.slots({
       title: language.$('flashIndex.title'),
+      headingMode: 'static',
 
+      mainClasses: ['flash-index'],
       mainContent: [
-        html.tag('p', `Alright alright, this is a stub page! Coming soon!`),
+        html.tag('p',
+          {class: 'quick-info'},
+          language.$('misc.jumpTo')),
+
+        html.tag('ul',
+          {class: 'quick-info'},
+          stitchArrays({
+            colorVariables: relations.jumpLinkColorVariables,
+            anchor: data.jumpLinkAnchors,
+            color: data.jumpLinkColors,
+            label: data.jumpLinkLabels,
+          }).map(({colorVariables, anchor, color, label}) =>
+              html.tag('li',
+                html.tag('a', {
+                  href: '#' + anchor,
+                  style: colorVariables.slot('color', color).content,
+                }, label)))),
+
+        stitchArrays({
+          colorVariables: relations.actColorVariables,
+          firstFlashLink: relations.actFirstFlashLinks,
+          anchor: data.actAnchors,
+          color: data.actColors,
+          name: data.actNames,
+
+          coverGrid: relations.actCoverGrids,
+          coverGridImages: relations.actCoverGridImages,
+          coverGridLinks: relations.actCoverGridLinks,
+          coverGridNames: data.actCoverGridNames,
+          coverGridPaths: data.actCoverGridPaths,
+        }).map(({
+            colorVariables,
+            anchor,
+            color,
+            name,
+            firstFlashLink,
+
+            coverGrid,
+            coverGridImages,
+            coverGridLinks,
+            coverGridNames,
+            coverGridPaths,
+          }, index) => [
+            html.tag('h2',
+              {
+                id: anchor,
+                style: colorVariables.slot('color', color).content,
+              },
+              firstFlashLink.slot('content', name)),
+
+            coverGrid.slots({
+              links: coverGridLinks,
+              names: coverGridNames,
+              lazy: index === 0 ? 4 : true,
+
+              images:
+                stitchArrays({
+                  image: coverGridImages,
+                  path: coverGridPaths,
+                }).map(({image, path}) =>
+                    image.slot('path', path)),
+            }),
+          ]),
       ],
 
       navLinkStyle: 'hierarchical',
@@ -24,6 +168,5 @@ export default {
         {auto: 'home'},
         {auto: 'current'},
       ],
-    });
-  },
+    }),
 };