+import {Component} from './component';
+
function reverseMap(map) {
const reversed = {};
for (const [key, value] of Object.entries(map)) {
return reversed;
}
-/**
- * @extends {Component}
- */
-class Shortcuts {
+export class Shortcuts extends Component {
setup() {
this.container = this.$el;
this.hintsShowing = false;
this.hideHints = this.hideHints.bind(this);
+ this.hintAbortController = null;
this.setupListeners();
}
setupListeners() {
window.addEventListener('keydown', event => {
-
- if (event.target.closest('input, select, textarea')) {
+ if (event.target.closest('input, select, textarea, .cm-editor, .editor-container')) {
return;
}
- this.handleShortcutPress(event);
- });
-
- window.addEventListener('keydown', event => {
if (event.key === '?') {
- this.hintsShowing ? this.hideHints() : this.showHints();
+ if (this.hintsShowing) {
+ this.hideHints();
+ } else {
+ this.showHints();
+ }
+ return;
}
+
+ this.handleShortcutPress(event);
});
}
* @param {KeyboardEvent} event
*/
handleShortcutPress(event) {
-
const keys = [
event.ctrlKey ? 'Ctrl' : '',
event.metaKey ? 'Cmd' : '',
return true;
}
- console.error(`Shortcut attempted to be ran for element type that does not have handling setup`, el);
+ console.error('Shortcut attempted to be ran for element type that does not have handling setup', el);
return false;
}
displayedIds.add(id);
}
- window.addEventListener('scroll', this.hideHints);
- window.addEventListener('focus', this.hideHints);
- window.addEventListener('blur', this.hideHints);
- window.addEventListener('click', this.hideHints);
+ this.hintAbortController = new AbortController();
+ const signal = this.hintAbortController.signal;
+ window.addEventListener('scroll', this.hideHints, {signal});
+ window.addEventListener('focus', this.hideHints, {signal});
+ window.addEventListener('blur', this.hideHints, {signal});
+ window.addEventListener('click', this.hideHints, {signal});
this.hintsShowing = true;
}
const linkage = document.createElement('div');
linkage.classList.add('shortcut-linkage');
- linkage.style.left = targetBounds.x + 'px';
- linkage.style.top = targetBounds.y + 'px';
- linkage.style.width = targetBounds.width + 'px';
- linkage.style.height = targetBounds.height + 'px';
+ linkage.style.left = `${targetBounds.x}px`;
+ linkage.style.top = `${targetBounds.y}px`;
+ linkage.style.width = `${targetBounds.width}px`;
+ linkage.style.height = `${targetBounds.height}px`;
wrapper.append(label, linkage);
hideHints() {
const wrapper = this.container.querySelector('.shortcut-container');
wrapper.remove();
-
- window.removeEventListener('scroll', this.hideHints);
- window.removeEventListener('focus', this.hideHints);
- window.removeEventListener('blur', this.hideHints);
- window.removeEventListener('click', this.hideHints);
-
+ this.hintAbortController?.abort();
this.hintsShowing = false;
}
-}
-export default Shortcuts;
\ No newline at end of file
+}