Basic ranger-like keyboard navigation on website

[tobanw]

I was really tickled by the ranger-like website styling, so I decided to add some basic ranger-like keyboard navigation. I used Mousetrap.js to implement a few keybindings:

• j/k to navigate down/up the "file listing"
• gg/G to go to top/bottom of the listing
• l/Enter to open the link
• gh to go back to homepage

The logic is pretty easy to implement, so I can add more if you have requests.

Here's how it works, in brief. I have some javascript in keyboard.js that finds all the html elements of class kbnav (the navigation links / "file listing") and puts them into an array. Then Mousetrap can capture keystrokes and dispatch a function to move the browser focus to the appropriate link in the array.

I've been using Mousetrap on my website (also hosted with Github Pages), which you can play with for a working example.

(I also removed the line sourcing jquery2.min.js as it's unused -- in fact, the file itself isn't even present in the repo.)

[vifon]

Interesting! I like the idea, thanks!

I noticed it's not too friendly with the Vim-like Firefox addon I use, Saka Key. To make the keyboard input reach the JS on the page, I need to enter the "insert mode" with i which is expected but I need to do this after every entered key, so to navigate down I need to press ijij and so on instead of holding j. Do you know what might be the cause?

[tobanw]

I have no idea why it would conflict with Saka Key (because I have no idea how Saka works). So every time you use a Mousetrap shortcut it kicks you out of "insert mode"? Whereas on other sites it doesn't kick you out? How about on other sites that have keyboard shortcuts (gmail, github, trello, etc)?

All j/k/gg/G do is move the browser focus to another link in the list. Back when Pentadactyl was around I configured it to ignore the relevant keys on keyboard-enabled websites to get the best of both worlds.

[toonn]

Hmm, it seems to work on github. If I go to my issues page and hit i I can move between issues with j/k. It doesn't work for me on your blog, @tobanw. It would definitely be nice if passing keys just works but I'm not sure it should hold back the PR.
I reported the issue over on the Saka Key repo: lusakasa/saka-key#201.

[vifon]

So every time you use a Mousetrap shortcut it kicks you out of "insert mode"? Whereas on other sites it doesn't kick you out? How about on other sites that have keyboard shortcuts (gmail, github, trello, etc)?

Yes, exactly like you described.

I reported the issue over on the Saka Key repo: lusakasa/saka-key#201.

Thanks @toonn, you're the best!

I'm not sure it should hold back the PR.

Agreed, it's a minor issue.

[tobanw]

Thanks guys, excited to see it live! To be sure it's a Mousetrap problem and not just my implementation, can you test with Saka on the official demo? https://craig.is/killing/mice

…

On Tue, Jul 10, 2018 at 9:43 AM Wojciech Siewierski < ***@***.***> wrote: Merged #4 <#4>. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#4 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAovi6nQweHs4DaJPXUgGAOKv_UXJ2jtks5uFNnHgaJpZM4VHDMl> .

[vifon]

I hate to say it but it works on their website.

[tobanw]

Hmmm, maybe something is off with how I implemented the javascript in keyboard.js. Perhaps someone with some understanding of javascript (mine basically nil) can take a look.