nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-27 01:33:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

topbar: make button flyouts modular #639

Browse source
This commit is contained in:
Sören Weber 2023-09-15 00:23:41 +02:00
parent 4921ec0583
commit 6cd5a93198
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
9 changed files with 209 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
exampleSite/layouts/partials/toc.html
View file

@ -1,5 +1,3 @@
<div class="default-animation progress">
<div class="toc-wrapper">
{{- if eq .Kind "taxonomy" }} {{- if eq .Kind "taxonomy" }}
<nav id="TableOfContents"> <nav id="TableOfContents">
<ul> <ul>
@ -19,5 +17,3 @@
"pagefield" "TableOfContents" "pagefield" "TableOfContents"
) }} ) }}
{{- end }} {{- end }}
</div>
</div>

14
layouts/partials/header.html
View file

@ -67,6 +67,7 @@
</head> </head>
<body class="mobile-support {{ $outputFormat }}{{- if .Site.Params.disableInlineCopyToClipBoard }} disableInlineCopyToClipboard{{ end }}{{- if .Site.Params.disableHoverBlockCopyToClipBoard }} disableHoverBlockCopyToClipBoard{{ end }}" data-url="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}"> <body class="mobile-support {{ $outputFormat }}{{- if .Site.Params.disableInlineCopyToClipBoard }} disableInlineCopyToClipboard{{ end }}{{- if .Site.Params.disableHoverBlockCopyToClipBoard }} disableHoverBlockCopyToClipBoard{{ end }}" data-url="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}">
<div id="body" class="default-animation"> <div id="body" class="default-animation">
<div id="body-overlay"></div>
<nav id="topbar"> <nav id="topbar">
<div> <div>
<div class="topbar-sidebar-divider"></div> <div class="topbar-sidebar-divider"></div>
@ -74,26 +75,24 @@
{{- partial "topbar-button.html" (dict {{- partial "topbar-button.html" (dict
"page" $page "page" $page
"class" "topbar-sidebar" "class" "topbar-sidebar"
"href" "javascript:showNav()" "href" "javascript:toggleNav()"
"icon" "bars" "icon" "bars"
"title" (printf "%s (CTRL+ALT+n)" (T "Navigation-toggle")) "title" (printf "%s (CTRL+ALT+n)" (T "Navigation-toggle"))
)}} )}}
<div id="sidebar-overlay"></div>
{{- $defaultDisableToc := .Site.Params.disableToc | default false }} {{- $defaultDisableToc := .Site.Params.disableToc | default false }}
{{- $currentDisableToc := .Params.disableToc | default $defaultDisableToc }} {{- $currentDisableToc := .Params.disableToc | default $defaultDisableToc }}
{{- $toc_content := partial "toc.html" . }} {{- $toc_content := partial "toc-class.html" . }}
{{- $hastoc := not (eq 0 (int (len (trim ($toc_content | plainify) "\n\t ")))) }} {{- $hastoc := not (eq 0 (int (len (trim ($toc_content | plainify) "\n\r\t ")))) }}
{{- $toc := and $hastoc (not $currentDisableToc) (eq $outputFormat "html") }} {{- $toc := and $hastoc (not $currentDisableToc) (eq $outputFormat "html") }}
{{- if $toc }} {{- if $toc }}
{{- partial "topbar-button.html" (dict {{- partial "topbar-button.html" (dict
"page" $page "page" $page
"class" "topbar-toc" "class" "topbar-toc"
"href" "javascript:showToc()" "href" "javascript:toggleTopbarFlyout(this)"
"icon" "list-alt" "icon" "list-alt"
"title" (printf "%s (CTRL+ALT+t)" (T "Toc-toggle")) "title" (printf "%s (CTRL+ALT+t)" (T "Toc-toggle"))
"content" $toc_content
)}} )}}
{{ $toc_content }}
<div id="toc-overlay"></div>
{{- end }} {{- end }}
</div> </div>
{{- $showBreadcrumb := (and (not .Params.disableBreadcrumb) (not .Site.Params.disableBreadcrumb)) }} {{- $showBreadcrumb := (and (not .Params.disableBreadcrumb) (not .Site.Params.disableBreadcrumb)) }}
@ -168,6 +167,7 @@
</div> </div>
</nav> </nav>
{{- $hook := "styleclass" }} {{- $hook := "styleclass" }}
<div id="main-overlay"></div>
<main id="body-inner" class="highlightable {{ partialCached "archetype.hugo" (dict "hook" $hook "page" . "parameter" . "outputFormat" $outputFormat) .RelPermalink $outputFormat $hook }}" tabindex="-1"> <main id="body-inner" class="highlightable {{ partialCached "archetype.hugo" (dict "hook" $hook "page" . "parameter" . "outputFormat" $outputFormat) .RelPermalink $outputFormat $hook }}" tabindex="-1">
<div class="flex-block-wrapper"> <div class="flex-block-wrapper">
{{- define "breadcrumb" }} {{- define "breadcrumb" }}

