content, css: generateContentEntryDate: relative date

1 files changed, 88 insertions, 12 deletions

diff --git a/src/content/dependencies/generateContentEntryDate.js b/src/content/dependencies/generateContentEntryDate.js
index ca794314..845cb5ed 100644
--- a/src/content/dependencies/generateContentEntryDate.js
+++ b/src/content/dependencies/generateContentEntryDate.js
@@ -1,3 +1,5 @@
+import {sameDayAs} from '#wiki-data';
+
 export default {
   relations: (relation, _entry) => ({
     textWithTooltip:
@@ -8,19 +10,102 @@ export default {
   }),
 
   data: (entry) => ({
+    isWikiEditorCommentary: entry.isWikiEditorCommentary,
+
     date: entry.date,
     secondDate: entry.secondDate,
     dateKind: entry.dateKind,
 
     accessDate: entry.accessDate,
     accessKind: entry.accessKind,
+
+    sameDayAs:
+      (entry.secondDate
+        ? null
+        : sameDayAs(entry.date, entry.thing)),
+
+    thingDate: entry.thing.date,
+
+    thingType:
+      (entry.thing.isAlbum &&
+       entry.thing.style === 'single'
+        ? 'single'
+
+     : entry.thing.isAlbum ? 'album'
+
+     : entry.thing.isTrack &&
+       entry.thing.date === entry.thing.album.date &&
+       entry.thing.style === 'single'
+        ? 'single'
+
+     : entry.thing.isTrack &&
+       entry.thing.date === entry.thing.album.date
+        ? 'album'
+
+     : entry.thing.isTrack ? 'track'
+
+     : entry.thing.isFlash ? 'flash'
+
+     : null),
   }),
 
   generate(data, relations, {html, language}) {
     const titleCapsule = language.encapsulate('misc.artistCommentary.entry.title');
+    const dateCapsule = language.encapsulate(titleCapsule, 'date');
+    const tooltip = relations.tooltip;
+
+    tooltip.setSlots({
+      attributes: {class: 'commentary-date-tooltip'},
+      contentAttributes: [
+        {[html.joinChildren]: html.tag('span', {class: 'cute-break'})},
+      ],
+
+      content: [
+        data.sameDayAs === 'album' &&
+          language.$(dateCapsule, 'sameDayAsAlbum'),
+
+        data.sameDayAs === 'single' &&
+          language.$(dateCapsule, 'sameDayAsSingle'),
+
+        data.sameDayAs === 'track' &&
+          language.$(dateCapsule, 'sameDayAsTrack'),
+
+        data.sameDayAs === 'flash' &&
+          language.$(dateCapsule, 'sameDayAsFlash'),
+
+        data.sameDayAs === null &&
+        data.date &&
+        data.thingDate &&
+        !data.secondDate &&
+        !data.isWikiEditorCommentary &&
+          html.tags([
+            data.thingType &&
+              html.tag('span', {class: 'relative-to'},
+                language.$(dateCapsule, 'relativeTo', {
+                  thing:
+                    language.$(dateCapsule, 'relativeTo', data.thingType),
+                })),
+
+            html.tag('br'),
+
+            language.formatRelativeDate(data.date, data.thingDate, {
+              considerRoundingDays: true,
+              approximate: true,
+              absolute: false,
+            }),
+          ]),
+
+        data.accessKind &&
+        data.accessDate &&
+          language.$(dateCapsule, data.accessKind, {
+            date:
+              language.formatDate(data.accessDate),
+          }),
+      ],
+    });
 
     const willDisplayTooltip =
-      !!(data.accessKind && data.accessDate);
+      !html.isBlank(tooltip);
 
     const topAttributes =
       {class: 'commentary-date'};
@@ -36,7 +121,7 @@ export default {
             ]
           : topAttributes),
 
-        language.encapsulate(titleCapsule, 'date', workingCapsule => {
+        language.encapsulate(dateCapsule, workingCapsule => {
           const workingOptions = {};
 
           if (!data.date) {
@@ -75,16 +160,7 @@ export default {
         attributes: topAttributes,
         text: time,
 
-        tooltip:
-          relations.tooltip.slots({
-            attributes: {class: 'commentary-date-tooltip'},
-
-            content:
-              language.$(titleCapsule, 'date', data.accessKind, {
-                date:
-                  language.formatDate(data.accessDate),
-              }),
-          }),
+        tooltip: relations.tooltip,
       });
     } else {
       return time;