github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-04 08:54:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactored all functionality into one function. Changed margin-top.

Browse Source
This commit is contained in:
Abijeet
2017-11-05 20:23:16 +05:30
parent 1031c61d0c
commit bdba25b6f2
1 changed files with 47 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
resources/assets/js/pages/page-show.js
View File

@ -156,53 +156,57 @@ let setupPageShow = window.setupPageShow = function (pageId) {
if ('IntersectionObserver' in window && if ('IntersectionObserver' in window &&
'IntersectionObserverEntry' in window && 'IntersectionObserverEntry' in window &&
'intersectionRatio' in window.IntersectionObserverEntry.prototype) { 'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
$(document).ready(function () { addPageHighlighting();
// fetch all the headings.
let headings = document.querySelector('.page-content').querySelectorAll('h1, h2, h3, h4, h5, h6');
// if headings are present, add observers.
if (headings.length > 0) {
addNavObserver(headings);
}
});
} }
let $pageNav = null; function addPageHighlighting() {
function addNavObserver(headings) { let $pageNav = null;
// Setup the intersection observer.
// margin top = -25px to trigger the threshold change before the heading
// has completely left the viewport on the top.
let intersectOpts = {
rootMargin: '-25px 0px 0px 0px',
threshold: 1.0
}
$pageNav = $('.sidebar-page-nav');
let pageNavObserver = new IntersectionObserver(cbHeadingVisible, intersectOpts);
// observe each heading $(document).ready(function () {
for (let i = 0; i !== headings.length; ++i) { // fetch all the headings.
pageNavObserver.observe(headings[i]); let headings = document.querySelector('.page-content').querySelectorAll('h1, h2, h3, h4, h5, h6');
} // if headings are present, add observers.
if (headings.length > 0) {
addNavObserver(headings);
}
});
function addNavObserver(headings) {
// Setup the intersection observer.
// margin top = -35px to trigger the threshold change before the heading
// has completely left the viewport on the top.
let intersectOpts = {
rootMargin: '-35px 0px 0px 0px',
threshold: 1.0
}
$pageNav = $('.sidebar-page-nav');
let pageNavObserver = new IntersectionObserver(cbHeadingVisible, intersectOpts);
// observe each heading
for (let i = 0; i !== headings.length; ++i) {
pageNavObserver.observe(headings[i]);
}
}
function cbHeadingVisible(entries, observer) {
let element = null;
for (let i = 0; i !== entries.length; ++i) {
let currentEntry = entries[i];
// check if its currently visible and its distance from top of viewport is less than 100
if (currentEntry.intersectionRatio <= 1 && currentEntry.boundingClientRect.y < 100) {
element = currentEntry.target;
} else {
break;
}
}
if (!element) {
return;
}
let elementId = element.id;
$pageNav.find('a').removeClass('current-heading');
$pageNav.find('a[href="#' + elementId + '"]').addClass('current-heading');
}
} }
function cbHeadingVisible(entries, observer) {
let element = null;
for (let i = 0; i !== entries.length; ++i) {
let currentEntry = entries[i];
// check if its currently visible and its distance from top of viewport is less than 100
if (currentEntry.intersectionRatio <= 1 && currentEntry.boundingClientRect.y < 100) {
element = currentEntry.target;
} else {
break;
}
}
if (!element) {
return;
}
let elementId = element.id;
$pageNav.find('a').removeClass('current-heading');
$pageNav.find('a[href="#' + elementId + '"]').addClass('current-heading');
}
}; };
module.exports = setupPageShow; module.exports = setupPageShow;