From 0c4bee9adb6defe4fc8d66520853859571290c7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Fri, 29 Mar 2024 21:09:03 +0100
Subject: [PATCH] nav: scroll to prev/next heading using keyboard shortcut #819

---
 .../content/basics/migration/_index.en.md     |  2 +
 static/css/theme.css                          | 19 ++++++-
 static/js/theme.js                            | 55 ++++++++++++++++++-
 3 files changed, 71 insertions(+), 5 deletions(-)

diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md
index d9491c7c18..a1f0a82043 100644
--- a/exampleSite/content/basics/migration/_index.en.md
+++ b/exampleSite/content/basics/migration/_index.en.md
@@ -20,6 +20,8 @@ This document shows you what's new in the latest release and flags it with one o
 
 ## 5.27.0.beta (XXXX-XX-XX) {#5270}
 
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} You now can scroll forward and backward thru all headings of a page by using `ALT + 🡑` and `ALT + 🡓`. This also works for the `PRINT` output format
+
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The breadcrumbs used in the topbar, search results and the taxonomy term lists are now using the pages frontmatter `linktitle` instead of `title` if set.
 
 ---
diff --git a/static/css/theme.css b/static/css/theme.css
index e0e8bcbcff..d9dc64ad3c 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -485,16 +485,16 @@ body.main-width-max:not(.print) #R-body .narrow .flex-block-wrapper {
 }
 
 body:not(.print) #R-body-inner.narrow {
-    padding: 2rem 9.75rem;
+    padding: 0 9.75rem 2rem 9.75rem;
 }
 @media screen and (max-width: 59.999rem) {
     body:not(.print) #R-body-inner.narrow {
-        padding: 1rem 6.5rem;
+        padding: 0 6.5rem 1rem 6.5rem;
     }
 }
 @media screen and (max-width: 47.999rem) {
     body:not(.print) #R-body-inner.narrow {
-        padding: .375rem 3.25rem;
+        padding: 0 3.25rem .375rem 3.25rem;
     }
 }
 
@@ -504,6 +504,19 @@ body:not(.print) #R-body-inner.narrow {
     margin-top: 0;
     text-align: center;
 }
+body:not(.print) #R-body-inner.narrow div.article-subheading{
+    margin-top: 2rem;
+}
+@media screen and (max-width: 59.999rem) {
+    body:not(.print) #R-body-inner.narrow div.article-subheading{
+        margin-top: 1rem;
+    }
+}
+@media screen and (max-width: 47.999rem) {
+    body:not(.print) #R-body-inner.narrow div.article-subheading{
+        margin-top: .375rem;
+    }
+}
 
 body:not(.print) #R-body-inner.narrow p {
     font-size: 1.2rem;
diff --git a/static/js/theme.js b/static/js/theme.js
index 5ac91acc08..775842fe8f 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -703,7 +703,57 @@ function initChroma( update ){
     link.setAttribute( 'href', new_path );
 }
 
-function initArrowNav(){
+function initArrowVerticalNav(){
+    var topMain = 0;
+    if( !isPrint ){
+        topMain = document.querySelector("main").getClientRects()[0].top;
+    }
+
+    document.addEventListener('keydown', function(event){
+        var elems = Array.from( document.querySelectorAll( `main :not(.include.hide-first-heading) > :where(
+                .article-subheading,
+                :not(.article-subheading) + h1:not(.a11y-only),
+                h1:not(.a11y-only):first-child,
+                h2, h3, h4, h5, h6
+            ),
+            main .include.hide-first-heading > :where( h1, h2, h3, h4, h5, h6 ) ~ :where( h1, h2, h3, h4, h5, h6 )
+        ` ));
+        if( !event.shiftKey && !event.ctrlKey && event.altKey && !event.metaKey ){
+            if( event.which == 38 ){ // up
+                var target = isPrint ? document.querySelector( '#R-body' ) : document.querySelector( '.flex-block-wrapper' );
+                elems.some( function( elem, i ){
+                    var top = elem.getBoundingClientRect().top;
+                    var topBoundary = top - topMain;
+                    if( topBoundary > -1 ){
+                        target.scrollIntoView();
+                        return true;
+                    }
+                    target = elem
+                })
+            }
+            else if( event.which == 40 ){ // down
+                elems.some( function( elem, i ){
+                    var top = elem.getBoundingClientRect().top;
+                    var topBoundary = top - topMain;
+                    if( topBoundary > -1 && topBoundary < 1 ){
+                        if( i+1 < elems.length ){
+                            var target = elems[ i+1 ];
+                            target.scrollIntoView();
+                        }
+                        return true;
+                    }
+                    if( topBoundary >= 1 ){
+                        var target = elem;
+                        target.scrollIntoView();
+                        return true;
+                    }
+                })
+            }
+        }
+    });
+}
+
+function initArrowHorizontalNav(){
     if( isPrint ){
         return;
     }
@@ -1546,7 +1596,8 @@ if( window.themeUseOpenapi ){
 }
 
 ready( function(){
-    initArrowNav();
+    initArrowVerticalNav();
+    initArrowHorizontalNav();
     initMermaid();
     initOpenapi();
     initMenuScrollbar();