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

   1 import * as DOM from '../services/dom';
   2 import {Component} from './component';
   3 import {copyTextToClipboard} from '../services/clipboard';
   4
   5 export class Pointer extends Component {
   6
   7     setup() {
   8         this.container = this.$el;
   9         this.input = this.$refs.input;
  10         this.button = this.$refs.button;
  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.setupListeners();
  20     }
  21
  22     setupListeners() {
  23         // Copy on copy button click
  24         this.button.addEventListener('click', () => {
  25             copyTextToClipboard(this.input.value);
  26         });
  27
  28         // Select all contents on input click
  29         this.input.addEventListener('click', event => {
  30             this.input.select();
  31             event.stopPropagation();
  32         });
  33
  34         // Prevent closing pointer when clicked or focused
  35         DOM.onEvents(this.container, ['click', 'focus'], event => {
  36             event.stopPropagation();
  37         });
  38
  39         // Pointer mode toggle
  40         DOM.onChildEvent(this.container, 'span.icon', 'click', (event, icon) => {
  41             event.stopPropagation();
  42             this.pointerModeLink = !this.pointerModeLink;
  43             icon.querySelector('[data-icon="include"]').style.display = (!this.pointerModeLink) ? 'inline' : 'none';
  44             icon.querySelector('[data-icon="link"]').style.display = (this.pointerModeLink) ? 'inline' : 'none';
  45             this.updateForTarget();
  46         });
  47
  48         // Hide pointer when clicking away
  49         DOM.onEvents(document.body, ['click', 'focus'], () => {
  50             if (!this.showing || this.isSelection) return;
  51             this.hidePointer();
  52         });
  53
  54         // Show pointer when selecting a single block of tagged content
  55         const pageContent = document.querySelector('.page-content');
  56         DOM.onEvents(pageContent, ['mouseup', 'keyup'], event => {
  57             event.stopPropagation();
  58             const targetEl = event.target.closest('[id^="bkmrk"]');
  59             if (targetEl) {
  60                 this.showPointerAtTarget(targetEl, event.pageX);
  61             }
  62         });
  63     }
  64
  65     hidePointer() {
  66         this.container.style.display = null;
  67         this.showing = false;
  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         this.container.style.display = 'block';
  84         const targetBounds = element.getBoundingClientRect();
  85         const pointerBounds = this.container.getBoundingClientRect();
  86
  87         const xTarget = Math.min(Math.max(xPosition, targetBounds.left), targetBounds.right);
  88         const xOffset = xTarget - (pointerBounds.width / 2);
  89         const yOffset = (targetBounds.top - pointerBounds.height) - 16;
  90
  91         this.container.style.left = `${xOffset}px`;
  92         this.container.style.top = `${yOffset}px`;
  93
  94         this.showing = true;
  95         this.isSelection = true;
  96
  97         setTimeout(() => {
  98             this.isSelection = false;
  99         }, 100);
 100
 101         const scrollListener = () => {
 102             this.hidePointer();
 103             window.removeEventListener('scroll', scrollListener, {passive: true});
 104         };
 105         window.addEventListener('scroll', scrollListener, {passive: true});
 106     }
 107
 108     /**
 109      * Update the pointer inputs/content for the given target element.
 110      * @param {?Element} element
 111      */
 112     updateForTarget(element) {
 113         let inputText = this.pointerModeLink ? window.baseUrl(`/link/${this.pageId}#${this.pointerSectionId}`) : `{{@${this.pageId}#${this.pointerSectionId}}}`;
 114         if (this.pointerModeLink && !inputText.startsWith('http')) {
 115             inputText = `${window.location.protocol}//${window.location.host}${inputText}`;
 116         }
 117
 118         this.input.value = inputText;
 119
 120         // Update anchor if present
 121         const editAnchor = this.container.querySelector('#pointer-edit');
 122         if (editAnchor && element) {
 123             const {editHref} = editAnchor.dataset;
 124             const elementId = element.id;
 125
 126             // get the first 50 characters.
 127             const queryContent = element.textContent && element.textContent.substring(0, 50);
 128             editAnchor.href = `${editHref}?content-id=${elementId}&content-text=${encodeURIComponent(queryContent)}`;
 129         }
 130     }
 131
 132 }