3
layouts/partials/toc-class.html Normal file
View file

@ -0,0 +1,3 @@
{{- $toc_content := partial "toc.html" . }}
{{- $toc_content = strings.Replace $toc_content "id=\"TableOfContents\"" "class=\"TableOfContents\"" 1 }}
{{- $toc_content | safeHTML }}

4
layouts/partials/toc.html
View file

@ -1,5 +1,3 @@
<div class="default-animation progress">
<div class="toc-wrapper">
{{- if eq .Kind "taxonomy" }} {{- if eq .Kind "taxonomy" }}
<nav id="TableOfContents"> <nav id="TableOfContents">
<ul> <ul>
@ -16,5 +14,3 @@
{{- else }} {{- else }}
{{- .TableOfContents }} {{- .TableOfContents }}
{{- end }} {{- end }}
</div>
</div>

14
layouts/partials/topbar-button.html
View file

@ -22,13 +22,14 @@
{{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }} {{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
{{- $icon = printf "fa-fw fas fa-%s" $icon }} {{- $icon = printf "fa-fw fas fa-%s" $icon }}
{{- end }} {{- end }}
{{- $content := .content }}
<div class="topbar-button {{ $class }}"> <div class="topbar-button {{ $class }}">
{{- if $isDisabled }} {{- if $isDisabled }}
<span> <span class="topbar-button-control">
{{- else if $isButton }} {{- else if $isButton }}
<button{{ if $href }} onclick="{{ $href | safeJS }}"{{ end }}{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }} title="{{ $title }}"> <button class="topbar-button-control"{{ if $href }} onclick="{{ $href | safeJS }}"{{ end }}{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }} title="{{ $title }}">
{{- else }} {{- else }}
<a{{ if $href }} href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}{{ end }} title="{{ $title }}"> <a class="topbar-button-control"{{ if $href }} href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}{{ end }} title="{{ $title }}">
{{- end }} {{- end }}
<i class="{{ $icon }}"></i> <i class="{{ $icon }}"></i>
{{- if $isDisabled }} {{- if $isDisabled }}
@ -37,5 +38,12 @@
</button> </button>
{{- else }} {{- else }}
</a> </a>
{{- end }}
{{- if $content }}
<div class="topbar-button-flyout">
<div class="topbar-button-flyout-wrapper">
{{- $content }}
</div>
</div>
{{- end }} {{- end }}
</div> </div>

13
static/css/ie.css
View file

