BookStack/resources/js/components/shortcut-input.js
2022-11-15 11:24:31 +00:00

54 lines
1.2 KiB
JavaScript

import {Component} from "./component";
/**
* Keys to ignore when recording shortcuts.
* @type {string[]}
*/
const ignoreKeys = ['Control', 'Alt', 'Shift', 'Meta', 'Super', ' ', '+', 'Tab', 'Escape'];
export class ShortcutInput extends Component {
setup() {
this.input = this.$el;
this.setupListeners();
}
setupListeners() {
this.listenerRecordKey = this.listenerRecordKey.bind(this);
this.input.addEventListener('focus', () => {
this.startListeningForInput();
});
this.input.addEventListener('blur', () => {
this.stopListeningForInput();
})
}
startListeningForInput() {
this.input.addEventListener('keydown', this.listenerRecordKey)
}
/**
* @param {KeyboardEvent} event
*/
listenerRecordKey(event) {
if (ignoreKeys.includes(event.key)) {
return;
}
const keys = [
event.ctrlKey ? 'Ctrl' : '',
event.metaKey ? 'Cmd' : '',
event.key,
];
this.input.value = keys.filter(s => Boolean(s)).join(' + ');
}
stopListeningForInput() {
this.input.removeEventListener('keydown', this.listenerRecordKey);
}
}