KeyboardWidget: Advanced usage

The intent is to expand the following with examples to cover directly assigned keys, as well as assigning keyboard shortcuts via tagged tiddlers (i.e. instead of hardcoding the shortcuts to the $keyboard widget, adding tiddlers with the appropriate tag adds the shortcut). It could then be added to the official documentation or form the basis for a “Tips & Tricks” post.

Please feel free to contribute.

The following is an example of using a single instance of the $keyboard widget to handle multiple keyboard shortcuts descriptors - in this case ((notation-focus-search)), ((notation-listitem-next)) and ((notation-listitem-previous))- that have been assigned as described in the documentation so that the keys can be configured via the control panel.

\define keyboard-actions()
<$list filter="[<event-key-descriptor>match[((change-sidebar-layout))]]" variable="descriptor">
<$action-log shortcut="change-sidebar-layout"/>
<!-- actions here or transclude tiddler with actions -->
</$list>
<$list filter="[<event-key-descriptor>match[((layout-switcher))]]" variable="descriptor">
<$action-log shortcut="layout switcher"/>
<!-- actions here or transclude tiddler with actions -->
</$list>
<$list filter="[<event-key-descriptor>match[((toggle-sidebar))]]" variable="descriptor">
<$action-log shortcut="toggle-sidebar"/>
<!-- actions here or transclude tiddler with actions -->
</$list>
\end

<$keyboard key="((change-sidebar-layout)) ((layout-switcher)) ((toggle-sidebar))" actions=<<keyboard-actions>> >
	<$edit-text tiddler="$:/temp/keyboard-test" placeholder="" default="" tag=input />
</$keyboard>

Updated 12/12/2022 to work with shortcuts configured on tiddlywiki.com. Try the following key combinations: alt+shift+down, ctrl+shift+L, shift+alt+S


The shortcuts can also be assigned via tagged tiddlers similar to the mechanism the core uses for global shortcuts. The following example reuses global shortcut tiddlers defined in the core, but can be adapted to use a different tag to identify the shortcut tiddlers for your application.


\define keyboard-actions()
<$transclude tiddler={{{ [all[shadows+tiddlers]tag[$:/tags/KeyboardShortcut]key<event-key-descriptor>] }}} />
\end

<$keyboard key={{{ [all[shadows+tiddlers]tag[$:/tags/KeyboardShortcut]get[key]join[ ]] }}} actions=<<keyboard-actions>> >
	<$edit-text tiddler="$:/temp/keyboard-test" placeholder="" default="" tag=input />
</$keyboard>
4 Likes