Creates a generic key handler that emits a new event when the specified key combination is hit. This component is meant to be consumed by other apps and custom elements and, in best practice, is not utilized on its own.
Note: All releases until this notes are removed are to be considered prerelease status, without regard to version number.
Emits an event when a KeyboardEvent
with the specified key(s) is captured on
element nodes that are being listened to.
<fluid-hotkey-event keys="ctrl+s" emits="save">
</fluid-triggered-method>
<fluid-hotkey-event>
is available on NPM and may be installed as a dependency.
> npm install @cogizmo/fluid-hotkey-event
-
Place the files on your server.
-
Install the appropriate cogizmo/Cogizmo.
- From npm
> npm install @cogizmo/cogizmo
- From github
-
Add Cogizmo to your document
<head>
.<script src="path/to/cogizmo/Cogizmo.js"></script>
-
Add
<fluid-hotkey-event>
element to your document.<script src="path/to/fluid-hotkey-event/component.js"></script>
-
Use element whereever you want to transclude html.
<fluid-hotkey-event></fluid-hotkey-event>
Boolean
= false
Whether or not to allow the event emitted by emits
to bubble through the DOM.
<fluid-hotkey-event keys="alt+f4" emits="close" bubbles>
</fluid-hotkey-event>
Boolean
= false
Whether or not to allow bubbling event emitted by emits
to penetrate Shadow DOM barriers.
<fluid-hotkey-event keys="alt+f4" emits="close" bubbles composed>
</fluid-hotkey-event>
String<EventName>
Required
The type of event to emit when a KeyboardEvent that is captured matches one or more keys
.
<fluid-hotkey-event keys="ctrl+a" emits="select-all">
</fluid-hotkey-event>
String
("up"
| "down"
| "press"
) = "up"
The unprefixed KeyboardEvent to listen for: keydown
, keypress
or keyup
<fluid-hotkey-event keys="enter space" emits="select-item">
</fluid-hotkey-event>
String
Required
Space separated list of key combinations to match KeyboardEvent
s against.
<fluid-hotkey-event keys="enter space" emits="select-item">
</fluid-hotkey-event>
Boolean
= false
Whether or not call preventDefault()
on handled KeyboardEvent
s.
<fluid-hotkey-event keys="alt+f4" prevent emits="do-not-close" bubbles composed>
</fluid-hotkey-event>
String<CSSSelector>
Used by element.querySelectorAll
to attach the KeyboardEvent
listeners.
<fluid-hotkey-event keys="esc" select="input[type='text']" emits="reset">
</fluid-hotkey-event>
Boolean
= false
Whether or not call stopPropagation()
on handled KeyboardEvent
s.
<fluid-hotkey-event keys="alt+f4" stop emits="do-not-close" bubbles composed>
</fluid-hotkey-event>
Returns Boolean
= false
Whether or not to allow the event emitted by emits
to bubble through the DOM.
Returns Boolean
= false
Whether or not to allow bubbling event emitted by emits
to penetrate Shadow DOM barriers.
Returns String<EventName>
The event.type
that will be emitted when the appropriate KeyboardEvent
is
matched.
Returns String
("keyup"
| "keydown"
| "keypress"
) = "keyup"
The prefixed KeyboardEvent
this <fluid-hotkey-event>
is listening for.
Returns Array
Returns Array
List of nodes returned when queried using element.selector
.
Returns Boolean
= false
Whether or not to call preventDefault()
on handled KeyboardEvent
s
Returns String<CSSSelector>
Selector that is used to add the event listeners.
Returns Boolean
= false
Whether or not to call stopPropagation()
on handled KeyboardEvent
s