Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

replace event.keyCode with event.code, tweak documentation #851

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
mengwong marked this conversation as resolved.
Show resolved Hide resolved
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
Expand Down Expand Up @@ -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.)
mengwong marked this conversation as resolved.
Show resolved Hide resolved
* [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.

Expand Down
4 changes: 2 additions & 2 deletions src/plugins/blackout/blackout.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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 );
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/goto/goto.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) ) {
Expand Down
3 changes: 2 additions & 1 deletion src/plugins/help/help.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand Down
22 changes: 12 additions & 10 deletions src/plugins/impressConsole/impressConsole.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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">
Expand All @@ -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
Expand Down
32 changes: 14 additions & 18 deletions src/plugins/navigation/navigation.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -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;
}
};
Expand All @@ -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();
Expand Down