mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-24 00:50:28 +00:00
Extend keyboard widget (#5648)
This commit is contained in:
Mario Pietsch
GitHub
parent
fcea51bb95
commit
68930ceb1b
@ -285,7 +285,7 @@ KeyboardManager.prototype.checkKeyDescriptors = function(event,keyInfoArray) {
|
||||
};
|
||||
|
||||
KeyboardManager.prototype.getEventModifierKeyDescriptor = function(event) {
|
||||
return event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey ? "ctrl" :
|
||||
return event.ctrlKey && !event.shiftKey && !event.altKey && !event.metaKey ? "ctrl" :
|
||||
event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey ? "shift" :
|
||||
event.ctrlKey && event.shiftKey && !event.altKey && !event.metaKey ? "ctrl-shift" :
|
||||
event.altKey && !event.shiftKey && !event.ctrlKey && !event.metaKey ? "alt" :
|
||||
@ -295,7 +295,7 @@ KeyboardManager.prototype.getEventModifierKeyDescriptor = function(event) {
|
||||
event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey ? "meta" :
|
||||
event.metaKey && event.ctrlKey && !event.shiftKey && !event.altKey ? "meta-ctrl" :
|
||||
event.metaKey && event.ctrlKey && event.shiftKey && !event.altKey ? "meta-ctrl-shift" :
|
||||
event.metaKey && event.ctrlKey & event.shiftKey && event.altKey ? "meta-ctrl-alt-shift" : "normal";
|
||||
event.metaKey && event.ctrlKey && event.shiftKey && event.altKey ? "meta-ctrl-alt-shift" : "normal";
|
||||
};
|
||||
|
||||
KeyboardManager.prototype.getShortcutTiddlerList = function() {
|
||||
|
||||
@ -44,27 +44,36 @@ KeyboardWidget.prototype.render = function(parent,nextSibling) {
|
||||
classes.push("tc-keyboard");
|
||||
domNode.className = classes.join(" ");
|
||||
// Add a keyboard event handler
|
||||
domNode.addEventListener("keydown",function (event) {
|
||||
if($tw.keyboardManager.checkKeyDescriptors(event,self.keyInfoArray)) {
|
||||
var handled = self.invokeActions(self,event);
|
||||
if(self.actions) {
|
||||
self.invokeActionString(self.actions,self,event);
|
||||
}
|
||||
self.dispatchMessage(event);
|
||||
if(handled || self.actions || self.message) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},false);
|
||||
$tw.utils.addEventListeners(domNode,[
|
||||
{name: "keydown", handlerObject: this, handlerMethod: "handleChangeEvent"}
|
||||
]);
|
||||
// Insert element
|
||||
parent.insertBefore(domNode,nextSibling);
|
||||
this.renderChildren(domNode,null);
|
||||
this.domNodes.push(domNode);
|
||||
};
|
||||
|
||||
KeyboardWidget.prototype.handleChangeEvent = function(event) {
|
||||
if($tw.keyboardManager.checkKeyDescriptors(event,this.keyInfoArray)) {
|
||||
var handled = this.invokeActions(this,event);
|
||||
if(this.actions) {
|
||||
var variables = {
|
||||
"event-key": event.key,
|
||||
"event-code": event.code,
|
||||
"modifier": $tw.keyboardManager.getEventModifierKeyDescriptor(event)
|
||||
};
|
||||
this.invokeActionString(this.actions,this,event,variables);
|
||||
}
|
||||
this.dispatchMessage(event);
|
||||
if(handled || this.actions || this.message) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
KeyboardWidget.prototype.dispatchMessage = function(event) {
|
||||
this.dispatchEvent({type: this.message, param: this.param, tiddlerTitle: this.getVariable("currentTiddler")});
|
||||
};
|
||||
|
||||
4
editions/tw5.com/tiddlers/$__key-test.tid
Normal file
4
editions/tw5.com/tiddlers/$__key-test.tid
Normal file
@ -0,0 +1,4 @@
|
||||
created: 20210525102327864
|
||||
modified: 20210525102327884
|
||||
title: $:/key-test
|
||||
type: text/vnd.tiddlywiki
|
||||
11
editions/tw5.com/tiddlers/$__key-test_action.tid
Normal file
11
editions/tw5.com/tiddlers/$__key-test_action.tid
Normal file
@ -0,0 +1,11 @@
|
||||
created: 20210525102659716
|
||||
modified: 20210525102701077
|
||||
title: $:/key-test/action
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
<$vars tv-wikilinks="no">
|
||||
|
||||
* event-key:
|
||||
* event-code:
|
||||
* modifier:
|
||||
</$vars>
|
||||
66
editions/tw5.com/tiddlers/Key Codes (Example 1).tid
Normal file
66
editions/tw5.com/tiddlers/Key Codes (Example 1).tid
Normal file
@ -0,0 +1,66 @@
|
||||
created: 20210427092418146
|
||||
modified: 20210525130708186
|
||||
tags: KeyboardWidget
|
||||
title: Key Codes (Example 1)
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
\define key-test() $:/key-test
|
||||
|
||||
\import [[Keyboard Codes (Macros)]]
|
||||
|
||||
\define keys()
|
||||
backspace tab clear return enter pause escape space
|
||||
page_up page_down end home printscreen insert delete
|
||||
|
||||
left up right down results in: ArrowLeft ArrowUp ArrowRight ArrowDown
|
||||
|
||||
0 1 2 3
|
||||
shift+0 shift+1 shift+2 shift+3 results in: = ! " with modifierKey: shift
|
||||
ctrl+0 ctrl+1 ctrl+2 ctrl+3
|
||||
alt+0 alt+1 alt+2 alt+3
|
||||
|
||||
ctrl+alt+0 ctrl+alt+1 ctrl+alt+2 ctrl+alt+3
|
||||
alt+shift+0 alt+shift+1 alt+shift+2 alt+shift+3
|
||||
ctrl+shift+0 ctrl+shift+1 ctrl+shift+2 ctrl+shift+3 INFO: ctrl-shift-0 is eaten by windows!!
|
||||
ctrl+alt+shift+0 ctrl+alt+shift+1 ctrl+alt+shift+2 ctrl+alt+shift+3
|
||||
|
||||
a s d
|
||||
shift+a shift+s shift+d
|
||||
ctrl+a ctrl+s ctrl+d
|
||||
alt+a alt+s alt+d
|
||||
|
||||
ctrl+shift+a ctrl+shift+s ctrl+shift+d
|
||||
alt+shift+a alt+shift+s alt+shift+d
|
||||
ctrl+alt+a ctrl+alt+s ctrl+alt+d
|
||||
ctrl+alt+shift+a ctrl+alt+shift+s ctrl+alt+shift+d
|
||||
|
||||
numpad0 numpad1 numpad2 numpad3
|
||||
|
||||
multiply add separator subtract decimal divide
|
||||
|
||||
f1 f2 f3
|
||||
|
||||
semicolon equals comma dash period slash backquote openbracket backslash closebracket quote
|
||||
\end
|
||||
|
||||
! Key Codes
|
||||
|
||||
{{$:/key-test/action}}
|
||||
|
||||
! Input Area
|
||||
|
||||
Depending on your OS and browser keyboard settings, some combinations may be "eaten" by the OS, or the browser!
|
||||
|
||||
--> <$keyboard key={{{ [enlist<keys>join[ ]] }}} actions=<<actionKey>> >
|
||||
<$edit-text tiddler=<<key-test>> placeholder="- Click here. Try keys from list below -" tag=input focus />
|
||||
</$keyboard> <--
|
||||
|
||||
!! Keys to be used
|
||||
|
||||
<pre><code><$vars tv-wikilinks="no"><<keys>></$vars></code></pre>
|
||||
|
||||
All possible keys can be found at: [[Keyboard Codes]]
|
||||
|
||||
! Example Code
|
||||
|
||||
<<showCode>>
|
||||
43
editions/tw5.com/tiddlers/Key Codes (Example).tid
Normal file
43
editions/tw5.com/tiddlers/Key Codes (Example).tid
Normal file
@ -0,0 +1,43 @@
|
||||
created: 20210427130002905
|
||||
modified: 20210525130748774
|
||||
tags: KeyboardWidget
|
||||
title: Key Codes (Example)
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
\define key-test() $:/key-test
|
||||
|
||||
\import [[Keyboard Codes (Macros)]]
|
||||
|
||||
\define keys()
|
||||
1 2 3
|
||||
shift+1 shift+2 shift+3
|
||||
a s d
|
||||
f1 f2 f3
|
||||
\end
|
||||
|
||||
! Key Codes
|
||||
|
||||
{{$:/key-test/action}}
|
||||
|
||||
! Input Area
|
||||
|
||||
Depending on your OS and browser keyboard settings, some combinations may be "eaten" by the OS, or the browser
|
||||
|
||||
--> <$keyboard key={{{ [enlist<keys>join[ ]] }}} actions=<<actionKey>> >
|
||||
<$edit-text tiddler=<<key-test>> placeholder="- Click here to try keys -" tag=input />
|
||||
</$keyboard> <--
|
||||
|
||||
|
||||
!! Keys to be tested
|
||||
|
||||
<$list filter="[enlist<keys>]"><kbd><<currentTiddler>></kbd>, </$list>
|
||||
|
||||
-----
|
||||
|
||||
All usable keys can be found at: [[Keyboard Codes]]
|
||||
|
||||
A more advanced example can be found at: [[Key Codes (Example 1)]]
|
||||
|
||||
! Code
|
||||
|
||||
<<showCode>>
|
||||
50
editions/tw5.com/tiddlers/Keyboard Codes (Macros).tid
Normal file
50
editions/tw5.com/tiddlers/Keyboard Codes (Macros).tid
Normal file
@ -0,0 +1,50 @@
|
||||
created: 20210429084127864
|
||||
modified: 20210525130830934
|
||||
tags:
|
||||
title: Keyboard Codes (Macros)
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
\define key-test-prefix() $:/key-test
|
||||
|
||||
\define codeState() $:/state/code/$(currentTiddler)$
|
||||
|
||||
\define getText()
|
||||
<$vars tv-wikilinks="no">
|
||||
|
||||
* event-key: ''$(event-key)$''
|
||||
* event-code: ''$(event-code)$''
|
||||
* modifier: ''$(modifier)$''
|
||||
</$vars>
|
||||
\end
|
||||
|
||||
\define pinDetails()
|
||||
<$action-setfield $tiddler=<<codeState>> text="open"/>
|
||||
\end
|
||||
|
||||
\define unpinDetails()
|
||||
<$action-deletetiddler $tiddler=<<codeState>> />
|
||||
\end
|
||||
|
||||
\define toggleDetails(text)
|
||||
<$list filter="[<codeState>!has[title]]" variable="ignore">
|
||||
<$button class="tc-btn-invisible" actions=<<pinDetails>> >$text$ {{$:/core/images/unfold-button}}</$button>
|
||||
</$list>
|
||||
<$list filter="[<codeState>has[title]]" variable="ignore">
|
||||
<$button class="tc-btn-invisible" actions=<<unpinDetails>> >$text$ {{$:/core/images/fold-button}}</$button>
|
||||
</$list>
|
||||
\end
|
||||
|
||||
\define actionKey()
|
||||
<$action-setfield $tiddler="$:/key-test/action" text=<<getText>> />
|
||||
\end
|
||||
|
||||
\define showCode()
|
||||
|
||||
''<<toggleDetails """Toggle this tiddler code""">>''
|
||||
|
||||
<$list filter="[<codeState>has[title]]" variable=ignore>
|
||||
<pre><code><$view /></code></pre>
|
||||
</$list>
|
||||
\end
|
||||
|
||||
<pre><code><$view /></code></pre>
|
||||
31
editions/tw5.com/tiddlers/Keyboard Codes.tid
Normal file
31
editions/tw5.com/tiddlers/Keyboard Codes.tid
Normal file
@ -0,0 +1,31 @@
|
||||
created: 20210427090945829
|
||||
modified: 20210525103712235
|
||||
tags: KeyboardWidget
|
||||
title: Keyboard Codes
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
! All Key Codes known by the KeyboardWidget
|
||||
|
||||
<kbd>cancel</kbd>, <kbd>help</kbd>, <kbd>backspace</kbd>, <kbd>tab</kbd>, <kbd>clear</kbd>, <kbd>return</kbd>, <kbd>enter</kbd>, <kbd>pause</kbd>, <kbd>escape</kbd>, <kbd>space</kbd>,
|
||||
<kbd>page_up</kbd>, <kbd>page_down</kbd>, <kbd>end</kbd>, <kbd>home</kbd>, <kbd>left</kbd>, <kbd>up</kbd>, <kbd>right</kbd>, <kbd>down</kbd>, <kbd>printscreen</kbd>, <kbd>insert</kbd>, <kbd>delete</kbd>
|
||||
|
||||
<kbd>0</kbd>, <kbd>1</kbd>, <kbd>2</kbd>, <kbd>3</kbd>, <kbd>4</kbd>, <kbd>5</kbd>, <kbd>6</kbd>, <kbd>7</kbd>, <kbd>8</kbd>, <kbd>9</kbd>
|
||||
|
||||
<kbd>a</kbd>, <kbd>b</kbd>, <kbd>c</kbd>, <kbd>d</kbd>, <kbd>e</kbd>, <kbd>f</kbd>, <kbd>g</kbd>, <kbd>h</kbd>, <kbd>i</kbd>, <kbd>j</kbd>, <kbd>k</kbd>, <kbd>l</kbd>, <kbd>m</kbd>, <kbd>n</kbd>, <kbd>o</kbd>, <kbd>p</kbd>, <kbd>q</kbd>, <kbd>r</kbd>, <kbd>s</kbd>, <kbd>t</kbd>, <kbd>u</kbd>, <kbd>v</kbd>, <kbd>w</kbd>, <kbd>x</kbd>, <kbd>y</kbd>, <kbd>z</kbd>
|
||||
|
||||
<kbd>numpad0</kbd>, <kbd>numpad1</kbd>, <kbd>numpad2</kbd>, <kbd>numpad3</kbd>, <kbd>numpad4</kbd>, <kbd>numpad5</kbd>, <kbd>numpad6</kbd>, <kbd>numpad7</kbd>, <kbd>numpad8</kbd>, <kbd>numpad9</kbd>
|
||||
|
||||
<kbd>multiply</kbd>, <kbd>add</kbd>, <kbd>separator</kbd>, <kbd>subtract</kbd>, <kbd>decimal</kbd>, <kbd>divide</kbd>
|
||||
|
||||
<kbd>f1</kbd>, <kbd>f2</kbd>, <kbd>f3</kbd>, <kbd>f4</kbd>, <kbd>f5</kbd>, <kbd>f6</kbd>, <kbd>f7</kbd>, <kbd>f8</kbd>, <kbd>f9</kbd>, <kbd>f10</kbd>, <kbd>f11</kbd>, <kbd>f12</kbd><br/>
|
||||
<kbd>f13</kbd>, <kbd>f14</kbd>, <kbd>f15</kbd>, <kbd>f16</kbd>, <kbd>f17</kbd>, <kbd>f18</kbd>, <kbd>f19</kbd>, <kbd>f20</kbd>, <kbd>f21</kbd>, <kbd>f22</kbd>, <kbd>f23</kbd>, <kbd>f24</kbd>
|
||||
|
||||
<kbd>firefoxsemicolon</kbd>, <kbd>firefoxequals</kbd>, <kbd>firefoxminus</kbd>
|
||||
|
||||
<kbd>semicolon</kbd>, <kbd>equals</kbd>, <kbd>comma</kbd>, <kbd>dash</kbd>, <kbd>period</kbd>, <kbd>slash</kbd>, <kbd>backquote</kbd>, <kbd>openbracket</kbd>, <kbd>backslash</kbd>, <kbd>closebracket</kbd>, <kbd>quote</kbd>
|
||||
|
||||
<kbd>shift</kbd>, <kbd>ctrl</kbd>, <kbd>alt</kbd>, <kbd>meta</kbd>
|
||||
|
||||
! Examples
|
||||
|
||||
<<list-links "[tag[KeyboardWidget]prefix[Key Codes (Example]]">>
|
||||
@ -1,6 +1,7 @@
|
||||
caption: keyboard
|
||||
created: 20140302192136805
|
||||
modified: 20161003114634019
|
||||
list: [[Keyboard Codes]] [[Key Codes (Example)]] [[Key Codes (Example 1)]] [[Possible Keys (Example 2)]]
|
||||
modified: 20210525102143381
|
||||
tags: Widgets
|
||||
title: KeyboardWidget
|
||||
type: text/vnd.tiddlywiki
|
||||
@ -14,13 +15,23 @@ The keyboard widget allows ActionWidgets to be triggered by specific key combina
|
||||
The content of the `<$keyboard>` widget is rendered normally. The keyboard shortcuts only take effect when the focus is within the contained content.
|
||||
|
||||
|!Attribute |!Description |
|
||||
|actions |A string containing ActionWidgets to be triggered when the key combination is detected |
|
||||
|actions |A string containing ActionWidgets to be triggered when the key combination is detected<br><<.from-version "5.2.0">> The variables: ''event-key'', ''event-code'' and ''modifier'' are available for the actions |
|
||||
|message |The title of the [[WidgetMessage|Messages]] to generate |
|
||||
|param |The parameter to be passed with the [[WidgetMessage|Messages]] |
|
||||
|key |Key string identifying the key(s) to be trapped (see below) |
|
||||
|class |A CSS class to be assigned to the generated HTML DIV element |
|
||||
|tag|<<.from-version "5.1.14">> The html element the widget creates to capture the keyboard event, defaults to:<br>» `span` when parsed in inline-mode<br>» `div` when parsed in block-mode|
|
||||
|
||||
! Variables
|
||||
|
||||
<<.from-version "5.2.0">> The following variables are made available to the actions:
|
||||
|
||||
|column-1-20 |k
|
||||
|!Variables |!Description |
|
||||
|`event-key` |The <<.var event-key>> variable contains the character, if possible. eg: `1`. You can experiment with some settings at: [[Key Codes (Example)]] |
|
||||
|`event-code` |The <<.var event-code>> variable contains a character description. eg: `Digit1` instead of `1`. Or `Space` instead of an empty string ` `, which is hard to see|
|
||||
|`modifier` |The [[modifier Variable]] contains the Modifier Key held during the event (can be <kbd>normal</kbd>, <kbd>ctrl</kbd>, <kbd>shift</kbd>, <kbd>alt</kbd> or combinations thereof) |
|
||||
|
||||
! Key Strings
|
||||
|
||||
Key strings are made up of one or more key specifiers separated by spaces. Each key specifier is zero or more of the modifiers <kbd>alt</kbd>, <kbd>shift</kbd>, <kbd>ctrl</kbd> or <kbd>meta</kbd> followed by the name of a key, all joined with "+" plus or "-" minus symbols. Key names are either the letter or digit printed on the key (eg "a" or "1"), or one of the special keys <kbd>backspace</kbd>, <kbd>tab</kbd>, <kbd>enter</kbd> or <kbd>escape</kbd>.
|
||||
@ -43,3 +54,7 @@ shift+escape
|
||||
ctrl+enter
|
||||
ctrl+shift+alt+A
|
||||
```
|
||||
|
||||
! More Info
|
||||
|
||||
<<list-links "[tag[KeyboardWidget]]">>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user