Update maintenance.php

[bookstack] / 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 82676b61b88a583149ada57a42f99c4bc5a23f03..e87966d7dbbcfc7b83b8fc7b596f36e034bbafd2 100644 (file)
--- 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 {
@@ -11,7 +11,6 @@ class PageDisplay {
         this.setupPointer();
         this.setupStickySidebar();
         this.setupNavHighlighting();
-        this.setupEditOnHeader();
 
         // Check the hash on load
         if (window.location.hash) {
@@ -21,7 +20,7 @@ class PageDisplay {
 
         // Sidebar page nav click event
         $('.sidebar-page-nav').on('click', 'a', event => {
-            goToText(event.target.getAttribute('href').substr(1));
+            this.goToText(event.target.getAttribute('href').substr(1));
         });
     }
 
@@ -75,11 +74,23 @@ class PageDisplay {
             pointerShowing = false;
         });
 
-        let updatePointerContent = () => {
+        let updatePointerContent = ($elem) => {
             let inputText = pointerModeLink ? window.baseUrl(`/link/${this.pageId}#${pointerSectionId}`) : `{{@${this.pageId}#${pointerSectionId}}}`;
             if (pointerModeLink && inputText.indexOf('http') !== 0) inputText = window.location.protocol + "//" + window.location.host + inputText;
 
             $pointer.find('input').val(inputText);
+
+            // update anchor if present
+            const $editAnchor = $pointer.find('#pointer-edit');
+            if ($editAnchor.length !== 0 && $elem) {
+                const editHref = $editAnchor.data('editHref');
+                const element = $elem[0];
+                const elementId = element.id;
+
+                // get the first 50 characters.
+                let queryContent = element.textContent && element.textContent.substring(0, 50);
+                $editAnchor[0].href = `${editHref}?content-id=${elementId}&content-text=${encodeURIComponent(queryContent)}`;
+            }
         };
 
         // Show pointer when selecting a single block of tagged content
@@ -91,7 +102,7 @@ class PageDisplay {
             // Show pointer and set link
             let $elem = $(this);
             pointerSectionId = $elem.attr('id');
-            updatePointerContent();
+            updatePointerContent($elem);
 
             $elem.before($pointer);
             $pointer.show();
@@ -112,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()) && ($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;
         }
@@ -172,9 +184,9 @@ class PageDisplay {
 
     setupNavHighlighting() {
         // Check if support is present for IntersectionObserver
-        if (!'IntersectionObserver' in window ||
-            !'IntersectionObserverEntry' in window ||
-            !'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
+        if (!('IntersectionObserver' in window) ||
+            !('IntersectionObserverEntry' in window) ||
+            !('intersectionRatio' in window.IntersectionObserverEntry.prototype)) {
             return;
         }
 
@@ -196,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);
             }
         }
 
@@ -209,42 +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);
             }
         }
     }
-    setupEditOnHeader() {
-        const headingEditIcon = document.querySelector('.heading-edit-icon');
-        if (headingEditIcon.length === 0) {
-            // user does not have permission to edit.
-            return;
-        }
-
-        // Create a clone of the edit icon without the hidden class
-        const visibleHeadingEditIcon = headingEditIcon.cloneNode(true);
-        visibleHeadingEditIcon.style.display = '';
-
-        const headings = document.querySelector('.page-content').querySelectorAll('h1, h2, h3, h4, h5, h6');
-
-        // add an edit icon to each header.
-        for (let i = 0; i !== headings.length; ++i) {
-            const currHeading = headings[i];
-            const headingId = currHeading.id;
-
-            let editIcon = visibleHeadingEditIcon.cloneNode(true);
-            editIcon.href += `#${headingId}`;
-
-            currHeading.appendChild(editIcon);
-        }
-    }
-
 }
 
-module.exports = PageDisplay;
+export default PageDisplay;