content, css, client: generateTextWithTooltip

3 files changed, 99 insertions, 46 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));
+  },
 };