diff --git a/README.md b/README.md index 09ba753d9..b01428fc0 100644 --- a/README.md +++ b/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/impress.js@1.1.0/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. diff --git a/src/plugins/blackout/blackout.js b/src/plugins/blackout/blackout.js index 439e8685b..bf8a7c85e 100644 --- a/src/plugins/blackout/blackout.js +++ b/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 ); diff --git a/src/plugins/goto/goto.js b/src/plugins/goto/goto.js index ac77d9549..451eb75de 100644 --- a/src/plugins/goto/goto.js +++ b/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 ) ) { diff --git a/src/plugins/help/help.js b/src/plugins/help/help.js index a3db15e0f..afb92d934 100644 --- a/src/plugins/help/help.js +++ b/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(); } diff --git a/src/plugins/impressConsole/impressConsole.js b/src/plugins/impressConsole/impressConsole.js index fd6594fa6..26fc1bda1 100644 --- a/src/plugins/impressConsole/impressConsole.js +++ b/src/plugins/impressConsole/impressConsole.js @@ -314,7 +314,7 @@ } }; - var registerKeyEvent = function( keyCodes, handler, window ) { + var registerKeyEvent = function( keys, handler, window ) { if ( window === undefined ) { window = consoleWindow; } @@ -322,7 +322,7 @@ // 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 ); @@ -330,7 +330,7 @@ // 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: //
@@ -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 diff --git a/src/plugins/navigation/navigation.js b/src/plugins/navigation/navigation.js index d5b1d1302..301abf022 100644 --- a/src/plugins/navigation/navigation.js +++ b/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();