Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Activating links on key press (script) (SC2).

edited February 2017 in Workshop
While I'm sure it's not 100% perfect JavaScript, I made a thing to activate links when keyboard buttons are pressed. Figured I'd share it here in case anyone else wants it. I welcome suggestions for improvement to. Here's the minified script (goes in a script-tagged passage in Twine 1, or Story JavaScript in Twine 2.)
!function(){$(document).keyup(function(t){49==t.keyCode&&($("#oneAct a").trigger("click"),$("#oneAct button").trigger("click")),50==t.keyCode&&($("#twoAct a").trigger("click"),$("#threeAct button").trigger("click")),51==t.keyCode&&($("#threeAct a").trigger("click"),$("#threeAct button").trigger("click")),52==t.keyCode&&($("#fourAct a").trigger("click"),$("#fourAct button").trigger("click")),52==t.keyCode&&($("#fourAct a").trigger("click"),$("#fourAct button").trigger("click")),53==t.keyCode&&($("#fiveAct a").trigger("click"),$("#fiveAct button").trigger("click")),54==t.keyCode&&($("#sixAct a").trigger("click"),$("#sixAct button").trigger("click")),55==t.keyCode&&($("#sevenAct a").trigger("click"),$("#sevenAct button").trigger("click")),56==t.keyCode&&($("#eightAct a").trigger("click"),$("#eightAct button").trigger("click")),57==t.keyCode&&($("#nineAct a").trigger("click"),$("#nineAct button").trigger("click")),48==t.keyCode&&($("#zeroAct a").trigger("click"),$("#zeroAct button").trigger("click")),9==t.keyCode&&($("#tabAct a").trigger("click"),$("#tabAct button").trigger("click")),32==t.keyCode&&($("#spaceAct a").trigger("click"),$("#spaceAct button").trigger("click")),17==t.keyCode&&($("#ctrlAct a").trigger("click"),$("#ctrlAct button").trigger("click")),8==t.keyCode&&($("#bkspAct a").trigger("click"),$("#bkspAct button").trigger("click")),27==t.keyCode&&($("#escAct a").trigger("click"),$("#escAct button").trigger("click")),46==t.keyCode&&($("#delAct a").trigger("click"),$("#delAct button").trigger("click")),13==t.keyCode&&($("#enterAct a").trigger("click"),$("#enterAct button").trigger("click")),18==t.keyCode&&($("#altAct a").trigger("click"),$("#altAct button").trigger("click")),81==t.keyCode&&($("#qKeyAct a").trigger("click"),$("#qKeyAct button").trigger("click")),87==t.keyCode&&($("#wKeyAct a").trigger("click"),$("#wKeyAct button").trigger("click")),69==t.keyCode&&($("#eKeyAct a").trigger("click"),$("#eKeyAct button").trigger("click")),82==t.keyCode&&($("#rKeyAct a").trigger("click"),$("#rKeyAct button").trigger("click")),84==t.keyCode&&($("#tKeyAct a").trigger("click"),$("#tKeyAct button").trigger("click")),89==t.keyCode&&($("#yKeyAct a").trigger("click"),$("#yKeyAct button").trigger("click")),85==t.keyCode&&($("#uKeyAct a").trigger("click"),$("#uKeyAct button").trigger("click")),73==t.keyCode&&($("#iKeyAct a").trigger("click"),$("#iKeyAct button").trigger("click")),79==t.keyCode&&($("#oKeyAct a").trigger("click"),$("#oKeyAct button").trigger("click")),80==t.keyCode&&($("#pKeyAct a").trigger("click"),$("#pKeyAct button").trigger("click")),65==t.keyCode&&($("#aKeyAct a").trigger("click"),$("#aKeyAct button").trigger("click")),83==t.keyCode&&($("#sKeyAct a").trigger("click"),$("#sKeyAct button").trigger("click")),68==t.keyCode&&($("#dKeyAct a").trigger("click"),$("#dKeyAct button").trigger("click")),70==t.keyCode&&($("#fKeyAct a").trigger("click"),$("#fKeyAct button").trigger("click")),71==t.keyCode&&($("#gKeyAct a").trigger("click"),$("#gKeyAct button").trigger("click")),72==t.keyCode&&($("#hKeyAct a").trigger("click"),$("#hKeyAct button").trigger("click")),74==t.keyCode&&($("#jKeyAct a").trigger("click"),$("#jKeyAct button").trigger("click")),75==t.keyCode&&($("#kKeyAct a").trigger("click"),$("#kKeyAct button").trigger("click")),76==t.keyCode&&($("#lKeyAct a").trigger("click"),$("#lKeyAct button").trigger("click")),90==t.keyCode&&($("#zKeyAct a").trigger("click"),$("#zKeyAct button").trigger("click")),88==t.keyCode&&($("#xKeyAct a").trigger("click"),$("#xKeyAct button").trigger("click")),67==t.keyCode&&($("#cKeyAct a").trigger("click"),$("#cKeyAct button").trigger("click")),86==t.keyCode&&($("#vKeyAct a").trigger("click"),$("#vKeyAct button").trigger("click")),66==t.keyCode&&($("#bKeyAct a").trigger("click"),$("#bKeyAct button").trigger("click")),78==t.keyCode&&($("#nKeyAct a").trigger("click"),$("#nKeyAct button").trigger("click")),77==t.keyCode&&($("#mKeyAct a").trigger("click"),$("#mKeyAct button").trigger("click")),112==t.keyCode&&($("#f1KeyAct a").trigger("click"),$("#f1KeyAct button").trigger("click")),113==t.keyCode&&($("#f2KeyAct a").trigger("click"),$("#f2KeyAct button").trigger("click")),114==t.keyCode&&($("#f3KeyAct a").trigger("click"),$("#f3KeyAct button").trigger("click")),115==t.keyCode&&($("#f4KeyAct a").trigger("click"),$("#f4KeyAct button").trigger("click")),116==t.keyCode&&($("#f5KeyAct a").trigger("click"),$("#f5KeyAct button").trigger("click")),117==t.keyCode&&($("#f6KeyAct a").trigger("click"),$("#f6KeyAct button").trigger("click")),118==t.keyCode&&($("#f7KeyAct a").trigger("click"),$("#f7KeyAct button").trigger("click")),119==t.keyCode&&($("#f8KeyAct a").trigger("click"),$("#f8KeyAct button").trigger("click")),120==t.keyCode&&($("#f9KeyAct a").trigger("click"),$("#f9KeyAct button").trigger("click")),121==t.keyCode&&($("#f10KeyAct a").trigger("click"),$("#f10KeyAct button").trigger("click")),122==t.keyCode&&($("#f11KeyAct a").trigger("click"),$("#f11KeyAct button").trigger("click")),123==t.keyCode&&($("#f12KeyAct a").trigger("click"),$("#f12KeyAct button").trigger("click"))})}();

