content: generateCommentaryEntry: access date tooltip

3 files changed, 48 insertions, 12 deletions

diff --git a/src/content/dependencies/generateCommentaryEntry.js b/src/content/dependencies/generateCommentaryEntry.js
index 7c4aed80..9d70ec91 100644
--- a/src/content/dependencies/generateCommentaryEntry.js
+++ b/src/content/dependencies/generateCommentaryEntry.js
@@ -3,6 +3,8 @@ import {empty} from '#sugar';
 export default {
   contentDependencies: [
     'generateColorStyleAttribute',
+    'generateTextWithTooltip',
+    'generateTooltip',
     'linkArtist',
     'transformContent',
   ],
@@ -33,10 +35,18 @@ export default {
 
     colorStyle:
       relation('generateColorStyleAttribute'),
+
+    textWithTooltip:
+      relation('generateTextWithTooltip'),
+
+    tooltip:
+      relation('generateTooltip'),
   }),
 
   data: (entry) => ({
     date: entry.date,
+    accessDate: entry.accessDate,
+    accessKind: entry.accessKind,
   }),
 
   slots: {
@@ -52,15 +62,32 @@ export default {
               .slot('color', slots.color),
 
           language.encapsulate(entryCapsule, 'title', titleCapsule => [
-            html.tag('time',
-              {[html.onlyIfContent]: true},
+            relations.textWithTooltip.slots({
+              attributes: {class: 'commentary-date'},
+
+              text:
+                html.tag('time',
+                  {[html.onlyIfContent]: true},
 
-              language.$(titleCapsule, 'date', {
-                [language.onlyIfOptions]: ['date'],
+                  language.$(titleCapsule, 'date', {
+                    [language.onlyIfOptions]: ['date'],
 
-                date:
-                  language.formatDate(data.date),
-              })),
+                    date:
+                      language.formatDate(data.date),
+                  })),
+
+              tooltip:
+                data.accessKind &&
+                  relations.tooltip.slots({
+                    attributes: {class: 'commentary-date-tooltip'},
+
+                    content:
+                      language.$(titleCapsule, 'date', data.accessKind, {
+                        date:
+                          language.formatDate(data.accessDate),
+                      }),
+                  }),
+            }),
 
             language.encapsulate(titleCapsule, workingCapsule => {
               const workingOptions = {};
diff --git a/src/static/css/site.css b/src/static/css/site.css
index 80801c85..266c7b0f 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -844,7 +844,8 @@ a:not([href]):hover {
 }
 
 .text-with-tooltip.datetimestamp .text-with-tooltip-interaction-cue,
-.text-with-tooltip.missing-duration .text-with-tooltip-interaction-cue {
+.text-with-tooltip.missing-duration .text-with-tooltip-interaction-cue,
+.text-with-tooltip.commentary-date .text-with-tooltip-interaction-cue {
   cursor: default;
 }
 
@@ -898,7 +899,8 @@ li:not(:first-child:last-child) .tooltip,
 }
 
 .datetimestamp-tooltip,
-.missing-duration-tooltip {
+.missing-duration-tooltip,
+.commentary-date-tooltip {
   padding: 3px 4px 2px 2px;
   left: -10px;
 }
@@ -1045,7 +1047,8 @@ li:not(:first-child:last-child) .tooltip,
 }
 
 .datetimestamp-tooltip .tooltip-content,
-.missing-duration-tooltip .tooltip-content {
+.missing-duration-tooltip .tooltip-content,
+.commentary-date-tooltip .tooltip-content {
   padding: 5px 6px;
   white-space: nowrap;
   font-size: 0.9em;
@@ -1186,8 +1189,11 @@ ul.image-details li {
   font-style: oblique;
 }
 
-.commentary-entry-heading time {
+.commentary-entry-heading .commentary-date {
   float: right;
+}
+
+.commentary-entry-heading .commentary-date .hoverable {
   padding-left: 0.5ch;
   padding-right: 0.25ch;
   margin-left: 0.75ch;
@@ -1195,7 +1201,8 @@ ul.image-details li {
   transition: border-left-color 0.15s;
 }
 
-.commentary-entry-heading time:hover {
+.commentary-entry-heading .commentary-date .hoverable:hover,
+.commentary-entry-heading .commentary-date .hoverable.has-visible-tooltip {
   border-left-color: white;
 }
 
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index 26107c0b..c685f1d7 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -463,6 +463,8 @@ misc:
           withAnnotation: "({ANNOTATION})"
 
         date: "{DATE}"
+        date.accessed: "accessed {DATE}"
+        date.captured: "captured {DATE}"
 
       seeOriginalRelease: "See {ORIGINAL}!"