From 68930ceb1b0c186eaf78906bbc521f47fe3b5046 Mon Sep 17 00:00:00 2001 From: Mario Pietsch Date: Tue, 25 May 2021 23:18:37 +0200 Subject: [PATCH] Extend keyboard widget (#5648) --- core/modules/keyboard.js | 4 +- core/modules/widgets/keyboard.js | 39 ++++++----- editions/tw5.com/tiddlers/$__key-test.tid | 4 ++ .../tw5.com/tiddlers/$__key-test_action.tid | 11 ++++ .../tiddlers/Key Codes (Example 1).tid | 66 +++++++++++++++++++ .../tw5.com/tiddlers/Key Codes (Example).tid | 43 ++++++++++++ .../tiddlers/Keyboard Codes (Macros).tid | 50 ++++++++++++++ editions/tw5.com/tiddlers/Keyboard Codes.tid | 31 +++++++++ .../tiddlers/widgets/KeyboardWidget.tid | 19 +++++- 9 files changed, 248 insertions(+), 19 deletions(-) create mode 100644 editions/tw5.com/tiddlers/$__key-test.tid create mode 100644 editions/tw5.com/tiddlers/$__key-test_action.tid create mode 100644 editions/tw5.com/tiddlers/Key Codes (Example 1).tid create mode 100644 editions/tw5.com/tiddlers/Key Codes (Example).tid create mode 100644 editions/tw5.com/tiddlers/Keyboard Codes (Macros).tid create mode 100644 editions/tw5.com/tiddlers/Keyboard Codes.tid diff --git a/core/modules/keyboard.js b/core/modules/keyboard.js index fa883f3dd..1ae9ba482 100644 --- a/core/modules/keyboard.js +++ b/core/modules/keyboard.js @@ -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() { diff --git a/core/modules/widgets/keyboard.js b/core/modules/widgets/keyboard.js index 471d35e37..035e4e351 100644 --- a/core/modules/widgets/keyboard.js +++ b/core/modules/widgets/keyboard.js @@ -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")}); }; diff --git a/editions/tw5.com/tiddlers/$__key-test.tid b/editions/tw5.com/tiddlers/$__key-test.tid new file mode 100644 index 000000000..2504c9321 --- /dev/null +++ b/editions/tw5.com/tiddlers/$__key-test.tid @@ -0,0 +1,4 @@ +created: 20210525102327864 +modified: 20210525102327884 +title: $:/key-test +type: text/vnd.tiddlywiki \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/$__key-test_action.tid b/editions/tw5.com/tiddlers/$__key-test_action.tid new file mode 100644 index 000000000..79a726908 --- /dev/null +++ b/editions/tw5.com/tiddlers/$__key-test_action.tid @@ -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: + \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/Key Codes (Example 1).tid b/editions/tw5.com/tiddlers/Key Codes (Example 1).tid new file mode 100644 index 000000000..3abe14699 --- /dev/null +++ b/editions/tw5.com/tiddlers/Key Codes (Example 1).tid @@ -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={{{ [enlistjoin[ ]] }}} actions=<> > + <$edit-text tiddler=<> placeholder="- Click here. Try keys from list below -" tag=input focus /> + <-- + +!! Keys to be used + +
<$vars tv-wikilinks="no"><>
+ +All possible keys can be found at: [[Keyboard Codes]] + +! Example Code + +<> \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/Key Codes (Example).tid b/editions/tw5.com/tiddlers/Key Codes (Example).tid new file mode 100644 index 000000000..6f50863b2 --- /dev/null +++ b/editions/tw5.com/tiddlers/Key Codes (Example).tid @@ -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={{{ [enlistjoin[ ]] }}} actions=<> > + <$edit-text tiddler=<> placeholder="- Click here to try keys -" tag=input /> + <-- + + +!! Keys to be tested + +<$list filter="[enlist]"><>, + +----- + +All usable keys can be found at: [[Keyboard Codes]] + +A more advanced example can be found at: [[Key Codes (Example 1)]] + +! Code + +<> \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/Keyboard Codes (Macros).tid b/editions/tw5.com/tiddlers/Keyboard Codes (Macros).tid new file mode 100644 index 000000000..4a652db25 --- /dev/null +++ b/editions/tw5.com/tiddlers/Keyboard Codes (Macros).tid @@ -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)$'' + +\end + +\define pinDetails() + <$action-setfield $tiddler=<> text="open"/> +\end + +\define unpinDetails() + <$action-deletetiddler $tiddler=<> /> +\end + +\define toggleDetails(text) +<$list filter="[!has[title]]" variable="ignore"> + <$button class="tc-btn-invisible" actions=<> >$text$ {{$:/core/images/unfold-button}} + +<$list filter="[has[title]]" variable="ignore"> + <$button class="tc-btn-invisible" actions=<> >$text$ {{$:/core/images/fold-button}} + +\end + +\define actionKey() +<$action-setfield $tiddler="$:/key-test/action" text=<> /> +\end + +\define showCode() + +''<>'' + +<$list filter="[has[title]]" variable=ignore> +
<$view />
+ +\end + +
<$view />
\ No newline at end of file diff --git a/editions/tw5.com/tiddlers/Keyboard Codes.tid b/editions/tw5.com/tiddlers/Keyboard Codes.tid new file mode 100644 index 000000000..00e746d39 --- /dev/null +++ b/editions/tw5.com/tiddlers/Keyboard Codes.tid @@ -0,0 +1,31 @@ +created: 20210427090945829 +modified: 20210525103712235 +tags: KeyboardWidget +title: Keyboard Codes +type: text/vnd.tiddlywiki + +! All Key Codes known by the KeyboardWidget + +cancel, help, backspace, tab, clear, return, enter, pause, escape, space, +page_up, page_down, end, home, left, up, right, down, printscreen, insert, delete + +0, 1, 2, 3, 4, 5, 6, 7, 8, 9 + +a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z + +numpad0, numpad1, numpad2, numpad3, numpad4, numpad5, numpad6, numpad7, numpad8, numpad9 + +multiply, add, separator, subtract, decimal, divide + +f1, f2, f3, f4, f5, f6, f7, f8, f9, f10, f11, f12
+f13, f14, f15, f16, f17, f18, f19, f20, f21, f22, f23, f24 + +firefoxsemicolon, firefoxequals, firefoxminus + +semicolon, equals, comma, dash, period, slash, backquote, openbracket, backslash, closebracket, quote + +shift, ctrl, alt, meta + +! Examples + +<> \ No newline at end of file diff --git a/editions/tw5.com/tiddlers/widgets/KeyboardWidget.tid b/editions/tw5.com/tiddlers/widgets/KeyboardWidget.tid index 70ca38f46..ce9e3b3e0 100644 --- a/editions/tw5.com/tiddlers/widgets/KeyboardWidget.tid +++ b/editions/tw5.com/tiddlers/widgets/KeyboardWidget.tid @@ -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
<<.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:
» `span` when parsed in inline-mode
» `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 normal, ctrl, shift, alt 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 alt, shift, ctrl or meta 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 backspace, tab, enter or escape. @@ -43,3 +54,7 @@ shift+escape ctrl+enter ctrl+shift+alt+A ``` + +! More Info + +<>