Stack shortcuts
Quick start
npm
npm i stack-shortcuts --save
browser
Sandbox
The problem
Initial data:
Imagine, you have an application with small picture
, you can move it along x and y axis
by the keyboard arrows
. Mouse click on the picture
, should open a modal dialogue
with full sized picture.
And now for example you need to use arrowUp
and arrowDown
buttons for navigate to related images (prev, next)
Lets see the task problems:
Problem 1: To handle keypress event you should use inconvenient and not clear contract
element; { eventkey; // does not supported to any browsers eventkeyIdentifier ; // deprecated eventkeyCode; // supports all browsers but inconvenient eventkeyCode === 27 // ESC (should google it every time)}
Problem 2:
When you have a different controllers for picture
and modal dialogue
you should resolve hotkey press in two different controllers, they are shouldn't to know about each other. The best solution will be create third control (or use parent control) for manage hotkeys depend from child controllers state
. Its a big problem for big apps.
Problem 3:
If you want yo handle key pressing in different controllers you will be depends from DOM positions
of elements. Because events is bubbling
. That mean yuo may solve this problem by useCapture
it's works, but not clean. That will produce refactoring and debugging processes as well.
Greet the solution!
Diagram of the concept
Abstract layer is a controller
. By using stack-shortcuts
you can create a layers with handlers and condition statement and handle hotkeys pressing or pass to next layer if condition is false
// controller 1...thisshortuts = ; // controller 2thisshortuts = ;
Getting Started
npm i stack-shortcuts --save
Features
-
DOM element position independent
-
Human shortcuts names
; -
Platform auto mapping CMD to CTRL
; -
Destructor
const hotkeys =;hotkeys; // remove shortcuts layer -
Next callback
; -
Easy to debugging call stack in stacktrace
You will see the all chain of stack layers calls in debugger stacktrace
-
Dynamically add and remove shortcuts
const layer =;layer;layer; -
Order free, both is the same
const layer = ;layer;layer;layer;layer; -
No dependencies and small size (less than 3 kb)
See example in examples
Works fine with react
and other frameworks out of the box.