@ -70,10 +70,10 @@
border-top-right-radius: 0; border-top-right-radius: 0;
border-right-width: 0; border-right-width: 0;
} }
.topbar-left .topbar-button > * { .topbar-left .topbar-button > .topbar-button-control {
border-right: 1px solid rgba( 134, 134, 134, .333 ); border-right: 1px solid rgba( 134, 134, 134, .333 );
} }
.topbar-right .topbar-button > * { .topbar-right .topbar-button > .topbar-button-control {
border-left: 1px solid rgba( 134, 134, 134, .333 ); border-left: 1px solid rgba( 134, 134, 134, .333 );
} }
#body .topbar-sidebar-divider { #body .topbar-sidebar-divider {
@ -85,14 +85,9 @@
html[dir="rtl"] .topbar-next i { html[dir="rtl"] .topbar-next i {
transform: scaleX(1); transform: scaleX(1);
} }
.progress { .topbar-button-flyout {
left: 1rem; left: 1rem;
} }
@media screen and (max-width: 48rem) {
.progress {
left: 4.25rem;
}
}
@media screen and (max-width: 60rem) { @media screen and (max-width: 60rem) {
#body { #body {
margin-left: 14.375rem; margin-left: 14.375rem;
@ -572,7 +567,7 @@
border-color: rgba( 125, 201, 3, 1 ); /* var(--MENU-HEADER-SEPARATOR-color) */ border-color: rgba( 125, 201, 3, 1 ); /* var(--MENU-HEADER-SEPARATOR-color) */
} }
.progress { .topbar-button-flyout {
background-color: rgba( 255, 255, 255, 1 ); /* var(--MAIN-BG-color) */ background-color: rgba( 255, 255, 255, 1 ); /* var(--MAIN-BG-color) */
} }

68
static/css/theme.css
View file

@ -401,9 +401,9 @@ dd {
.topbar-breadcrumbs a:hover *, .topbar-breadcrumbs a:hover *,
.topbar-breadcrumbs a:active *, .topbar-breadcrumbs a:active *,
.topbar-breadcrumbs a:focus *, .topbar-breadcrumbs a:focus *,
.toc-wrapper a:hover, .topbar-button-flyout a:hover,
.toc-wrapper a:active, .topbar-button-flyout a:active,
.toc-wrapper a:focus, .topbar-button-flyout a:focus,
article a:hover, article a:hover,
article a:active, article a:active,
article a:focus { article a:focus {
@ -989,15 +989,15 @@ td {
position: relative; position: relative;
} }
.topbar-button > * { .topbar-button > .topbar-button-control {
display: inline-block; display: inline-block;
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
} }
.topbar-left .topbar-button > * { .topbar-left .topbar-button > .topbar-button-control {
border-inline-end: 1px solid rgba( 134, 134, 134, .333 ); border-inline-end: 1px solid rgba( 134, 134, 134, .333 );
} }
.topbar-right .topbar-button > * { .topbar-right .topbar-button > .topbar-button-control {
border-inline-start: 1px solid rgba( 134, 134, 134, .333 ); border-inline-start: 1px solid rgba( 134, 134, 134, .333 );
} }
@ -1048,14 +1048,14 @@ html[dir="rtl"] .topbar-next i {
} }
} }
.progress { .topbar-button-flyout {
inset-inline-start: 1rem; top: .75rem;
top: 1rem;
} }
@media screen and (max-width: 48rem) { .topbar-left .topbar-button-flyout {
.progress { inset-inline-start: 1.5rem;
inset-inline-start: 4.25rem;
} }
.topbar-right .topbar-button-flyout {
inset-inline-end: 1.5rem;
} }
.topbar-breadcrumbs { .topbar-breadcrumbs {
@ -1135,7 +1135,7 @@ html[dir="rtl"] .topbar-next i {
margin-inline-start: 14.375rem; margin-inline-start: 14.375rem;
overflow: hidden; overflow: hidden;
} }
.mobile-support.sidebar-flyout #sidebar-overlay{ .mobile-support.sidebar-flyout #body-overlay{
background-color: rgba( 134, 134, 134, .5 ); background-color: rgba( 134, 134, 134, .5 );
bottom: 0; bottom: 0;
cursor: pointer; cursor: pointer;
@ -1360,10 +1360,9 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
/* Table of contents */ /* Table of contents */
.toc-flyout #toc-overlay{ .topbar-flyout #main-overlay{
bottom: 0; bottom: 0;
cursor: pointer; cursor: pointer;
height: calc(100vh - 3rem);
left: 0; left: 0;
position: absolute; position: absolute;
right: 0; right: 0;
@ -1371,7 +1370,7 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
z-index: 160; z-index: 160;
} }
.progress { .topbar-button-flyout {
border: 0 solid rgba( 134, 134, 134, .166 ); border: 0 solid rgba( 134, 134, 134, .166 );
box-shadow: 1px 2px 5px 1px rgba( 134, 134, 134, .2 ); box-shadow: 1px 2px 5px 1px rgba( 134, 134, 134, .2 );
height: 0; height: 0;
@ -1382,33 +1381,48 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
z-index: 180; z-index: 180;
} }
.toc-flyout .progress { .topbar-button.topbar-flyout .topbar-button-flyout {
border-width: 1px; border-width: 1px;
height: auto; height: auto;
opacity: 1; opacity: 1;
width: auto; width: auto;
} }
.progress .toc-wrapper { .topbar-button-flyout .topbar-button-flyout-wrapper {
background-color: rgba( 134, 134, 134, .066 ); background-color: rgba( 134, 134, 134, .066 );
} }
.progress ul { .topbar-button-flyout-wrapper {
--ps-rail-hover-color: rgba( 176, 176, 176, .25 );
max-height: 90vh;
overflow: hidden;
padding: 1rem 1rem;
position: relative; /* PS */
}
#TableOfContents,
.TableOfContents {
font-size: .8125rem;
}
#TableOfContents ul,
.TableOfContents ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0 1rem; padding: 0 1rem;
} }
#TableOfContents { #TableOfContents > ul,
--ps-rail-hover-color: rgba( 176, 176, 176, .25 ); .TableOfContents > ul {
font-size: .8125rem !important; padding: 0;
max-height: 90vh;
overflow: hidden;
padding: 1rem .375rem !important;
position: relative; /* PS */
} }
#TableOfContents > ul > li > a { #TableOfContents li,
.TableOfContents li {
white-space: nowrap;
}
#TableOfContents > ul > li > a,
.TableOfContents > ul > li > a {
font-weight: 500; font-weight: 500;
} }

