content: generateContributionTooltip, etc

8 files changed, 180 insertions, 188 deletions

diff --git a/src/content/dependencies/generateContributionList.js b/src/content/dependencies/generateContributionList.js
index b52afc6e..f22740b0 100644
--- a/src/content/dependencies/generateContributionList.js
+++ b/src/content/dependencies/generateContributionList.js
@@ -16,10 +16,9 @@ export default {
         .map(contributionLink =>
           html.tag('li',
             contributionLink.slots({
-              showIcons: true,
+              showExternalLinks: true,
               showContribution: true,
               showChronology: true,
               preventWrapping: false,
-              iconMode: 'tooltip',
             })))),
 };
diff --git a/src/content/dependencies/generateContributionTooltip.js b/src/content/dependencies/generateContributionTooltip.js
new file mode 100644
index 00000000..c4df875c
--- /dev/null
+++ b/src/content/dependencies/generateContributionTooltip.js
@@ -0,0 +1,42 @@
+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'},
+  },
+
+  generate: (relations, slots, {html}) =>
+    relations.tooltip.slots({
+      attributes:
+        {class: ['icons', 'icons-tooltip']},
+
+      contentAttributes:
+        {[html.joinChildren]: ''},
+
+      content: [
+        slots.showExternalLinks &&
+          relations.externalLinkSection,
+
+        slots.showChronology &&
+          relations.chronologySection,
+      ],
+    }),
+};
diff --git a/src/content/dependencies/generateContributionTooltipChronologySection.js b/src/content/dependencies/generateContributionTooltipChronologySection.js
new file mode 100644
index 00000000..85b19be9
--- /dev/null
+++ b/src/content/dependencies/generateContributionTooltipChronologySection.js
@@ -0,0 +1,51 @@
+export default {
+  contentDependencies: ['linkAnythingMan'],
+  extraDependencies: ['html', 'language'],
+
+  query(contribution) {
+    let previous = contribution;
+    while (previous && previous.thing === contribution.thing) {
+      previous = previous.previousBySameArtist;
+    }
+
+    let next = contribution;
+    while (next && next.thing === contribution.thing) {
+      next = next.nextBySameArtist;
+    }
+
+    return {previous, next};
+  },
+
+  relations: (relation, query, _contribution) => ({
+    previousLink:
+      (query.previous
+        ? relation('linkAnythingMan', query.previous.thing)
+        : null),
+
+    nextLink:
+      (query.next
+        ? relation('linkAnythingMan', query.next.thing)
+        : null),
+  }),
+
+  generate: (relations, {html, language}) =>
+    language.encapsulate('misc.artistLink.chronology', capsule => [
+      html.tag('span', {class: 'chronology-link'},
+        {[html.onlyIfContent]: true},
+
+        language.$(capsule, 'previous', {
+          [language.onlyIfOptions]: ['thing'],
+
+          thing: relations.previousLink,
+        })),
+
+      html.tag('span', {class: 'chronology-link'},
+        {[html.onlyIfContent]: true},
+
+        language.$(capsule, 'next', {
+          [language.onlyIfOptions]: ['thing'],
+
+          thing: relations.nextLink,
+        })),
+    ]),
+};
diff --git a/src/content/dependencies/generateContributionTooltipExternalLinkSection.js b/src/content/dependencies/generateContributionTooltipExternalLinkSection.js
new file mode 100644
index 00000000..3a124412
--- /dev/null
+++ b/src/content/dependencies/generateContributionTooltipExternalLinkSection.js
@@ -0,0 +1,48 @@
+import {stitchArrays} from '#sugar';
+
+export default {
+  contentDependencies: ['linkExternalAsIcon'],
+  extraDependencies: ['html', 'language'],
+
+  relations: (relation, contribution) => ({
+    artistIcons:
+      contribution.artist.urls
+        .map(url => relation('linkExternalAsIcon', url)),
+  }),
+
+  data: (contribution) => ({
+    urls: contribution.artist.urls,
+  }),
+
+  generate: (data, relations, {html, language}) =>
+    language.encapsulate('misc.artistLink', capsule =>
+      stitchArrays({
+        icon: relations.artistIcons,
+        url: data.urls,
+      }).map(({icon, url}) => {
+          icon.setSlots({
+            context: 'artist',
+          });
+
+          let platformText =
+            language.formatExternalLink(url, {
+              context: 'artist',
+              style: 'platform',
+            });
+
+          // This is a pretty ridiculous hack, but we currently
+          // don't have a way of telling formatExternalLink to *not*
+          // use the fallback string, which just formats the URL as
+          // its host/domain... so is technically detectable.
+          if (platformText.toString() === (new URL(url)).host) {
+            platformText =
+              language.$(capsule, 'noExternalLinkPlatformName');
+          }
+
+          const platformSpan =
+            html.tag('span', {class: 'icon-platform'},
+              platformText);
+
+          return [icon, platformSpan];
+        })),
+};
diff --git a/src/content/dependencies/generateReleaseInfoContributionsLine.js b/src/content/dependencies/generateReleaseInfoContributionsLine.js
index 3aa51127..ed60886b 100644
--- a/src/content/dependencies/generateReleaseInfoContributionsLine.js
+++ b/src/content/dependencies/generateReleaseInfoContributionsLine.js
@@ -20,7 +20,7 @@ export default {
     stringKey: {type: 'string'},
 
     showContribution: {type: 'boolean', default: true},
-    showIcons: {type: 'boolean', default: true},
+    showExternalLinks: {type: 'boolean', default: true},
     showChronology: {type: 'boolean', default: true},
   },
 
