mobile: fix navigation UX #209 #210

This commit is contained in:
Sören Weber 2022-02-28 01:19:32 +01:00
parent d2b1a6fdf7
commit ea8b527f25
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
24 changed files with 292 additions and 197 deletions

View file

@ -40,6 +40,8 @@ This document shows you what's new in the latest release. For a detailed list of
Note, that the new variant switch will not work with Internet Explorer 11 as it does not support CSS variables. Therefore, the variant switcher will not be displayed with Internet Explorer 11.
---
## 2.9.0
- **Breaking**: This release removes the themes implementation of `ref`/`relref` in favor for Hugos standard implementation. This is because of inconsistencies with the themes implementation. In advantage, your project becomes standard complient and exchanging this theme in your project to some other theme will be effortless.
@ -76,6 +78,8 @@ This document shows you what's new in the latest release. For a detailed list of
| Leaf bundle | `(ref\s+"[^"]*)/index\.md"` | `$1"` |
| Page | `(ref\s+"[^"]*)\.md"` | `$1"` |
---
## 2.8.0
- **Change**: Although never officially documented, this release removes the font `Novacento`/`Novecento`. If you use it in an overwritten CSS please replace it with `Work Sans`. This change was necessary as Novacento did not provide all Latin special characters and lead to mixed styled character text eg. for czech.

View file

@ -28,6 +28,9 @@ other = "...قم بتوسيع"
[Navigation-toggle]
other = "قائمة"
[Toc-toggle]
other = "جدول المحتويات"
[Byte-symbol]
other = "B"

View file

@ -28,6 +28,9 @@ other = "Erweitere mich..."
[Navigation-toggle]
other = "Menu"
[Toc-toggle]
other = "Inhalt"
[Byte-symbol]
other = "B"

View file

@ -28,6 +28,9 @@ other = "Expand me..."
[Navigation-toggle]
other = "Menu"
[Toc-toggle]
other = "Table of Contents"
[Byte-symbol]
other = "B"

View file

@ -28,6 +28,9 @@ other = "Expandir..."
[Navigation-toggle]
other = "Menú"
[Toc-toggle]
other = "Tabla de contenido"
[Byte-symbol]
other = "B"

View file

@ -28,6 +28,9 @@ other = "Déroulez-moi..."
[Navigation-toggle]
other = "Menu"
[Toc-toggle]
other = "Table des matières"
[Byte-symbol]
other = "o"

View file

@ -28,6 +28,9 @@ other = "विस्तार करे..."
[Navigation-toggle]
other = "Menú"
[Toc-toggle]
other = "विषयसूची"
[Byte-symbol]
other = "B"

View file

@ -28,6 +28,9 @@ other = "Bentangkan..."
[Navigation-toggle]
other = "Menu"
[Toc-toggle]
other = "Daftar isi"
[Byte-symbol]
other = "B"

View file

@ -28,6 +28,9 @@ other = "開く..."
[Navigation-toggle]
other = "メニュー"
[Toc-toggle]
other = "目次"
[Byte-symbol]
other = "B"

View file

@ -28,6 +28,9 @@ other = "Lees meer..."
[Navigation-toggle]
other = "Menu"
[Toc-toggle]
other = "Inhoudsopgave"
[Byte-symbol]
other = "B"

View file

@ -28,6 +28,9 @@ other = "Expand me..."
[Navigation-toggle]
other = "Menu"
[Toc-toggle]
other = "Table o' Contents"
[Byte-symbol]
other = "B"

View file

@ -28,6 +28,9 @@ other = "Expandir..."
[Navigation-toggle]
other = "Menu"
[Toc-toggle]
other = "Índice"
[Byte-symbol]
other = "B"

View file

@ -28,6 +28,9 @@ other = "Развернуть..."
[Navigation-toggle]
other = "Меню"
[Toc-toggle]
other = "Оглавление"
[Byte-symbol]
other = "Б"

View file

@ -28,6 +28,9 @@ other = "Genişlet..."
[Navigation-toggle]
other = "Menü"
[Toc-toggle]
other = "İçindekiler"
[Byte-symbol]
other = "B"

View file

@ -28,6 +28,9 @@ other = "Mở rộng..."
[Navigation-toggle]
other = "Menu"
[Toc-toggle]
other = "Mục lục"
[BinaryPrefix-kilobyte]
other = "kb"

View file

@ -28,6 +28,9 @@ other = "展开"
[Navigation-toggle]
other = "导航"
[Toc-toggle]
other = "目录"
[Byte-symbol]
other = "B"

