Fix scrolling in docs (#7982)

* Fix scrolling in docs * Fix lint * Fix mobile menu overlapping and add background to anchor-icon
Leaflet · Feb 8, 2022 · 178925b · 178925b
1 parent ca68795
commit 178925b
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 2 deletions.
diff --git a/docs/docs/css/main.css b/docs/docs/css/main.css
@@ -533,6 +533,7 @@ table.plugins td:first-child a {
 
 #toc-copy {
 	display: none;
+	z-index: 1;
 }
 
 #toc-copy div {
@@ -834,6 +835,18 @@ tr:target {
 	margin-top: 14px;
 }
 
+.api-page h2[id]:after {
+	content: '';
+	margin-left: -32px;
+	margin-top: 19px;
+	width: 23px;
+	height: 23px;
+	background-color: #fff;
+	position: absolute;
+	left: 0;
+	top: 0;
+}
+
 .api-page tr[id] td:first-child:before {
 	opacity: 0;
 }

diff --git a/docs/docs/js/docs.js b/docs/docs/js/docs.js
@@ -8,11 +8,24 @@ tocCopy.id = 'toc-copy';
 var toc = document.querySelector('#toc');
 
 if (toc) {
+	var currentAnchor = '';
+
+	// top menu
+	var menus = document.querySelectorAll('#toc a');
+	var i;
+
+	for (i = 0; i < menus.length; i++) {
+		menus[i].addEventListener('click', function (e) {
+			clickOnAnchor(e);
+		});
+	}
+
+	// sidebar menu
 	tocCopy.innerHTML = toc.innerHTML;
 	document.getElementsByClassName('container')[0].appendChild(tocCopy);
 
-	var menus = document.querySelectorAll('#toc-copy ul');
-	var i;
+	menus = document.querySelectorAll('#toc-copy ul');
+	i = 0;
 
 	for (i = 0; i < menus.length; i++) {
 		menus[i].addEventListener('mouseover', function () {
@@ -22,6 +35,10 @@ if (toc) {
 		menus[i].addEventListener('mouseout', function () {
 			this.previousElementSibling.classList.remove('hover');
 		});
+
+		menus[i].addEventListener('click', function (e) {
+			clickOnAnchor(e);
+		});
 	}
 
 	var labels = document.querySelectorAll('#toc-copy h4');
@@ -53,4 +70,48 @@ if (toc) {
 	window.addEventListener('scroll', function () {
 		scrollPos();
 	});
+
+	window.addEventListener('load', function () {
+		var currentHash = window.location.hash;
+		var elem = document.querySelector(currentHash);
+
+		if (elem.tagName === 'H2' || elem.tagName === 'H4') {
+			setTimeout(()=>{
+				scrollToHeader(elem, true);
+			}, 10);
+		}
+	}, false);
+}
+
+
+function clickOnAnchor(e) {
+	// if the parent element of <a> is clicked we ignore it
+	if (e.target.tagName !== 'A') {
+		return;
+	}
+
+	var anchor = '#' + e.target.href.split('#')[1];
+	var elemHeader = document.querySelector(anchor);
+
+	scrollToHeader(elemHeader, '#' + elemHeader.id === currentAnchor);
+
+	// prevent default browser anchor scroll
+	e.preventDefault();
+}
+
+function scrollToHeader(elemHeader, sameAnchor) {
+	var scrollBy = elemHeader.nextSibling.offsetTop;
+
+	if (L.Browser.chrome && sameAnchor) {
+		// chromium remove the anchor element from the scroll-position
+		// we check with sameAnchor if the User has clicked on the same anchor link again
+		scrollBy = scrollBy - elemHeader.offsetHeight;
+	} else {
+		// we scroll a little bit more down to get the element already sticky
+		scrollBy += 5;
+	}
+	// scroll to the anchor
+	window.scrollTo(0, scrollBy);
+	// apply the new anchor to the location url
+	currentAnchor = window.location.hash = '#' + elemHeader.id;
 }