ls-stack utils

Appearance

@ls-stack/browser-utils / keyboardShortcuts

keyboardShortcuts ​

Modules ​

Interfaces ​

KeyBindingHandlerOptions ​

Defined in: keyboardShortcuts.ts:15

Extended by ​

Properties ​

timeout? ​
ts
optional timeout: number;

Defined in: keyboardShortcuts.ts:23

Keybinding sequences will wait this long between key presses before cancelling (default: 1000).

Note: Setting this value too low (i.e. 300) will be too fast for many of your users.

KeyBindingMap ​

Defined in: keyboardShortcuts.ts:11

A map of keybinding strings to event handlers.

Indexable ​

ts
[keybinding: string]: (event) => void

KeyBindingOptions ​

Defined in: keyboardShortcuts.ts:29

Options to configure the behavior of keybindings.

Extends ​

Properties ​

capture? ​
ts
optional capture: boolean;

Defined in: keyboardShortcuts.ts:38

Key presses will use a capture listener (default: false)

event? ​
ts
optional event: "keydown" | "keyup";

Defined in: keyboardShortcuts.ts:33

Key presses will listen to this event (default: "keydown").

timeout? ​
ts
optional timeout: number;

Defined in: keyboardShortcuts.ts:23

Keybinding sequences will wait this long between key presses before cancelling (default: 1000).

Note: Setting this value too low (i.e. 300) will be too fast for many of your users.

Inherited from ​

KeyBindingHandlerOptions.timeout

Type Aliases ​

KeyBindingPress ​

ts
type KeyBindingPress = [string[], string | RegExp];

Defined in: keyboardShortcuts.ts:6

A single press of a keybinding sequence

Functions ​

createKeybindingsHandler() ​

ts
function createKeybindingsHandler(keyBindingMap, options): EventListener;

Defined in: keyboardShortcuts.ts:175

Creates an event listener for handling keybindings.

Parameters ​

keyBindingMap ​

KeyBindingMap

options ​

KeyBindingHandlerOptions = {}

Returns ​

EventListener

Example ​

js
import { createKeybindingsHandler } from "../src/keybindings"

let handler = createKeybindingsHandler({
	"Shift+d": () => {
		alert("The 'Shift' and 'd' keys were pressed at the same time")
	},
	"y e e t": () => {
		alert("The keys 'y', 'e', 'e', and 't' were pressed in order")
	},
	"$mod+d": () => {
		alert("Either 'Control+d' or 'Meta+d' were pressed")
	},
})

window.addEvenListener("keydown", handler)

ignoreInputTypingEvents() ​

ts
function ignoreInputTypingEvents(callback): (e) => void;

Defined in: keyboardShortcuts.ts:265

Parameters ​

callback ​

Callback | { current: Callback; }

Returns ​

ts
(e): void;
Parameters ​
e ​

KeyboardEvent

Returns ​

void

ignoreRichTextInputTypingEvents() ​

ts
function ignoreRichTextInputTypingEvents(callback): (e) => void;

Defined in: keyboardShortcuts.ts:284

Parameters ​

callback ​

Callback | { current: Callback; }

Returns ​

ts
(e): void;
Parameters ​
e ​

KeyboardEvent

Returns ​

void

keyboardShortcuts() ​

ts
function keyboardShortcuts(
   target, 
   keyBindingMap, 
   __namedParameters): () => void;

Defined in: keyboardShortcuts.ts:251

Subscribes to keybindings.

Returns an unsubscribe method.

Parameters ​

target ​

Window | HTMLElement

keyBindingMap ​

KeyBindingMap

__namedParameters ​

KeyBindingOptions = {}

Returns ​

ts
(): void;
Returns ​

void

Example ​

js
import { keyboardShortcuts } from "@ls-stack/browser-utils/keyboardShortcuts"

tinykeys(window, {
	"Shift+d": () => {
		alert("The 'Shift' and 'd' keys were pressed at the same time")
	},
	"y e e t": () => {
		alert("The keys 'y', 'e', 'e', and 't' were pressed in order")
	},
	"$mod+d": () => {
		alert("Either 'Control+d' or 'Meta+d' were pressed")
	},
})

matchKeyBindingPress() ​

ts
function matchKeyBindingPress(event, __namedParameters): boolean;

Defined in: keyboardShortcuts.ts:124

This tells us if a single keyboard event matches a single keybinding press.

Parameters ​

event ​

KeyboardEvent

__namedParameters ​

KeyBindingPress

Returns ​

boolean

parseKeybinding() ​

ts
function parseKeybinding(str): KeyBindingPress[];

Defined in: keyboardShortcuts.ts:105

Parses a "Key Binding String" into its parts

grammar = {sequence} {sequence} = {press} {press} {press} ... {press} = {key} or {mods}+{key} {mods} = {mod}+{mod}+... {key} = {KeyboardEvent.key} or {KeyboardEvent.code} (case-insensitive) {key} = ({regex}) -> /^{regex}$/ (case-sensitive)

Parameters ​

str ​

string

Returns ​

KeyBindingPress[]