X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/ff3fb2ebb91ccbe186dc82d69b6351bbf82eacb7..refs/pull/5429/head:/resources/js/components/page-display.js diff --git a/resources/js/components/page-display.js b/resources/js/components/page-display.js index b4f1cca4f..d3ac78a4a 100644 --- a/resources/js/components/page-display.js +++ b/resources/js/components/page-display.js @@ -1,19 +1,46 @@ -import * as DOM from "../services/dom"; -import {scrollAndHighlightElement} from "../services/util"; +import * as DOM from '../services/dom.ts'; +import {scrollAndHighlightElement} from '../services/util.ts'; +import {Component} from './component'; + +function toggleAnchorHighlighting(elementId, shouldHighlight) { + DOM.forEach(`#page-navigation a[href="#${elementId}"]`, anchor => { + anchor.closest('li').classList.toggle('current-heading', shouldHighlight); + }); +} + +function headingVisibilityChange(entries) { + for (const entry of entries) { + const isVisible = (entry.intersectionRatio === 1); + toggleAnchorHighlighting(entry.target.id, isVisible); + } +} -class PageDisplay { +function addNavObserver(headings) { + // Setup the intersection observer. + const intersectOpts = { + rootMargin: '0px 0px 0px 0px', + threshold: 1.0, + }; + const pageNavObserver = new IntersectionObserver(headingVisibilityChange, intersectOpts); + + // observe each heading + for (const heading of headings) { + pageNavObserver.observe(heading); + } +} - constructor(elem) { - this.elem = elem; - this.pageId = elem.getAttribute('page-display'); +export class PageDisplay extends Component { + + setup() { + this.container = this.$el; + this.pageId = this.$opts.pageId; window.importVersioned('code').then(Code => Code.highlight()); this.setupNavHighlighting(); - this.setupDetailsCodeBlockRefresh(); // Check the hash on load if (window.location.hash) { - let text = window.location.hash.replace(/\%20/g, ' ').substr(1); + const text = window.location.hash.replace(/%20/g, ' ').substring(1); this.goToText(text); } @@ -22,10 +49,10 @@ class PageDisplay { if (sidebarPageNav) { DOM.onChildEvent(sidebarPageNav, 'a', 'click', (event, child) => { event.preventDefault(); - window.components['tri-layout'][0].showContent(); + window.$components.first('tri-layout').showContent(); const contentId = child.getAttribute('href').substr(1); this.goToText(contentId); - window.history.pushState(null, null, '#' + contentId); + window.history.pushState(null, null, `#${contentId}`); }); } } @@ -49,59 +76,14 @@ class PageDisplay { } setupNavHighlighting() { - // Check if support is present for IntersectionObserver - if (!('IntersectionObserver' in window) || - !('IntersectionObserverEntry' in window) || - !('intersectionRatio' in window.IntersectionObserverEntry.prototype)) { - return; - } - - let pageNav = document.querySelector('.sidebar-page-nav'); + const pageNav = document.querySelector('.sidebar-page-nav'); // fetch all the headings. - let headings = document.querySelector('.page-content').querySelectorAll('h1, h2, h3, h4, h5, h6'); + const 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 heading of headings) { - pageNavObserver.observe(heading); - } - } - - function headingVisibilityChange(entries, observer) { - for (let entry of entries) { - let isVisible = (entry.intersectionRatio === 1); - toggleAnchorHighlighting(entry.target.id, isVisible); - } - } - - function toggleAnchorHighlighting(elementId, shouldHighlight) { - DOM.forEach('a[href="#' + elementId + '"]', anchor => { - anchor.closest('li').classList.toggle('current-heading', shouldHighlight); - }); - } } - setupDetailsCodeBlockRefresh() { - const onToggle = event => { - const codeMirrors = [...event.target.querySelectorAll('.CodeMirror')]; - codeMirrors.forEach(cm => cm.CodeMirror && cm.CodeMirror.refresh()); - }; - - const details = [...this.elem.querySelectorAll('details')]; - details.forEach(detail => detail.addEventListener('toggle', onToggle)); - } } - -export default PageDisplay;