mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-27 01:33:04 +00:00
theme: add keyboard shortcuts for all header navigations #268
This commit is contained in:
parent
ae3ad846cc
commit
f1ec2d2417
2 changed files with 96 additions and 26 deletions
|
@ -378,6 +378,11 @@ th {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#body-inner:focus-visible{
|
||||||
|
/* remove focus indicator for programatically set focus */
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
#body h1 + hr {
|
#body h1 + hr {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
margin-top: -1rem;
|
margin-top: -1rem;
|
||||||
|
|
|
@ -345,7 +345,7 @@ function initMenuScrollbar(){
|
||||||
// PSC removed for #242 #243 #244
|
// PSC removed for #242 #243 #244
|
||||||
// psc = new PerfectScrollbar('#body-inner');
|
// psc = new PerfectScrollbar('#body-inner');
|
||||||
psm = new PerfectScrollbar('#content-wrapper');
|
psm = new PerfectScrollbar('#content-wrapper');
|
||||||
pst = new PerfectScrollbar('#TableOfContents');
|
pst = document.querySelector('#TableOfContents') ? new PerfectScrollbar('#TableOfContents') : null;
|
||||||
document.addEventListener('keydown', function(){
|
document.addEventListener('keydown', function(){
|
||||||
// if we facked initial scrolling, we want to
|
// if we facked initial scrolling, we want to
|
||||||
// remove the focus to not leave visual markers on
|
// remove the focus to not leave visual markers on
|
||||||
|
@ -448,34 +448,99 @@ function tocEscapeHandler( event ){
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function sidebarShortcutHandler( event ){
|
||||||
|
if( event.altKey && event.ctrlKey && event.which == 77 /* m */ ){
|
||||||
|
showNav();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function tocShortcutHandler( event ){
|
||||||
|
if( event.altKey && event.ctrlKey && event.which == 84 /* t */ ){
|
||||||
|
showToc();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function editShortcutHandler( event ){
|
||||||
|
if( event.altKey && event.ctrlKey && event.which == 69 /* e */ ){
|
||||||
|
showEdit();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function printShortcutHandler( event ){
|
||||||
|
if( event.altKey && event.ctrlKey && event.which == 80 /* p */ ){
|
||||||
|
showPrint();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showNav(){
|
||||||
|
if( !document.querySelector( '#sidebar-overlay' ) ){
|
||||||
|
// we may not have a flyout
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var b = document.querySelector( 'body' );
|
||||||
|
b.classList.toggle( 'sidebar-flyout' );
|
||||||
|
if( b.classList.contains( 'sidebar-flyout' ) ){
|
||||||
|
b.classList.remove( 'toc-flyout' );
|
||||||
|
document.removeEventListener( 'keydown', tocEscapeHandler );
|
||||||
|
document.addEventListener( 'keydown', sidebarEscapeHandler );
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
document.removeEventListener( 'keydown', sidebarEscapeHandler );
|
||||||
|
document.querySelector( '#body-inner' ).focus();
|
||||||
|
psc && psc.scrollbarY.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showToc(){
|
||||||
|
var t = document.querySelector( '#toc-menu' );
|
||||||
|
if( !t ){
|
||||||
|
// we may not have a toc
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var b = document.querySelector( 'body' );
|
||||||
|
b.classList.toggle( 'toc-flyout' );
|
||||||
|
if( b.classList.contains( 'toc-flyout' ) ){
|
||||||
|
pst && pst.update();
|
||||||
|
document.addEventListener( 'keydown', tocEscapeHandler );
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
document.removeEventListener( 'keydown', tocEscapeHandler );
|
||||||
|
document.querySelector( '#body-inner' ).focus();
|
||||||
|
psc && psc.scrollbarY.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showEdit(){
|
||||||
|
var l = document.querySelector( '#top-github-link a' );
|
||||||
|
if( l ){
|
||||||
|
l.click();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showPrint(){
|
||||||
|
var l = document.querySelector( '#top-print-link a' );
|
||||||
|
if( l ){
|
||||||
|
l.click();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function initToc(){
|
function initToc(){
|
||||||
function showNav(){
|
if( isPrint ){
|
||||||
var b = document.querySelector( 'body' );
|
return;
|
||||||
b.classList.toggle( 'sidebar-flyout' );
|
|
||||||
if( b.classList.contains( 'sidebar-flyout' ) ){
|
|
||||||
b.classList.remove( 'toc-flyout' );
|
|
||||||
document.removeEventListener( 'keydown', tocEscapeHandler );
|
|
||||||
document.addEventListener( 'keydown', sidebarEscapeHandler );
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
document.removeEventListener( 'keydown', sidebarEscapeHandler );
|
|
||||||
document.querySelector( '#body-inner' ).focus();
|
|
||||||
psc && psc.scrollbarY.focus();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
function showToc(){
|
|
||||||
var b = document.querySelector( 'body' );
|
document.addEventListener( 'keydown', editShortcutHandler );
|
||||||
b.classList.toggle( 'toc-flyout' );
|
document.addEventListener( 'keydown', printShortcutHandler );
|
||||||
if( b.classList.contains( 'toc-flyout' ) ){
|
document.addEventListener( 'keydown', sidebarShortcutHandler );
|
||||||
pst && pst.update();
|
document.addEventListener( 'keydown', tocShortcutHandler );
|
||||||
document.addEventListener( 'keydown', tocEscapeHandler );
|
// avoid keyboard navigation for input fields
|
||||||
|
jQuery(formelements).keydown(function (e) {
|
||||||
|
if( e.altKey && event.ctrlKey ){
|
||||||
|
if( e.which == 77 /* m */ || e.which == 84 /* t */ || e.which == 69 /* e */ || e.which == 80 /* p */ ){
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
else{
|
});
|
||||||
document.removeEventListener( 'keydown', tocEscapeHandler );
|
|
||||||
document.querySelector( '#body-inner' ).focus();
|
|
||||||
psc && psc.scrollbarY.focus();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.querySelector( '#sidebar-overlay' ).addEventListener( 'click', showNav );
|
document.querySelector( '#sidebar-overlay' ).addEventListener( 'click', showNav );
|
||||||
document.querySelector( '#sidebar-toggle' ).addEventListener( 'click', showNav );
|
document.querySelector( '#sidebar-toggle' ).addEventListener( 'click', showNav );
|
||||||
|
|
Loading…
Reference in a new issue