X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/be4f3d62cd37c7b83eb86bbf5fffa00d20acf2ec..refs/pull/1366/head:/resources/assets/js/components/page-display.js diff --git a/resources/assets/js/components/page-display.js b/resources/assets/js/components/page-display.js index 3fd8fb8ef..1aeeaf248 100644 --- a/resources/assets/js/components/page-display.js +++ b/resources/assets/js/components/page-display.js @@ -1,4 +1,4 @@ -import Clipboard from "clipboard"; +import Clipboard from "clipboard/dist/clipboard.min"; import Code from "../services/code"; class PageDisplay { @@ -123,20 +123,21 @@ class PageDisplay { setupStickySidebar() { // Make the sidebar stick in view on scroll - let $window = $(window); - let $sidebar = $("#sidebar .scroll-body"); - let $bookTreeParent = $sidebar.parent(); + const $window = $(window); + const $sidebar = $("#sidebar .scroll-body"); + const $sidebarContainer = $sidebar.parent(); + const sidebarHeight = $sidebar.height() + 32; // Check the page is scrollable and the content is taller than the tree - let pageScrollable = ($(document).height() > ($window.height() + 40)) && ($sidebar.height() < $('.page-content').height()); + const pageScrollable = ($(document).height() > ($window.height() + 40)) && (sidebarHeight < $('.page-content').height()); // Get current tree's width and header height - let headerHeight = $("#header").height() + $(".toolbar").height(); + const headerHeight = $("#header").height() + $(".toolbar").height(); let isFixed = $window.scrollTop() > headerHeight; // Fix the tree as a sidebar function stickTree() { - $sidebar.width($bookTreeParent.width() + 15); + $sidebar.width($sidebarContainer.width() + 15); $sidebar.addClass("fixed"); isFixed = true; } @@ -207,8 +208,8 @@ class PageDisplay { let pageNavObserver = new IntersectionObserver(headingVisibilityChange, intersectOpts); // observe each heading - for (let i = 0; i !== headings.length; ++i) { - pageNavObserver.observe(headings[i]); + for (let heading of headings) { + pageNavObserver.observe(heading); } } @@ -220,17 +221,12 @@ class PageDisplay { } 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'); - } + const anchorsToHighlight = pageNav.querySelectorAll('a[href="#' + elementId + '"]'); + for (let anchor of anchorsToHighlight) { + anchor.closest('li').classList.toggle('current-heading', shouldHighlight); } } } } -module.exports = PageDisplay; +export default PageDisplay;