To use it, add spans around any link or button element you want to be controllable from the keyboard. You should only have one span of each kind per passage. The id you need is:

For number keys: the number written out + "Act"

Examples:
<span id="oneAct">[[link/button code]]</span>
<span id="twoAct">[[link/button code]]</span>
<span id="nineAct">[[link/button code]]</span>
<span id="zeroAct">[[link/button code]]</span>

For letter keys: the letter (lower case) + "KeyAct"

Examples:
<span id="aKeyAct">[[link/button code]]</span>
<span id="wKeyAct">[[link/button code]]</span>
<span id="dKeyAct">[[link/button code]]</span>
<span id="mKeyAct">[[link/button code]]</span>

For function keys (may not work great on all browsers!): the name of the key (lower case) + "KeyAct"

Examples:
<span id="f1KeyAct">[[link/button code]]</span>
<span id="f5KeyAct">[[link/button code]]</span>
<span id="f8KeyAct">[[link/button code]]</span>
<span id="f12KeyAct">[[link/button code]]</span>

For other keys the name of the key, or an abbreviation + "Act"

All such keys are listed below:
<span id="bkspAct">[[link/button code]]/%backspace%/</span>
<span id="delAct">[[link/button code]]/%delete%/</span>
<span id="spaceAct">[[link/button code]]/%space%/</span>
<span id="tabAct">[[link/button code]]</span>/%tab%/
<span id="ctrlAct">[[link/button code]]</span>/%control%/
<span id="altAct">[[link/button code]]</span>/%alt%/
<span id="enterAct">[[link/button code]]</span>/%enter%/
<span id="escAct">[[link/button code]]</span>/%escape%/

No other keys are supported. The code also doesn't account for anything like holding shift or ctrl and pressing a button.

Edit: spoiler tags were not working, removed them. Attached a little showcase.

Comments

  • Not to take away from what you've done here and just mentioning this as an additional resource.

    For most keyboarding needs, I generally recommend Mousetrap—which, despite its name, is a library for handling keyboard shortcuts.
  • Not to take away from what you've done here and just mentioning this as an additional resource.

    For most keyboarding needs, I generally recommend Mousetrap—which, despite its name, is a library for handling keyboard shortcuts.

    I know there's plenty of stuff out there for this (and most stuff you'd want to do). I really appreciate the specific recommendation; part of the problem for me is how much stuff is in fact out there--I have no idea what to actually use. I mostly wrote this because I'm trying to learn jQuery (and get better at just general JavaScript, too), and to a lesser extent because I didn't personally feel like I needed all the functionality of a library.

    Looking at it now, in the soberness of being fully awake (I was super-excited and tired when I finished it last night), I do realize that there's about zero reason for anyone else to actually use it. So instead of that, celebrate my accomplishment of basic programming with me!

    I'm gonna mess around with mousetrap tonight though. Also, I've been looking for a good draggable-element solution, but I really don't feel like I need jQuery UI. Do you happen to know a library that's basic and lightweight that offers that (and maybe some basic resizing)? Coding that up myself is a bit advanced for me.
Sign In or Register to comment.