Customization: Added parent tag classes

[bookstack] / resources / js / components / page-display.js

diff --git a/resources/js/components/page-display.js b/resources/js/components/page-display.js
index b4f1cca4fbc5682fc124d0342ee3189c198a0c3a..d3ac78a4ad19347779583d1331cb470d6532959a 100644 (file)
--- 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();
 
         window.importVersioned('code').then(Code => Code.highlight());
         this.setupNavHighlighting();

-        this.setupDetailsCodeBlockRefresh();

 
         // Check the hash on load
         if (window.location.hash) {
 
         // 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);
         }
 
             this.goToText(text);
         }
 


@@ -22,10 +49,10 @@ class PageDisplay {
         if (sidebarPageNav) {
             DOM.onChildEvent(sidebarPageNav, 'a', 'click', (event, child) => {
                 event.preventDefault();
         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);
                 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() {
     }
 
     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.
 
         // 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);
         }
         // 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;