content: generateTrackInfoPageOtherReleaseTooltip preview

1 files changed, 53 insertions, 0 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