BookStack Code Mirror - bookstack/blob - resources/js/components/shortcut-input.js

   1 /**
   2  * Keys to ignore when recording shortcuts.
   3  * @type {string[]}
   4  */
   5 const ignoreKeys = ['Control', 'Alt', 'Shift', 'Meta', 'Super', ' ', '+', 'Tab', 'Escape'];
   6
   7 /**
   8  * @extends {Component}
   9  */
  10 class ShortcutInput {
  11
  12     setup() {
  13         this.input = this.$el;
  14
  15         this.setupListeners();
  16     }
  17
  18     setupListeners() {
  19         this.listenerRecordKey = this.listenerRecordKey.bind(this);
  20
  21         this.input.addEventListener('focus', () => {
  22              this.startListeningForInput();
  23         });
  24
  25         this.input.addEventListener('blur', () => {
  26             this.stopListeningForInput();
  27         })
  28     }
  29
  30     startListeningForInput() {
  31         this.input.addEventListener('keydown', this.listenerRecordKey)
  32     }
  33
  34     /**
  35      * @param {KeyboardEvent} event
  36      */
  37     listenerRecordKey(event) {
  38         if (ignoreKeys.includes(event.key)) {
  39             return;
  40         }
  41
  42         const keys = [
  43             event.ctrlKey ? 'Ctrl' : '',
  44             event.metaKey ? 'Cmd' : '',
  45             event.key,
  46         ];
  47
  48         this.input.value = keys.filter(s => Boolean(s)).join(' + ');
  49     }
  50
  51     stopListeningForInput() {
  52         this.input.removeEventListener('keydown', this.listenerRecordKey);
  53     }
  54
  55 }
  56
  57 export default ShortcutInput;