nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 07:47:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

nav: scroll to prev/next heading using keyboard shortcut #819

Browse source
This commit is contained in:
Sören Weber 2024-03-29 21:09:03 +01:00
parent b88ccc2304
commit 0c4bee9adb
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
3 changed files with 71 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
exampleSite/content/basics/migration/_index.en.md
View file

@ -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.
---

19
static/css/theme.css
View file

@ -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;

55
static/js/theme.js
View file

@ -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();