2
static/css/variant.css
View file

@ -318,7 +318,7 @@ pre .copy-to-clipboard-button:hover {
border-color: var(--INTERNAL-MENU-HEADER-SEPARATOR-color); border-color: var(--INTERNAL-MENU-HEADER-SEPARATOR-color);
} }
.progress { .topbar-button-flyout {
background-color: var(--INTERNAL-MAIN-BG-color); background-color: var(--INTERNAL-MAIN-BG-color);
} }

215
static/js/theme.js
View file

@ -34,7 +34,7 @@ var formelements = 'button, datalist, fieldset, input, label, legend, meter, opt
// PerfectScrollbar // PerfectScrollbar
var psc; var psc;
var psm; var psm;
var pst; var pst = new Map();
var elc = document.querySelector('#body-inner'); var elc = document.querySelector('#body-inner');
function regexEscape( s ){ function regexEscape( s ){
@ -709,7 +709,7 @@ function initMenuScrollbar(){
} }
var elm = document.querySelector('#content-wrapper'); var elm = document.querySelector('#content-wrapper');
var elt = document.querySelector('#TableOfContents'); var elt = document.querySelector('.topbar-button.topbar-flyout .topbar-button-flyout-wrapper');
var autofocus = true; var autofocus = true;
document.addEventListener('keydown', function(event){ document.addEventListener('keydown', function(event){
@ -737,10 +737,11 @@ function initMenuScrollbar(){
// if we are showing the sidebar as a flyout we // if we are showing the sidebar as a flyout we
// want to scroll the content-wrapper, otherwise we want // want to scroll the content-wrapper, otherwise we want
// to scroll the body // to scroll the body
var nt = document.querySelector('body').matches('.toc-flyout'); var nt = document.querySelector('body').matches('.topbar-flyout');
var nm = document.querySelector('body').matches('.sidebar-flyout'); var nm = document.querySelector('body').matches('.sidebar-flyout');
if( nt ){ if( nt ){
pst && pst.scrollbarY.focus(); var psb = pst.get( document.querySelector('.topbar-button.topbar-flyout') );
psb && psb.scrollbarY.focus();
} }
else if( nm ){ else if( nm ){
psm && psm.scrollbarY.focus(); psm && psm.scrollbarY.focus();
@ -756,7 +757,15 @@ function initMenuScrollbar(){
// PSC removed for #242 #243 #244 // PSC removed for #242 #243 #244
// psc = elc && new PerfectScrollbar('#body-inner'); // psc = elc && new PerfectScrollbar('#body-inner');
psm = elm && new PerfectScrollbar('#content-wrapper'); psm = elm && new PerfectScrollbar('#content-wrapper');
pst = elt && new PerfectScrollbar('#TableOfContents'); document.querySelectorAll('.topbar-button .topbar-button-flyout-wrapper').forEach( function( e ){
var button = getTopbarButtonParent( e );
if( !button ){
return;
}
pst.set( button, new PerfectScrollbar( e ) );
e.addEventListener( 'click', toggleTopbarFlyoutEvent );
});
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
@ -764,14 +773,18 @@ function initMenuScrollbar(){
if( autofocus ){ if( autofocus ){
psc && psc.scrollbarY.blur(); psc && psc.scrollbarY.blur();
psm && psm.scrollbarY.blur(); psm && psm.scrollbarY.blur();
pst && pst.scrollbarY.blur(); pst.forEach( function( psb ){
psb.scrollbarY.blur();
});
autofocus = false; autofocus = false;
} }
}); });
// on resize, we have to redraw the scrollbars to let new height // on resize, we have to redraw the scrollbars to let new height
// affect their size // affect their size
window.addEventListener('resize', function(){ window.addEventListener('resize', function(){
pst && setTimeout( function(){ pst.update(); }, 10 ); pst.forEach( function( psb ){
setTimeout( function(){ psb.update(); }, 10 );
});
psm && setTimeout( function(){ psm.update(); }, 10 ); psm && setTimeout( function(){ psm.update(); }, 10 );
psc && setTimeout( function(){ psc.update(); }, 10 ); psc && setTimeout( function(){ psc.update(); }, 10 );
}); });
@ -784,7 +797,9 @@ function initMenuScrollbar(){
}); });
// bugfix for PS in RTL mode: the initial scrollbar position is off; // bugfix for PS in RTL mode: the initial scrollbar position is off;
// calling update() once, fixes this // calling update() once, fixes this
pst && setTimeout( function(){ pst.update(); }, 10 ); pst.forEach( function( psb ){
setTimeout( function(){ psb.update(); }, 10 );
});
psm && setTimeout( function(){ psm.update(); }, 10 ); psm && setTimeout( function(){ psm.update(); }, 10 );
psc && setTimeout( function(){ psc.update(); }, 10 ); psc && setTimeout( function(){ psc.update(); }, 10 );
@ -800,27 +815,9 @@ function imageEscapeHandler( event ){
} }
} }
function sidebarEscapeHandler( event ){ function navShortcutHandler( event ){
if( event.key == "Escape" ){
var b = document.querySelector( 'body' );
b.classList.remove( 'sidebar-flyout' );
document.removeEventListener( 'keydown', sidebarEscapeHandler );
documentFocus();
}
}
function tocEscapeHandler( event ){
if( event.key == "Escape" ){
var b = document.querySelector( 'body' );
b.classList.remove( 'toc-flyout' );
document.removeEventListener( 'keydown', tocEscapeHandler );
documentFocus();
}
}
function sidebarShortcutHandler( event ){
if( !event.shiftKey && event.altKey && event.ctrlKey && !event.metaKey && event.which == 78 /* n */ ){ if( !event.shiftKey && event.altKey && event.ctrlKey && !event.metaKey && event.which == 78 /* n */ ){
showNav(); toggleNav();
} }
} }
@ -832,7 +829,7 @@ function searchShortcutHandler( event ){
function tocShortcutHandler( event ){ function tocShortcutHandler( event ){
if( !event.shiftKey && event.altKey && event.ctrlKey && !event.metaKey && event.which == 84 /* t */ ){ if( !event.shiftKey && event.altKey && event.ctrlKey && !event.metaKey && event.which == 84 /* t */ ){
showToc(); toggleToc();
} }
} }
@ -856,53 +853,125 @@ function showSearch(){
var b = document.querySelector( 'body' ); var b = document.querySelector( 'body' );
if( s == document.activeElement ){ if( s == document.activeElement ){
if( b.classList.contains( 'sidebar-flyout' ) ){ if( b.classList.contains( 'sidebar-flyout' ) ){
showNav(); closeNav();
} }
documentFocus(); documentFocus();
} else { } else {
if( !b.classList.contains( 'sidebar-flyout' ) ){ if( !b.classList.contains( 'sidebar-flyout' ) ){
showNav(); openNav();
} }
s.focus(); s.focus();
} }
} }
function showNav(){ function openNav(){
if( !document.querySelector( '#sidebar-overlay' ) ){ closeSomeTopbarButtonFlyout();
// we may not have a flyout
return;
}
var b = document.querySelector( 'body' ); var b = document.querySelector( 'body' );
b.classList.toggle( 'sidebar-flyout' ); b.classList.add( 'sidebar-flyout' );
if( b.classList.contains( 'sidebar-flyout' ) ){ psm && setTimeout( function(){ psm.update(); }, 10 );
b.classList.remove( 'toc-flyout' ); psm && psm.scrollbarY.focus();
document.removeEventListener( 'keydown', tocEscapeHandler ); var a = document.querySelector( '#sidebar a' )
document.addEventListener( 'keydown', sidebarEscapeHandler ); if( a ){
} a.focus();
else{
document.removeEventListener( 'keydown', sidebarEscapeHandler );
documentFocus();
} }
} }
function showToc(){ function closeNav(){
var t = document.querySelector( '.topbar-toc' );
if( !t ){
// we may not have a toc
return;
}
var b = document.querySelector( 'body' ); var b = document.querySelector( 'body' );
b.classList.toggle( 'toc-flyout' ); b.classList.remove( 'sidebar-flyout' );
if( b.classList.contains( 'toc-flyout' ) ){
pst && setTimeout( function(){ pst.update(); }, 10 );
pst && pst.scrollbarY.focus();
document.querySelector( '.toc-wrapper ul a' ).focus();
document.addEventListener( 'keydown', tocEscapeHandler );
}
else{
document.removeEventListener( 'keydown', tocEscapeHandler );
documentFocus(); documentFocus();
} }
function toggleNav(){
var b = document.querySelector( 'body' );
if( b.classList.contains( 'sidebar-flyout' ) ){
closeNav();
}
else{
openNav();
}
}
function navEscapeHandler( event ){
if( event.key == "Escape" ){
closeNav();
}
}
function getTopbarButtonParent( e ){
var button = e;
while( button && !button.classList.contains( 'topbar-button' ) ){
button = button.parentElement;
}
return button;
}
function openTopbarButtonFlyout( button ){
closeNav();
var body = document.querySelector( 'body' );
button.classList.add( 'topbar-flyout' );
body.classList.add( 'topbar-flyout' );
var psb = pst.get( button );
psb && setTimeout( function(){ psb.update(); }, 10 );
psb && psb.scrollbarY.focus();
var a = button.querySelector( '.topbar-button-flyout-wrapper a' );
if( a ){
a.focus();
}
}
function closeTopbarButtonFlyout( button ){
var body = document.querySelector( 'body' );
button.classList.remove( 'topbar-flyout' );
body.classList.remove( 'topbar-flyout' );
documentFocus();
}
function closeSomeTopbarButtonFlyout(){
var someButton = document.querySelector( '.topbar-button.topbar-flyout' );
if( someButton ){
closeTopbarButtonFlyout( someButton );
};
return someButton
}
function toggleTopbarButtonFlyout( button ){
var someButton = closeSomeTopbarButtonFlyout();
if( button && button != someButton ){
openTopbarButtonFlyout( button );
}
}
function toggleTopbarFlyout( e ){
var button = getTopbarButtonParent( e );
if( !button ){
return;
}
toggleTopbarButtonFlyout( button );
}
function toggleTopbarFlyoutEvent( event ){
if( event.target.classList.contains( 'topbar-button-flyout' )
|| event.target.classList.contains( 'topbar-button-flyout-wrapper' )
|| event.target.classList.contains( 'ps__rail-x' )
|| event.target.classList.contains( 'ps__rail-y' )
|| event.target.classList.contains( 'ps__thumb-x' )
|| event.target.classList.contains( 'ps__thumb-y' )
){
// the scrollbar was used, don't close flyout
return;
}
toggleTopbarFlyout( event.target )
}
function topbarFlyoutEscapeHandler( event ){
if( event.key == "Escape" ){
closeSomeTopbarButtonFlyout();
}
}
function toggleToc(){
toggleTopbarButtonFlyout( document.querySelector( '.topbar-toc' ) );
} }
function showEdit(){ function showEdit(){
@ -935,21 +1004,20 @@ function initToc(){
} }
document.addEventListener( 'keydown', editShortcutHandler ); document.addEventListener( 'keydown', editShortcutHandler );
document.addEventListener( 'keydown', navShortcutHandler );
document.addEventListener( 'keydown', printShortcutHandler ); document.addEventListener( 'keydown', printShortcutHandler );
document.addEventListener( 'keydown', sidebarShortcutHandler );
document.addEventListener( 'keydown', searchShortcutHandler ); document.addEventListener( 'keydown', searchShortcutHandler );
document.addEventListener( 'keydown', tocShortcutHandler ); document.addEventListener( 'keydown', tocShortcutHandler );
document.addEventListener( 'keydown', navEscapeHandler );
document.addEventListener( 'keydown', topbarFlyoutEscapeHandler );
var s = document.querySelector( '#sidebar-overlay' ); var b = document.querySelector( '#body-overlay' );
if( s ){ if( b ){
s.addEventListener( 'click', showNav ); b.addEventListener( 'click', closeNav );
} }
var o = document.querySelector( '#toc-overlay' ); var m = document.querySelector( '#main-overlay' );
var p = document.querySelector( '.progress' ); if( m ){
if( o && p ){ m.addEventListener( 'click', closeSomeTopbarButtonFlyout );
// we may not have a toc
o.addEventListener( 'click', showToc );
p.addEventListener( 'click', showToc );
} }
// finally give initial focus to allow keyboard scrolling in FF // finally give initial focus to allow keyboard scrolling in FF
@ -980,10 +1048,7 @@ function initSwipeHandler(){
else if( diffx > 30 ){ else if( diffx > 30 ){
startx = null; startx = null;
starty = null; starty = null;
var b = document.querySelector( 'body' ); closeNav();
b.classList.remove( 'sidebar-flyout' );
document.removeEventListener( 'keydown', sidebarEscapeHandler );
documentFocus();
} }
} }
return false; return false;
@ -994,7 +1059,7 @@ function initSwipeHandler(){
return false; return false;
}; };
var s = document.querySelector( '#sidebar-overlay' ); var s = document.querySelector( '#body-overlay' );
s && s.addEventListener("touchstart", handleStartX, false); s && s.addEventListener("touchstart", handleStartX, false);
document.querySelector( '#sidebar' ).addEventListener("touchstart", handleStartX, false); document.querySelector( '#sidebar' ).addEventListener("touchstart", handleStartX, false);
document.querySelectorAll( '#sidebar *' ).forEach( function(e){ e.addEventListener("touchstart", handleStartX); }, false); document.querySelectorAll( '#sidebar *' ).forEach( function(e){ e.addEventListener("touchstart", handleStartX); }, false);