Added content-perms API examples and docs tweaks

[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..c06c3310dee2c44c221b331c8a78b8d3eee9d3f3 100644 (file)
--- a/resources/js/components/page-display.js
+++ b/resources/js/components/page-display.js
@@ -1,11 +1,12 @@
 import * as DOM from "../services/dom";
 import {scrollAndHighlightElement} from "../services/util";
 import * as DOM from "../services/dom";
 import {scrollAndHighlightElement} from "../services/util";

+import {Component} from "./component";

 
 

-class PageDisplay {
+export class PageDisplay extends Component {

 
 

-    constructor(elem) {
-        this.elem = elem;
-        this.pageId = elem.getAttribute('page-display');
+    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();


@@ -13,7 +14,7 @@ class PageDisplay {
 
         // 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,7 +23,7 @@ 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);
                 window.history.pushState(null, null, '#' + contentId);
                 const contentId = child.getAttribute('href').substr(1);
                 this.goToText(contentId);
                 window.history.pushState(null, null, '#' + contentId);


@@ -49,17 +50,10 @@ 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);


@@ -67,21 +61,21 @@ class PageDisplay {
 
         function addNavObserver(headings) {
             // Setup the intersection observer.
 
         function addNavObserver(headings) {
             // Setup the intersection observer.

-            let intersectOpts = {
+            const intersectOpts = {

                 rootMargin: '0px 0px 0px 0px',
                 threshold: 1.0
             };
                 rootMargin: '0px 0px 0px 0px',
                 threshold: 1.0
             };

-            let pageNavObserver = new IntersectionObserver(headingVisibilityChange, intersectOpts);
+            const pageNavObserver = new IntersectionObserver(headingVisibilityChange, intersectOpts);

 
             // observe each heading
 
             // observe each heading

-            for (let heading of headings) {
+            for (const heading of headings) {

                 pageNavObserver.observe(heading);
             }
         }
 
         function headingVisibilityChange(entries, observer) {
                 pageNavObserver.observe(heading);
             }
         }
 
         function headingVisibilityChange(entries, observer) {

-            for (let entry of entries) {
-                let isVisible = (entry.intersectionRatio === 1);
+            for (const entry of entries) {
+                const isVisible = (entry.intersectionRatio === 1);

                 toggleAnchorHighlighting(entry.target.id, isVisible);
             }
         }
                 toggleAnchorHighlighting(entry.target.id, isVisible);
             }
         }


@@ -99,9 +93,7 @@ class PageDisplay {
             codeMirrors.forEach(cm => cm.CodeMirror && cm.CodeMirror.refresh());
         };
 
             codeMirrors.forEach(cm => cm.CodeMirror && cm.CodeMirror.refresh());
         };
 

-        const details = [...this.elem.querySelectorAll('details')];
+        const details = [...this.container.querySelectorAll('details')];

         details.forEach(detail => detail.addEventListener('toggle', onToggle));
     }
         details.forEach(detail => detail.addEventListener('toggle', onToggle));
     }

-}
-
-export default PageDisplay;
+}
\ No newline at end of file