content: generateGroupNavAccent (dots)

2 files changed, 96 insertions, 88 deletions

diff --git a/src/content/dependencies/generateGroupNavAccent.js b/src/content/dependencies/generateGroupNavAccent.js
new file mode 100644
index 00000000..0e4ebe8a
--- /dev/null
+++ b/src/content/dependencies/generateGroupNavAccent.js
@@ -0,0 +1,53 @@
+import {empty} from '#sugar';
+
+export default {
+  contentDependencies: [
+    'generateInterpageDotSwitcher',
+    'linkGroup',
+    'linkGroupGallery',
+  ],
+
+  extraDependencies: ['html', 'language'],
+
+  relations: (relation, group) => ({
+    switcher:
+      relation('generateInterpageDotSwitcher'),
+
+    infoLink:
+      relation('linkGroup', group),
+
+    galleryLink:
+      (empty(group.albums)
+        ? null
+        : relation('linkGroupGallery', group)),
+  }),
+
+  slots: {
+    currentExtra: {
+      validate: v => v.is('gallery'),
+    },
+  },
+
+  generate: (relations, slots, {language}) =>
+    relations.switcher.slots({
+      links: [
+        relations.infoLink.slots({
+          attributes: [
+            slots.currentExtra === null &&
+              {class: 'current'},
+          ],
+
+          content: language.$('misc.nav.info'),
+        }),
+
+        relations.galleryLink?.slots({
+          attributes: [
+            slots.currentExtra === 'gallery' &&
+              {class: 'current'},
+          ],
+
+          content: language.$('misc.nav.gallery'),
+        }),
+      ],
+    }),
+};
diff --git a/src/content/dependencies/generateGroupNavLinks.js b/src/content/dependencies/generateGroupNavLinks.js
index 5cde2ab4..bdc3ee4c 100644
--- a/src/content/dependencies/generateGroupNavLinks.js
+++ b/src/content/dependencies/generateGroupNavLinks.js
@@ -1,48 +1,25 @@
-import {empty} from '#sugar';
-
 export default {
-  contentDependencies: [
-    'linkGroup',
-    'linkGroupGallery',
-  ],
-
+  contentDependencies: ['generateGroupNavAccent', 'linkGroup'],
   extraDependencies: ['html', 'language', 'wikiData'],
 
-  sprawl({groupCategoryData, wikiInfo}) {
-    return {
-      groupCategoryData,
-      enableGroupUI: wikiInfo.enableGroupUI,
-      enableListings: wikiInfo.enableListings,
-    };
-  },
-
-  relations(relation, sprawl, group) {
-    if (!sprawl.enableGroupUI) {
-      return {};
-    }
-
-    const relations = {};
+  sprawl: ({groupCategoryData, wikiInfo}) => ({
+    groupCategoryData,
+    enableGroupUI: wikiInfo.enableGroupUI,
+    enableListings: wikiInfo.enableListings,
+  }),
 
-    relations.mainLink =
-      relation('linkGroup', group);
+  relations: (relation, _sprawl, group) => ({
+    mainLink:
+      relation('linkGroup', group),
 
-    relations.infoLink =
-      relation('linkGroup', group);
+    accent:
+      relation('generateGroupNavAccent', group),
+  }),
 
-    if (!empty(group.albums)) {
-      relations.galleryLink =
-        relation('linkGroupGallery', group);
-    }
-
-    return relations;
-  },
-
-  data(sprawl) {
-    return {
-      enableGroupUI: sprawl.enableGroupUI,
-      enableListings: sprawl.enableListings,
-    };
-  },
+  data: (sprawl, _group) => ({
+    enableGroupUI: sprawl.enableGroupUI,
+    enableListings: sprawl.enableListings,
+  }),
 
   slots: {
     showExtraLinks: {type: 'boolean', default: false},
@@ -52,53 +29,31 @@ export default {
     },
   },
 
-  generate(data, relations, slots, {language}) {
-    if (!data.enableGroupUI) {
-      return [
-        {auto: 'home'},
-        {auto: 'current'},
-      ];
-    }
-
-    const infoLink =
-      relations.infoLink.slots({
-        attributes: {class: slots.currentExtra === null && 'current'},
-        content: language.$('misc.nav.info'),
-      });
-
-    const extraLinks = [
-      relations.galleryLink?.slots({
-        attributes: {class: slots.currentExtra === 'gallery' && 'current'},
-        content: language.$('misc.nav.gallery'),
-      }),
-    ];
-
-    const extrasPart =
-      (empty(extraLinks)
-        ? ''
-        : language.formatUnitList([infoLink, ...extraLinks]));
-
-    const accent =
-      (extrasPart
-        ? `(${extrasPart})`
-        : null);
-
-    return [
-      {auto: 'home'},
-
-      data.enableListings &&
-        {
-          path: ['localized.listingIndex'],
-          title: language.$('listingIndex.title'),
-        },
-
-      {
-        accent,
-        html:
-          language.$('groupPage.nav.group', {
-            group: relations.mainLink,
-          }),
-      },
-    ].filter(Boolean);
-  },
+  generate: (data, relations, slots, {language}) =>
+    (data.enableGroupUI
+      ? [
+          {auto: 'home'},
+
+          data.enableListings &&
+            {
+              path: ['localized.listingIndex'],
+              title: language.$('listingIndex.title'),
+            },
+
+          {
+            html:
+              language.$('groupPage.nav.group', {
+                group: relations.mainLink,
+              }),
+
+            accent:
+              relations.accent
+                .slot('currentExtra', slots.currentExtra),
+          },
+        ].filter(Boolean)
+
+      : [
+          {auto: 'home'},
+          {auto: 'current'},
+        ]),
 };