stack-shortcuts
v0.2.0
Published
Easy shortcuts api for working with modern web apps
Downloads
2
Maintainers
Readme
Stack shortcuts
Quick start
npm
npm i stack-shortcuts --save
browser
<script src="https://raw.githubusercontent.com/BusinessDuck/stack-shortcuts/master/lib/shortcuts.umd.js"></script>
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.addEventListener('keydown', handler);
function handler(event) {
event.key; // does not supported to any browsers
event.keyIdentifier ; // deprecated
event.keyCode; // supports all browsers but inconvenient
event.keyCode === 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
...
this.shortuts = shortcuts({
'CMD+F': (event, next) => {
// event - native event
// next - call pass event to next in stack layer handler
// like a express controller
if (event.target === myDOMElement) {
alert('its works');
} else {
next();
}
}
});
// controller 2
this.shortuts = shortcuts({
'CMD+F': (event, next) => {
// event - native event
// next - call pass event to next in stack layer handler
// like a express controller
if (event.target === mySecondDOMElement) {
alert('its works');
} else {
next();
}
}
});
Getting Started
npm i stack-shortcuts --save
Features
DOM element position independent
Human shortcuts names
shortcuts({ 'ALT+SHIFT+T': () => null, //handle ALT+SHIFT+T 'ALL': () => null, // handle aall kedon });
Platform auto mapping CMD to CTRL
shortcuts({ 'CMD+F': (event, next) => null, //handle CTRL+F on windows });
Destructor
const hotkeys = shortcuts({ 'CMD+F': () => null }); hotkeys.destroy(); // remove shortcuts layer
Next callback
shortcuts({ 'CMD+F': (event, next) => { next(); // pass to next in stack layer }, });
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 = shortcuts({ // init config 'CMD+F': (event, next) => { next(); // pass to next in stack layer }, }); layer.add('CMD+V', (event, next) => null); layer.remove('CMD+V', (event, next) => null);
Order free, both is the same
const layer = shortcuts(); layer.add('SHIFT+CMD+V', (event, next) => null); layer.remove('SHIFT+CMD+V'); layer.add('CMD+SHIFT+V', (event, next) => null); layer.remove('CMD+SHIFT+V');
No dependencies and small size (less than 3 kb)
See example in examples
Works fine with react
and other frameworks out of the box.