View file

@ -26,12 +26,14 @@
<div id="body default-animation" style="margin-left:0px;">
<div id="sidebar-overlay"></div>
<main id="body-inner" class="chapter">
<h1>{{ T "title-404" }}</h1>
<p></p>
<p>{{ T "message-404" }}</p>
<p></p>
<p><a href="{{ "" | relLangURL }}">{{ T "Go-to-homepage" }}</a></p>
<p><img src="{{ "/images/gopher-404.jpg" | relURL }}" style="width:50%" alt="Page not found!"></p>
<div class="flex-block-wrapper">
<h1>{{ T "title-404" }}</h1>
<p></p>
<p>{{ T "message-404" }}</p>
<p></p>
<p><a href="{{ "" | relLangURL }}">{{ T "Go-to-homepage" }}</a></p>
<p><img src="{{ "/images/gopher-404.jpg" | relURL }}" style="width:50%" alt="Page not found!"></p>
</div>
</main>
</div>
</body>

View file

@ -1,14 +1,13 @@
<footer class="footline">
<footer class="footline">
{{- with .Params.LastModifierDisplayName }}
<i class='fas fa-user'></i> <a href="mailto:{{ $.Params.LastModifierEmail }}">{{ . }}</a> {{ with $.Date }} <i class='fas fa-calendar'></i> {{ .Format "02/01/2006" }}{{ end }}
<i class='fas fa-user'></i> <a href="mailto:{{ $.Params.LastModifierEmail }}">{{ . }}</a> {{ with $.Date }} <i class='fas fa-calendar'></i> {{ .Format "02/01/2006" }}{{ end }}
{{- end }}
</footer>
</footer>
</div>
</main><!-- #body-inner -->
{{- partial "custom-comments.html" . }}
</div><!-- #body -->
<div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;">
<div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div>
</div>
{{- partial "menu.html" . }}
<script src="{{"js/clipboard.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{"js/perfect-scrollbar.min.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>
<script src="{{"js/jquery.svg.pan.zoom.js" | relURL}}{{ if not .Site.Params.disableAssetsBusting }}?{{ now.Unix }}{{ end }}"></script>

View file

@ -25,10 +25,10 @@
{{- partial "custom-header.html" . }}
</head>
<body class="default-animation" data-url="{{ .RelPermalink }}">
{{- partial "menu.html" . }}
<div id="body" class="default-animation">
<div id="sidebar-overlay"></div>
<div id="topbar" class="highlightable">
<div id="toc-overlay"></div>
<nav id="topbar" class="highlightable">
<div>
{{- $showPrevNext := (and (not .Params.disableNextPrev) (not .Site.Params.disableNextPrev)) }}
{{- if $showPrevNext }}
@ -75,12 +75,10 @@
{{- $toc := (and $hastoc (not $currentDisableToc) (not .Params.chapter)) }}
<div id="breadcrumbs">
<span id="sidebar-toggle-span">
<a href="#" id="sidebar-toggle" title='{{ T "Navigation-toggle" }}' data-sidebar-toggle="">
<i class="fas fa-bars fa-fw"></i>
</a>
<a href="#" id="sidebar-toggle" title='{{ T "Navigation-toggle" }}'><i class="fas fa-bars fa-fw"></i></a>
</span>
{{- if $toc }}
<span id="toc-menu"><i class="fas fa-list-alt fa-fw"></i></span>
<span id="toc-menu" title='{{ T "Toc-toggle" }}'><i class="fas fa-list-alt fa-fw"></i></span>
{{- end }}
{{- $showBreadcrumb := (and (not .Params.disableBreadcrumb) (not .Site.Params.disableBreadcrumb)) }}
{{- if $showBreadcrumb }}
@ -98,13 +96,14 @@
{{- partial "toc.html" . }}
{{- end }}
</div>
</div>
</nav>
<main id="body-inner" class="highlightable {{if .Params.chapter}} chapter{{end}}">
<div id="head-tags">
<div class="flex-block-wrapper">
<div id="head-tags">
{{- partial "tags.html" . }}
</div>
</div>
{{- if and (not .IsHome) (not .Params.chapter) }}
<h1>{{ if eq .Kind "term" }}{{ .Data.Singular | humanize }} {{ default "::" .Site.Params.titleSeparator }} {{ end }}{{ .Title }}</h1>
<h1>{{ if eq .Kind "term" }}{{ .Data.Singular | humanize }} {{ default "::" .Site.Params.titleSeparator }} {{ end }}{{ .Title }}</h1>
{{- end }}
{{- define "breadcrumb" }}

View file

@ -7,7 +7,7 @@
var baseUri=root_url.replace(/\/$/, '');
</script>
{{- $showvisitedlinks := .Site.Params.showVisitedLinks }}
<nav id="sidebar" class="default-animation{{ if $showvisitedlinks }} showVisitedLinks{{ end }}">
<aside id="sidebar" class="default-animation{{ if $showvisitedlinks }} showVisitedLinks{{ end }}">
{{- $currentNode := . }}
<div id="header-wrapper" class="default-animation">
<div id="header" class="default-animation">
@ -116,7 +116,7 @@
{{- $footer }}
</div>
</div>
</nav>
</aside>
{{- define "section-tree-nav" }}
{{- $showvisitedlinks := .showvisitedlinks }}
{{- $currentNode := .currentnode }}

View file

@ -1,6 +1,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{{- $c:=""}}{{/* to avoid that user swiping to the left leaves a gap on the right side, we set minimum-scale, even if not advised to */}}
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0">
{{ hugo.Generator }}
{{- $ver := partial "version.html" }}
{{- $ver = replaceRE "\\s*(\\S*)" "${1}" $ver }}

View file

@ -46,10 +46,13 @@
body {
background-color: #ffffff; /* var(--MAIN-BG-color) */
color: #101010; /* var(--MAIN-TEXT-color) */
display: flex;
flex-direction: row-reverse; /* IE11 to allow body to have initial focus for PS */
font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-size: 16.25px;
font-weight: 300;
line-height: 1.574;
overflow: hidden; /* to avoid browser scrollbar to flicker before we create our own */
}
body #body-inner.chapter h1 {
@ -93,24 +96,27 @@ th {
#sidebar {
background: #282828; /* var(--MENU-SECTIONS-BG-color) */
bottom: 0;
display: flex;
flex-direction: column;
font-size: 15.25px;
height: 100vh;
left: 0;
line-height: 1.574;
min-height: 100vh;
min-width: 300px;
max-width: 300px;
position: fixed;
top: 0;
width: 300px;
z-index: 310;
}
#header-wrapper {
/* initially use section background to avoid flickering on load when a
non default variant is active */
background-color: rgba( 0, 0, 0, 0 ); /* var(--MENU-SECTIONS-BG-color) */
border-bottom: 4px solid rgba( 0, 0, 0, 0 ); /* var(--MENU-SECTIONS-BG-color) */
color: #e0e0e0; /* var(--MENU-SEARCH-color) */
text-align: center;
border-bottom: 4px solid rgba( 0, 0, 0, 0 ); /* var(--MENU-SECTIONS-BG-color) */
padding: 1rem;
position: relative;
}
@ -166,9 +172,11 @@ th {
#content-wrapper {
display: flex;
flex: 1;
flex-direction: column;
flex-direction: column;
flex: 1; /* fill rest of vertical space */
overflow: hidden;
position: relative; /* PS */
z-index: 410;
}
#sidebar a {
@ -330,9 +338,17 @@ th {
}
#body {
margin-left: 300px;
min-height: 100%;
position: relative;
display: flex;
flex-direction: column;
height: 100vh;
margin-left: 300px;
min-height: 100vh;
min-width: calc( 100vw - 300px);
max-width: calc( 100vw - 300px);
overflow-wrap: break-word; /* avoid x-scrolling of body if it is to large to fit */
position: relative; /* PS */
width: calc( 100vw - 300px);
z-index: 300;
}
#body img,
@ -360,7 +376,11 @@ th {
}
#body-inner {
display: flex;
flex: 1; /* fill rest of vertical space */
flex-direction: column;
padding: 0 3rem 4rem 3rem;
position: relative; /* PS */
}
@media only all and (max-width: 59.938em) {
#body-inner {
@ -391,6 +411,16 @@ th {
margin-right: auto;
padding: 2rem 9rem;
}
@media only all and (max-width: 59.938em) {
#body-inner.chapter {
padding: 15px 4rem 15px 4rem;
}
}
@media only all and (max-width: 47.938em) {
#body-inner.chapter {
padding: 5px 2rem 5px 2rem;
}
}
#body-inner.chapter h3:first-of-type {
font-weight: 200;
@ -786,7 +816,7 @@ td {
text-transform: none;
white-space: pre;
word-wrap: break-word;
z-index: 1000000;
z-index: 450;
}
.tooltipped:before {
@ -798,7 +828,7 @@ td {
pointer-events: none;
position: absolute;
width: 0;
z-index: 1000001;
z-index: 460;
}
.tooltipped:hover:before,
@ -918,11 +948,9 @@ td {
#topbar {
background-color: #ffffff; /* var(--MAIN-BG-color) */
border-radius: 2px;
height: 0;
min-height: 3rem;
position: sticky;
top: 0;
z-index: 999;
position: relative;
z-index: 480;
}
#topbar > div {
@ -934,7 +962,6 @@ td {
#top-github-link {
display: block;
float: right;
z-index: 1;
}
.nav,
@ -985,11 +1012,12 @@ span.nav i{
display: none;
}
.progress {
display: none;
left: 1rem;
top: 1rem;
}
@media only all and (max-width: 47.938em) {
#sidebar-toggle-span {
.mobile-support #sidebar-toggle-span {
display: inline;
}
.progress {
@ -1031,32 +1059,43 @@ a[aria-disabled="true"] {
@media only all and (max-width: 59.938em) {
#sidebar {
width: 230px;
min-width: 230px;
max-width: 230px;
width: 230px;
}
#body {
margin-left: 230px;
margin-left: 230px;
min-width: calc( 100vw - 230px);
max-width: calc( 100vw - 230px);
width: calc( 100vw - 230px);
}
}
@media only all and (max-width: 47.938em) {
#sidebar {
/* we don't support sidebar flyout in IE */
.mobile-support #sidebar {
left: -230px;
width: 230px;
}
#body {
.mobile-support #navshow{
display: inline;
}
.mobile-support #body {
margin-left: 0;
width: 100%;
min-width: 100vw;
max-width: 100vw;
width: 100vw;
}
.sidebar-hidden {
.mobile-support.sidebar-flyout {
overflow: hidden;
}
.sidebar-hidden #sidebar {
.mobile-support.sidebar-flyout #sidebar {
left: 0;
z-index: 400;
}
.sidebar-hidden #body {
.mobile-support.sidebar-flyout #body {
margin-left: 230px;
overflow: hidden;
}
.sidebar-hidden #sidebar-overlay {
.mobile-support.sidebar-flyout #sidebar-overlay{
background-color: rgba(134, 134, 134, 0.5);
bottom: 0;
cursor: pointer;
@ -1064,8 +1103,9 @@ a[aria-disabled="true"] {
position: absolute;
right: 0;
top: 0;
z-index: 1000;
}
z-index: 500;
}
}
.copy-to-clipboard-button {
@ -1253,14 +1293,24 @@ option {
/* Table of contents */
.progress {
.toc-flyout #toc-overlay{
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 470;
}
.toc-flyout .progress {
background-color: #ffffff; /* var(--MAIN-BG-color) */
border: thin solid rgba( 134, 134, 134, .166 );
box-shadow: 1px 2px 5px 1px rgba( 134, 134, 134, .2 );
display: none;
display: block;
position: absolute;
width: auto;
z-index: 200;
z-index: 490;
}
.progress .wrapper {
@ -1510,6 +1560,11 @@ h6 a {
.showFooter {
display: block;
}
/* IE can not display the topbar as sticky, so revert the style */
#body-inner{
display: block;
}
}
/* clears the 'X' from Chrome's search input */

View file

@ -96,8 +96,8 @@ a:hover,
#header-wrapper {
background-color: var(--INTERNAL-MENU-HEADER-BG-color);
color: var(--INTERNAL-MENU-SEARCH-color);
border-color: var(--INTERNAL-MENU-HEADER-BORDER-color);
color: var(--INTERNAL-MENU-SEARCH-color);
}
.searchbox {

View file

@ -1,3 +1,10 @@
var isIE = /*@cc_on!@*/false || !!document.documentMode;
if( !isIE ){
// we don't support sidebar flyout in IE
document.querySelector( 'body' ).classList.add( 'mobile-support' );
}
var touchsupport = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)
function switchTab(tabGroup, tabId) {
allTabItems = jQuery("[data-tab-group='"+tabGroup+"']");
targetTabItems = jQuery("[data-tab-group='"+tabGroup+"'][data-tab-item='"+tabId+"']");
@ -49,104 +56,6 @@ function restoreTabSelections() {
}
}
function initStickyHeader(){
var markSticky = function(){
// add marker when not in top position; allows users
// to change styles (eg. add a dropshadow)
if ($(this).scrollTop() == 0) {
$('#topbar').removeClass("is-sticky");
}
else {
$('#topbar').addClass("is-sticky");
}
};
markSticky();
$(window).scroll( markSticky );
/**
* Fix anchor scrolling that hides behind sticky top nav bar
* Courtesy of https://stackoverflow.com/a/13067009/28106
*
* We could use pure css for this if only heading anchors were
* involved, but this works for any anchor, including footnotes
**/
(function (document, history, location) {
var HISTORY_SUPPORT = !!(history && history.pushState);
var anchorScrolls = {
ANCHOR_REGEX: /^#[^ ]+$/,
OFFSET_HEIGHT_PX: 50,
/**
* Establish events, and fix initial scroll position if a hash is provided.
*/
init: function () {
this.scrollToCurrent();
$(window).on('hashchange', $.proxy(this, 'scrollToCurrent'));
$('body').on('click', 'a', $.proxy(this, 'delegateAnchors'));
},
/**
* Return the offset amount to deduct from the normal scroll position.
* Modify as appropriate to allow for dynamic calculations
*/
getFixedOffset: function () {
return this.OFFSET_HEIGHT_PX;
},
/**
* If the provided href is an anchor which resolves to an element on the
* page, scroll to it.
* @param {String} href
* @return {Boolean} - Was the href an anchor.
*/
scrollIfAnchor: function (href, pushToHistory) {
var match, anchorOffset;
if (!this.ANCHOR_REGEX.test(href)) {
return false;
}
match = document.getElementById(href.slice(1));
if (match) {
anchorOffset = $(match).offset().top - this.getFixedOffset();
$('html, body').animate({ scrollTop: anchorOffset });
// Add the state to history as-per normal anchor links
if (HISTORY_SUPPORT && pushToHistory) {
history.pushState({}, document.title, location.pathname + href);
}
}
return !!match;
},
/**
* Attempt to scroll to the current location's hash.
*/
scrollToCurrent: function (e) {
if (this.scrollIfAnchor(window.location.hash) && e) {
e.preventDefault();
}
},
/**
* If the click event's target was an anchor, fix the scroll position.
*/
delegateAnchors: function (e) {
var elem = e.target;
if (this.scrollIfAnchor(elem.getAttribute('href'), true)) {
e.preventDefault();
}
}
};
$(document).ready($.proxy(anchorScrolls, 'init'));
})(window.document, window.history, window.location);
}
function initMermaid() {
$('code.language-mermaid').each(function(index, element) {
var content = $(element).html().replace(/&amp;/g, '&');
@ -277,15 +186,56 @@ function initArrowNav(){
}
function initMenuScrollbar(){
var setMenuHeight = function (){
ps && ps.update();
};
var ps = new PerfectScrollbar('#content-wrapper');
// to inform scrollbar of resizing
$(window).resize(function() {
setMenuHeight();
var content = '#body-inner';
if( isIE ){
// IE can not display the topbar as sticky; so we let
// the whole body scroll instead of just the content
content = '#body';
}
var autofocus = false;
document.addEventListener('keydown', function(){
// for initial keyboard scrolling support, no element
// may be hovered, but we still want to react on
// cursor/page up/down. because we can't hack
// the scrollbars implementation, we try to trick
// it and give focus to the scrollbar - only
// to just remove the focus right after scrolling
// happend
var p = document.querySelector(content).matches(':hover');
var m = document.querySelector('#content-wrapper').matches(':hover');
if( !p && !m ){
// only do this hack if none of our scrollbars
// is hovered
autofocus = true;
// if we are showing the sidebar as a flyout we
// want to scroll the content-wrapper, otherwise we want
// to scroll the body
var n = document.querySelector('body').matches('.sidebar-flyout');
if( n ){
psm.scrollbarY.focus();
}
else{
psc.scrollbarY.focus();
}
}
});
// scrollbars will install their own keyboard handlers
// that need to be executed inbetween our own handlers
var psm = new PerfectScrollbar('#content-wrapper');
var psc = new PerfectScrollbar(content);
window.addEventListener('resize', function(){
psm && psm.update();
psc && psc.update();
});
document.addEventListener('keydown', function(){
// if we facked initial scrolling, we want to
// remove the focus to not leave visual markers on
// the scrollbar
if( autofocus ){
psc.scrollbarY.blur();
psm.scrollbarY.blur();
autofocus = false;
}
});
}
@ -345,26 +295,77 @@ function initImageStyles(){
}
function initToc(){
var touchsupport = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)
if (touchsupport){
$('#toc-menu').click(function() {
$('.progress').stop(true, false, true).fadeToggle(100);
});
$('.progress').click(function() {
$('.progress').stop(true, false, true).fadeToggle(100);
});
function showNav(){
var b = document.querySelector( 'body' );
b.classList.toggle( 'sidebar-flyout' );
var n = b.matches('.sidebar-flyout');
if( n ){
b.classList.remove( 'toc-flyout' );
}
}
function showToc(){
var b = document.querySelector( 'body' );
b.classList.toggle( 'toc-flyout' );
}
else{
$('#toc-menu').hover(function() {
$('.progress').stop(true, false, true).fadeToggle(100);
});
$('.progress').hover(function() {
$('.progress').stop(true, false, true).fadeToggle(100);
});
document.querySelector( '#sidebar-overlay' ).addEventListener( 'click', showNav );
document.querySelector( '#sidebar-toggle' ).addEventListener( 'click', showNav );
document.querySelector( '#toc-overlay' ).addEventListener( 'click', showToc );
var t = document.querySelector( '#toc-menu' );
var p = document.querySelector( '.progress' );
if( t && p ){
// we may not have a toc
t.addEventListener( 'click', showToc );
p.addEventListener( 'click', showToc );
}
}
function initSwipeHandler(){
if( !touchsupport ){
return;
}
var startx = null;
var starty = null;
var handleStartX = function(evt) {
startx = evt.touches[0].clientX;
starty = evt.touches[0].clientY;
return false;
};
var handleMoveX = function(evt) {
if( startx !== null ){
var diffx = startx - evt.touches[0].clientX;
var diffy = starty - evt.touches[0].clientY || .1 ;
if( diffx / Math.abs( diffy ) < 2 ){
// detect mostly vertical swipes and reset our starting pos
// to not detect a horizontal move if vertical swipe is unprecise
startx = evt.touches[0].clientX;
}
else if( diffx > 30 ){
startx = null;
starty = null;
jQuery(document.body).toggleClass('sidebar-flyout');
}
}
return false;
};
var handleEndX = function(evt) {
startx = null;
starty = null;
return false;
};
document.querySelector( '#sidebar-overlay' ).addEventListener("touchstart", handleStartX, false);
document.querySelector( '#sidebar' ).addEventListener("touchstart", handleStartX, false);
document.querySelectorAll( '#sidebar *' ).forEach( function(e){ e.addEventListener("touchstart", handleStartX); }, false);
document.querySelector( '#sidebar-overlay' ).addEventListener("touchmove", handleMoveX, false);
document.querySelector( '#sidebar' ).addEventListener("touchmove", handleMoveX, false);
document.querySelectorAll( '#sidebar *' ).forEach( function(e){ e.addEventListener("touchmove", handleMoveX); }, false);
document.querySelector( '#sidebar-overlay' ).addEventListener("touchend", handleEndX, false);
document.querySelector( '#sidebar' ).addEventListener("touchend", handleEndX, false);
document.querySelectorAll( '#sidebar *' ).forEach( function(e){ e.addEventListener("touchend", handleEndX); }, false);
}
function scrollToActiveMenu() {
window.setTimeout(function(){
var e = $("#sidebar ul.topics li.active a")[0];
@ -373,7 +374,7 @@ function scrollToActiveMenu() {
block: 'center',
});
}
}, 200);
}, 10);
}
// Get Parameters from some url
@ -422,29 +423,18 @@ var getUrlParameter = function getUrlParameter(sPageURL) {
})(jQuery, 'smartresize');
jQuery(function() {
restoreTabSelections();
initStickyHeader();
initMermaid();
initAnchorClipboard();
initCodeClipboard();
initArrowNav();
initMermaid();
initMenuScrollbar();
scrollToActiveMenu();
initLightbox();
initImageStyles();
initToc();
scrollToActiveMenu();
initAnchorClipboard();
initCodeClipboard();
restoreTabSelections();
initSwipeHandler();
var sidebarStatus = 'open';
jQuery('#sidebar-overlay').on('click', function() {
jQuery(document.body).toggleClass('sidebar-hidden');
sidebarStatus = (jQuery(document.body).hasClass('sidebar-hidden') ? 'closed' : 'open');
return false;
});
jQuery('[data-sidebar-toggle]').on('click', function() {
jQuery(document.body).toggleClass('sidebar-hidden');
sidebarStatus = (jQuery(document.body).hasClass('sidebar-hidden') ? 'closed' : 'open');
return false;
});
jQuery('[data-clear-history-toggle]').on('click', function() {
sessionStorage.clear();
location.reload();