content, css: linkContribution: 'showChronology' basic impl.

3 files changed, 63 insertions, 0 deletions

diff --git a/src/content/dependencies/linkContribution.js b/src/content/dependencies/linkContribution.js
index c17cc45a..aee93d60 100644
--- a/src/content/dependencies/linkContribution.js
+++ b/src/content/dependencies/linkContribution.js
@@ -5,6 +5,7 @@ export default {
     'generateTextWithTooltip',
     'generateTooltip',
     'linkArtist',
+    'linkAnythingMan',
     'linkExternalAsIcon',
   ],
 
@@ -22,6 +23,26 @@ export default {
     relations.tooltip =
       relation('generateTooltip');
 
+    let previous = contribution;
+    while (previous && previous.thing === contribution.thing) {
+      previous = previous.previousBySameArtist;
+    }
+
+    let next = contribution;
+    while (next && next.thing === contribution.thing) {
+      next = next.nextBySameArtist;
+    }
+
+    if (previous) {
+      relations.previousLink =
+        relation('linkAnythingMan', previous.thing);
+    }
+
+    if (next) {
+      relations.nextLink =
+        relation('linkAnythingMan', next.thing);
+    }
+
     if (!empty(contribution.artist.urls)) {
       relations.artistIcons =
         contribution.artist.urls
@@ -41,6 +62,7 @@ export default {
   slots: {
     showContribution: {type: 'boolean', default: false},
     showIcons: {type: 'boolean', default: false},
+    showChronology: {type: 'boolean', default: false},
     preventWrapping: {type: 'boolean', default: true},
 
     iconMode: {
@@ -94,6 +116,29 @@ export default {
           }));
     }
 
+    if (slots.showChronology) {
+      tooltipContent.push(
+        language.encapsulate(capsule, 'chronology', capsule => [
+          html.tag('span', {class: 'chronology-link'},
+            {[html.onlyIfContent]: true},
+
+            language.$(capsule, 'previous', {
+              [language.onlyIfOptions]: ['thing'],
+
+              thing: relations.previousLink,
+            })),
+
+          html.tag('span', {class: 'chronology-link'},
+            {[html.onlyIfContent]: true},
+
+            language.$(capsule, 'next', {
+              [language.onlyIfOptions]: ['thing'],
+
+              thing: relations.nextLink,
+            })),
+        ]));
+    }
+
     // TODO: It probably shouldn't be necessary to do an isBlank call here.
     options.artist =
       (html.isBlank(tooltipContent)
diff --git a/src/static/css/site.css b/src/static/css/site.css
index dc99bcc5..84ed2ea7 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -950,6 +950,20 @@ li:not(:first-child:last-child) .tooltip,
   grid-column-end: icon-end;
 }
 
+.icons-tooltip .chronology-link {
+  grid-column-start: icon-start;
+  grid-column-end: domain-end;
+  padding-left: 5px;
+  padding-right: 3px;
+  font-size: 0.85em;
+}
+
+.icons-tooltip .chronology-link:nth-child(1 of .chronology-link) {
+  border-top: 1px dotted var(--primary-color);
+  margin-top: 2px;
+  padding-top: 2px;
+}
+
 .icons-tooltip .icon-platform {
   display: none;
 
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index 8429c4cd..cb3b5e0c 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -486,6 +486,10 @@ misc:
     # isn't a specially detected web platform.
     noExternalLinkPlatformName: "Other"
 
+    chronology:
+      previous: "← {THING}"
+      next: "→ {THING}"
+
   # chronology:
   #
   #   "Chronology links" are a section that appear in the nav bar for