content, css, client: generateTextWithTooltip

7 files changed, 168 insertions, 119 deletions

diff --git a/src/content/dependencies/generateDatetimestampTemplate.js b/src/content/dependencies/generateDatetimestampTemplate.js
index 9b1d7aa8..d9ed036a 100644
--- a/src/content/dependencies/generateDatetimestampTemplate.js
+++ b/src/content/dependencies/generateDatetimestampTemplate.js
@@ -1,6 +1,12 @@
 export default {
+  contentDependencies: ['generateTextWithTooltip'],
   extraDependencies: ['html'],
 
+  relations: (relation) => ({
+    textWithTooltip:
+      relation('generateTextWithTooltip'),
+  }),
+
   slots: {
     mainContent: {
       type: 'html',
@@ -15,20 +21,18 @@ export default {
     datetime: {type: 'string'},
   },
 
-  generate: (slots, {html}) =>
-    html.tag('span', {class: 'datetimestamp'},
-      {[html.joinChildren]: ''},
-
-      !html.isBlank(slots.tooltip) &&
-        {class: 'has-tooltip'},
+  generate: (relations, slots, {html}) =>
+    relations.textWithTooltip.slots({
+      attributes: {class: 'datetimestamp'},
 
-      [
+      text:
         html.tag('time',
           {datetime: slots.datetime},
           slots.mainContent),
 
+      tooltip:
         slots.tooltip?.slots({
           attributes: [{class: 'datetimestamp-tooltip'}],
         }),
-      ]),
+    }),
 };
diff --git a/src/content/dependencies/generateTextWithTooltip.js b/src/content/dependencies/generateTextWithTooltip.js
new file mode 100644
index 00000000..518e8782
--- /dev/null
+++ b/src/content/dependencies/generateTextWithTooltip.js
@@ -0,0 +1,47 @@
+export default {
+  extraDependencies: ['html'],
+
+  slots: {
+    attributes: {
+      type: 'attributes',
+      mutable: false,
+    },
+
+    text: {
+      type: 'html',
+      mutable: false,
+    },
+
+    tooltip: {
+      type: 'html',
+      mutable: false,
+    },
+  },
+
+  generate(slots, {html}) {
+    const hasTooltip =
+      !html.isBlank(slots.tooltip);
+
+    if (slots.attributes.blank && !hasTooltip) {
+      return slots.text;
+    }
+
+    let {attributes} = slots;
+
+    if (hasTooltip) {
+      attributes = attributes.clone();
+      attributes.add({
+        [html.joinChildren]: '',
+        [html.noEdgeWhitespace]: true,
+        class: 'text-with-tooltip',
+      });
+    }
+
+    const content =
+      (hasTooltip
+        ? [slots.text, slots.tooltip]
+        : slots.text);
+
+    return html.tag('span', attributes, content);
+  },
+};
diff --git a/src/content/dependencies/linkContribution.js b/src/content/dependencies/linkContribution.js
index f3d6e4f2..0b0884ef 100644
--- a/src/content/dependencies/linkContribution.js
+++ b/src/content/dependencies/linkContribution.js
@@ -2,6 +2,7 @@ import {empty} from '#sugar';
 
 export default {
   contentDependencies: [
+    'generateTextWithTooltip',
     'generateTooltip',
     'linkArtist',
     'linkExternalAsIcon',
@@ -15,6 +16,9 @@ export default {
     relations.artistLink =
       relation('linkArtist', contribution.who);
 
+    relations.textWithTooltip =
+      relation('generateTextWithTooltip');
+
     relations.tooltip =
       relation('generateTooltip');
 
@@ -49,7 +53,30 @@ export default {
     const hasExternalIcons = !!(slots.showIcons && relations.artistIcons);
 
     const parts = ['misc.artistLink'];
-    const options = {artist: relations.artistLink};
+    const options = {};
+
+    options.artist =
+      (hasExternalIcons && slots.iconMode === 'tooltip'
+        ? relations.textWithTooltip.slots({
+            text: relations.artistLink,
+            tooltip:
+              relations.tooltip.slots({
+                attributes:
+                  {class: ['icons', 'icons-tooltip']},
+
+                contentAttributes:
+                  {[html.joinChildren]: ''},
+
+                content:
+                  relations.artistIcons
+                    .map(icon =>
+                      icon.slots({
+                        context: 'artist',
+                        withText: true,
+                      })),
+              }),
+          })
+        : relations.artistLink);
 
     if (hasContribution) {
       parts.push('withContribution');
@@ -67,46 +94,21 @@ export default {
               .map(icon => icon.slot('context', 'artist'))));
     }
 
-    let content = language.formatString(...parts, options);
-
-    if (hasExternalIcons && slots.iconMode === 'tooltip') {
-      content = [
-        content,
-        relations.tooltip.slots({
-          attributes:
-            {class: ['icons', 'icons-tooltip']},
-
-          contentAttributes:
-            {[html.joinChildren]: ''},
+    const contributionPart =
+      language.formatString(...parts, options);
 
-          content:
-            relations.artistIcons
-              .map(icon =>
-                icon.slots({
-                  context: 'artist',
-                  withText: true,
-                })),
-        }),
-      ];
+    if (!hasContribution && !hasExternalIcons) {
+      return contributionPart;
     }
 
-    if (hasContribution || hasExternalIcons) {
-      content =
-        html.tag('span', {class: 'contribution'},
-          {[html.noEdgeWhitespace]: true},
-          {[html.joinChildren]: ''},
+    return (
+      html.tag('span', {class: 'contribution'},
+        {[html.noEdgeWhitespace]: true},
 
-          hasExternalIcons &&
-          slots.iconMode === 'tooltip' &&
-            {class: 'has-tooltip'},
+        parts.length > 1 &&
+        slots.preventWrapping &&
+          {class: 'nowrap'},
 
-          parts.length > 1 &&
-          slots.preventWrapping &&
-            {class: 'nowrap'},
-
-          content);
-    }
-
-    return content;
-  }
+        contributionPart));
+  },
 };
diff --git a/src/static/client3.js b/src/static/client3.js
index 51b1e7d7..77e7e92e 100644
--- a/src/static/client3.js
+++ b/src/static/client3.js
@@ -2086,28 +2086,28 @@ for (const info of groupContributionsTableInfo) {
   });
 }
 
-// Artist link icon tooltips ------------------------------
+// Generic links with tooltips ----------------------------
 
-const externalIconTooltipInfo = initInfo('externalIconTooltipInfo', {
+const textWithTooltipInfo = initInfo('textWithTooltipInfo', {
   hoverables: null,
   tooltips: null,
 });
 
-function getExternalIconTooltipReferences() {
-  const info = externalIconTooltipInfo;
+function getTextWithTooltipReferences() {
+  const info = textWithTooltipInfo;
 
   const spans =
-    Array.from(document.querySelectorAll('span.contribution.has-tooltip'));
+    Array.from(document.querySelectorAll('.text-with-tooltip'));
 
   info.hoverables =
-    spans.map(span => span.querySelector('a'));
+    spans.map(span => span.children[0]);
 
   info.tooltips =
-    spans.map(span => span.querySelector('span.icons-tooltip'));
+    spans.map(span => span.children[1]);
 }
 
-function addExternalIconTooltipPageListeners() {
-  const info = externalIconTooltipInfo;
+function addTextWithTooltipPageListeners() {
+  const info = textWithTooltipInfo;
 
   for (const {hoverable, tooltip} of stitchArrays({
     hoverable: info.hoverables,
@@ -2118,8 +2118,8 @@ function addExternalIconTooltipPageListeners() {
   }
 }
 
-clientSteps.getPageReferences.push(getExternalIconTooltipReferences);
-clientSteps.addPageListeners.push(addExternalIconTooltipPageListeners);
+clientSteps.getPageReferences.push(getTextWithTooltipReferences);
+clientSteps.addPageListeners.push(addTextWithTooltipPageListeners);
 
 // Datetimestamp tooltips ---------------------------------
 
diff --git a/src/static/site6.css b/src/static/site6.css
index baa2efdf..5f4ed7ad 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -503,26 +503,22 @@ a:not([href]):hover {
   display: inline-block;
 }
 
-.contribution.has-tooltip,
-.datetimestamp.has-tooltip {
+.text-with-tooltip {
   position: relative;
 }
 
-.contribution.has-tooltip > a,
-.datetimestamp.has-tooltip > time {
+.text-with-tooltip > :first-child {
   text-decoration: underline;
   text-decoration-style: dotted;
 }
 
-.datetimestamp.has-tooltip > time {
-  cursor: default;
+.text-with-tooltip > :first-child:hover,
+.text-with-tooltip > :first-child.has-visible-tooltip {
+  text-decoration-style: wavy !important;
 }
 
-.contribution.has-tooltip > a:hover,
-.contribution.has-tooltip > a.has-visible-tooltip,
-.datetimestamp.has-tooltip > time:hover,
-.datetimestamp.has-tooltip > time.has-visible-tooltip {
-  text-decoration-style: wavy !important;
+.text-with-tooltip.datetimestamp > :first-child {
+  cursor: default;
 }
 
 .tooltip {
diff --git a/tap-snapshots/test/snapshot/generateAlbumReleaseInfo.js.test.cjs b/tap-snapshots/test/snapshot/generateAlbumReleaseInfo.js.test.cjs
index 2874ac16..58f157ef 100644
--- a/tap-snapshots/test/snapshot/generateAlbumReleaseInfo.js.test.cjs
+++ b/tap-snapshots/test/snapshot/generateAlbumReleaseInfo.js.test.cjs
@@ -7,10 +7,10 @@
 'use strict'
 exports[`test/snapshot/generateAlbumReleaseInfo.js > TAP > generateAlbumReleaseInfo (snapshot) > basic behavior 1`] = `
 <p>
-    By <span class="contribution nowrap"><a href="artist/toby-fox/">Toby Fox</a> (music probably)</span> and <span class="contribution has-tooltip nowrap"><a href="artist/tensei/">Tensei</a> (hot jams)<span class="icons tooltip icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://tenseimusic.bandcamp.com/">
-                    <svg><use href="static/icons.svg#icon-bandcamp"></use></svg>
-                    <span class="icon-text">tenseimusic</span>
-                </a></span></span></span>.
+    By <span class="contribution nowrap"><a href="artist/toby-fox/">Toby Fox</a> (music probably)</span> and <span class="contribution nowrap"><span class="text-with-tooltip"><a href="artist/tensei/">Tensei</a><span class="tooltip icons icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://tenseimusic.bandcamp.com/">
+                        <svg><use href="static/icons.svg#icon-bandcamp"></use></svg>
+                        <span class="icon-text">tenseimusic</span>
+                    </a></span></span></span> (hot jams)</span>.
     <br>
     Cover art by <a href="artist/hb/">Hanni Brosh</a>.
     <br>
diff --git a/tap-snapshots/test/snapshot/linkContribution.js.test.cjs b/tap-snapshots/test/snapshot/linkContribution.js.test.cjs
index cc3e8ff9..4a1051f9 100644
--- a/tap-snapshots/test/snapshot/linkContribution.js.test.cjs
+++ b/tap-snapshots/test/snapshot/linkContribution.js.test.cjs
@@ -30,31 +30,31 @@ exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) >
 `
 
 exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > loads of links (tooltip) 1`] = `
-<span class="contribution has-tooltip"><a href="artist/lorem-ipsum-lover/">Lorem Ipsum Lover</a><span class="icons tooltip icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://loremipsum.io">
-                <svg><use href="static/icons.svg#icon-globe"></use></svg>
-                <span class="icon-text">loremipsum.io</span>
-            </a><a class="icon has-text" href="https://loremipsum.io/generator/">
-                <svg><use href="static/icons.svg#icon-globe"></use></svg>
-                <span class="icon-text">loremipsum.io</span>
-            </a><a class="icon has-text" href="https://loremipsum.io/#meaning">
-                <svg><use href="static/icons.svg#icon-globe"></use></svg>
-                <span class="icon-text">loremipsum.io</span>
-            </a><a class="icon has-text" href="https://loremipsum.io/#usage-and-examples">
-                <svg><use href="static/icons.svg#icon-globe"></use></svg>
-                <span class="icon-text">loremipsum.io</span>
-            </a><a class="icon has-text" href="https://loremipsum.io/#controversy">
-                <svg><use href="static/icons.svg#icon-globe"></use></svg>
-                <span class="icon-text">loremipsum.io</span>
-            </a><a class="icon has-text" href="https://loremipsum.io/#when-to-use-lorem-ipsum">
-                <svg><use href="static/icons.svg#icon-globe"></use></svg>
-                <span class="icon-text">loremipsum.io</span>
-            </a><a class="icon has-text" href="https://loremipsum.io/#lorem-ipsum-all-the-things">
-                <svg><use href="static/icons.svg#icon-globe"></use></svg>
-                <span class="icon-text">loremipsum.io</span>
-            </a><a class="icon has-text" href="https://loremipsum.io/#original-source">
-                <svg><use href="static/icons.svg#icon-globe"></use></svg>
-                <span class="icon-text">loremipsum.io</span>
-            </a></span></span></span>
+<span class="contribution"><span class="text-with-tooltip"><a href="artist/lorem-ipsum-lover/">Lorem Ipsum Lover</a><span class="tooltip icons icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://loremipsum.io">
+                    <svg><use href="static/icons.svg#icon-globe"></use></svg>
+                    <span class="icon-text">loremipsum.io</span>
+                </a><a class="icon has-text" href="https://loremipsum.io/generator/">
+                    <svg><use href="static/icons.svg#icon-globe"></use></svg>
+                    <span class="icon-text">loremipsum.io</span>
+                </a><a class="icon has-text" href="https://loremipsum.io/#meaning">
+                    <svg><use href="static/icons.svg#icon-globe"></use></svg>
+                    <span class="icon-text">loremipsum.io</span>
+                </a><a class="icon has-text" href="https://loremipsum.io/#usage-and-examples">
+                    <svg><use href="static/icons.svg#icon-globe"></use></svg>
+                    <span class="icon-text">loremipsum.io</span>
+                </a><a class="icon has-text" href="https://loremipsum.io/#controversy">
+                    <svg><use href="static/icons.svg#icon-globe"></use></svg>
+                    <span class="icon-text">loremipsum.io</span>
+                </a><a class="icon has-text" href="https://loremipsum.io/#when-to-use-lorem-ipsum">
+                    <svg><use href="static/icons.svg#icon-globe"></use></svg>
+                    <span class="icon-text">loremipsum.io</span>
+                </a><a class="icon has-text" href="https://loremipsum.io/#lorem-ipsum-all-the-things">
+                    <svg><use href="static/icons.svg#icon-globe"></use></svg>
+                    <span class="icon-text">loremipsum.io</span>
+                </a><a class="icon has-text" href="https://loremipsum.io/#original-source">
+                    <svg><use href="static/icons.svg#icon-globe"></use></svg>
+                    <span class="icon-text">loremipsum.io</span>
+                </a></span></span></span></span>
 `
 
 exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > no accents 1`] = `
@@ -112,18 +112,18 @@ exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) >
 `
 
 exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > only showIcons (tooltip) 1`] = `
-<span class="contribution has-tooltip"><a href="artist/clark-powell/">Clark Powell</a><span class="icons tooltip icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://soundcloud.com/plazmataz">
-                <svg><use href="static/icons.svg#icon-soundcloud"></use></svg>
-                <span class="icon-text">plazmataz</span>
-            </a></span></span></span>
+<span class="contribution"><span class="text-with-tooltip"><a href="artist/clark-powell/">Clark Powell</a><span class="tooltip icons icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://soundcloud.com/plazmataz">
+                    <svg><use href="static/icons.svg#icon-soundcloud"></use></svg>
+                    <span class="icon-text">plazmataz</span>
+                </a></span></span></span></span>
 <span class="contribution nowrap"><a href="artist/the-big-baddies/">Grounder &amp; Scratch</a> (Snooping)</span>
-<span class="contribution has-tooltip nowrap"><a href="artist/toby-fox/">Toby Fox</a> (Arrangement)<span class="icons tooltip icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://tobyfox.bandcamp.com/">
-                <svg><use href="static/icons.svg#icon-bandcamp"></use></svg>
-                <span class="icon-text">tobyfox</span>
-            </a><a class="icon has-text" href="https://toby.fox/">
-                <svg><use href="static/icons.svg#icon-globe"></use></svg>
-                <span class="icon-text">toby.fox</span>
-            </a></span></span></span>
+<span class="contribution nowrap"><span class="text-with-tooltip"><a href="artist/toby-fox/">Toby Fox</a><span class="tooltip icons icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://tobyfox.bandcamp.com/">
+                    <svg><use href="static/icons.svg#icon-bandcamp"></use></svg>
+                    <span class="icon-text">tobyfox</span>
+                </a><a class="icon has-text" href="https://toby.fox/">
+                    <svg><use href="static/icons.svg#icon-globe"></use></svg>
+                    <span class="icon-text">toby.fox</span>
+                </a></span></span></span> (Arrangement)</span>
 `
 
 exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > showContribution & showIcons (inline) 1`] = `
@@ -148,16 +148,16 @@ exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) >
 `
 
 exports[`test/snapshot/linkContribution.js > TAP > linkContribution (snapshot) > showContribution & showIcons (tooltip) 1`] = `
-<span class="contribution has-tooltip"><a href="artist/clark-powell/">Clark Powell</a><span class="icons tooltip icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://soundcloud.com/plazmataz">
-                <svg><use href="static/icons.svg#icon-soundcloud"></use></svg>
-                <span class="icon-text">plazmataz</span>
-            </a></span></span></span>
+<span class="contribution"><span class="text-with-tooltip"><a href="artist/clark-powell/">Clark Powell</a><span class="tooltip icons icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://soundcloud.com/plazmataz">
+                    <svg><use href="static/icons.svg#icon-soundcloud"></use></svg>
+                    <span class="icon-text">plazmataz</span>
+                </a></span></span></span></span>
 <span class="contribution nowrap"><a href="artist/the-big-baddies/">Grounder &amp; Scratch</a> (Snooping)</span>
-<span class="contribution has-tooltip nowrap"><a href="artist/toby-fox/">Toby Fox</a> (Arrangement)<span class="icons tooltip icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://tobyfox.bandcamp.com/">
-                <svg><use href="static/icons.svg#icon-bandcamp"></use></svg>
-                <span class="icon-text">tobyfox</span>
-            </a><a class="icon has-text" href="https://toby.fox/">
-                <svg><use href="static/icons.svg#icon-globe"></use></svg>
-                <span class="icon-text">toby.fox</span>
-            </a></span></span></span>
+<span class="contribution nowrap"><span class="text-with-tooltip"><a href="artist/toby-fox/">Toby Fox</a><span class="tooltip icons icons-tooltip"><span class="tooltip-content"><a class="icon has-text" href="https://tobyfox.bandcamp.com/">
+                    <svg><use href="static/icons.svg#icon-bandcamp"></use></svg>
+                    <span class="icon-text">tobyfox</span>
+                </a><a class="icon has-text" href="https://toby.fox/">
+                    <svg><use href="static/icons.svg#icon-globe"></use></svg>
+                    <span class="icon-text">toby.fox</span>
+                </a></span></span></span> (Arrangement)</span>
 `