From bb37a47430b33c0776ba3cf2caf689b42b4826c6 Mon Sep 17 00:00:00 2001 From: Meng Weng Wong Date: Sun, 5 Mar 2023 19:06:51 +0800 Subject: [PATCH] replace event.keyCode with event.key due to deprecation KeyboardEvent.keyCode resolves https://github.com/impress/impress.js/issues/849 --- src/plugins/blackout/blackout.js | 4 +-- src/plugins/help/help.js | 3 +- src/plugins/impressConsole/impressConsole.js | 20 ++++++------ src/plugins/navigation/navigation.js | 32 +++++++++----------- 4 files changed, 28 insertions(+), 31 deletions(-) diff --git a/src/plugins/blackout/blackout.js b/src/plugins/blackout/blackout.js index 439e8685b..9c62cc035 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.key) { 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.key) { event.preventDefault(); } }, false ); diff --git a/src/plugins/help/help.js b/src/plugins/help/help.js index a3db15e0f..c8752c0f4 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.key) ) { event.preventDefault(); toggleHelp(); } diff --git a/src/plugins/impressConsole/impressConsole.js b/src/plugins/impressConsole/impressConsole.js index fd6594fa6..efa77d675 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.key ) ) { 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.key) ) { handler(); event.preventDefault(); } @@ -451,16 +451,16 @@ // 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 +565,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 +592,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..4ed1a1027 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.key === "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.key) ) { 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.key ) { + 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.key ) { + 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();