content: generateSecondaryNav, generateAlbumSecondaryNav

4 files changed, 132 insertions, 16 deletions

diff --git a/src/content/dependencies/generateAlbumInfoPage.js b/src/content/dependencies/generateAlbumInfoPage.js
index a0f14c9a..8fbb81f9 100644
--- a/src/content/dependencies/generateAlbumInfoPage.js
+++ b/src/content/dependencies/generateAlbumInfoPage.js
@@ -10,6 +10,7 @@ export default {
     'generateAlbumCoverArtwork',
     'generateAlbumNavAccent',
     'generateAlbumReleaseInfo',
+    'generateAlbumSecondaryNav',
     'generateAlbumSidebar',
     'generateAlbumSocialEmbed',
     'generateAlbumStyleRules',
@@ -68,6 +69,9 @@ export default {
     relations.chronologyLinks =
       relation('generateChronologyLinks');
 
+    relations.secondaryNav =
+      relation('generateAlbumSecondaryNav', album);
+
     relations.sidebar =
       relation('generateAlbumSidebar', album, null);
 
@@ -272,18 +276,11 @@ export default {
         banner: relations.banner ?? null,
         bannerPosition: 'top',
 
+        secondaryNav: relations.secondaryNav,
+
         ...relations.sidebar,
 
         // socialEmbed: relations.socialEmbed,
       });
   },
 };
-
-/*
-  secondaryNav: generateAlbumSecondaryNav(album, null, {
-    getLinkThemeString,
-    html,
-    language,
-    link,
-  }),
-*/
diff --git a/src/content/dependencies/generateAlbumSecondaryNav.js b/src/content/dependencies/generateAlbumSecondaryNav.js
new file mode 100644
index 00000000..b2cfef69
--- /dev/null
+++ b/src/content/dependencies/generateAlbumSecondaryNav.js
@@ -0,0 +1,96 @@
+export default {
+  contentDependencies: [
+    'generateColorStyleVariables',
+    'generateSecondaryNav',
+    'linkAlbum',
+    'linkGroup',
+    'linkTrack',
+  ],
+
+  extraDependencies: ['html', 'language'],
+
+  relations(relation, album) {
+    const relations = {};
+
+    relations.secondaryNav =
+      relation('generateSecondaryNav');
+
+    relations.groupParts =
+      album.groups.map(group => {
+        const relations = {};
+
+        relations.groupLink =
+          relation('linkGroup', group);
+
+        relations.colorVariables =
+          relation('generateColorStyleVariables', group.color);
+
+        if (album.date) {
+          const albums = group.albums.filter(album => album.date);
+          const index = albums.indexOf(album);
+          const previousAlbum = (index > 0) && albums[index - 1];
+          const nextAlbum = (index < albums.length - 1) && albums[index + 1];
+
+          if (previousAlbum) {
+            relations.previousAlbumLink =
+              relation('linkAlbum', previousAlbum);
+          }
+
+          if (nextAlbum) {
+            relations.nextAlbumLink =
+              relation('linkAlbum', nextAlbum);
+          }
+        }
+
+        return relations;
+      });
+
+    return relations;
+  },
+
+  slots: {
+    mode: {
+      validate: v => v.is('album', 'track'),
+      default: 'album',
+    },
+  },
+
+  generate(relations, slots, {html, language}) {
+    return relations.secondaryNav.slots({
+      class: 'nav-links-groups',
+      content:
+        relations.groupParts.map(({
+          colorVariables,
+          groupLink,
+          previousAlbumLink,
+          nextAlbumLink,
+        }) => {
+          const links = [
+            previousAlbumLink
+              ?.slots({
+                color: false,
+                content: language.$('misc.nav.previous'),
+              }),
+
+            nextAlbumLink
+              ?.slots({
+                color: false,
+                content: language.$('misc.nav.next'),
+              }),
+          ].filter(Boolean);
+
+          return (
+            (slots.mode === 'album'
+              ? html.tag('span', {style: colorVariables}, [
+                  language.$('albumSidebar.groupBox.title', {
+                    group: groupLink,
+                  }),
+                  `(${language.formatUnitList(links)})`,
+                ])
+              : language.$('albumSidebar.groupBox.title', {
+                  group: groupLink,
+                })));
+        }),
+    });
+  },
+};
diff --git a/src/content/dependencies/generatePageLayout.js b/src/content/dependencies/generatePageLayout.js
index c9ab83fb..f4378700 100644
--- a/src/content/dependencies/generatePageLayout.js
+++ b/src/content/dependencies/generatePageLayout.js
@@ -98,12 +98,6 @@ export default {
 
     cover: {type: 'html'},
 
-    banner: {type: 'html'},
-    bannerPosition: {
-      validate: v => v.is('top', 'bottom'),
-      default: 'top',
-    },
-
     socialEmbed: {type: 'html'},
 
     colorStyleRules: {
@@ -135,6 +129,14 @@ export default {
     ...sidebarSlots('leftSidebar'),
     ...sidebarSlots('rightSidebar'),
 
+    // Banner
+
+    banner: {type: 'html'},
+    bannerPosition: {
+      validate: v => v.is('top', 'bottom'),
+      default: 'top',
+    },
+
     // Nav & Footer
 
     navContent: {type: 'html'},
@@ -189,6 +191,8 @@ export default {
         })
     },
 
+    secondaryNav: {type: 'html'},
+
     footerContent: {type: 'html'},
   },
 
@@ -420,7 +424,7 @@ export default {
     const layoutHTML = [
       navHTML,
       slots.bannerPosition === 'top' && slots.banner,
-      // secondaryNavHTML,
+      slots.secondaryNav,
       html.tag('div',
         {
           class: [
diff --git a/src/content/dependencies/generateSecondaryNav.js b/src/content/dependencies/generateSecondaryNav.js
new file mode 100644
index 00000000..6fdfd428
--- /dev/null
+++ b/src/content/dependencies/generateSecondaryNav.js
@@ -0,0 +1,19 @@
+export default {
+  extraDependencies: ['html'],
+
+  slots: {
+    content: {type: 'html'},
+
+    class: {
+      validate: v => v.oneOf(v.isString, v.arrayOf(v.isString)),
+    },
+  },
+
+  generate(slots, {html}) {
+    return html.tag('nav', {
+      [html.onlyIfContent]: true,
+      id: 'secondary-nav',
+      class: slots.class,
+    }, slots.content);
+  },
+};