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

   1 function reverseMap(map) {
   2     const reversed = {};
   3     for (const [key, value] of Object.entries(map)) {
   4         reversed[value] = key;
   5     }
   6     return reversed;
   7 }
   8
   9 /**
  10  * @extends {Component}
  11  */
  12 class Shortcuts {
  13
  14     setup() {
  15         this.container = this.$el;
  16         this.mapById = JSON.parse(this.$opts.keyMap);
  17         this.mapByShortcut = reverseMap(this.mapById);
  18
  19         this.hintsShowing = false;
  20
  21         this.hideHints = this.hideHints.bind(this);
  22
  23         this.setupListeners();
  24     }
  25
  26     setupListeners() {
  27         window.addEventListener('keydown', event => {
  28
  29             if (event.target.closest('input, select, textarea')) {
  30                 return;
  31             }
  32
  33             this.handleShortcutPress(event);
  34         });
  35
  36         window.addEventListener('keydown', event => {
  37             if (event.key === '?') {
  38                 this.hintsShowing ? this.hideHints() : this.showHints();
  39             }
  40         });
  41     }
  42
  43     /**
  44      * @param {KeyboardEvent} event
  45      */
  46     handleShortcutPress(event) {
  47
  48         const keys = [
  49             event.ctrlKey ? 'Ctrl' : '',
  50             event.metaKey ? 'Cmd' : '',
  51             event.key,
  52         ];
  53
  54         const combo = keys.filter(s => Boolean(s)).join(' + ');
  55
  56         const shortcutId = this.mapByShortcut[combo];
  57         if (shortcutId) {
  58             const wasHandled = this.runShortcut(shortcutId);
  59             if (wasHandled) {
  60                 event.preventDefault();
  61             }
  62         }
  63     }
  64
  65     /**
  66      * Run the given shortcut, and return a boolean to indicate if the event
  67      * was successfully handled by a shortcut action.
  68      * @param {String} id
  69      * @return {boolean}
  70      */
  71     runShortcut(id) {
  72         const el = this.container.querySelector(`[data-shortcut="${id}"]`);
  73         if (!el) {
  74             return false;
  75         }
  76
  77         if (el.matches('input, textarea, select')) {
  78             el.focus();
  79             return true;
  80         }
  81
  82         if (el.matches('a, button')) {
  83             el.click();
  84             return true;
  85         }
  86
  87         if (el.matches('div[tabindex]')) {
  88             el.click();
  89             el.focus();
  90             return true;
  91         }
  92
  93         console.error(`Shortcut attempted to be ran for element type that does not have handling setup`, el);
  94
  95         return false;
  96     }
  97
  98     showHints() {
  99         const wrapper = document.createElement('div');
 100         wrapper.classList.add('shortcut-container');
 101         this.container.append(wrapper);
 102
 103         const shortcutEls = this.container.querySelectorAll('[data-shortcut]');
 104         const displayedIds = new Set();
 105         for (const shortcutEl of shortcutEls) {
 106             const id = shortcutEl.getAttribute('data-shortcut');
 107             if (displayedIds.has(id)) {
 108                 continue;
 109             }
 110
 111             const key = this.mapById[id];
 112             this.showHintLabel(shortcutEl, key, wrapper);
 113             displayedIds.add(id);
 114         }
 115
 116         window.addEventListener('scroll', this.hideHints);
 117         window.addEventListener('focus', this.hideHints);
 118         window.addEventListener('blur', this.hideHints);
 119         window.addEventListener('click', this.hideHints);
 120
 121         this.hintsShowing = true;
 122     }
 123
 124     /**
 125      * @param {Element} targetEl
 126      * @param {String} key
 127      * @param {Element} wrapper
 128      */
 129     showHintLabel(targetEl, key, wrapper) {
 130         const targetBounds = targetEl.getBoundingClientRect();
 131
 132         const label = document.createElement('div');
 133         label.classList.add('shortcut-hint');
 134         label.textContent = key;
 135
 136         const linkage = document.createElement('div');
 137         linkage.classList.add('shortcut-linkage');
 138         linkage.style.left = targetBounds.x + 'px';
 139         linkage.style.top = targetBounds.y + 'px';
 140         linkage.style.width = targetBounds.width + 'px';
 141         linkage.style.height = targetBounds.height + 'px';
 142
 143         wrapper.append(label, linkage);
 144
 145         const labelBounds = label.getBoundingClientRect();
 146
 147         label.style.insetInlineStart = `${((targetBounds.x + targetBounds.width) - (labelBounds.width + 6))}px`;
 148         label.style.insetBlockStart = `${(targetBounds.y + (targetBounds.height - labelBounds.height) / 2)}px`;
 149     }
 150
 151     hideHints() {
 152         const wrapper = this.container.querySelector('.shortcut-container');
 153         wrapper.remove();
 154
 155         window.removeEventListener('scroll', this.hideHints);
 156         window.removeEventListener('focus', this.hideHints);
 157         window.removeEventListener('blur', this.hideHints);
 158         window.removeEventListener('click', this.hideHints);
 159
 160         this.hintsShowing = false;
 161     }
 162 }
 163
 164 export default Shortcuts;