11.09.2018

Brotkeys.js Quick-Start

If you know Vim, you know how much more efficient it feels to avoid using the mouse.
You realize that the same behaviour would be wonderful in a browser, and stumble upon Vimium.
Vimium is great, but you'd have to install it on all your machines. Why don't websites already feature that without any browser addons?

You're writing your website and want to react on keyboard input.
But not just single characters, you need to react in one way when the user types Brotkeys than when they type Bye.
Hotkeys does not feature that yet, but writing it by yourself would be annoying.

And then you find Brotkeys.js - but how to use it?
The documentation is too much to read to just try it out. You'd rather want a quick code example.


Dive right in!

Here's the code I use for this page


						var manager;
						var wordMap = new Map([
							///["secret", function(){window.open("https://eric.mink.li/src/php/ccount/click.php?id=sneric","_self");}],
						]);
						// these single characters that can interrupt at any time during the word-typing mode
						var interruptMap = new Map([
							["X", function(){manager.abort_f_mode();}],
							["D", function(){console.log("user disabled shortcuts"); manager.disable(); manager.leave_f_mode();}],
						]);

						manager = new HotkeyManager(wordMap, interruptMap);
						manager.interrupt_caseInsensitivity = false;

						// Not neccessary when calling genToggleKeysOnNotify(), but doesn't harm. (genToggleKeysOnNotify will call this if it has never been called)
						manager.loadNeededJSCSSForStyleSwapping();
						
						// please notify me on entering and leaving fmode simply by showing the link hints
						// this is the simplest way to do this. for other options, see the examples in brotkeys.js#brotkeys_autogenerate_manager_for_anchors and brotkeys.js#brotkeys_autogenerate_manager_for_class_tag
						var notifyFModeFunc = manager.genToggleKeysOnNotify();
						manager.setNotifyFModeFunction(notifyFModeFunc);
						manager.log_prefix = "[M] ";
						manager.autogenerate(manager.GenerationEnum.tag_anchor);
						manager.autogenerate(manager.GenerationEnum.class_tagged, "BHK", undefined);
					

Line 22 means that every <a/> HTML DOM Element will automatically get a link hint.
For anything else that I want the user to be able to click on by using their keyboard, I can simply add the class BHK to the element. Line 23 causes autogeneration of link hints for those. See the documentation for parameter options.

Anything that has an autogenerated link hint also has a corresponding entry automatically added to manager.wordMap. That means when a user enters F-Mode by pressing F, and then types some link hint's text, that element will receive a element.click() call.

You can also add javascript functions to be called on certain inputs manually - e.g. comment in line 3. These will not be overwritten by autogenerate.

The interruptMap contains similar things as the wordMap, but for any time during F-Mode. That means a user can disable this manager with a D, or type an X in the middle of some word to quit out of F-Mode again.
By the way, any character typed that doesn't fit into any mapping is also interpreted as please exit F-Mode.

Also note that on line 8, I explicitly leave F-Mode. Otherwise, the link hints would remain visible.

If you don't want F-Mode...

...disable it:


						manager.enable_f_mode(false);
					

Since you're not using F-Mode, you also don't need the notifyFmodeFunc from my example code.
If you were curious what that is: It's a function that is called when the user enters or leaves F-Mode. If you generated this function with manager.genToggleKeysOnNotify();, it looks like this:


							ƒ (entering) {
								if (entering) {
									HotkeyManager.showKeys(true, swapClass);
								} else {
									HotkeyManager.showKeys(false, swapClass);
								}
							}
						

Similarly, if you want it to be case sensitive, you can enable that.

Manually adding reactions

As an example, I could create a second manager that reacts when you type hi. Since it's a new manager, it will not care about other simultaneous reactions to the same entry.
I can also modify the current manager such that it reacts to hi. But then I'll have to be careful not to overwrite something that already exists.


						manager.wordMap.set("hi", function(){alert('hi');});
					

I have actually added that snippet to the end of this page's <body>, so feel free to try it out.

Since you're not using link hints, you also don't need the functionality of notifyFmodeFunc, i.e. that it hides or shows the link hints. Feel free to manager.setNotifyFModeFunction(...); any function you want.