Replace use of event.keyCode

otacke · Jul 8, 2024 · a4eb8d5 · a4eb8d5
1 parent 1f0c274
commit a4eb8d5
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 28 deletions.
diff --git a/src/scripts/h5p-crossword-cell.js b/src/scripts/h5p-crossword-cell.js
@@ -204,18 +204,16 @@ export default class CrosswordCell {
         return;
       }
 
-      if (Util.CONTROL_KEY_CODES.indexOf(event.keyCode) !== -1) {
-        // Delete and Backspace
-        if (event.keyCode === 8 || event.keyCode === 46) {
-          const nextPositionOffset = this.getAnswer() ? 0 : -1;
-
-          this.setAnswer('');
-          const cellInformation = this.getInformation();
-          cellInformation.keepPosition = true;
-          cellInformation.nextPositionOffset = nextPositionOffset;
-          this.cellInput.value = '';
-          this.callbacks.onKeyup(cellInformation);
-        }
+      // Delete and Backspace
+      if (event.key === 'Delete' || event.key === 'Backspace') {
+        const nextPositionOffset = this.getAnswer() ? 0 : -1;
+
+        this.setAnswer('');
+        const cellInformation = this.getInformation();
+        cellInformation.keepPosition = true;
+        cellInformation.nextPositionOffset = nextPositionOffset;
+        this.cellInput.value = '';
+        this.callbacks.onKeyup(cellInformation);
       }
     });
 

diff --git a/src/scripts/h5p-crossword-char-list.js b/src/scripts/h5p-crossword-char-list.js
@@ -132,12 +132,12 @@ export default class CrosswordCharList {
       const firstChild = event.target.parentNode.firstChild;
       const lastChild = event.target.parentNode.lastChild;
 
-      switch (event.keyCode) {
+      switch (event.key) {
 
         // Focus previous solution word
-        case 37: // Left
+        case 'ArrowLeft':
         // intentional fallthrough
-        case 38: // Top
+        case 'ArrowUp':
           event.preventDefault();
           if (event.target.previousSibling) {
             event.target.setAttribute('tabindex', '-1');
@@ -147,9 +147,9 @@ export default class CrosswordCharList {
           break;
 
         // Focus next solution word
-        case 39: // Right
+        case 'ArrowRight':
         // intentional fallthrough
-        case 40: // Down
+        case 'ArrowDown':
           event.preventDefault();
           if (event.target.nextSibling) {
             event.target.setAttribute('tabindex', '-1');
@@ -159,7 +159,7 @@ export default class CrosswordCharList {
           break;
 
         // Focus first solution word
-        case 36: // Home
+        case 'Home':
           event.preventDefault();
           if (event.target !== firstChild) {
             event.target.setAttribute('tabindex', '-1');
@@ -169,7 +169,7 @@ export default class CrosswordCharList {
           break;
 
         // Focus last solution word
-        case 35: // End
+        case 'End':
           event.preventDefault();
           if (event.target !== lastChild) {
             event.target.setAttribute('tabindex', '-1');

diff --git a/src/scripts/h5p-crossword-input.js b/src/scripts/h5p-crossword-input.js
@@ -195,7 +195,7 @@ export default class CrosswordInput {
 
       // Make the input field "overwrite" instead "add" characters
       inputField.addEventListener('keydown', (event) => {
-        if (Util.CONTROL_KEY_CODES.indexOf(event.keyCode) !== -1) {
+        if (Util.isControlKey(event)) {
           return;
         }
 
@@ -238,15 +238,18 @@ export default class CrosswordInput {
       // Only update table if input is valid or using arrow keys
       inputField.addEventListener('keyup', (event) => {
         if (event.keyCode === 229) {
-          return; // workaround for Android specific code
+          return; // workaround for Android specific code, no event.key equivalent
         }
 
         if (this.noListeners) {
           return;
         }
 
-        if (Util.CONTROL_KEY_CODES.indexOf(event.keyCode) !== -1) {
-          if ([8, 35, 36, 37, 38, 39, 40, 46].indexOf(event.keyCode) === -1) {
+        if (Util.isControlKey(event)) {
+          if (
+            !['Backspace', 'Home', 'End', 'ArrowLeft', 'ArrowUp', 'ArrowRight',
+              'ArrowDown', 'Delete'].includes(event.key)
+          ) {
             // None of backspace, home, end, left, right, up, down, delete
             return;
           }
@@ -272,7 +275,7 @@ export default class CrosswordInput {
           orientation: word.orientation,
           cursorPosition: cursorPosition,
           text: inputField.value,
-          readOffset: ([8, 37, 38, 39, 40, 46].indexOf(event.keyCode) === -1) ? 1 : 0
+          readOffset: (['Backspace', 'ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown', 'Delete'].includes(event.key) ? 0 : 1)
         });
       });
 

diff --git a/src/scripts/services/util.js b/src/scripts/services/util.js
@@ -178,12 +178,24 @@ class Util {
 
     success();
   }
+
+  /**
+   * Determine whether an event was
+   * @param {*} event Keyboard event.
+   * @returns {boolean} Whether the event was a control key.
+   */
+  static isControlKey(event = {}) {
+    return Util.CONTROL_KEY_VALUES.includes(event.key);
+  }
 }
 
-/** @constant {number[]} KeyEventListener key codes of control symbols */
-Util.CONTROL_KEY_CODES = [
-  8, 9, 13, 16, 17, 18, 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 91,
-  92, 93, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 144, 145
+/** @constant {string[]} KeyEventListener key values of control symbols */
+Util.CONTROL_KEY_VALUES = [
+  'Backspace', 'Tab', 'Enter', 'Shift', 'Control', 'Alt', 'Pause', 'CapsLock',
+  'Escape', 'PageUp', 'PageDown', 'End', 'Home', 'ArrowLeft', 'ArrowUp',
+  'ArrowRight', 'ArrowDown', 'Insert', 'Delete', 'Meta', 'ContextMenu',
+  'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F11', 'F12',
+  'NumLock', 'ScrollLock'
 ];
 
 /**