From 7cb2d579e1b3b3b3ee1b456e1852d1c38a17dc76 Mon Sep 17 00:00:00 2001 From: falke-design Date: Mon, 7 Feb 2022 16:13:16 +0100 Subject: [PATCH 1/3] Fix scrolling in docs --- docs/docs/js/docs.js | 64 ++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 62 insertions(+), 2 deletions(-) diff --git a/docs/docs/js/docs.js b/docs/docs/js/docs.js index 72fd3973cae..561279f3475 100644 --- 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,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 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; + } } From d04a59a5c72f086fed5403fb344169a3812607c5 Mon Sep 17 00:00:00 2001 From: falke-design Date: Mon, 7 Feb 2022 16:48:08 +0100 Subject: [PATCH 2/3] Fix lint --- docs/docs/js/docs.js | 59 ++++++++++++++++++++++---------------------- 1 file changed, 30 insertions(+), 29 deletions(-) diff --git a/docs/docs/js/docs.js b/docs/docs/js/docs.js index 561279f3475..5ee4fc45542 100644 --- a/docs/docs/js/docs.js +++ b/docs/docs/js/docs.js @@ -71,46 +71,47 @@ if (toc) { scrollPos(); }); - window.addEventListener("load", function (e) { + window.addEventListener('load', function () { var currentHash = window.location.hash; var elem = document.querySelector(currentHash); - if(elem.tagName === 'H2' || elem.tagName === 'H4'){ + if (elem.tagName === 'H2' || elem.tagName === 'H4') { setTimeout(()=>{ - scrollToHeader(elem, true) - },10); + scrollToHeader(elem, true); + }, 10); } }, false); +} - function clickOnAnchor(e){ - // if the parent element of is clicked we ignore it - if(e.target.tagName !== 'A'){ - return; - } - var anchor = '#'+ e.target.href.split('#')[1]; - var elemHeader = document.querySelector(anchor); +function clickOnAnchor(e) { + // if the parent element of is clicked we ignore it + if (e.target.tagName !== 'A') { + return; + } - scrollToHeader(elemHeader, '#'+elemHeader.id === currentAnchor); + var anchor = '#' + e.target.href.split('#')[1]; + var elemHeader = document.querySelector(anchor); - // prevent default browser anchor scroll - e.preventDefault(); - } + scrollToHeader(elemHeader, '#' + elemHeader.id === currentAnchor); - function scrollToHeader(elemHeader, sameAnchor){ - var scrollBy = elemHeader.nextSibling.offsetTop; + // prevent default browser anchor scroll + e.preventDefault(); +} - 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; +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; } From fca1ea884f94ae4259a5ec6ae3cdcfd7c018b62e Mon Sep 17 00:00:00 2001 From: falke-design Date: Tue, 8 Feb 2022 08:41:33 +0100 Subject: [PATCH 3/3] Fix mobile menu overlapping and add background to anchor-icon --- docs/docs/css/main.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/docs/docs/css/main.css b/docs/docs/css/main.css index 9c67939de4a..812d01f9909 100644 --- 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; }