@@ -34,10 +34,9 @@ export default {
         language.formatConjunctionList(
           relations.contributionLinks.map(link =>
             link.slots({
-              showIcons: slots.showIcons,
               showContribution: slots.showContribution,
+              showExternalLinks: slots.showExternalLinks,
               showChronology: slots.showChronology,
-              iconMode: 'tooltip',
             }))),
     });
   },
diff --git a/src/content/dependencies/generateTrackList.js b/src/content/dependencies/generateTrackList.js
index bc3b6035..7c3b11c1 100644
--- a/src/content/dependencies/generateTrackList.js
+++ b/src/content/dependencies/generateTrackList.js
@@ -17,12 +17,7 @@ export default {
             .map(contrib => relation('linkContribution', contrib))),
   }),
 
-  slots: {
-    showContribution: {type: 'boolean', default: false},
-    showIcons: {type: 'boolean', default: false},
-  },
-
-  generate: (relations, slots, {html, language}) =>
+  generate: (relations, {html, language}) =>
     html.tag('ul',
       {[html.onlyIfContent]: true},
 
@@ -42,12 +37,7 @@ export default {
                       html.metatag('chunkwrap', {split: ','},
                         language.$(itemCapsule, 'withArtists.by', {
                           artists:
-                            language.formatConjunctionList(
-                              contributionLinks.map(link =>
-                                link.slots({
-                                  showContribution: slots.showContribution,
-                                  showIcons: slots.showIcons,
-                                }))),
+                            language.formatConjunctionList(contributionLinks),
                         })));
                 }
 
