Shortcuts

Section 1

Section 1.1

Section 2 Page Notes

This page demonstrates a custom HTML element which registers shortcuts on its children - <gw-shortcuts>.

The element uses display: contents so it won't interfere with the normal layout of the page - it just transparently wraps what's there.

The element watches for keystrokes that match a specified shortcut, then activates a handler you can specify. It also allows displaying what the currently available shortcuts are to the user in a popover via the GW.Controls.Shortcuts.reportShortcuts(event) function, which may be set as an event handler (e.g. a button's onclick).

<gw-shortcuts> elements may be nested on the page. If there are conflicts between them, the nearer parent element's shortcuts will be preferred.

For each shortcut, there are three attributes you may set. Each is suffixed with a number (n) to indicate which shortcut it's associated with.

code_n: The key combination to activate the shortcut. This is specified as a series of keys sepearated by +. As long as a control key (Ctrl, Alt, or Shift) is held down, users may lift the other keys between presses. This has been tested for compatibility with sticky keys as well.
handler_n: This is the handler to run when the shortcut is activated. Specify it like you would an onclick attribute on a button.
info_n: This is a description of what the shortcut does. It's made available to users via the reportShortcuts function mentioned above.

All of these attributes may be changed by code after the element has been sited and the shortcuts will be updated to match.

Files

Markup

shortcutsDemo.html

Scripts

shortcutsControl.js
personalizationControl.js

Styles

shortcutsDemo.css