X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/0528e98d9c7d09dca2e12dab8e2df703f8557f63..refs/pull/635/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 67d339d63..6af5af57d 100644 --- a/resources/assets/js/pages/page-show.js +++ b/resources/assets/js/pages/page-show.js @@ -1,5 +1,3 @@ -"use strict"; -// Configure ZeroClipboard const Clipboard = require("clipboard"); const Code = require('../code'); @@ -83,15 +81,7 @@ let setupPageShow = window.setupPageShow = function (pageId) { let idElem = document.getElementById(text); $('.page-content [data-highlighted]').attr('data-highlighted', '').css('background-color', ''); if (idElem !== null) { - let $idElem = $(idElem); - let color = $('#custom-styles').attr('data-color-light'); - $idElem.css('background-color', color).attr('data-highlighted', 'true').smoothScrollTo(); - setTimeout(() => { - $idElem.addClass('anim').addClass('selectFade').css('background-color', ''); - setTimeout(() => { - $idElem.removeClass('selectFade'); - }, 3000); - }, 100); + window.scrollAndHighlight(idElem); } else { $('.page-content').find(':contains("' + text + '")').smoothScrollTo(); } @@ -108,27 +98,32 @@ let setupPageShow = window.setupPageShow = function (pageId) { goToText(event.target.getAttribute('href').substr(1)); }); - // Make the book-tree sidebar stick in view on scroll + // Make the sidebar stick in view on scroll let $window = $(window); - let $bookTree = $(".book-tree"); - let $bookTreeParent = $bookTree.parent(); + 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()) && ($bookTree.height() < $('.page-content').height()); + 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() { - $bookTree.width($bookTreeParent.width() + 15); - $bookTree.addClass("fixed"); + $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() { - $bookTree.css('width', 'auto'); - $bookTree.removeClass("fixed"); + $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; @@ -161,6 +156,58 @@ let setupPageShow = window.setupPageShow = function (pageId) { } }); + + // 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