Plugin "tw5-keyboard-navigation"

[MaxGyver]

Hi all,

some time ago I created a TiddlyWiki plugin for easier navigation without using a mouse. It adds some useful key mappings:

• <kbd>j</kbd> / <kbd>k</kbd>: Scroll down/up to the next/previous tiddler in the story river (instead of scrolling page-wise).
• <kbd>e</kbd>: Edit the currently "selected" tiddler.
• <kbd>c</kbd>: Close the selected tiddler.
• <kbd>Esc</kbd>: Unfocus the search box (when active) in order to cancel a search and go on navigating with your keyboard.

Today, I added new features:

• When you search something, you can open the first match with <kbd>Return</kbd>. Without this plugin you have to press <kbd>Tab</kbd>, <kbd>Tab</kbd>, <kbd>Tab</kbd>, <kbd>Tab</kbd>,<kbd>Return</kbd>.
• When you search something and you want to tab through the results, a single <kbd>Tab</kbd> brings you directly to the first match (so you save three <kbd>Tab</kbd>s).
• When you scroll to the next or previous tiddler via <kbd>j</kbd> / <kbd>k</kbd>, the scrolling is smooth. When you press these keys repeatedly (delta < 800 ms), you jump instantly to the next (or previous) tiddler.

Check this demo page or the plugin source code at GitHub. I hope this is useful for somebody.

Best regards,

Max

[MaxGyver]

Apparently, HTML does not work here. This is a more readable version of my last mail:

Hi all,

some time ago I created a TiddlyWiki plugin for easier navigation without using a mouse. It adds some useful key mappings:

• j / k: Scroll down/up to the next/previous tiddler in the story river (instead of scrolling page-wise).
• e: Edit the currently "selected" tiddler.
• c: Close the selected tiddler.
• Esc: Unfocus the search box (when active) in order to cancel a search and go on navigating with your keyboard.

Today, I added new features:

• When you search something, you can open the first match with Return. Without this plugin you have to press Tab, Tab, Tab, Tab, Return.
• When you search something and you want to tab through the results, a single Tab brings you directly to the first match (so you save three Tabs).
• When you scroll to the next or previous tiddler via j / k, the scrolling is smooth. When you press these keys repeatedly (delta < 800 ms), you jump instantly to the next (or previous) tiddler.

Check this demo page or the plugin source code at GitHub. I hope this is useful for somebody.

Best regards,

Max

[Mohammad]

Lovely!

Thank you for sharing Max!

--Mohammad

[Mohammad]

Max, as TW 5.1.22 has global shortcuts, is it possible to use the core features and not install extra JS?

On Thursday, April 30, 2020 at 6:45:14 PM UTC+4:30, MaxGyver wrote:

[MaxGyver]

Max, as TW 5.1.22 has global shortcuts, is it possible to use the core features and not install extra JS?

Good question! For example, I'm using JS in order to determine which tiddler is the current one (because more than one can be in the viewport). I don't think that there is a core feature for doing that.

[Mohammad]

I think @BTC can answer your question! Not SURE but I think the core in 5.1.22 supports the tiddler in view!

[Mikesch]

Just great! Thank you! I discovered ESC to cancel editing as well. I do not understand why this isn't in the global shortcuts already included. Perfect! :)

Am Donnerstag, 30. April 2020 16:10:36 UTC+2 schrieb MaxGyver:

[Hubert]

Thanks for sharing your plugin Max. It looks like a great addition to the core functionality.

Good question! For example, I'm using JS in order to determine which tiddler is the current one (because more than one can be in the viewport). I don't think that there is a core feature for doing that.

I think that the storyTiddler variable might be just that, though I could be wrong:)

[Diego Mesa]

Thank you Max! I know BTC was working on a KeeBoord plugin, parts of which made it into the core. I hope parts of this can also make it in!

[springer]

Max,

Thanks for the keyboard navigation options! 

It seems your plugin listens for hardware keystroke events [if that's the right term] ... So, some users typing on, say a Dvorak layout (as I do) cannot type j to jump and e to edit, but will need to use the physical keys that *would* count as j and e (on Qwerty systems). So either the documentation should clarify that point, or you should get your code to capture the keystroke after it has been parsed by the system. (I don't mind just making a post-it with my effective keystroke values, but some international users, in particular, may not recognize the problem, or may think some expected responses are missing.)

-Springer

[Max Schillinger]

Hello Springer,

thanks for your feedback!

