diff --git a/docs/content/javascripts/keyboard-nav.js b/docs/content/javascripts/keyboard-nav.js new file mode 100644 index 0000000000..dad46ceb76 --- /dev/null +++ b/docs/content/javascripts/keyboard-nav.js @@ -0,0 +1,50 @@ +// left/right arrow keys page through the docs guide +(() => { + // don't hijack arrows while typing in the search box or a form control + function isTypingTarget(el) { + if (!el) { + return false; + } + if (el.isContentEditable) { + return true; + } + var tag = el.tagName; + return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT'; + } + + // one document-level listener survives "instant" navigation (body swapped, no full reload) + // re-query the footer links each keypress so they track the current page + document.addEventListener('keydown', (event) => { + // leave modifier combos alone - e.g. browser back/forward shortcuts + if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) { + return; + } + // don't hijack arrows while the search overlay is open: the user is either + // typing a query or arrowing through the results, which moves focus onto the + // result links (so an activeElement check alone doesn't cover it). `#__search` + // is the theme's search toggle checkbox, checked whenever search is open. + var searchToggle = document.getElementById('__search'); + if (searchToggle && searchToggle.checked) { + return; + } + if (isTypingTarget(document.activeElement)) { + return; + } + + var selector; + if (event.key === 'ArrowLeft') { + selector = 'a.md-footer__link--prev[href]'; + } else if (event.key === 'ArrowRight') { + selector = 'a.md-footer__link--next[href]'; + } else { + return; + } + + var link = document.querySelector(selector); + if (link && link.getAttribute('href')) { + event.preventDefault(); + // click() so "instant" navigation can intercept it + link.click(); + } + }); +})(); diff --git a/zensical.toml b/zensical.toml index c5a56f21fe..e87945ce9c 100644 --- a/zensical.toml +++ b/zensical.toml @@ -127,7 +127,7 @@ nav = [ # The path provided should be relative to the "docs_dir". # # Read more: https://zensical.org/docs/customization/#additional-javascript -#extra_javascript = ["javascripts/extra.js"] +extra_javascript = ["javascripts/keyboard-nav.js"] # ---------------------------------------------------------------------------- # Section for configuring theme options