BookStack Code Mirror - bookstack/blob - resources/js/components/pointer.js

   1 import * as DOM from "../services/dom";
   2 import Clipboard from "clipboard/dist/clipboard.min";
   3
   4 /**
   5  * @extends Component
   6  */
   7 class Pointer {
   8
   9     setup() {
  10         this.container = this.$el;
  11         this.pageId = this.$opts.pageId;
  12
  13         // Instance variables
  14         this.showing = false;
  15         this.isSelection = false;
  16         this.pointerModeLink = true;
  17         this.pointerSectionId = '';
  18
  19         this.init();
  20         this.setupListeners();
  21     }
  22
  23     init() {
  24         // Set up pointer by removing it
  25         this.container.parentNode.removeChild(this.container);
  26
  27         // Set up clipboard
  28         new Clipboard(this.container.querySelector('button'));
  29     }
  30
  31     setupListeners() {
  32         // Select all contents on input click
  33         DOM.onChildEvent(this.container, 'input', 'click', (event, input) => {
  34             input.select();
  35             event.stopPropagation();
  36         });
  37
  38         // Prevent closing pointer when clicked or focused
  39         DOM.onEvents(this.container, ['click', 'focus'], event => {
  40             event.stopPropagation();
  41         });
  42
  43         // Pointer mode toggle
  44         DOM.onChildEvent(this.container, 'span.icon', 'click', (event, icon) => {
  45             event.stopPropagation();
  46             this.pointerModeLink = !this.pointerModeLink;
  47             icon.querySelector('[data-icon="include"]').style.display = (!this.pointerModeLink) ? 'inline' : 'none';
  48             icon.querySelector('[data-icon="link"]').style.display = (this.pointerModeLink) ? 'inline' : 'none';
  49             this.updateForTarget();
  50         });
  51
  52         // Hide pointer when clicking away
  53         DOM.onEvents(document.body, ['click', 'focus'], event => {
  54             if (!this.showing || this.isSelection) return;
  55             this.container.parentElement.removeChild(this.container);
  56             this.showing = false;
  57         });
  58
  59         // Show pointer when selecting a single block of tagged content
  60         const pageContent = document.querySelector('.page-content');
  61         DOM.onEvents(pageContent, ['mouseup', 'keyup'], event => {
  62             event.stopPropagation();
  63             const targetEl = event.target.closest('[id^="bkmrk"]');
  64             if (targetEl) {
  65                 this.showPointerAtTarget(targetEl, event.pageX);
  66             }
  67         });
  68     }
  69
  70     /**
  71      * Move and display the pointer at the given element, targeting the given screen x-position if possible.
  72      * @param {Element} element
  73      * @param {Number} xPosition
  74      */
  75     showPointerAtTarget(element, xPosition) {
  76         const selection = window.getSelection();
  77         if (selection.toString().length === 0) return;
  78
  79         // Show pointer and set link
  80         this.pointerSectionId = element.id;
  81         this.updateForTarget(element);
  82
  83         element.parentNode.insertBefore(this.container, element);
  84         this.container.style.display = 'block';
  85         this.showing = true;
  86         this.isSelection = true;
  87
  88         // Set pointer to sit near mouse-up position
  89         requestAnimationFrame(() => {
  90             const bookMarkBounds = element.getBoundingClientRect();
  91             const pointerLeftOffset = Math.max((xPosition - bookMarkBounds.left - 164), 0);
  92             const pointerLeftOffsetPercent = (pointerLeftOffset / bookMarkBounds.width) * 100;
  93
  94             this.container.children[0].style.left = pointerLeftOffsetPercent + '%';
  95
  96             setTimeout(() => {
  97                 this.isSelection = false;
  98             }, 100);
  99         });
 100     }
 101
 102     /**
 103      * Update the pointer inputs/content for the given target element.
 104      * @param {?Element} element
 105      */
 106     updateForTarget(element) {
 107         let inputText = this.pointerModeLink ? window.baseUrl(`/link/${this.pageId}#${this.pointerSectionId}`) : `{{@${this.pageId}#${this.pointerSectionId}}}`;
 108         if (this.pointerModeLink && !inputText.startsWith('http')) {
 109             inputText = window.location.protocol + "//" + window.location.host + inputText;
 110         }
 111
 112         this.container.querySelector('input').value = inputText;
 113
 114         // Update anchor if present
 115         const editAnchor = this.container.querySelector('#pointer-edit');
 116         if (editAnchor && element) {
 117             const editHref = editAnchor.dataset.editHref;
 118             const elementId = element.id;
 119
 120             // get the first 50 characters.
 121             const queryContent = element.textContent && element.textContent.substring(0, 50);
 122             editAnchor.href = `${editHref}?content-id=${elementId}&content-text=${encodeURIComponent(queryContent)}`;
 123         }
 124     }
 125 }
 126
 127 export default Pointer;