X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/d1a4ff930872fd77dc18fae02870ec057098b36b..refs/pull/695/head:/resources/assets/js/pages/page-show.js diff --git a/resources/assets/js/pages/page-show.js b/resources/assets/js/pages/page-show.js index 14437cd68..2efaf66c6 100644 --- a/resources/assets/js/pages/page-show.js +++ b/resources/assets/js/pages/page-show.js @@ -1,5 +1,5 @@ const Clipboard = require("clipboard"); -const Code = require('../code'); +const Code = require('../libs/code'); let setupPageShow = window.setupPageShow = function (pageId) { @@ -102,23 +102,28 @@ let setupPageShow = window.setupPageShow = function (pageId) { let $window = $(window); let $sidebar = $("#sidebar .scroll-body"); let $bookTreeParent = $sidebar.parent(); + // Check the page is scrollable and the content is taller than the tree let pageScrollable = ($(document).height() > $window.height()) && ($sidebar.height() < $('.page-content').height()); + // Get current tree's width and header height let headerHeight = $("#header").height() + $(".toolbar").height(); let isFixed = $window.scrollTop() > headerHeight; - // Function to fix the tree as a sidebar + + // Fix the tree as a sidebar function stickTree() { $sidebar.width($bookTreeParent.width() + 15); $sidebar.addClass("fixed"); isFixed = true; } - // Function to un-fix the tree back into position + + // Un-fix the tree back into position function unstickTree() { $sidebar.css('width', 'auto'); $sidebar.removeClass("fixed"); isFixed = false; } + // Checks if the tree stickiness state should change function checkTreeStickiness(skipCheck) { let shouldBeFixed = $window.scrollTop() > headerHeight; @@ -150,6 +155,59 @@ let setupPageShow = window.setupPageShow = function (pageId) { unstickTree(); } }); + + + // Check if support is present for IntersectionObserver + if ('IntersectionObserver' in window && + 'IntersectionObserverEntry' in window && + 'intersectionRatio' in window.IntersectionObserverEntry.prototype) { + addPageHighlighting(); + } + + function addPageHighlighting() { + let pageNav = document.querySelector('.sidebar-page-nav'); + + // 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 && pageNav !== null) { + addNavObserver(headings); + } + + function addNavObserver(headings) { + // Setup the intersection observer. + let intersectOpts = { + rootMargin: '0px 0px 0px 0px', + threshold: 1.0 + }; + let pageNavObserver = new IntersectionObserver(headingVisibilityChange, intersectOpts); + + // observe each heading + for (let i = 0; i !== headings.length; ++i) { + pageNavObserver.observe(headings[i]); + } + } + + function headingVisibilityChange(entries, observer) { + for (let i = 0; i < entries.length; i++) { + let currentEntry = entries[i]; + let isVisible = (currentEntry.intersectionRatio === 1); + toggleAnchorHighlighting(currentEntry.target.id, isVisible); + } + } + + function toggleAnchorHighlighting(elementId, shouldHighlight) { + let anchorsToHighlight = pageNav.querySelectorAll('a[href="#' + elementId + '"]'); + for (let i = 0; i < anchorsToHighlight.length; i++) { + // Change below to use classList.toggle when IE support is dropped. + if (shouldHighlight) { + anchorsToHighlight[i].classList.add('current-heading'); + } else { + anchorsToHighlight[i].classList.remove('current-heading'); + } + } + } + } }; module.exports = setupPageShow; \ No newline at end of file