content: generateTrackInfoPageOtherReleaseTooltip preview

4 files changed, 113 insertions, 8 deletions

diff --git a/src/content/dependencies/generateTrackInfoPageOtherReleaseTooltip.js b/src/content/dependencies/generateTrackInfoPageOtherReleaseTooltip.js
new file mode 100644
index 00000000..92ab52ba
--- /dev/null
+++ b/src/content/dependencies/generateTrackInfoPageOtherReleaseTooltip.js
@@ -0,0 +1,53 @@
+import {compareKebabCase} from '#wiki-data';
+
+export default {
+  relations: (relation, otherTrack, _currentTrack) => ({
+    tooltip:
+      relation('generateTooltip'),
+
+    colorStyle:
+      relation('generateColorStyleAttribute', otherTrack.album.color),
+  }),
+
+  data: (otherTrack, currentTrack) => ({
+    otherDate:
+      otherTrack.date,
+
+    currentDate:
+      currentTrack.date,
+
+    differentName:
+      (compareKebabCase(otherTrack.name, currentTrack.name)
+        ? null
+        : otherTrack.name),
+  }),
+
+  generate: (data, relations, {html, language}) =>
+    language.encapsulate('releaseInfo.alsoReleased.tooltip', capsule =>
+      relations.tooltip.slots({
+        attributes: [
+          {class: 'other-release-tooltip'},
+          relations.colorStyle,
+        ],
+
+        contentAttributes: [
+          {[html.joinChildren]:
+            html.tag('span', {class: 'cute-break'})},
+        ],
+
+        content: [
+          language.$(capsule, 'differentName', {
+            [language.onlyIfOptions]: ['name'],
+
+            name: data.differentName,
+          }),
+
+          data.otherDate && data.currentDate &&
+            language.formatRelativeDate(data.otherDate, data.currentDate, {
+              considerRoundingDays: true,
+              approximate: true,
+              absolute: false,
+            }),
+        ],
+      })),
+};
\ No newline at end of file
diff --git a/src/content/dependencies/generateTrackInfoPageOtherReleasesLine.js b/src/content/dependencies/generateTrackInfoPageOtherReleasesLine.js
index 1793b73f..e2dffea6 100644
--- a/src/content/dependencies/generateTrackInfoPageOtherReleasesLine.js
+++ b/src/content/dependencies/generateTrackInfoPageOtherReleasesLine.js
@@ -16,15 +16,30 @@ export default {
     return query;
   },
 
-  relations: (relation, query, _track) => ({
+  relations: (relation, query, track) => ({
+    textWithTooltip:
+      relation('generateTextWithTooltip'),
+
     singleLink:
       (query.singleSingle
         ? relation('linkTrack', query.singleSingle)
         : null),
 
+    singleTooltip:
+      (query.singleSingle
+        ? relation('generateTrackInfoPageOtherReleaseTooltip',
+            query.singleSingle, track)
+        : null),
+
     trackLinks:
       query.regularReleases
         .map(track => relation('linkTrack', track)),
+
+    trackTooltips:
+      query.regularReleases
+        .map(otherTrack =>
+          relation('generateTrackInfoPageOtherReleaseTooltip',
+            otherTrack, track)),
   }),
 
   data: (query, _track) => ({
@@ -48,12 +63,27 @@ export default {
           language.formatConjunctionList(
             stitchArrays({
               trackLink: relations.trackLinks,
+              trackTooltip: relations.trackTooltips,
               albumName: data.albumNames,
               albumColor: data.albumColors,
-            }).map(({trackLink, albumName, albumColor}) =>
-                trackLink.slots({
-                  content: language.sanitize(albumName),
-                  color: albumColor,
+            }).map(({
+                trackLink,
+                trackTooltip,
+                albumName,
+                albumColor,
+              }) =>
+                relations.textWithTooltip.clone().slots({
+                  customInteractionCue: true,
+
+                  text:
+                    trackLink.slots({
+                      attributes: {class: 'text-with-tooltip-interaction-cue'},
+                      content: language.sanitize(albumName),
+                      color: albumColor,
+                    }),
+
+                  tooltip:
+                    trackTooltip,
                 })));
 
         if (!html.isBlank(albumList)) {
@@ -66,8 +96,17 @@ export default {
           any = true;
           workingCapsule += '.asSingle';
           workingOptions.single =
-            relations.singleLink.slots({
-              content: language.$(capsule, 'single'),
+            relations.textWithTooltip.clone().slots({
+              customInteractionCue: true,
+
+              text:
+                relations.singleLink.slots({
+                  attributes: {class: 'text-with-tooltip-interaction-cue'},
+                  content: language.$(capsule, 'single'),
+                }),
+
+              tooltip:
+                relations.singleTooltip,
             });
         }
 
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 62321f7c..9cfa4417 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -1316,6 +1316,7 @@ label > input[type=checkbox]:not(:checked) + span {
 .commentary-date-tooltip,
 .rerelease-tooltip,
 .first-release-tooltip,
+.other-release-tooltip,
 .content-tooltip {
   padding: 3px 4px 2px 2px;
   left: -10px;
@@ -1427,7 +1428,9 @@ label > input[type=checkbox]:not(:checked) + span {
 }
 
 .contribution-tooltip .tooltip-divider,
-.tooltip-content hr.cute {
+.tooltip-content hr.cute,
+.tooltip-content span.cute-break {
+  display: block;
   grid-column-start: icon-start;
   grid-column-end: platform-end;
   border-top: 1px dotted var(--primary-color);
@@ -1508,6 +1511,13 @@ label > input[type=checkbox]:not(:checked) + span {
   font-size: 0.9em;
 }
 
+.other-release-tooltip .tooltip-content {
+  padding: 3px 4.5px;
+  width: max-content;
+  max-width: 250px;
+  font-size: 0.9em;
+}
+
 .rerelease-tooltip .not-credited-on-first-release {
   opacity: 0.9;
 }
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index 965bf29f..909ae043 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -301,6 +301,9 @@ releaseInfo:
 
     single: "as a single"
 
+    tooltip:
+      differentName: "as {NAME}"
+
   tracksReferenced:
     _: "Tracks that {TRACK} references:"
     sticky: "Tracks that this one references:"