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

   1 import Clipboard from "clipboard/dist/clipboard.min";
   2 import Code from "../services/code";
   3 import * as DOM from "../services/dom";
   4
   5 class PageDisplay {
   6
   7     constructor(elem) {
   8         this.elem = elem;
   9         this.pageId = elem.getAttribute('page-display');
  10
  11         Code.highlight();
  12         this.setupPointer();
  13         this.setupNavHighlighting();
  14
  15         // Check the hash on load
  16         if (window.location.hash) {
  17             let text = window.location.hash.replace(/\%20/g, ' ').substr(1);
  18             this.goToText(text);
  19         }
  20
  21         // Sidebar page nav click event
  22         const sidebarPageNav = document.querySelector('.sidebar-page-nav');
  23         DOM.onChildEvent(sidebarPageNav, 'a', 'click', (event, child) => {
  24             window.components['tri-layout'][0].showContent();
  25             this.goToText(child.getAttribute('href').substr(1));
  26         });
  27     }
  28
  29     goToText(text) {
  30         const idElem = document.getElementById(text);
  31
  32         DOM.forEach('.page-content [data-highlighted]', elem => {
  33             elem.removeAttribute('data-highlighted');
  34             elem.style.backgroundColor = null;
  35         });
  36
  37         if (idElem !== null) {
  38             window.scrollAndHighlight(idElem);
  39         } else {
  40             const textElem = DOM.findText('.page-content > div > *', text);
  41             if (textElem) {
  42                 window.scrollAndHighlight(textElem);
  43             }
  44         }
  45     }
  46
  47     setupPointer() {
  48         let pointer = document.getElementById('pointer');
  49         if (!pointer) {
  50             return;
  51         }
  52
  53         // Set up pointer
  54         pointer = pointer.parentNode.removeChild(pointer);
  55         const pointerInner = pointer.querySelector('div.pointer');
  56
  57         // Instance variables
  58         let pointerShowing = false;
  59         let isSelection = false;
  60         let pointerModeLink = true;
  61         let pointerSectionId = '';
  62
  63         // Select all contents on input click
  64         DOM.onChildEvent(pointer, 'input', 'click', (event, input) => {
  65             input.select();
  66             event.stopPropagation();
  67         });
  68
  69         // Prevent closing pointer when clicked or focused
  70         DOM.onEvents(pointer, ['click', 'focus'], event => {
  71             event.stopPropagation();
  72         });
  73
  74         // Pointer mode toggle
  75         DOM.onChildEvent(pointer, 'span.icon', 'click', (event, icon) => {
  76             event.stopPropagation();
  77             pointerModeLink = !pointerModeLink;
  78             icon.querySelector('[data-icon="include"]').style.display = (!pointerModeLink) ? 'inline' : 'none';
  79             icon.querySelector('[data-icon="link"]').style.display = (pointerModeLink) ? 'inline' : 'none';
  80             updatePointerContent();
  81         });
  82
  83         // Set up clipboard
  84         new Clipboard(pointer.querySelector('button'));
  85
  86         // Hide pointer when clicking away
  87         DOM.onEvents(document.body, ['click', 'focus'], event => {
  88             if (!pointerShowing || isSelection) return;
  89             pointer = pointer.parentElement.removeChild(pointer);
  90             pointerShowing = false;
  91         });
  92
  93         let updatePointerContent = (element) => {
  94             let inputText = pointerModeLink ? window.baseUrl(`/link/${this.pageId}#${pointerSectionId}`) : `{{@${this.pageId}#${pointerSectionId}}}`;
  95             if (pointerModeLink && !inputText.startsWith('http')) {
  96                 inputText = window.location.protocol + "//" + window.location.host + inputText;
  97             }
  98
  99             pointer.querySelector('input').value = inputText;
 100
 101             // Update anchor if present
 102             const editAnchor = pointer.querySelector('#pointer-edit');
 103             if (editAnchor && element) {
 104                 const editHref = editAnchor.dataset.editHref;
 105                 const elementId = element.id;
 106
 107                 // get the first 50 characters.
 108                 const queryContent = element.textContent && element.textContent.substring(0, 50);
 109                 editAnchor.href = `${editHref}?content-id=${elementId}&content-text=${encodeURIComponent(queryContent)}`;
 110             }
 111         };
 112
 113         // Show pointer when selecting a single block of tagged content
 114         DOM.forEach('.page-content [id^="bkmrk"]', bookMarkElem => {
 115             DOM.onEvents(bookMarkElem, ['mouseup', 'keyup'], event => {
 116                 event.stopPropagation();
 117                 let selection = window.getSelection();
 118                 if (selection.toString().length === 0) return;
 119
 120                 // Show pointer and set link
 121                 pointerSectionId = bookMarkElem.id;
 122                 updatePointerContent(bookMarkElem);
 123
 124                 bookMarkElem.parentNode.insertBefore(pointer, bookMarkElem);
 125                 pointer.style.display = 'block';
 126                 pointerShowing = true;
 127                 isSelection = true;
 128
 129                 // Set pointer to sit near mouse-up position
 130                 requestAnimationFrame(() => {
 131                     const bookMarkBounds = bookMarkElem.getBoundingClientRect();
 132                     let pointerLeftOffset = (event.pageX - bookMarkBounds.left - 164);
 133                     if (pointerLeftOffset < 0) {
 134                         pointerLeftOffset = 0
 135                     }
 136                     const pointerLeftOffsetPercent = (pointerLeftOffset / bookMarkBounds.width) * 100;
 137
 138                     pointerInner.style.left = pointerLeftOffsetPercent + '%';
 139
 140                     setTimeout(() => {
 141                         isSelection = false;
 142                     }, 100);
 143                 });
 144
 145             });
 146         });
 147     }
 148
 149     setupNavHighlighting() {
 150         // Check if support is present for IntersectionObserver
 151         if (!('IntersectionObserver' in window) ||
 152             !('IntersectionObserverEntry' in window) ||
 153             !('intersectionRatio' in window.IntersectionObserverEntry.prototype)) {
 154             return;
 155         }
 156
 157         let pageNav = document.querySelector('.sidebar-page-nav');
 158
 159         // fetch all the headings.
 160         let headings = document.querySelector('.page-content').querySelectorAll('h1, h2, h3, h4, h5, h6');
 161         // if headings are present, add observers.
 162         if (headings.length > 0 && pageNav !== null) {
 163             addNavObserver(headings);
 164         }
 165
 166         function addNavObserver(headings) {
 167             // Setup the intersection observer.
 168             let intersectOpts = {
 169                 rootMargin: '0px 0px 0px 0px',
 170                 threshold: 1.0
 171             };
 172             let pageNavObserver = new IntersectionObserver(headingVisibilityChange, intersectOpts);
 173
 174             // observe each heading
 175             for (let heading of headings) {
 176                 pageNavObserver.observe(heading);
 177             }
 178         }
 179
 180         function headingVisibilityChange(entries, observer) {
 181             for (let entry of entries) {
 182                 let isVisible = (entry.intersectionRatio === 1);
 183                 toggleAnchorHighlighting(entry.target.id, isVisible);
 184             }
 185         }
 186
 187         function toggleAnchorHighlighting(elementId, shouldHighlight) {
 188             DOM.forEach('a[href="#' + elementId + '"]', anchor => {
 189                 anchor.closest('li').classList.toggle('current-heading', shouldHighlight);
 190             });
 191         }
 192     }
 193 }
 194
 195 export default PageDisplay;