2 files changed, 55 insertions, 1 deletions

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.