Adjusted global search preview for dark mode

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

diff --git a/resources/js/components/page-display.js b/resources/js/components/page-display.js
index 2be1c1c48b8cc93f5ac147b64023cf910eabc3fa..b4f1cca4fbc5682fc124d0342ee3189c198a0c3a 100644 (file)
--- a/resources/js/components/page-display.js
+++ b/resources/js/components/page-display.js
@@ -1,5 +1,3 @@
-import Clipboard from "clipboard/dist/clipboard.min";
-import Code from "../services/code";
 import * as DOM from "../services/dom";
 import {scrollAndHighlightElement} from "../services/util";
 
@@ -9,9 +7,9 @@ class PageDisplay {
         this.elem = elem;
         this.pageId = elem.getAttribute('page-display');
 
-        Code.highlight();
-        this.setupPointer();
+        window.importVersioned('code').then(Code => Code.highlight());
         this.setupNavHighlighting();
+        this.setupDetailsCodeBlockRefresh();
 
         // Check the hash on load
         if (window.location.hash) {
@@ -50,108 +48,6 @@ class PageDisplay {
         }
     }
 
-    setupPointer() {
-        let pointer = document.getElementById('pointer');
-        if (!pointer) {
-            return;
-        }
-
-        // Set up pointer
-        pointer = pointer.parentNode.removeChild(pointer);
-        const pointerInner = pointer.querySelector('div.pointer');
-
-        // Instance variables
-        let pointerShowing = false;
-        let isSelection = false;
-        let pointerModeLink = true;
-        let pointerSectionId = '';
-
-        // Select all contents on input click
-        DOM.onChildEvent(pointer, 'input', 'click', (event, input) => {
-            input.select();
-            event.stopPropagation();
-        });
-
-        // Prevent closing pointer when clicked or focused
-        DOM.onEvents(pointer, ['click', 'focus'], event => {
-            event.stopPropagation();
-        });
-
-        // Pointer mode toggle
-        DOM.onChildEvent(pointer, 'span.icon', 'click', (event, icon) => {
-            event.stopPropagation();
-            pointerModeLink = !pointerModeLink;
-            icon.querySelector('[data-icon="include"]').style.display = (!pointerModeLink) ? 'inline' : 'none';
-            icon.querySelector('[data-icon="link"]').style.display = (pointerModeLink) ? 'inline' : 'none';
-            updatePointerContent();
-        });
-
-        // Set up clipboard
-        new Clipboard(pointer.querySelector('button'));
-
-        // Hide pointer when clicking away
-        DOM.onEvents(document.body, ['click', 'focus'], event => {
-            if (!pointerShowing || isSelection) return;
-            pointer = pointer.parentElement.removeChild(pointer);
-            pointerShowing = false;
-        });
-
-        let updatePointerContent = (element) => {
-            let inputText = pointerModeLink ? window.baseUrl(`/link/${this.pageId}#${pointerSectionId}`) : `{{@${this.pageId}#${pointerSectionId}}}`;
-            if (pointerModeLink && !inputText.startsWith('http')) {
-                inputText = window.location.protocol + "//" + window.location.host + inputText;
-            }
-
-            pointer.querySelector('input').value = inputText;
-
-            // Update anchor if present
-            const editAnchor = pointer.querySelector('#pointer-edit');
-            if (editAnchor && element) {
-                const editHref = editAnchor.dataset.editHref;
-                const elementId = element.id;
-
-                // get the first 50 characters.
-                const queryContent = element.textContent && element.textContent.substring(0, 50);
-                editAnchor.href = `${editHref}?content-id=${elementId}&content-text=${encodeURIComponent(queryContent)}`;
-            }
-        };
-
-        // Show pointer when selecting a single block of tagged content
-        DOM.forEach('.page-content [id^="bkmrk"]', bookMarkElem => {
-            DOM.onEvents(bookMarkElem, ['mouseup', 'keyup'], event => {
-                event.stopPropagation();
-                let selection = window.getSelection();
-                if (selection.toString().length === 0) return;
-
-                // Show pointer and set link
-                pointerSectionId = bookMarkElem.id;
-                updatePointerContent(bookMarkElem);
-
-                bookMarkElem.parentNode.insertBefore(pointer, bookMarkElem);
-                pointer.style.display = 'block';
-                pointerShowing = true;
-                isSelection = true;
-
-                // Set pointer to sit near mouse-up position
-                requestAnimationFrame(() => {
-                    const bookMarkBounds = bookMarkElem.getBoundingClientRect();
-                    let pointerLeftOffset = (event.pageX - bookMarkBounds.left - 164);
-                    if (pointerLeftOffset < 0) {
-                        pointerLeftOffset = 0
-                    }
-                    const pointerLeftOffsetPercent = (pointerLeftOffset / bookMarkBounds.width) * 100;
-
-                    pointerInner.style.left = pointerLeftOffsetPercent + '%';
-
-                    setTimeout(() => {
-                        isSelection = false;
-                    }, 100);
-                });
-
-            });
-        });
-    }
-
     setupNavHighlighting() {
         // Check if support is present for IntersectionObserver
         if (!('IntersectionObserver' in window) ||
@@ -196,6 +92,16 @@ class PageDisplay {
             });
         }
     }
+
+    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;