You are right. Actually, I don't use QWERTZ/QWERTY either. But I check for the physical J and K keys on purpose because using J and K in my layout makes no sense (that's how my layout looks like, in case you care).

Apparently, J and K are next to each other in Dvorak. I'm going to add an option for using the key values of the user layout!

Best regards,
Max

Am 01.05.20 um 19:48 schrieb springer:

[Saq Imtiaz]

Max: great work. I've noticed that editing the active/current tiddler and saving it again, means it is no longer "highlighted". Might be a usability improvement to check and add the appropriate class to the active tiddler on refresh: https://github.com/Jermolene/TiddlyWiki5/blob/929b0c98330ad25aa4a32cd201274a6e89cd8902/editions/dev/tiddlers/new/Hook_%20th-page-refreshed.tid

I may at some point try to extend this to work with my dual story layout.

Regards,

Saq

[Max Schillinger]

Am 02.05.20 um 00:45 schrieb Saq Imtiaz:
> Max: great work.

Thanks!

> I've noticed that editing the active/current tiddler > and saving it again, means it is no longer "highlighted". Might be a
> usability improvement to check and add the appropriate class to the
> active tiddler on refresh:
> https://github.com/Jermolene/TiddlyWiki5/blob/929b0c98330ad25aa4a32cd201274a6e89cd8902/editions/dev/tiddlers/new/Hook_%20th-page-refreshed.tid

That's true. Right now, if one tiddler is highlighted and you go on
scrolling with your mouse or page up / page down key and then press /e/
or /c/ nothing happens. If you press /j/ or /k/, the currently visible
tiddler gets highlighted because the previously highlighted tiddler
seems to be "outdated". I don't know if a user would expect to go on
where he/she stopped the keyboard navigation.

Would you expect to scroll to the previously highlighted tiddler
automatically after re-opening TiddlyWiki?

Best regards,
Max

[Saq Imtiaz]

I wouldn't expect to scroll to the last highlighted tiddler after re-opening TW. But it would be nice if after edting and tiddler and clicking done (or ctrl+enter), it was highlighted in the story.

Regards,

Saq

[Max Schillinger]

Saq Imtiaz <saq.i...@gmail.com> schrieb am Mo., 4. Mai 2020, 20:27:

I wouldn't expect to scroll to the last highlighted tiddler after re-opening TW. But it would be nice if after edting and tiddler and clicking done (or ctrl+enter), it was highlighted in the story.

Yes, this sounds reasonable!

[Max Schillinger]

You can get there with Ctrl+Shift+F (without any plugin).

Am 04.05.20 um 21:36 schrieb springer:
> Max,
>
> I would guess that one thing many of us would love is a keyboard
> shortcut to get *to* the search box. (Tabbing, for me, pauses at so
> many other GUI elements before getting there.) Is that possible?

[MaxGyver]

Hello springer,

I made an update: now the actual keyboard layout is respected by default and I have added an option to ignore it and to use QWERTY key positions anyway.

Check version 0.3.0 at https://maximilian-schillinger.de/tw5-keyboard-navigation-plugin.html

Best regards

Max

[Ha Thu]

this rules, thanks! just installed without any problems at all.

[Max Schillinger]

Am 02.05.20 um 00:45 schrieb Saq Imtiaz:

> Max: great work. I've noticed that editing the active/current tiddler
> and saving it again, means it is no longer "highlighted". Might be a
> usability improvement to check and add the appropriate class to the
> active tiddler on refresh:
> https://github.com/Jermolene/TiddlyWiki5/blob/929b0c98330ad25aa4a32cd201274a6e89cd8902/editions/dev/tiddlers/new/Hook_%20th-page-refreshed.tid

Hi Saq,

I just updated the plugin. Now it uses the page-refreshed hook. After
(and during) editing a tiddler, the highlighting will be refreshed. (Not
yet perfect: If you use a mouse and click on the edit button of another
than the highlighted tiddler, the highlighted tiddler remains
highlighted.) It also uses the th-navigating hook. If you follow an
internal link, the target tiddler will be highlighted.



Am 26.05.20 um 20:26 schrieb Ha Thu:

> this rules, thanks! just installed without any problems at all.

Thank you!

[Soren Bjornstad]

Max, did you notice that I sent you a pull request on this plugin a couple of weeks ago? A couple of things did not work for me and you might be interested in the fixes.

[Max Schillinger]

Hi Soren,

thanks for that! I haven't noticed it. I just checked GitHub and found it. 

I'm not at my PC but I'll look into it next week!

Best regards,

Max