Howdy, Stranger!

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

Binding a key to a link

I'm looking into trying to bind the escape key to the options menu link I have in the SugarCube StoryCaption special passage.

Am looking into online JavaScript that deals with binding keys to events, though not making too much progress on it so far.

Does anyone have any tips?

Comments

  • Something like the following should work, though one of the more experienced Javascript coders made have a better solution.

    Add this to your javascript passage, the one with a script tag.
    $(document).ready(function () {
    	$(document).on("keyup", function (event) {
    		if (event.which == 27) {
    			$('#story-caption a[data-passage="options"]').trigger('click');
    		}
    	});
    });
    

    note: The above assumes that your StoryCaption passage contains a options markup link, if the passage title of your options passage is something different then you will need to change the "options" value reference of the data-passage="options" part of the above code.
  • Wonderful, works great. :)
  • edited June 2015
    One question: I have several options passage links that appear via <<if>> macros in StoryCaption depending on the point in my story, for easy save game organization (e.g. if someone wants to save game on Day 2 they get directed to the options passage labeled Day 2, so that their save game will appears as "Day 2").

    I found this code to work with just random trial and error:
    $(document).ready(function () {
    	$(document).on("keyup", function (event) {
    		if (event.which == 27) {
    			$('#story-caption a[data-passage="Day 1"], a[data-passage="Day 2"], a[data-passage="Day 3"]').trigger('click');
    		}
    	});
    });
    

    Am I doing it right?
  • I would change the main line to the following or you will get all markup links to those passages, and not just the ones in the StoryCaption passage:
    $('#story-caption a[data-passage="Day 1"], #story-caption a[data-passage="Day 2"], #story-caption a[data-passage="Day 3"]').trigger('click');
    
  • Thanks again.
  • edited June 2015
    As has been said ad nauseam, the $(document).ready(function () { … }); wrapper is unnecessary in SugarCube (and, likely, most story formats) as long as your code is going into its scripting area (script tagged passages in Twine 1, Story JavaScript in Twine 2).


    As to your extended selector question. greyelf is correct, the "Day 2" and "Day 3" selectors would match on the entire document, which isn't what you're trying to do. As a slightly different take on their example, you could also do something like the following:
    $("#story-caption")
    	.find('a[data-passage="Day 1"], a[data-passage="Day 2"], a[data-passage="Day 3"]')
    	.trigger("click");
    
    I'm not saying that's better than greyelf's example, just different.

    Alternatively, if all of your links are similar (i.e. "Day …"), then you could simply use the prefix match selector to match all values which start in a particular way:
    $('#story-caption a[data-passage^="Day"]').trigger("click");
    


    Caveat: All of the examples given so far will trigger a click for all matched elements, so you should ensure that only one of those exist at any given time.
  • edited June 2015
    Thanks for the input!

    The only time I might have multiple same links on the page is if I keep a set of visibility hidden links in StoryCaption these shortcuts link to, and have another set of visible links down the bottom of the passage area the player can click to.

    (Mostly because putting stuff in storycaption doesn't fit my design, but i still want to keep shortcuts active on all passages even if I don't actually have a proper passage showing.)
  • edited June 2015
    OK, ended up going with this for simplicity's sake:
    	$(document).on("keydown", function (event) {
    		if (event.which == 27) {
    			$('#story-caption a[data-passage^="Day"]').trigger("click");
    		}
    	});
    

    I'm aware of what will happen if someone holds the esc key down with keydown, but it feels snappier than keyup, and I don't think anyone will do that.
  • edited June 2015
    Claretta wrote: »
    I'm aware of what will happen if someone holds the esc key down with keydown, but it feels snappier than keyup, and I don't think anyone will do that.
    Since you're using the keydown event, you should probably use the jQuery debounce method* to create a debounced handler. That should solve all but the most determined repeats. For example:
    $(document).on("keydown", $.debounce(400, true, function (event) {
    	if (event.which === 27) {
    		$('#story-caption a[data-passage^="Day"]').trigger("click");
    	}
    }));
    
    * In case you were wondering. It comes from an add-on module included with SugarCube, it's not part of the jQuery core. It's used in SugarCube to throttle/debounce bits of the UI.
  • edited June 2016
    Hey coming back to this, is there a way to clear the debounce function?

    Eg if I use this code to debounce "X" with a value of 1 second, and I spam X 10 times, I then need to wait 10 seconds as the debounces stack.

    OR, just as useful an answer: Is there a way to bind keys to <<click>> macro links? If so then I can just write my own debounce function with $set variables.
Sign In or Register to comment.