content, client, css: generateScopedTrackChronologyLinks: dynamics

5 files changed, 107 insertions, 16 deletions

diff --git a/src/content/dependencies/generateScopedTrackChronologyLinks.js b/src/content/dependencies/generateScopedTrackChronologyLinks.js
index 6fc3f6eb..fb43203b 100644
--- a/src/content/dependencies/generateScopedTrackChronologyLinks.js
+++ b/src/content/dependencies/generateScopedTrackChronologyLinks.js
@@ -10,6 +10,8 @@ export default {
     'linkTrack',
   ],
 
+  extraDependencies: ['html', 'language'],
+
   relations(relation, album, track) {
     const albumFilter =
       (album
@@ -71,17 +73,39 @@ export default {
     };
   },
 
-  generate: (relations) =>
-    relations.chronologyLinks.slots({
-      chronologyInfoSets: [
-        {
-          headingString: 'misc.chronology.heading.track',
-          contributions: relations.artistChronologyContributions,
-        },
-        {
-          headingString: 'misc.chronology.heading.coverArt',
-          contributions: relations.coverArtistChronologyContributions,
-        },
-      ],
-    }),
+  slots: {
+    scope: {
+      validate: v => v.is('wiki', 'album'),
+    },
+
+    visible: {type: 'boolean'},
+  },
+
+  generate: (relations, slots, {html, language}) =>
+    html.tag('div', {class: 'scoped-chronology'},
+      {class: 'scope-' + slots.scope},
+      slots.visible && {style: 'display: block'},
+
+      [
+        html.tag('p',
+          language.$('trackPage.nav.chronology.scope', {
+            scope:
+              html.tag('a', {class: 'scoped-chronology-switcher'},
+                {href: '#'},
+                language.$('trackPage.nav.chronology.scope', slots.scope)),
+          })),
+
+        relations.chronologyLinks.slots({
+          chronologyInfoSets: [
+            {
+              headingString: 'misc.chronology.heading.track',
+              contributions: relations.artistChronologyContributions,
+            },
+            {
+              headingString: 'misc.chronology.heading.coverArt',
+              contributions: relations.coverArtistChronologyContributions,
+            },
+          ],
+        }),
+      ]),
 };
diff --git a/src/content/dependencies/generateTrackChronologyLinks.js b/src/content/dependencies/generateTrackChronologyLinks.js
index ba4428a5..33911c79 100644
--- a/src/content/dependencies/generateTrackChronologyLinks.js
+++ b/src/content/dependencies/generateTrackChronologyLinks.js
@@ -12,7 +12,14 @@ export default {
 
   generate: (relations, {html}) =>
     html.tags([
-      relations.wikiChronologyLinks,
-      relations.albumChronologyLinks,
+      relations.wikiChronologyLinks.slots({
+        scope: 'wiki',
+        visible: true,
+      }),
+
+      relations.albumChronologyLinks.slots({
+        scope: 'album',
+        visible: false,
+      }),
     ]),
 };
diff --git a/src/static/css/site.css b/src/static/css/site.css
index cdd0fb0e..622c3ac1 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -155,6 +155,7 @@ body::before {
 .nav-bottom-row {
   grid-area: bottom-row;
   align-self: start;
+  margin-top: 0.25em;
 }
 
 .sidebar-column {
@@ -505,6 +506,20 @@ a:not([href]):hover {
   white-space: nowrap;
 }
 
+#header .scoped-chronology {
+  display: none;
+}
+
+#header .scoped-chronology p {
+  margin-top: 0;
+  margin-bottom: 0.25em;
+}
+
+#header .scoped-chronology-switcher {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+}
+
 #secondary-nav {
   text-align: center;
 }
diff --git a/src/static/js/client.js b/src/static/js/client.js
index 4fadffc4..32fffebe 100644
--- a/src/static/js/client.js
+++ b/src/static/js/client.js
@@ -5,7 +5,7 @@
 // that cannot 8e done at static-site compile time, 8y its fundamentally
 // ephemeral nature.
 
-import {accumulateSum, empty, filterMultipleArrays, stitchArrays}
+import {accumulateSum, atOffset, empty, filterMultipleArrays, stitchArrays}
   from '../shared-util/sugar.js';
 import {fetchWithProgress} from './xhr-util.js';
 
@@ -2950,6 +2950,45 @@ clientSteps.getPageReferences.push(getAdditionalNamesBoxReferences);
 clientSteps.addInternalListeners.push(addAdditionalNamesBoxInternalListeners);
 clientSteps.addPageListeners.push(addAdditionalNamesBoxListeners);
 
+// Scoped chronology links --------------------------------
+
+const scopedChronologyLinksInfo = initInfo('scopedChronologyLinksInfo', {
+  containers: null,
+  switchers: null,
+});
+
+function getScopedChronologyLinksReferences() {
+  const info = scopedChronologyLinksInfo;
+
+  info.containers =
+    Array.from(document.querySelectorAll('.scoped-chronology'));
+
+  info.switchers =
+    info.containers
+      .map(container => container.querySelector('.scoped-chronology-switcher'));
+}
+
+function addScopedChronologyLinksPageHandlers() {
+  const info = scopedChronologyLinksInfo;
+
+  for (const [index, switcher] of info.switchers.entries()) {
+    const currentContainer =
+      info.containers[index];
+
+    const nextContainer =
+      atOffset(info.containers, index, +1, {wrap: true});
+
+    switcher.addEventListener('click', domEvent => {
+      domEvent.preventDefault();
+      cssProp(currentContainer, 'display', 'none');
+      cssProp(nextContainer, 'display', 'block');
+    });
+  }
+}
+
+clientSteps.getPageReferences.push(getScopedChronologyLinksReferences);
+clientSteps.addPageListeners.push(addScopedChronologyLinksPageHandlers);
+
 // Group contributions table ------------------------------
 
 // TODO: Update to clientSteps style.
diff --git a/src/strings-default.yaml b/src/strings-default.yaml
index 301fd5f2..33c3c829 100644
--- a/src/strings-default.yaml
+++ b/src/strings-default.yaml
@@ -1841,6 +1841,12 @@ trackPage:
       _: "{TRACK}"
       withNumber: "{NUMBER}. {TRACK}"
 
+    chronology:
+      scope:
+        _: "({SCOPE})"
+        wiki: "Across this wiki..."
+        album: "Within this album..."
+
   socialEmbed:
     heading: "{ALBUM}"
     title: "{TRACK}"