Chronology tooltip

src/content/dependencies/generateAlbumInfoPage.js

@@ -10,7 +10,6 @@ export default {
     'generateAlbumSocialEmbed',
     'generateAlbumStyleRules',
     'generateAlbumTrackList',
-    'generateAlbumChronologyLinks',
     'generateCommentarySection',
     'generateContentHeading',
     'generatePageLayout',
@@ -33,9 +32,6 @@ export default {
     albumNavAccent:
       relation('generateAlbumNavAccent', album, null),
 
-    chronologyLinks:
-      relation('generateAlbumChronologyLinks', album),
-
     secondaryNav:
       relation('generateAlbumSecondaryNav', album),
 
@@ -196,9 +192,6 @@ export default {
           },
         ],
 
-        navContent:
-          relations.chronologyLinks,
-
         banner: relations.banner ?? null,
         bannerPosition: 'top',
 

src/content/dependencies/generateAlbumReleaseInfo.js

@@ -67,17 +67,25 @@ export default {
           {[html.joinChildren]: html.tag('br')},
 
           [
-            relations.artistContributionsLine
-              .slots({stringKey: capsule + '.by'}),
+            relations.artistContributionsLine.slots({
+              stringKey: capsule + '.by',
+              chronologyKind: 'album',
+            }),
 
-            relations.coverArtistContributionsLine
-              .slots({stringKey: capsule + '.coverArtBy'}),
+            relations.coverArtistContributionsLine.slots({
+              stringKey: capsule + '.coverArtBy',
+              chronologyKind: 'coverArt',
+            }),
 
-            relations.wallpaperArtistContributionsLine
-              .slots({stringKey: capsule + '.wallpaperArtBy'}),
+            relations.wallpaperArtistContributionsLine.slots({
+              stringKey: capsule + '.wallpaperArtBy',
+              chronologyKind: 'wallpaperArt',
+            }),
 
-            relations.bannerArtistContributionsLine
-              .slots({stringKey: capsule + '.bannerArtBy'}),
+            relations.bannerArtistContributionsLine.slots({
+              stringKey: capsule + '.bannerArtBy',
+              chronologyKind: 'bannerArt',
+            }),
 
             language.$(capsule, 'released', {
               [language.onlyIfOptions]: ['date'],

src/content/dependencies/generateContributionList.js

@@ -8,17 +8,22 @@ export default {
         .map(contrib => relation('linkContribution', contrib)),
   }),
 
-  generate: (relations, {html}) =>
+  slots: {
+    chronologyKind: {type: 'string'},
+  },
+
+  generate: (relations, slots, {html}) =>
     html.tag('ul',
       {[html.onlyIfContent]: true},
 
       relations.contributionLinks
         .map(contributionLink =>
           html.tag('li',
             contributionLink.slots({
-              showIcons: true,
+              showExternalLinks: true,
               showContribution: true,
+              showChronology: true,
               preventWrapping: false,
-              iconMode: 'tooltip',
+              chronologyKind: slots.chronologyKind,
             })))),
 };

src/content/dependencies/generateContributionTooltip.js

@@ -0,0 +1,48 @@
+export default {
+  contentDependencies: [
+    'generateContributionTooltipChronologySection',
+    'generateContributionTooltipExternalLinkSection',
+    'generateTooltip',
+  ],
+
+  extraDependencies: ['html'],
+
+  relations: (relation, contribution) => ({
+    tooltip:
+      relation('generateTooltip'),
+
+    externalLinkSection:
+      relation('generateContributionTooltipExternalLinkSection', contribution),
+
+    chronologySection:
+      relation('generateContributionTooltipChronologySection', contribution),
+  }),
+
+  slots: {
+    showExternalLinks: {type: 'boolean'},
+    showChronology: {type: 'boolean'},
+
+    chronologyKind: {type: 'string'},
+  },
+
+  generate: (relations, slots, {html}) =>
+    relations.tooltip.slots({
+      attributes:
+        {class: 'contribution-tooltip'},
+
+      contentAttributes: {
+        [html.joinChildren]:
+          html.tag('span', {class: 'tooltip-divider'}),
+      },
+
+      content: [
+        slots.showExternalLinks &&
+          relations.externalLinkSection,
+
+        slots.showChronology &&
+          relations.chronologySection.slots({
+            kind: slots.chronologyKind,
+          }),
+      ],
+    }),
+};