ccampbell / mousetrap

Simple library for handling keyboard shortcuts in Javascript
https://craig.is/killing/mice
Apache License 2.0
11.66k stars 968 forks source link

Idea: capture integer sequences for later use #56

Open mwcz opened 12 years ago

mwcz commented 12 years ago

Hi! Love mousetrap.

Just today I thought of an idea for navigating enumerated pages, like a giant table of users that's been paginated. The ability to press, for example, "4 g" to go to the 4th page (like "4G" in vim), would be great. I didn't find a preexisting way to do it with mousetrap.

Perhaps they could be declared in either format string specifier style:

Mousetrap.bind( "%d g" , function(e) {} );

Or regex style:

Mousetrap.bind( "(\d)+ g" , function(e) {} );

Or maybe even a special alias:

Mousetrap.bind( "number g" , function(e) {} );

I glanced quickly through the code and I think it should be possible without too much hackery, by storing in-progress patterns inside _sequence_levels.

It might take me a few days or weeks to get to it, but I wanted to post it here to get feedback before diving in. If this is possible already, or if there's a convenient way I should go about it, please let me know!

ccampbell commented 12 years ago

Ah this is an interesting idea. I prefer the third "number g" in terms of syntax. I'm not sure about including this though. If it isn't that much extra to implement maybe, but it seems like it might be a bit tricky.

One possible solution to this problem would be to make a key trigger a hidden form field off screen with focus where you can type a number sequence then have another key submit it. For example

Mousetrap.bind('g', _openHiddenInputWithFocus);

So then you could press "g number enter" to trigger going to a specific page. This wouldn't be possible for the specific sequence you are looking for though.

mwcz commented 12 years ago

Very clever! For the key sequence I want, this will do the trick:

Mousetrap.bind('0', _processNumberKeypress);
Mousetrap.bind('1', _processNumberKeypress);
Mousetrap.bind('2', _processNumberKeypress);
Mousetrap.bind('3', _processNumberKeypress);
Mousetrap.bind('4', _processNumberKeypress);
Mousetrap.bind('5', _processNumberKeypress);
Mousetrap.bind('6', _processNumberKeypress);
Mousetrap.bind('7', _processNumberKeypress);
Mousetrap.bind('8', _processNumberKeypress);
Mousetrap.bind('9', _processNumberKeypress);

Mousetrap.bind('g', _processHiddenInputWithFocus);

Where _processNumberKeypress appends each number to an array and _processHiddenInputWithFocus jumps to the page in the join()'d array.

Thanks for the ideas.

ccampbell commented 12 years ago

Ah cool! The one disadvantage about this is that if you wanted the sequences to timeout you would have to implement that yourself. For example if you entered 12 then waited a while and pressed g it would go there where as the default sequences in mousetrap timeout after 1 second. Although it wouldn't be that difficult to reset your own array to an empty array after 1 second and reset that timeout each time you get a new number.

moos commented 9 years ago

+1 Just realized I needed something like this.

I (optimistically) thought the asterisks in your example .bind('* a') means 'any key'!!

Mousetrap.bind( "number g" , function(e) {} );

is would be very useful to have.

moos commented 9 years ago

Giving back -- https://gist.github.com/moos/22ee1584833de27f041c.

dentuzhik commented 7 years ago

Would be really great to see this feature in the mousetrap