content: generateAlbumSecondaryNavGroupPart

3 files changed, 129 insertions, 148 deletions

diff --git a/src/content/dependencies/generateAlbumSecondaryNav.js b/src/content/dependencies/generateAlbumSecondaryNav.js
index d6ff8a0a..4a3d18be 100644
--- a/src/content/dependencies/generateAlbumSecondaryNav.js
+++ b/src/content/dependencies/generateAlbumSecondaryNav.js
@@ -1,96 +1,22 @@
-import {sortChronologically} from '#sort';
-import {atOffset, stitchArrays} from '#sugar';
-
 export default {
   contentDependencies: [
-    'generateColorStyleAttribute',
-    'generatePreviousNextLinks',
+    'generateAlbumSecondaryNavGroupPart',
     'generateSecondaryNav',
-    'linkAlbumDynamically',
-    'linkGroup',
-    'linkTrack',
   ],
 
-  extraDependencies: ['html', 'language'],
-
-  query(album) {
-    const query = {};
-
-    query.groups =
-      album.groups;
-
-    if (album.date) {
-      // Sort by latest first. This matches the sorting order used on group
-      // gallery pages, ensuring that previous/next matches moving up/down
-      // the gallery. Note that this makes the index offsets "backwards"
-      // compared to how latest-last chronological lists are accessed.
-      const groupAlbums =
-        query.groups.map(group =>
-          sortChronologically(
-            group.albums.filter(album => album.date),
-            {latestFirst: true}));
-
-      const groupCurrentIndex =
-        groupAlbums.map(albums =>
-          albums.indexOf(album));
-
-      query.groupPreviousAlbum =
-        stitchArrays({
-          albums: groupAlbums,
-          index: groupCurrentIndex,
-        }).map(({albums, index}) =>
-            atOffset(albums, index, +1));
-
-      query.groupNextAlbum =
-        stitchArrays({
-          albums: groupAlbums,
-          index: groupCurrentIndex,
-        }).map(({albums, index}) =>
-            atOffset(albums, index, -1));
-    }
-
-    return query;
-  },
-
-  relations(relation, query, album) {
-    const relations = {};
-
-    relations.secondaryNav =
-      relation('generateSecondaryNav');
-
-    relations.groupLinks =
-      query.groups
-        .map(group => relation('linkGroup', group));
+  extraDependencies: ['html'],
 
-    relations.colorStyles =
-      query.groups
-        .map(group => relation('generateColorStyleAttribute', group.color));
+  relations: (relation, album) => ({
+    secondaryNav:
+      relation('generateSecondaryNav'),
 
-    if (album.date) {
-      relations.previousNextLinks =
-        stitchArrays({
-          previousAlbum: query.groupPreviousAlbum,
-          nextAlbum: query.groupNextAlbum
-        }).map(({previousAlbum, nextAlbum}) =>
-            (previousAlbum || nextAlbum
-              ? relation('generatePreviousNextLinks')
-              : null));
-
-      relations.previousAlbumLinks =
-        query.groupPreviousAlbum.map(previousAlbum =>
-          (previousAlbum
-            ? relation('linkAlbumDynamically', previousAlbum)
-            : null));
-
-      relations.nextAlbumLinks =
-        query.groupNextAlbum.map(nextAlbum =>
-          (nextAlbum
-            ? relation('linkAlbumDynamically', nextAlbum)
-            : null));
-    }
-
-    return relations;
-  },
+    groupParts:
+      album.groups
+        .map(group =>
+          relation('generateAlbumSecondaryNavGroupPart',
+            group,
+            album)),
+  }),
 
   slots: {
     mode: {
@@ -99,67 +25,11 @@ export default {
     },
   },
 
-  generate(relations, slots, {html, language}) {
-    const navLinksShouldShowPreviousNext =
-      (slots.mode === 'track'
-        ? Array.from(relations.previousNextLinks ?? [], () => false)
-        : stitchArrays({
-            previousAlbumLink: relations.previousAlbumLinks ?? null,
-            nextAlbumLink: relations.nextAlbumLinks ?? null,
-          }).map(({previousAlbumLink, nextAlbumLink}) =>
-              previousAlbumLink ||
-              nextAlbumLink));
-
-    const navLinkPreviousNextLinks =
-      stitchArrays({
-        showPreviousNext: navLinksShouldShowPreviousNext,
-        previousNextLinks: relations.previousNextLinks ?? null,
-        previousAlbumLink: relations.previousAlbumLinks ?? null,
-        nextAlbumLink: relations.nextAlbumLinks ?? null,
-      }).map(({
-          showPreviousNext,
-          previousNextLinks,
-          previousAlbumLink,
-          nextAlbumLink,
-        }) =>
-          (showPreviousNext
-            ? previousNextLinks.slots({
-                previousLink: previousAlbumLink,
-                nextLink: nextAlbumLink,
-                id: false,
-              })
-            : null));
-
-    for (const groupLink of relations.groupLinks) {
-      groupLink.setSlot('color', false);
-    }
-
-    const navLinkContents =
-      stitchArrays({
-        groupLink: relations.groupLinks,
-        previousNextLinks: navLinkPreviousNextLinks,
-      }).map(({groupLink, previousNextLinks}) => [
-          language.$('albumSidebar.groupBox.title', {
-            group: groupLink,
-          }),
-
-          previousNextLinks &&
-            `(${language.formatUnitList(previousNextLinks.content)})`,
-        ]);
-
-    const navLinks =
-      stitchArrays({
-        content: navLinkContents,
-        colorStyle: relations.colorStyles,
-      }).map(({content, colorStyle}) =>
-          html.tag('span', {class: 'nav-link'},
-            colorStyle.slot('context', 'primary-only'),
-
-            content));
-
-    return relations.secondaryNav.slots({
+  generate: (relations, slots) =>
+    relations.secondaryNav.slots({
       class: 'nav-links-groups',
-      content: navLinks,
-    });
-  },
+      content:
+        relations.groupParts
+          .map(part => part.slot('mode', slots.mode)),
+    }),
 };
diff --git a/src/content/dependencies/generateAlbumSecondaryNavGroupPart.js b/src/content/dependencies/generateAlbumSecondaryNavGroupPart.js
new file mode 100644
index 00000000..81b0c75a
--- /dev/null
+++ b/src/content/dependencies/generateAlbumSecondaryNavGroupPart.js
@@ -0,0 +1,98 @@
+import {sortChronologically} from '#sort';
+import {atOffset} from '#sugar';
+
+export default {
+  contentDependencies: [
+    'generateColorStyleAttribute',
+    'generatePreviousNextLinks',
+    'linkAlbumDynamically',
+    'linkGroup',
+  ],
+
+  extraDependencies: ['html', 'language'],
+
+  query(group, album) {
+    const query = {};
+
+    if (album.date) {
+      // Sort by latest first. This matches the sorting order used on group
+      // gallery pages, ensuring that previous/next matches moving up/down
+      // the gallery. Note that this makes the index offsets "backwards"
+      // compared to how latest-last chronological lists are accessed.
+      const albums =
+        sortChronologically(
+          group.albums.filter(album => album.date),
+          {latestFirst: true});
+
+      const currentIndex =
+        albums.indexOf(album);
+
+      query.previousAlbum =
+        atOffset(albums, currentIndex, +1);
+
+      query.nextAlbum =
+        atOffset(albums, currentIndex, -1);
+    }
+
+    return query;
+  },
+
+  relations: (relation, query, group, _album) => ({
+    groupLink:
+      relation('linkGroup', group),
+
+    colorStyle:
+      relation('generateColorStyleAttribute', group.color),
+
+    previousNextLinks:
+      relation('generatePreviousNextLinks'),
+
+    previousAlbumLink:
+      (query.previousAlbum
+        ? relation('linkAlbumDynamically', query.previousAlbum)
+        : null),
+
+    nextAlbumLink:
+      (query.nextAlbum
+        ? relation('linkAlbumDynamically', query.nextAlbum)
+        : null),
+  }),
+
+  slots: {
+    mode: {
+      validate: v => v.is('album', 'track'),
+      default: 'album',
+    },
+  },
+
+  generate: (relations, slots, {html, language}) =>
+    html.tag('span', {class: 'nav-link'},
+      relations.colorStyle
+        .slot('context', 'primary-only'),
+
+      language.encapsulate('albumSecondaryNav.group', workingCapsule => {
+        const workingOptions = {};
+
+        workingOptions.group =
+          relations.groupLink
+            .slot('color', false);
+
+        if (slots.mode === 'album') {
+          const {previousNextLinks} = relations;
+
+          previousNextLinks.setSlots({
+            previousLink: relations.previousAlbumLink,
+            nextLink: relations.nextAlbumLink,
+            id: false,
+          });
+
+          if (!html.isBlank(previousNextLinks)) {
+            workingCapsule += '.withPreviousNext';
+            workingOptions.previousNext =
+              language.formatUnitList(previousNextLinks.content);
+          }
+        }
+
+        return language.$(workingCapsule, workingOptions);
+      })),
+};
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index aaa38c59..731943a0 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -931,6 +931,19 @@ albumSidebar:
     previous: "Previous: {ALBUM}"
 
 #
+# albumSecondaryNav:
+#   The secondary nav bar is shown in medium and thin layouts,
+#   and provides access to the same navigational features present
+#   in the sidebar (with a more compact view).
+#
+albumSecondaryNav:
+  group: >-
+    {GROUP}
+
+  group.withPreviousNext: >-
+    {GROUP} ({PREVIOUS_NEXT})
+
+#
 # albumPage:
 #
 #   Albums group together tracks and provide quick access to each of