There are four things you need to do to use the Mousetrap library in Harlowe.
1. Include the Mousetrap library source within your Story Javascript area.
This is similar to SugarCube (eg. open the relevant 'download it now' link on that web-page and cut-n-paste the code), except that Harlowe may generate a "See almond README: incorrect module build, no module name" error message. One method you use (hack) your way around this issue is by wrapping the Mousetrap library code within a try ... catch () block.
try {
/* the source code of the Mousetrap library. */
....
} catch (ex) {}
2. Implement a means to uniquely identify the link the bound key will effect,
There are a number of ways you can do this, one of them is to wrap the link within a named hook which will allow you use a selector starting with tw-hook[name="name of hook"] to target that link.
|next>[ [[Use the N key to visit the Next passage.|Next]]]
warning: Harlowe generates different HTML structures depending on which technique you used to create your link, the structures are either based on the tw-link element or based on the enchantment-link CSS classed enchantment. You will need to know which you used and take that into consideration when later defining your element selector.
3. Use jQuery to simulate a click event on the targeted link's HTML structure.
The above named hook based example generates a tw-link based HTML structure like the following.
<tw-hook name="next">
<tw-expression type="macro" name="link-goto">
<tw-link tabindex="0" passage-name="Next" data-raw="">Use the N key to visit the Next passage.</tw-link>
</tw-expression>
</tw-hook>
.. so the following selector could be used with the jQuery <element>.click() function to programmatically cause that link to be 'clicked'
var link = $('tw-hook[name="next"] tw-link');
if (link.length > 0) {
link.click();
}
4. Define the Mousetrap handler within the Story Javascript area.
The following code causes any markup based link wrapped within a 'next' named hook to be selected is the lower case 'n' key is pressed.
Mousetrap.bind('n', function() {
var link = $('tw-hook[name="next"] tw-link');
if (link) {
link.click();
}
});
WARNINGS:
1. Mousetrap's key bindings are CASE-SENSITIVE, so 'n' and 'N' are not the same key.
2. Once bound, a key stays bound for the entire story unless something else unbinds it or you unbind it yourself.
EDIT: The second code example in point 3 used the wrong technique for checking if jQuery found the required element, this has been corrected.