content, css, test: linkThing: wiki tooltip

6 files changed, 77 insertions, 19 deletions

diff --git a/src/content/dependencies/linkThing.js b/src/content/dependencies/linkThing.js
index 4c38c51d..d1f6a097 100644
--- a/src/content/dependencies/linkThing.js
+++ b/src/content/dependencies/linkThing.js
@@ -1,5 +1,11 @@
 export default {
-  contentDependencies: ['generateColorStyleAttribute', 'linkTemplate'],
+  contentDependencies: [
+    'generateColorStyleAttribute',
+    'generateTextWithTooltip',
+    'generateTooltip',
+    'linkTemplate',
+  ],
+
   extraDependencies: ['html', 'language'],
 
   relations: (relation, _pathKey, thing) => ({
@@ -8,6 +14,12 @@ export default {
 
     colorStyle:
       relation('generateColorStyleAttribute', thing.color ?? null),
+
+    textWithTooltip:
+      relation('generateTextWithTooltip'),
+
+    tooltip:
+      relation('generateTooltip'),
   }),
 
   data: (pathKey, thing) => ({
@@ -37,8 +49,8 @@ export default {
     },
 
     tooltipStyle: {
-      validate: v => v.is('none', 'browser'),
-      default: 'none',
+      validate: v => v.is('none', 'auto', 'browser', 'wiki'),
+      default: 'auto',
     },
 
     color: {
@@ -79,6 +91,18 @@ export default {
         ? data.nameShort
         : data.name);
 
+    const showWikiTooltip =
+      (slots.tooltipStyle === 'auto'
+        ? showShortName
+        : slots.tooltipStyle === 'wiki');
+
+    const wikiTooltip =
+      showWikiTooltip &&
+        relations.tooltip.slots({
+          attributes: {class: 'thing-name-tooltip'},
+          content: data.name,
+        });
+
     if (slots.tooltipStyle === 'browser') {
       attributes.add('title', data.name);
     }
@@ -100,14 +124,19 @@ export default {
       attributes.add(colorStyle);
     }
 
-    return relations.linkTemplate
-      .slots({
-        path: slots.anchor ? [] : path,
-        href: slots.anchor ? '' : null,
-        content,
-        attributes,
-        hash: slots.hash,
-        linkless: slots.linkless,
-      });
+    return relations.textWithTooltip.slots({
+      text:
+        relations.linkTemplate.slots({
+          path: slots.anchor ? [] : path,
+          href: slots.anchor ? '' : null,
+          content,
+          attributes,
+          hash: slots.hash,
+          linkless: slots.linkless,
+        }),
+
+      tooltip:
+        wikiTooltip ?? null,
+    });
   },
 }
diff --git a/src/static/site6.css b/src/static/site6.css
index 4e761963..0e77a6e6 100644
--- a/src/static/site6.css
+++ b/src/static/site6.css
@@ -562,6 +562,11 @@ li:not(:first-child:last-child) .tooltip,
   left: -10px;
 }
 
+.thing-name-tooltip {
+  padding: 3px 4px 2px 2px;
+  left: -6px !important;
+}
+
 .icons-tooltip .tooltip-content {
   padding: 6px 2px 2px 2px;
 
@@ -577,6 +582,12 @@ li:not(:first-child:last-child) .tooltip,
   font-size: 0.9em;
 }
 
+.thing-name-tooltip .tooltip-content {
+  padding: 3px 4.5px;
+  white-space: nowrap;
+  max-width: 120px;
+}
+
 .icons {
   font-style: normal;
   white-space: nowrap;
diff --git a/tap-snapshots/test/snapshot/linkArtist.js.test.cjs b/tap-snapshots/test/snapshot/linkArtist.js.test.cjs
index 6b532aef..8dc209fd 100644
--- a/tap-snapshots/test/snapshot/linkArtist.js.test.cjs
+++ b/tap-snapshots/test/snapshot/linkArtist.js.test.cjs
@@ -10,5 +10,5 @@ exports[`test/snapshot/linkArtist.js > TAP > linkArtist (snapshot) > basic behav
 `
 
 exports[`test/snapshot/linkArtist.js > TAP > linkArtist (snapshot) > prefer short name 1`] = `
-<a href="artist/55gore/">55gore</a>
+<span class="text-with-tooltip"><a href="artist/55gore/">55gore</a><span class="tooltip thing-name-tooltip"><span class="tooltip-content">ICCTTCMDMIROTMCWMWFTPFTDDOTARHPOESWGBTWEATFCWSEBTSSFOFG</span></span></span>
 `
diff --git a/tap-snapshots/test/snapshot/linkThing.js.test.cjs b/tap-snapshots/test/snapshot/linkThing.js.test.cjs
index 114116ee..ae46443e 100644
--- a/tap-snapshots/test/snapshot/linkThing.js.test.cjs
+++ b/tap-snapshots/test/snapshot/linkThing.js.test.cjs
@@ -20,7 +20,7 @@ exports[`test/snapshot/linkThing.js > TAP > linkThing (snapshot) > nested links
 `
 
 exports[`test/snapshot/linkThing.js > TAP > linkThing (snapshot) > preferShortName 1`] = `
-<a href="tag/five-oceanfalls/">Five</a>
+<span class="text-with-tooltip"><a href="tag/five-oceanfalls/">Five</a><span class="tooltip thing-name-tooltip"><span class="tooltip-content">Five (Oceanfalls)</span></span></span>
 `
 
 exports[`test/snapshot/linkThing.js > TAP > linkThing (snapshot) > tags in name escaped 1`] = `
@@ -34,5 +34,11 @@ exports[`test/snapshot/linkThing.js > TAP > linkThing (snapshot) > tooltip & con
 <a href="album/beyond-canon/">Beyond Canon</a>
 <a title="Beyond Canon" href="album/beyond-canon/">Beyond Canon</a>
 <a title="Beyond Canon" href="album/beyond-canon/">Next</a>
+<a href="album/beyond-canon/">Beyond Canon</a>
+<span class="text-with-tooltip"><a href="album/beyond-canon/">BC</a><span class="tooltip thing-name-tooltip"><span class="tooltip-content">Beyond Canon</span></span></span>
+<span class="text-with-tooltip"><a href="album/beyond-canon/">Next</a><span class="tooltip thing-name-tooltip"><span class="tooltip-content">Beyond Canon</span></span></span>
+<a href="album/beyond-canon/">Next</a>
+<span class="text-with-tooltip"><a href="album/beyond-canon/">Beyond Canon</a><span class="tooltip thing-name-tooltip"><span class="tooltip-content">Beyond Canon</span></span></span>
+<span class="text-with-tooltip"><a href="album/beyond-canon/">Next</a><span class="tooltip thing-name-tooltip"><span class="tooltip-content">Beyond Canon</span></span></span>
 <a href="album/beyond-canon/">Banana</a>
 `
diff --git a/test/snapshot/generateTrackCoverArtwork.js b/test/snapshot/generateTrackCoverArtwork.js
index 1e651eb1..51eba1ff 100644
--- a/test/snapshot/generateTrackCoverArtwork.js
+++ b/test/snapshot/generateTrackCoverArtwork.js
@@ -1,5 +1,6 @@
 import t from 'tap';
 import {testContentFunctions} from '#test-lib';
+import {showAggregate} from '#sugar';
 
 testContentFunctions(t, 'generateTrackCoverArtwork (snapshot)', async (t, evaluate) => {
   await evaluate.load({
@@ -35,11 +36,15 @@ testContentFunctions(t, 'generateTrackCoverArtwork (snapshot)', async (t, evalua
     album,
   };
 
-  evaluate.snapshot('display: primary - unique art', {
-    name: 'generateTrackCoverArtwork',
-    args: [track1],
-    slots: {mode: 'primary'},
-  });
+  try {
+    evaluate.snapshot('display: primary - unique art', {
+      name: 'generateTrackCoverArtwork',
+      args: [track1],
+      slots: {mode: 'primary'},
+    });
+  } catch (error) {
+    showAggregate(error);
+  }
 
   evaluate.snapshot('display: thumbnail - unique art', {
     name: 'generateTrackCoverArtwork',
diff --git a/test/snapshot/linkThing.js b/test/snapshot/linkThing.js
index 5aaf99ca..d7d28a55 100644
--- a/test/snapshot/linkThing.js
+++ b/test/snapshot/linkThing.js
@@ -32,11 +32,18 @@ testContentFunctions(t, 'linkThing (snapshot)', async (t, evaluate) => {
     args: ['localized.album', {
       directory: 'beyond-canon',
       name: 'Beyond Canon',
+      nameShort: 'BC',
     }],
     multiple: [
       {slots: {tooltipStyle: 'none'}},
       {slots: {tooltipStyle: 'browser'}},
       {slots: {tooltipStyle: 'browser', content: 'Next'}},
+      {slots: {tooltipStyle: 'auto'}},
+      {slots: {tooltipStyle: 'auto', preferShortName: true}},
+      {slots: {tooltipStyle: 'auto', preferShortName: true, content: 'Next'}},
+      {slots: {tooltipStyle: 'auto', content: 'Next'}},
+      {slots: {tooltipStyle: 'wiki'}},
+      {slots: {tooltipStyle: 'wiki', content: 'Next'}},
       {slots: {content: 'Banana'}},
     ],
   });