replace event.keyCode with event.code, tweak documentation

README.md

@@ -22,9 +22,6 @@ You can include this link directly inside of your HTML file in its header. If yo
 - V1.1.0: https://cdn.jsdelivr.net/gh/impress/[email protected]/js/impress.js
 - Source: https://cdn.jsdelivr.net/gh/impress/impress.js/js/impress.js
 
-### Getting Started Guide
-Check out our new [Getting Started](GettingStarted.md) guide if you want a quick introduction to the project!
-
 ### Checking out and initializing the git repository
 
     git clone --recursive https://github.com/impress/impress.js.git
@@ -82,7 +79,7 @@ REPOSITORY STRUCTURE
 * [test/](test/): Contains QUnit and Syn libraries that we use for writing tests, as well as some test coverage for core functionality. (Yes, more tests are much welcome.) Tests for plugins are in the directory of each plugin.
 * [js/](js/): Contains [js/impress.js](js/impress.js), which contains a concatenation of the core `src/impress.js` and all the plugins. Traditionally this is the file that you'll link to in a browser. In fact both the demo and test files do exactly that.
 * [css/](css/): Contains a CSS file used by the demo. This file is **not required for using impress.js** in your own presentations. Impress.js creates the CSS it needs dynamically.
-* [extras/](extras/) contains plugins that for various reasons aren't enabled by default. You have to explicitly add them with their own `script` element to use them.
+* [extras/](https://github.com/impress/impress-extras/) contains plugins that for various reasons aren't enabled by default. You have to explicitly add them with their own `script` element to use them. (This is provided as a Git submodule so if this directory is empty, you probably didn't clone with `--recursive`. Try running `git submodule update --init --recursive --remote` to get it.)
 * [build.js](build.js): Simple build file that creates `js/impress.js`. It also creates a minified version `impress.min.js`, but that one is not included in the github repository.
 * [package.json](build.js): An NPM package specification. This was mainly added so you can easily install [buildify](https://www.npmjs.com/package/buildify) and run `node build.js`. Other than the build process, which is really just doing roughly `cat src/impress.js src/plugins/*/*.js > js/impress.js`, and testing, `impress.js` itself doesn't depend on Node or any NPM modules.
 

src/plugins/blackout/blackout.js

@@ -92,7 +92,7 @@
         gc.addEventListener( document, "keydown", function( event ) {
 
             // Accept b or . -> . is sent by presentation remote controllers
-            if ( event.keyCode === 66 || event.keyCode === 190 ) {
+            if ( [ "KeyB", "Period" ].includes( event.code ) ) {
                 event.preventDefault();
                 if ( !blackedOut ) {
                     blackout();
@@ -105,7 +105,7 @@
         gc.addEventListener( document, "keyup", function( event ) {
 
             // Accept b or . -> . is sent by presentation remote controllers
-            if ( event.keyCode === 66 || event.keyCode === 190 ) {
+            if ( [ "KeyB", "Period" ].includes( event.code ) ) {
                 event.preventDefault();
             }
         }, false );

src/plugins/goto/goto.js

@@ -65,7 +65,7 @@
 
                 // Don't return, allow the other categories to work despite this error
             } else {
-                var index = keylist.indexOf( event.origEvent.key );
+                var index = keylist.indexOf( event.origEvent.code );
                 if ( index >= 0 ) {
                     var next = nextlist[ index ];
                     if ( isNumber( next ) ) {

src/plugins/help/help.js

@@ -58,7 +58,8 @@
 
     document.addEventListener( "keyup", function( event ) {
 
-        if ( event.keyCode === 72 || event.keyCode === 191 ) { // "h" || "?"
+	// "h" || "?" // but this seems brittle, what about keyboards that don't have / ? together?
+        if ( [ "KeyH", "Slash" ].includes( event.code ) ) {
             event.preventDefault();
             toggleHelp();
         }

src/plugins/impressConsole/impressConsole.js

@@ -314,23 +314,23 @@
             }
         };
 
-        var registerKeyEvent = function( keyCodes, handler, window ) {
+        var registerKeyEvent = function( keys, handler, window ) {
             if ( window === undefined ) {
                 window = consoleWindow;
             }
 
             // Prevent default keydown action when one of supported key is pressed
             window.document.addEventListener( 'keydown', function( event ) {
                 if ( !event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey &&
-                     keyCodes.indexOf( event.keyCode ) !== -1 ) {
+                     keys.includes( event.code ) ) {
                     event.preventDefault();
                 }
             }, false );
 
             // Trigger impress action on keyup
             window.document.addEventListener( 'keyup', function( event ) {
                 if ( !event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey &&
-                     keyCodes.indexOf( event.keyCode ) !== -1 ) {
+                     keys.includes( event.code ) ) {
                         handler();
                         event.preventDefault();
                 }
@@ -451,16 +451,18 @@
 
                 // Keyboard navigation handlers
                 // 33: pg up, 37: left, 38: up
-                registerKeyEvent( [ 33, 37, 38 ], window.impress().prev );
+                registerKeyEvent( [ 'PageUp', 'ArrowLeft', 'ArrowUp' ],
+				  window.impress().prev );
 
                 // 34: pg down, 39: right, 40: down
-                registerKeyEvent( [ 34, 39, 40 ], window.impress().next );
+                registerKeyEvent( [ 'PageDown', 'ArrowRight', 'ArrowDown' ],
+				  window.impress().next );
 
                 // 32: space
-                registerKeyEvent( [ 32 ], spaceHandler );
+                registerKeyEvent( [ 'Space' ], spaceHandler );
 
                 // 82: R
-                registerKeyEvent( [ 82 ], timerReset );
+                registerKeyEvent( [ 'KeyR' ], timerReset );
 
                 // Cleanup
                 consoleWindow.onbeforeunload = function() {
@@ -565,7 +567,7 @@
             };
 
             //Open speaker console when they press 'p'
-            registerKeyEvent( [ 80 ], open, window );
+            registerKeyEvent( [ 'KeyP' ], open, window );
 
             //Btw, you can also launch console automatically:
             //<div id="impress" data-console-autolaunch="true">
@@ -592,12 +594,12 @@
         /**
          * Register a key code to an event handler
          *
-         * :param: event.detail.keyCodes    List of key codes
+         * :param: event.detail.keys        List of keys
          * :param: event.detail.handler     A function registered as the event handler
          * :param: event.detail.window      The console window to register the keycode in
          */
         root.addEventListener( 'impress:console:registerKeyEvent', function( event ) {
-            registerKeyEvent( event.detail.keyCodes, event.detail.handler, event.detail.window );
+            registerKeyEvent( event.detail.keys, event.detail.handler, event.detail.window );
         } );
 
         // Return the object

src/plugins/navigation/navigation.js

@@ -58,7 +58,7 @@
 
             // In the case of TAB, we force step navigation always, overriding the browser
             // navigation between input elements, buttons and links.
-            if ( event.keyCode === 9 ) {
+            if ( event.code === "Tab" ) {
                 return true;
             }
 
@@ -67,8 +67,8 @@
                 return false;
             }
 
-            if ( ( event.keyCode >= 32 && event.keyCode <= 34 ) ||
-                 ( event.keyCode >= 37 && event.keyCode <= 40 ) ) {
+            if ( "Space PageUp PageDown ArrowLeft ArrowRight ArrowUp ArrowDown"
+		 .split( " " ).includes( event.code ) ) {
                 return true;
             }
         };
@@ -86,25 +86,21 @@
         gc.addEventListener( document, "keyup", function( event ) {
             if ( isNavigationEvent( event ) ) {
                 if ( event.shiftKey ) {
-                    switch ( event.keyCode ) {
-                        case 9: // Shift+tab
+                    switch ( event.code ) {
+                        case "Tab": // Shift+tab
                             api.prev();
                             break;
                     }
                 } else {
-                    switch ( event.keyCode ) {
-                        case 33: // Pg up
-                        case 37: // Left
-                        case 38: // Up
-                                 api.prev( event );
-                                 break;
-                        case 9:  // Tab
-                        case 32: // Space
-                        case 34: // Pg down
-                        case 39: // Right
-                        case 40: // Down
-                                 api.next( event );
-                                 break;
+                    switch ( event.code ) {
+                    case "PageUp":
+                    case "ArrowLeft":
+                    case "ArrowUp": api.prev( event ); break;
+                    case "Tab":
+                    case "Space":
+                    case "PageDown":
+                    case "ArrowRight":
+                    case "ArrowDown": api.next( event ); break;
                     }
                 }
                 event.preventDefault();