BookStack Code Mirror - bookstack/blob - resources/js/components/page-display.js

   1 import * as DOM from '../services/dom.ts';
   2 import {scrollAndHighlightElement} from '../services/util.ts';
   3 import {Component} from './component';
   4
   5 function toggleAnchorHighlighting(elementId, shouldHighlight) {
   6     DOM.forEach(`#page-navigation a[href="#${elementId}"]`, anchor => {
   7         anchor.closest('li').classList.toggle('current-heading', shouldHighlight);
   8     });
   9 }
  10
  11 function headingVisibilityChange(entries) {
  12     for (const entry of entries) {
  13         const isVisible = (entry.intersectionRatio === 1);
  14         toggleAnchorHighlighting(entry.target.id, isVisible);
  15     }
  16 }
  17
  18 function addNavObserver(headings) {
  19     // Setup the intersection observer.
  20     const intersectOpts = {
  21         rootMargin: '0px 0px 0px 0px',
  22         threshold: 1.0,
  23     };
  24     const pageNavObserver = new IntersectionObserver(headingVisibilityChange, intersectOpts);
  25
  26     // observe each heading
  27     for (const heading of headings) {
  28         pageNavObserver.observe(heading);
  29     }
  30 }
  31
  32 export class PageDisplay extends Component {
  33
  34     setup() {
  35         this.container = this.$el;
  36         this.pageId = this.$opts.pageId;
  37
  38         window.importVersioned('code').then(Code => Code.highlight());
  39         this.setupNavHighlighting();
  40
  41         // Check the hash on load
  42         if (window.location.hash) {
  43             const text = window.location.hash.replace(/%20/g, ' ').substring(1);
  44             this.goToText(text);
  45         }
  46
  47         // Sidebar page nav click event
  48         const sidebarPageNav = document.querySelector('.sidebar-page-nav');
  49         if (sidebarPageNav) {
  50             DOM.onChildEvent(sidebarPageNav, 'a', 'click', (event, child) => {
  51                 event.preventDefault();
  52                 window.$components.first('tri-layout').showContent();
  53                 const contentId = child.getAttribute('href').substr(1);
  54                 this.goToText(contentId);
  55                 window.history.pushState(null, null, `#${contentId}`);
  56             });
  57         }
  58     }
  59
  60     goToText(text) {
  61         const idElem = document.getElementById(text);
  62
  63         DOM.forEach('.page-content [data-highlighted]', elem => {
  64             elem.removeAttribute('data-highlighted');
  65             elem.style.backgroundColor = null;
  66         });
  67
  68         if (idElem !== null) {
  69             scrollAndHighlightElement(idElem);
  70         } else {
  71             const textElem = DOM.findText('.page-content > div > *', text);
  72             if (textElem) {
  73                 scrollAndHighlightElement(textElem);
  74             }
  75         }
  76     }
  77
  78     setupNavHighlighting() {
  79         const pageNav = document.querySelector('.sidebar-page-nav');
  80
  81         // fetch all the headings.
  82         const headings = document.querySelector('.page-content').querySelectorAll('h1, h2, h3, h4, h5, h6');
  83         // if headings are present, add observers.
  84         if (headings.length > 0 && pageNav !== null) {
  85             addNavObserver(headings);
  86         }
  87     }
  88
  89 }