Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix scrolling in docs #7982

Merged
merged 4 commits into from
Feb 8, 2022
Merged

Fix scrolling in docs #7982

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7cb2d57
Fix scrolling in docs
Falke-Design Feb 7, 2022
d04a59a
Fix lint
Falke-Design Feb 7, 2022
4c08da6
Merge https://github.com/Leaflet/Leaflet into fix/docs-anchor
Falke-Design Feb 7, 2022
fca1ea8
Fix mobile menu overlapping and add background to anchor-icon
Falke-Design Feb 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Fix scrolling in docs
  • Loading branch information
@Falke-Design
Falke-Design committed Feb 7, 2022
commit 7cb2d579e1b3b3b3ee1b456e1852d1c38a17dc76
64 changes: 62 additions & 2 deletions docs/docs/js/docs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand All @@ -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');
Expand Down Expand Up @@ -53,4 +70,47 @@ if (toc) {
window.addEventListener('scroll', function () {
scrollPos();
});

window.addEventListener("load", function (e) {
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;
}
}