diff --git a/src/content/dependencies/linkContribution.js b/src/content/dependencies/linkContribution.js
index 4e1c8977..67a50e5b 100644
--- a/src/content/dependencies/linkContribution.js
+++ b/src/content/dependencies/linkContribution.js
@@ -1,148 +1,48 @@
-import {empty, stitchArrays} from '#sugar';
-
 export default {
   contentDependencies: [
+    'generateContributionTooltip',
     'generateTextWithTooltip',
-    'generateTooltip',
     'linkArtist',
-    'linkAnythingMan',
-    'linkExternalAsIcon',
   ],
 
   extraDependencies: ['html', 'language'],
 
-  relations(relation, contribution) {
-    const relations = {};
-
-    relations.artistLink =
-      relation('linkArtist', contribution.artist);
-
-    relations.textWithTooltip =
-      relation('generateTextWithTooltip');
-
-    relations.tooltip =
-      relation('generateTooltip');
-
-    let previous = contribution;
-    while (previous && previous.thing === contribution.thing) {
-      previous = previous.previousBySameArtist;
-    }
-
-    let next = contribution;
-    while (next && next.thing === contribution.thing) {
-      next = next.nextBySameArtist;
-    }
-
-    if (previous) {
-      relations.previousLink =
-        relation('linkAnythingMan', previous.thing);
-    }
-
-    if (next) {
-      relations.nextLink =
-        relation('linkAnythingMan', next.thing);
-    }
+  relations: (relation, contribution) => ({
+    artistLink:
+      relation('linkArtist', contribution.artist),
 
-    if (!empty(contribution.artist.urls)) {
-      relations.artistIcons =
-        contribution.artist.urls
-          .map(url => relation('linkExternalAsIcon', url));
-    }
+    textWithTooltip:
+      relation('generateTextWithTooltip'),
 
-    return relations;
-  },
+    tooltip:
+      relation('generateContributionTooltip', contribution),
+  }),
 
-  data(contribution) {
-    return {
-      contribution: contribution.annotation,
-      urls: contribution.artist.urls,
-    };
-  },
+  data: (contribution) => ({
+    contribution: contribution.annotation,
+    urls: contribution.artist.urls,
+  }),
 
   slots: {
     showContribution: {type: 'boolean', default: false},
-    showIcons: {type: 'boolean', default: false},
+    showExternalLinks: {type: 'boolean', default: false},
     showChronology: {type: 'boolean', default: false},
-    preventWrapping: {type: 'boolean', default: true},
 
-    iconMode: {
-      validate: v => v.is('inline', 'tooltip'),
-      default: 'inline'
-    },
+    preventWrapping: {type: 'boolean', default: true},
   },
 
-  generate(data, relations, slots, {html, language}) {
-    const capsule = language.encapsulate('misc.artistLink');
-
-    const hasContribution = !!(slots.showContribution && data.contribution);
-    const hasExternalIcons = !!(slots.showIcons && relations.artistIcons);
-
-    const parts = ['misc.artistLink'];
-    const options = {};
-
-    const tooltipContent = [];
-
-    if (hasExternalIcons && slots.iconMode === 'tooltip') {
-      tooltipContent.push(
-        stitchArrays({
-          icon: relations.artistIcons,
-          url: data.urls,
-        }).map(({icon, url}) => {
-            icon.setSlots({
-              context: 'artist',
-            });
+  generate: (data, relations, slots, {html, language}) =>
+    html.tag('span', {class: 'contribution'},
+      {[html.noEdgeWhitespace]: true},
 
-            let platformText =
-              language.formatExternalLink(url, {
-                context: 'artist',
-                style: 'platform',
-              });
+      slots.preventWrapping &&
+        {class: 'nowrap'},
 
-            // This is a pretty ridiculous hack, but we currently
-            // don't have a way of telling formatExternalLink to *not*
-            // use the fallback string, which just formats the URL as
-            // its host/domain... so is technically detectable.
-            if (platformText.toString() === (new URL(url)).host) {
-              platformText =
-                language.$(capsule, 'noExternalLinkPlatformName');
-            }
+      language.encapsulate('misc.artistLink', workingCapsule => {
+        const workingOptions = {};
 
-            const platformSpan =
-              html.tag('span', {class: 'icon-platform'},
-                platformText);
-
-            return [icon, platformSpan];
-          }));
-    }
-
-    if (slots.showChronology) {
-      tooltipContent.push(
-        language.encapsulate(capsule, 'chronology', capsule => [
-          html.tag('span', {class: 'chronology-link'},
-            {[html.onlyIfContent]: true},
-
-            language.$(capsule, 'previous', {
-              [language.onlyIfOptions]: ['thing'],
-
-              thing: relations.previousLink,
-            })),
-
-          html.tag('span', {class: 'chronology-link'},
-            {[html.onlyIfContent]: true},
-
-            language.$(capsule, 'next', {
-              [language.onlyIfOptions]: ['thing'],
-
-              thing: relations.nextLink,
-            })),
-        ]));
-    }
-
-    // TODO: It probably shouldn't be necessary to do an isBlank call here.
-    options.artist =
-      (html.isBlank(tooltipContent)
-        ? relations.artistLink
-        : relations.textWithTooltip.slots({
+        workingOptions.artist =
+          relations.textWithTooltip.slots({
             customInteractionCue: true,
 
             text:
@@ -152,48 +52,17 @@ export default {
 
             tooltip:
               relations.tooltip.slots({
-                attributes:
-                  {class: ['icons', 'icons-tooltip']},
-
-                contentAttributes:
-                  {[html.joinChildren]: ''},
-
-                content:
-                  tooltipContent,
+                showExternalLinks: slots.showExternalLinks,
+                showChronology: slots.showChronology,
               }),
-          }));
-
-    if (hasContribution) {
-      parts.push('withContribution');
-      options.contrib = data.contribution;
-    }
-
-    if (hasExternalIcons && slots.iconMode === 'inline') {
-      parts.push('withExternalLinks');
-      options.links =
-        html.tag('span', {class: ['icons', 'icons-inline']},
-          {[html.noEdgeWhitespace]: true},
-          language.formatUnitList(
-            relations.artistIcons
-              .slice(0, 4)
-              .map(icon => icon.slot('context', 'artist'))));
-    }
+          });
 
-    const contributionPart =
-      language.formatString(...parts, options);
+        if (slots.showContribution && data.contribution) {
+          workingCapsule += '.withContribution';
+          workingOptions.contrib =
+            data.contribution;
+        }
 
-    if (!hasContribution && !hasExternalIcons) {
-      return contributionPart;
-    }
-
-    return (
-      html.tag('span', {class: 'contribution'},
-        {[html.noEdgeWhitespace]: true},
-
-        parts.length > 1 &&
-        slots.preventWrapping &&
-          {class: 'nowrap'},
-
-        contributionPart));
-  },
+        return language.formatString(workingCapsule, workingOptions);
+      })),
 };
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index cb3b5e0c..29aba553 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -476,12 +476,6 @@ misc:
     # Contribution to a track, artwork, or other thing.
     withContribution: "{ARTIST} ({CONTRIB})"
 
-    # External links to visit the artist's own websites or profiles.
-    withExternalLinks: "{ARTIST} ({LINKS})"
-
-    # Combination of above.
-    withContribution.withExternalLinks: "{ARTIST} ({CONTRIB}) ({LINKS})"
-
     # Displayed in an artist's tooltip, if one of their URLs
     # isn't a specially detected web platform.
     noExternalLinkPlatformName: "Other"