IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Keybinds: Vendor Mousetrap (#88603)

Browse Source 
* vendor mousetrap

* fix js lint errors

* name to .ts - start refactoring to typescript

* refactor Mousetrap to valid typescript

rename local functions/variables
update types of CallbackInfo
Specify MouseCallback and cleanup types

* Use vendored mousetrap

* use vendored mousetrap

* add globalBind, and remove dependency on external mousetrap

* Update public/app/core/services/keybindingSrv.ts

Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>

---------

Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
This commit is contained in:
Josh Hunt
2024-06-04 09:35:19 +01:00
committed by GitHub
parent 1cb701c304
commit 407bbe1f4b
6 changed files with 988 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/core/services/KeybindingSet.ts
View File

@@ -1,4 +1,4 @@
import Mousetrap from 'mousetrap';
import { mousetrap } from './mousetrap';
export interface KeyBindingItem {
/** Key or key pattern like mod+o */
@@ -16,7 +16,7 @@ export class KeybindingSet {
private _binds: KeyBindingItem[] = [];
addBinding(item: KeyBindingItem) {
Mousetrap.bind(
mousetrap.bind(
item.key,
(evt) => {
evt.preventDefault();
@@ -31,7 +31,7 @@ export class KeybindingSet {
removeAll() {
this._binds.forEach((item) => {
Mousetrap.unbind(item.key, item.type);
mousetrap.unbind(item.key, item.type);
});
this._binds = [];
}

13
public/app/core/services/keybindingSrv.ts
View File

@@ -1,7 +1,3 @@
import Mousetrap from 'mousetrap';
import 'mousetrap-global-bind';
import 'mousetrap/plugins/global-bind/mousetrap-global-bind';
import { LegacyGraphHoverClearEvent, SetPanelAttentionEvent, locationUtil } from '@grafana/data';
import { LocationService } from '@grafana/runtime';
import appEvents from 'app/core/app_events';
@@ -26,6 +22,7 @@ import { HelpModal } from '../components/help/HelpModal';
import { contextSrv } from '../core';
import { RouteDescriptor } from '../navigation/types';
import { mousetrap } from './mousetrap';
import { toggleTheme } from './theme';
export class KeybindingSrv {
@@ -42,7 +39,7 @@ export class KeybindingSrv {
private panelId: string | number | null = null;
clearAndInitGlobalBindings(route: RouteDescriptor) {
Mousetrap.reset();
mousetrap.reset();
// Chromeless pages like login and signup page don't get any global bindings
if (!route.chromeless) {
@@ -158,7 +155,7 @@ export class KeybindingSrv {
}
bind(keyArg: string | string[], fn: () => void) {
Mousetrap.bind(
mousetrap.bind(
keyArg,
(evt) => {
evt.preventDefault();
@@ -171,7 +168,7 @@ export class KeybindingSrv {
}
bindGlobal(keyArg: string, fn: () => void) {
Mousetrap.bindGlobal(
mousetrap.bindGlobal(
keyArg,
(evt) => {
evt.preventDefault();
@@ -184,7 +181,7 @@ export class KeybindingSrv {
}
unbind(keyArg: string, keyType?: string) {
Mousetrap.unbind(keyArg, keyType);
mousetrap.unbind(keyArg, keyType);
}
bindWithPanelId(keyArg: string, fn: (panelId: number) => void) {

977
public/app/core/services/mousetrap/Mousetrap.ts Normal file
View File

@@ -0,0 +1,977 @@
/**
* Originally from https://github.com/ccampbell/mousetrap
*
* Copyright 2012-2017 Craig Campbell
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* Mousetrap is a simple keyboard shortcut library for Javascript with
* no external dependencies
*
* @version 1.6.5
* @url craig.is/killing/mice
*/
interface ExtendedKeyboardEvent extends KeyboardEvent {
returnValue: boolean; // IE returnValue
}
type MousetrapCallback = (e: ExtendedKeyboardEvent, combo: string) => boolean | void;
interface KeyInfo {
key: string;
modifiers: string[];
action: string;
}
interface CallbackInfo {
/**
* Modifiers (such as `ctrl`) involved in this binding
*/
modifiers: string[];
/**
* A single key press binding, such as `t` (for `t v`) or `ctrl + z`
*/
combo: string;
/**
* If this binding is a part of a sequence (`t v`, but not `ctrl + z`), this is the full sequence
*/
seq?: string;
/**
* The event type, such as keydown, keyup, or keypress
*/
action: string;
level: number | undefined;
callback: MousetrapCallback;
}
/**
* mapping of special keycodes to their corresponding keys
*
* everything in this dictionary cannot use keypress events
* so it has to be here to map to the correct keycodes for
* keyup/keydown events
*/
let MAP: Record<string, string> = {
8: 'backspace',
9: 'tab',
13: 'enter',
16: 'shift',
17: 'ctrl',
18: 'alt',
20: 'capslock',
27: 'esc',
32: 'space',
33: 'pageup',
34: 'pagedown',
35: 'end',
36: 'home',
37: 'left',
38: 'up',
39: 'right',
40: 'down',
45: 'ins',
46: 'del',
91: 'meta',
93: 'meta',
224: 'meta',
};
/**
* mapping for special characters so they can support
*
* this dictionary is only used incase you want to bind a
* keyup or keydown event to one of these keys
*/
let KEYCODE_MAP: Record<string, string> = {
106: '*',
107: '+',
109: '-',
110: '.',
111: '/',
186: ';',
187: '=',
188: ',',
189: '-',
190: '.',
191: '/',
192: '`',
219: '[',
220: '\\',
221: ']',
222: "'",
};
/**
* this is a mapping of keys that require shift on a US keypad
* back to the non shift equivelents
*
* this is so you can use keyup events with these keys
*
* note that this will only work reliably on US keyboards
*/
let SHIFT_MAP: Record<string, string> = {
'~': '`',
'!': '1',
'@': '2',
'#': '3',
$: '4',
'%': '5',
'^': '6',
'&': '7',
'*': '8',
'(': '9',
')': '0',
_: '-',
'+': '=',
':': ';',
'"': "'",
'<': ',',
'>': '.',
'?': '/',
'|': '\\',
};
/**
* this is a list of special strings you can use to map
* to modifier keys when you specify your keyboard shortcuts
*/
let SPECIAL_ALIASES: Record<string, string> = {
option: 'alt',
command: 'meta',
return: 'enter',
escape: 'esc',
plus: '+',
mod: /Mac|iPod|iPhone|iPad/.test(navigator.platform) ? 'meta' : 'ctrl',
};
/**
* variable to store the flipped version of _MAP from above
* needed to check if we should use keypress or not when no action
* is specified
*/
let REVERSE_MAP: Record<string, string> | null = null;
/**
* loop through the f keys, f1 to f19 and add them to the map
* programatically
*/
for (let i = 1; i < 20; ++i) {
MAP[111 + i] = 'f' + i;
}
/**
* loop through to map numbers on the numeric keypad
*/
for (let i = 0; i <= 9; ++i) {
// This needs to use a string cause otherwise since 0 is falsey
// mousetrap will never fire for numpad 0 pressed as part of a keydown
// event.
//
// @see https://github.com/ccampbell/mousetrap/pull/258
MAP[i + 96] = i.toString();
}
/**
* takes the event and returns the key character
*/
function characterFromEvent(event: KeyboardEvent): string {
// for keypress events we should return the character as is
if (event.type === 'keypress') {
let character = String.fromCharCode(event.which);
// if the shift key is not pressed then it is safe to assume
// that we want the character to be lowercase. this means if
// you accidentally have caps lock on then your key bindings
// will continue to work
//
// the only side effect that might not be desired is if you
// bind something like 'A' cause you want to trigger an
// event when capital A is pressed caps lock will no longer
// trigger the event. shift+a will though.
if (!event.shiftKey) {
character = character.toLowerCase();
}
return character;
}
// for non keypress events the special maps are needed
if (MAP[event.which]) {
return MAP[event.which];
}
if (KEYCODE_MAP[event.which]) {
return KEYCODE_MAP[event.which];
}
// if it is not in the special map
// with keydown and keyup events the character seems to always
// come in as an uppercase character whether you are pressing shift
// or not. we should make sure it is always lowercase for comparisons
return String.fromCharCode(event.which).toLowerCase();
}
/**
* checks if two arrays are equal
*/
function modifiersMatch(modifiers1: string[], modifiers2: string[]): boolean {
return modifiers1.sort().join(',') === modifiers2.sort().join(',');
}
/**
* takes a key event and figures out what the modifiers are
*/
function eventModifiers(event: KeyboardEvent): string[] {
let modifiers = [];
if (event.shiftKey) {
modifiers.push('shift');
}
if (event.altKey) {
modifiers.push('alt');
}
if (event.ctrlKey) {
modifiers.push('ctrl');
}
if (event.metaKey) {
modifiers.push('meta');
}
return modifiers;
}
/**
* prevents default for this event
*/
function preventDefault(event: KeyboardEvent): void {
if (event.preventDefault) {
event.preventDefault();
return;
}
event.returnValue = false;
}
/**
* stops propogation for this event
*/
function stopPropagation(event: KeyboardEvent): void {
if (event.stopPropagation) {
event.stopPropagation();
return;
}
event.cancelBubble = true;
}
/**
* determines if the keycode specified is a modifier key or not
*/
function isModifier(key: string): boolean {
return key === 'shift' || key === 'ctrl' || key === 'alt' || key === 'meta';
}
/**
* reverses the map lookup so that we can look for specific keys
* to see what can and can't use keypress
*/
function getReverseMap() {
if (!REVERSE_MAP) {
REVERSE_MAP = {};
for (let key in MAP) {
const keyNumber = parseInt(key, 10);
// pull out the numeric keypad from here cause keypress should
// be able to detect the keys from the character
if (keyNumber > 95 && keyNumber < 112) {
continue;
}
if (MAP.hasOwnProperty(key)) {
REVERSE_MAP[MAP[key]] = key;
}
}
}
return REVERSE_MAP;
}
/**
* picks the best action based on the key combination
*/
function pickBestAction(key: string, modifiers: string[], action?: string): string {
// if no action was picked in we should try to pick the one
// that we think would work best for this key
if (!action) {
action = getReverseMap()[key] ? 'keydown' : 'keypress';
}
// modifier keys don't work as expected with keypress,
// switch to keydown
if (action === 'keypress' && modifiers.length) {
action = 'keydown';
}
return action;
}
/**
* Converts from a string key combination to an array
*/
function keysFromString(combination: string): string[] {
if (combination === '+') {
return ['+'];
}
combination = combination.replace(/\+{2}/g, '+plus');
return combination.split('+');
}
/**
* Gets info for a specific key combination
*/
function getKeyInfo(combination: string, action?: string): KeyInfo {
let keys;
let key;
let i;
let modifiers = [];
// take the keys from this pattern and figure out what the actual
// pattern is all about
keys = keysFromString(combination);
for (i = 0; i < keys.length; ++i) {
key = keys[i];
// normalize key names
if (SPECIAL_ALIASES[key]) {
key = SPECIAL_ALIASES[key];
}
// if this is not a keypress event then we should
// be smart about using shift keys
// this will only work for US keyboards however
if (action && action !== 'keypress' && SHIFT_MAP[key]) {
key = SHIFT_MAP[key];
modifiers.push('shift');
}
// if this key is a modifier then add it to the list of modifiers
if (isModifier(key)) {
modifiers.push(key);
}
}
if (!key) {
throw new Error('Unable to get key');
}
// depending on what the key combination is
// we will try to pick the best event for it
action = pickBestAction(key, modifiers, action);
return {
key: key,
modifiers: modifiers,
action: action,
};
}
function belongsTo(element: null | ParentNode | Element | Document, ancestor: Element | Document) {
if (element === null || element === document) {
return false;
}
if (element === ancestor) {
return true;
}
return belongsTo(element.parentNode, ancestor);
}
class Mousetrap {
target: HTMLElement | Document;
/**
* a list of all the callbacks setup via Mousetrap.bind()
*/
_callbacks: Record<string, CallbackInfo[]> = {};
/**
* direct map of string combinations to callbacks used for trigger()
*/
_directMap: Record<string, Function> = {};
/**
* keeps track of what level each sequence is at since multiple
* sequences can start out with the same sequence
*/
_sequenceLevels: Record<string, number> = {};
/**
* variable to store the setTimeout call
*/
_resetTimer: undefined | number = undefined;
/**
* temporary state where we will ignore the next keyup
*/
_ignoreNextKeyup: boolean | string = false;
/**
* temporary state where we will ignore the next keypress
*/
_ignoreNextKeypress = false;
/**
* are we currently inside of a sequence?
* type of action ("keyup" or "keydown" or "keypress") or false
*/
_nextExpectedAction: boolean | string = false;
_globalCallbacks: Record<string, boolean> = {};
constructor(el: HTMLElement | Document) {
this.target = el;
this.target.addEventListener('keypress', (event) => {
if (event instanceof KeyboardEvent) {
this._handleKeyEvent(event);
}
});
this.target.addEventListener('keydown', (event) => {
if (event instanceof KeyboardEvent) {
this._handleKeyEvent(event);
}
});
this.target.addEventListener('keyup', (event) => {
if (event instanceof KeyboardEvent) {
this._handleKeyEvent(event);
}
});
}
/**
* resets all sequence counters except for the ones passed in
*/
private _resetSequences = (doNotReset: Record<string, number>): void => {
doNotReset = doNotReset || {};
let activeSequences = false,
key;
for (key in this._sequenceLevels) {
if (doNotReset[key]) {
activeSequences = true;
continue;
}
this._sequenceLevels[key] = 0;
}
if (!activeSequences) {
this._nextExpectedAction = false;
}
};
/**
* finds all callbacks that match based on the keycode, modifiers,
* and action
*/
private _getMatches = (
character: string,
modifiers: string[],
event: Pick<KeyboardEvent, 'type' | 'metaKey' | 'ctrlKey'>,
sequenceName?: string,
combination?: string,
level?: number
): CallbackInfo[] => {
let i;
let callback;
let matches = [];
let action = event.type;
// if there are no events related to this keycode
if (!this._callbacks[character]) {
return [];
}
// if a modifier key is coming up on its own we should allow it
if (action === 'keyup' && isModifier(character)) {
modifiers = [character];
}
// loop through all callbacks for the key that was pressed
// and see if any of them match
for (i = 0; i < this._callbacks[character].length; ++i) {
callback = this._callbacks[character][i];
// if a sequence name is not specified, but this is a sequence at
// the wrong level then move onto the next match
if (!sequenceName && callback.seq && this._sequenceLevels[callback.seq] !== callback.level) {
continue;
}
// if the action we are looking for doesn't match the action we got
// then we should keep going
if (action !== callback.action) {
continue;
}
// if this is a keypress event and the meta key and control key
// are not pressed that means that we need to only look at the
// character, otherwise check the modifiers as well
//
// chrome will not fire a keypress if meta or control is down
// safari will fire a keypress if meta or meta+shift is down
// firefox will fire a keypress if meta or control is down
if (
(action === 'keypress' && !event.metaKey && !event.ctrlKey) ||
modifiersMatch(modifiers, callback.modifiers)
) {
// when you bind a combination or sequence a second time it
// should overwrite the first one. if a sequenceName or
// combination is specified in this call it does just that
//
// @todo make deleting its own method?
let deleteCombo = !sequenceName && callback.combo === combination;
let deleteSequence = sequenceName && callback.seq === sequenceName && callback.level === level;
if (deleteCombo || deleteSequence) {
this._callbacks[character].splice(i, 1);
}
matches.push(callback);
}
}
return matches;
};
/**
* actually calls the callback function
*
* if your callback function returns false this will use the jquery
* convention - prevent default and stop propogation on the event
*
* @param combo Is the key binding that triggered this callback. When a sequence is triggered, this is the whole sequence. Otherwise, it's the intermediate keys
* @param sequence Is the 'parent sequence' of the combo. When the whole sequence is triggered, this is undefined.
*/
private _fireCallback = (callback: Function, e: KeyboardEvent, combo: string, sequence?: string) => {
// if this event should not happen stop here
const target = e.target || e.srcElement;
if (target && target instanceof HTMLElement && this.stopCallback(e, target, combo, sequence)) {
return;
}
if (callback(e, combo) === false) {
preventDefault(e);
stopPropagation(e);
}
};
/**
* handles a character key event
*/
private _handleKey = (character: string, modifiers: string[], e: KeyboardEvent) => {
let callbacks = this._getMatches(character, modifiers, e);
let i;
let doNotReset: Record<string, number> = {};
let maxLevel = 0;
let processedSequenceCallback = false;
// Calculate the maxLevel for sequences so we can only execute the longest callback sequence
for (i = 0; i < callbacks.length; ++i) {
if (callbacks[i].seq) {
maxLevel = Math.max(maxLevel, callbacks[i].level ?? 0);
}
}
// loop through matching callbacks for this key event
for (i = 0; i < callbacks.length; ++i) {
// fire for all sequence callbacks
// this is because if for example you have multiple sequences
// bound such as "g i" and "g t" they both need to fire the
// callback for matching g cause otherwise you can only ever
// match the first one
const seq = callbacks[i].seq;
if (seq) {
// only fire callbacks for the maxLevel to prevent
// subsequences from also firing
//
// for example 'a option b' should not cause 'option b' to fire
// even though 'option b' is part of the other sequence
//
// any sequences that do not match here will be discarded
// below by the _resetSequences call
if (callbacks[i].level !== maxLevel) {
continue;
}
processedSequenceCallback = true;
// keep a list of which sequences were matches for later
doNotReset[seq] = 1;
this._fireCallback(callbacks[i].callback, e, callbacks[i].combo, seq);
continue;
}
// if there were no sequence matches but we are still here
// that means this is a regular match so we should fire that
if (!processedSequenceCallback) {
this._fireCallback(callbacks[i].callback, e, callbacks[i].combo);
}
}
// if the key you pressed matches the type of sequence without
// being a modifier (ie "keyup" or "keypress") then we should
// reset all sequences that were not matched by this event
//
// this is so, for example, if you have the sequence "h a t" and you
// type "h e a r t" it does not match. in this case the "e" will
// cause the sequence to reset
//
// modifier keys are ignored because you can have a sequence
// that contains modifiers such as "enter ctrl+space" and in most
// cases the modifier key will be pressed before the next key
//
// also if you have a sequence such as "ctrl+b a" then pressing the
// "b" key will trigger a "keypress" and a "keydown"
//
// the "keydown" is expected when there is a modifier, but the
// "keypress" ends up matching the _nextExpectedAction since it occurs
// after and that causes the sequence to reset
//
// we ignore keypresses in a sequence that directly follow a keydown
// for the same character
let ignoreThisKeypress = e.type === 'keypress' && this._ignoreNextKeypress;
if (e.type === this._nextExpectedAction && !isModifier(character) && !ignoreThisKeypress) {
this._resetSequences(doNotReset);
}
this._ignoreNextKeypress = processedSequenceCallback && e.type === 'keydown';
};
/**
* handles a keydown event
*/
private _handleKeyEvent = (rawEvent: Event) => {
if (!(rawEvent instanceof KeyboardEvent)) {
throw new Error("Didn't get a KeyboardEvent");
}
const event: KeyboardEvent = rawEvent;
// normalize e.which for key events
// @see http://stackoverflow.com/questions/4285627/javascript-keycode-vs-charcode-utter-confusion
if (typeof event.which !== 'number') {
/// @ts-expect-error - TODO: determine what to do with this compat
event.which = event.keyCode;
}
let character = characterFromEvent(event);
// no character found then stop
if (!character) {
return;
}
// need to use === for the character check because the character can be 0
if (event.type === 'keyup' && this._ignoreNextKeyup === character) {
this._ignoreNextKeyup = false;
return;
}
this.handleKey(character, eventModifiers(event), event);
};
/**
* called to set a 1 second timeout on the specified sequence
*
* this is so after each key press in the sequence you have 1 second
* to press the next key before you have to start over
*/
private _resetSequenceTimer = () => {
clearTimeout(this._resetTimer);
this._resetTimer = setTimeout(this._resetSequences, 1000);
};
/**
* binds a key sequence to an event
*/
private _bindSequence = (combo: string, keys: string[], callback: MousetrapCallback, action?: string): void => {
// start off by adding a sequence level record for this combination
// and setting the level to 0
this._sequenceLevels[combo] = 0;
/**
* callback to increase the sequence level for this sequence and reset
* all other sequences that were active
*/
const _increaseSequence = (nextAction: string): MousetrapCallback => {
return () => {
this._nextExpectedAction = nextAction;
++this._sequenceLevels[combo];
this._resetSequenceTimer();
};
};
/**
* wraps the specified callback inside of another function in order
* to reset all sequence counters as soon as this sequence is done
*/
const _callbackAndReset = (e: KeyboardEvent): void => {
this._fireCallback(callback, e, combo);
// we should ignore the next key up if the action is key down
// or keypress. this is so if you finish a sequence and
// release the key the final key will not trigger a keyup
if (action !== 'keyup') {
this._ignoreNextKeyup = characterFromEvent(e);
}
// weird race condition if a sequence ends with the key
// another sequence begins with
setTimeout(this._resetSequences, 10);
};
// loop through keys one at a time and bind the appropriate callback
// function. for any key leading up to the final one it should
// increase the sequence. after the final, it should reset all sequences
//
// if an action is specified in the original bind call then that will
// be used throughout. otherwise we will pass the action that the
// next key in the sequence should match. this allows a sequence
// to mix and match keypress and keydown events depending on which
// ones are better suited to the key provided
for (let i = 0; i < keys.length; ++i) {
let isFinal = i + 1 === keys.length;
let wrappedCallback = isFinal ? _callbackAndReset : _increaseSequence(action || getKeyInfo(keys[i + 1]).action);
this._bindSingle(keys[i], wrappedCallback, action, combo, i);
}
};
/**
* binds a single keyboard combination
*/
private _bindSingle = (
combination: string,
callback: MousetrapCallback,
action?: string,
sequenceName?: string,
level?: number
): void => {
// store a direct mapped reference for use with Mousetrap.trigger
this._directMap[combination + ':' + action] = callback;
// make sure multiple spaces in a row become a single space
combination = combination.replace(/\s+/g, ' ');
let sequence = combination.split(' ');
let info;
// if this pattern is a sequence of keys then run through this method
// to reprocess each pattern one key at a time
if (sequence.length > 1) {
this._bindSequence(combination, sequence, callback, action);
return;
}
info = getKeyInfo(combination, action);
// make sure to initialize array if this is the first time
// a callback is added for this key
this._callbacks[info.key] = this._callbacks[info.key] || [];
// remove an existing match if there is one
const eventLike = { type: info.action, metaKey: false, ctrlKey: false };
this._getMatches(info.key, info.modifiers, eventLike, sequenceName, combination, level);
const callbackInfo: CallbackInfo = {
callback: callback,
modifiers: info.modifiers,
action: info.action,
seq: sequenceName,
level: level,
combo: combination,
};
// add this call back to the array
// if it is a sequence put it at the beginning
// if not put it at the end
//
// this is important because the way these are processed expects
// the sequence ones to come first
this._callbacks[info.key][sequenceName ? 'unshift' : 'push'](callbackInfo);
};
/**
* binds multiple combinations to the same callback
*/
private _bindMultiple = (combinations: string[], callback: MousetrapCallback, action: string | undefined): void => {
for (let i = 0; i < combinations.length; ++i) {
this._bindSingle(combinations[i], callback, action);
}
};
/**
* binds an event to mousetrap
*
* can be a single key, a combination of keys separated with +,
* an array of keys, or a sequence of keys separated by spaces
*
* be sure to list the modifier keys first to make sure that the
* correct key ends up getting bound (the last key in the pattern)
*/
bind = (keys: string | string[], callback: MousetrapCallback, action?: string) => {
keys = keys instanceof Array ? keys : [keys];
this._bindMultiple(keys, callback, action);
return self;
};
/**
* unbinds an event to mousetrap
*
* the unbinding sets the callback function of the specified key combo
* to an empty function and deletes the corresponding key in the
* _directMap dict.
*
* TODO: actually remove this from the _callbacks dictionary instead
* of binding an empty function
*
* the keycombo+action has to be exactly the same as
* it was defined in the bind method
*/
unbind = (keys: string | string[], action?: string) => {
return this.bind(keys, function () {}, action);
};
// From bind-global plugin
// https://github.com/Elvynia/mousetrap-global-bind/blob/master/mousetrap-global-bind.js#L28
bindGlobal = (keys: string | string[], callback: MousetrapCallback, action?: string) => {
this.bind(keys, callback, action);
if (keys instanceof Array) {
for (let i = 0; i < keys.length; i++) {
this._globalCallbacks[keys[i]] = true;
}
return;
}
this._globalCallbacks[keys] = true;
};
// From bind-global plugin
// https://github.com/Elvynia/mousetrap-global-bind/blob/master/mousetrap-global-bind.js#L42
unbindGlobal = (keys: string | string[], action?: string) => {
this.unbind(keys, action);
if (keys instanceof Array) {
for (let i = 0; i < keys.length; i++) {
this._globalCallbacks[keys[i]] = false;
}
return;
}
this._globalCallbacks[keys] = false;
};
/**
* triggers an event that has already been bound
*/
trigger = (keys: string, action: string | undefined) => {
let self = this;
if (self._directMap[keys + ':' + action]) {
self._directMap[keys + ':' + action]({}, keys);
}
return self;
};
/**
* resets the library back to its initial state. this is useful
* if you want to clear out the current keyboard shortcuts and bind
* new ones - for example if you switch to another page
*/
reset = () => {
this._callbacks = {};
this._directMap = {};
return this;
};
/**
* should we stop this event before firing off callbacks
*/
stopCallback = (e: Event, element: HTMLElement, combo: string, sequence?: string): boolean => {
// From global bind plugin https://github.com/Elvynia/mousetrap-global-bind/blob/master/mousetrap-global-bind.js
if (this._globalCallbacks[combo] || (sequence && this._globalCallbacks[sequence])) {
return false;
}
// if the element has the class "mousetrap" then no need to stop
if ((' ' + element.className + ' ').indexOf(' mousetrap ') > -1) {
return false;
}
if (belongsTo(element, this.target)) {
return false;
}
// Events originating from a shadow DOM are re-targetted and `e.target` is the shadow host,
// not the initial event target in the shadow tree. Note that not all events cross the
// shadow boundary.
// For shadow trees with `mode: 'open'`, the initial event target is the first element in
// the event’s composed path. For shadow trees with `mode: 'closed'`, the initial event
// target cannot be obtained.
if ('composedPath' in e && typeof e.composedPath === 'function') {
// For open shadow trees, update `element` so that the following check works.
let initialEventTarget = e.composedPath()[0];
if (initialEventTarget !== e.target && initialEventTarget instanceof HTMLElement) {
element = initialEventTarget;
}
}
// stop for input, select, and textarea
return Boolean(
element.tagName === 'INPUT' ||
element.tagName === 'SELECT' ||
element.tagName === 'TEXTAREA' ||
('isContentEditable' in element && element.isContentEditable)
);
};
/**
* exposes _handleKey publicly so it can be overwritten by extensions
*/
handleKey: typeof this._handleKey = (...args) => {
return this._handleKey(...args);
};
/**
* allow custom key mappings
*/
addKeycodes = (object: Record<string, string>) => {
for (let key in object) {
if (object.hasOwnProperty(key)) {
MAP[key] = object[key];
}
}
REVERSE_MAP = null;
};
}
const mousetrapInstance = new Mousetrap(document);
export default mousetrapInstance;

3
public/app/core/services/mousetrap/index.ts Normal file
View File

@@ -0,0 +1,3 @@
import mousetrapInstance from './Mousetrap';
export const mousetrap = mousetrapInstance;