Freecodecamp: Bind ESC key to collapse map

Created on 4 Jul 2016  路  6Comments  路  Source: freeCodeCamp/freeCodeCamp

When clicking Map from the menu, the map slides out. The only way to collapse it again is using the X.

client/main.js:298
$('.map-aside-action-collapse').on('click', collapseMap);

Would an event handler that fires on keyup for ESC key work?

This is a wish list item. Mostly I wanted to see if I could locate where in the code this happens. Thanks!

decayed UI

Most helpful comment

@systimotic You might want to hold off. We are in the process of removing all the sidecar related drawers. Oh sorry looks like I wasn't quick enough. I'll close this to prevent others from creating PR's for this.

All 6 comments

@jboxman this has been an intuitive thing for me to want to do too. I've put this code underneath the one you've cited and tested it and it works.

$(document).keyup(function(e){
  if (e.keyCode === 27) collapseMap();
});

This could also be done with the Wiki around Line 336.

$(document).keyup(function(e){
  if (e.keyCode === 27) collapseWiki();
});

And also the main Gitter chat

$(document).keyup(function(e){
  if (e.keyCode === 27) collapseMainChat();
});

@FreeCodeCamp/issue-moderators good to add? If there's a better way, please comment.

I tried implementing it myself:

window.Mousetrap.bind('esc', () => {
  collapseMap();
});

But I ran into a maddening bug: the binding doesn't work unless one clicks outside of the map, then presses ESC. Just to make it interesting, the binding works just fine any subsequent time you open the map, it just fails to take the first time the map slides out.

There's some further subtleties too, possibly related: the esc key currently clears the map filter, so the map ought only be collapsed if the input is already blank (i.e. one hits esc twice). This is straightforward to check for, but I got nowhere, as I found that ESC would be ignored at all times whenever the search box had focus.

Might be easier to fix this in the react branch.

@BerkeleyTrue Why was this closed?

I'm working on fixing this (rather, I've fixed this) but I'm unsure about some of the implementation details.
Currently, pressing escape with the input in focus empties out the input. If we want this feature, it would make sense to get rid of this functionality. Our options are either removing focus from the input on pressing escape, or to close it immediately. What would be the best option?

/cc @FreeCodeCamp/moderators

Why was this closed?

Issues which do not see any activity for prolonged periods of time and aren't mission critical can be closed with 'decayed' flag.

They may be re-opened if the activity picks up.

If you have a fix, please make a pull request.

Thanks.

Ok, thanks @raisedadead! I'll fine-tune what I have and submit a PR

@systimotic You might want to hold off. We are in the process of removing all the sidecar related drawers. Oh sorry looks like I wasn't quick enough. I'll close this to prevent others from creating PR's for this.

Was this page helpful?
0 / 5 - 0 ratings