Render keynav help off-screen and slide it in (honestbleeps#4706)

* added container function for keyNav toggling

* slide in pre-rendered keynav help

* refined slide nimation for keynav help

lib/modules/keyboardNav.js

@@ -168,7 +168,7 @@ module.options = {
  value: [191, false, false, true, false], // ? (note the true in the shift slot)
  description: 'keyboardNavToggleHelpDesc',
  title: 'keyboardNavToggleHelpTitle',
- callback() { drawHelp().toggle(300); },
+ callback() { toggleKeyNavHelp(); },
  },
  toggleCmdLine: {
  type: 'keycode',
@@ -885,6 +885,26 @@ function updateLinkAnnotations(selected) {
  });
 }
 
+function toggleKeyNavHelp() {
+ const slideSpeed = 400;
+ if (!drawHelp().attr('shown')) {
+ drawHelp().attr('shown', 'false');
+ drawHelp().css({ right: '-350px' });
+ drawHelp().show();
+ }
+ if (drawHelp().attr('shown') === 'true') {
+ drawHelp().animate({
+ right: '-350px',
+ }, slideSpeed);
+ drawHelp().attr('shown', 'false');
+ } else {
+ drawHelp().animate({
+ right: '20px',
+ }, slideSpeed);
+ drawHelp().attr('shown', 'true');
+ }
+}
+
 const drawHelp = _.once(() => {
  const keys = filterMap(getActiveCommandOptions(), opt => {
  let keyCode = niceKeyCode(opt.value);