Use in events key and fallback to keyCode (#1394)

Author: erotourtes

src/events.js

@@ -1,9 +1,10 @@
-import setupModeHandler from './lib/mode_handler.js';
-import getFeaturesAndSetCursor from './lib/get_features_and_set_cursor.js';
+import * as Constants from './constants.js';
+import * as CommonSelectors from './lib/common_selectors.js';
 import featuresAt from './lib/features_at.js';
+import getFeaturesAndSetCursor from './lib/get_features_and_set_cursor.js';
 import isClick from './lib/is_click.js';
 import isTap from './lib/is_tap.js';
-import * as Constants from './constants.js';
+import setupModeHandler from './lib/mode_handler.js';
 import objectToMode from './modes/object_to_mode.js';
 
 export default function(ctx) {
@@ -120,30 +121,33 @@ export default function(ctx) {
     }
   };
 
-  // 8 - Backspace
-  // 46 - Delete
-  const isKeyModeValid = code => !(code === 8 || code === 46 || (code >= 48 && code <= 57));
+  const isKeyModeValid = (event) => {
+    const isBackspaceKey = CommonSelectors.isBackspaceKey(event);
+    const isDeleteKey = CommonSelectors.isDeleteKey(event);
+    const isDigitKey = CommonSelectors.isDigitKey(event);
+    return !(isBackspaceKey || isDeleteKey || isDigitKey);
+  };
 
   events.keydown = function(event) {
     const isMapElement = (event.srcElement || event.target).classList.contains(Constants.classes.CANVAS);
     if (!isMapElement) return; // we only handle events on the map
 
-    if ((event.keyCode === 8 || event.keyCode === 46) && ctx.options.controls.trash) {
+    if ((CommonSelectors.isBackspaceKey(event) || CommonSelectors.isDeleteKey(event)) && ctx.options.controls.trash) {
       event.preventDefault();
       currentMode.trash();
-    } else if (isKeyModeValid(event.keyCode)) {
+    } else if (isKeyModeValid(event)) {
       currentMode.keydown(event);
-    } else if (event.keyCode === 49 && ctx.options.controls.point) {
+    } else if (CommonSelectors.isDigit1Key(event) && ctx.options.controls.point) {
       changeMode(Constants.modes.DRAW_POINT);
-    } else if (event.keyCode === 50 && ctx.options.controls.line_string) {
+    } else if (CommonSelectors.isDigit2Key(event) && ctx.options.controls.line_string) {
       changeMode(Constants.modes.DRAW_LINE_STRING);
-    } else if (event.keyCode === 51 && ctx.options.controls.polygon) {
+    } else if (CommonSelectors.isDigit3Key(event) && ctx.options.controls.polygon) {
       changeMode(Constants.modes.DRAW_POLYGON);
     }
   };
 
   events.keyup = function(event) {
-    if (isKeyModeValid(event.keyCode)) {
+    if (isKeyModeValid(event)) {
       currentMode.keyup(event);
     }
   };

src/lib/common_selectors.js

@@ -52,11 +52,37 @@ export function isShiftDown(e) {
 }
 
 export function isEscapeKey(e) {
-  return e.keyCode === 27;
+  return e.key === 'Escape' || e.keyCode === 27;
 }
 
 export function isEnterKey(e) {
-  return e.keyCode === 13;
+  return e.key === 'Enter' || e.keyCode === 13;
+}
+
+export function isBackspaceKey(e) {
+  return e.key === 'Backspace' || e.keyCode === 8;
+}
+
+export function isDeleteKey(e) {
+  return e.key === 'Delete' || e.keyCode === 46;
+}
+
+export function isDigit1Key(e) {
+  return e.key === '1' || e.keyCode === 49;
+}
+
+export function isDigit2Key(e) {
+  return e.key === '2' || e.keyCode === 50;
+}
+
+export function isDigit3Key(e) {
+  return e.key === '3' || e.keyCode === 51;
+}
+
+export function isDigitKey(e) {
+  const key = e.key || String.fromCharCode(e.keyCode);
+  const isDigitKey = key >= '0' && key <= '9';
+  return isDigitKey;
 }
 
 export function isTrue() {

test/common_selectors.test.js

@@ -232,6 +232,10 @@ test('commonSelectors.isEscapeKey', () => {
   assert.equal(commonSelectors.isEscapeKey({
     originalEvent: {}
   }), false);
+
+  assert.equal(commonSelectors.isEscapeKey({
+    key: 'Escape'
+  }), true);
 });
 
 test('commonSelectors.isEnterKey', () => {
@@ -246,6 +250,74 @@ test('commonSelectors.isEnterKey', () => {
   assert.equal(commonSelectors.isEnterKey({
     originalEvent: {}
   }), false);
+
+  assert.equal(commonSelectors.isEnterKey({
+    key: 'Enter'
+  }), true);
+
+  assert.equal(commonSelectors.isEnterKey({
+    key: 'Escape'
+  }), false);
+});
+
+test('commonSelectors.isBackspaceKey', () => {
+  assert.ok(commonSelectors.isBackspaceKey({ keyCode: 8 }));
+  assert.ok(commonSelectors.isBackspaceKey({ key: 'Backspace' }));
+
+  assert.equal(commonSelectors.isBackspaceKey({ keyCode: 27 }), false);
+  assert.equal(commonSelectors.isBackspaceKey({ key: 'Escape' }), false);
+});
+
+test('commonSelectors.isDeleteKey', () => {
+  assert.ok(commonSelectors.isDeleteKey({ keyCode: 46 }));
+  assert.ok(commonSelectors.isDeleteKey({ key: 'Delete' }));
+
+  assert.equal(commonSelectors.isDeleteKey({ keyCode: 27 }), false);
+  assert.equal(commonSelectors.isDeleteKey({ key: 'Escape' }), false);
+});
+
+test('commonSelectors.isDigit1Key', () => {
+  assert.ok(commonSelectors.isDigit1Key({ keyCode: 49 }));
+  assert.ok(commonSelectors.isDigit1Key({ key: '1' }));
+
+  assert.equal(commonSelectors.isDigit1Key({ keyCode: 50 }), false);
+  assert.equal(commonSelectors.isDigit1Key({ key: '2' }), false);
+});
+
+test('commonSelectors.isDigit2Key', () => {
+  assert.ok(commonSelectors.isDigit2Key({ keyCode: 50 }));
+  assert.ok(commonSelectors.isDigit2Key({ key: '2' }));
+
+  assert.equal(commonSelectors.isDigit2Key({ keyCode: 51 }), false);
+  assert.equal(commonSelectors.isDigit2Key({ key: '3' }), false);
+});
+
+test('commonSelectors.isDigit3Key', () => {
+  assert.ok(commonSelectors.isDigit3Key({ keyCode: 51 }));
+  assert.ok(commonSelectors.isDigit3Key({ key: '3' }));
+
+  assert.equal(commonSelectors.isDigit3Key({ keyCode: 49 }), false);
+  assert.equal(commonSelectors.isDigit3Key({ key: '1' }), false);
+});
+
+test('commonSelectors.isDigitKey', () => {
+  const keyCode0 = 48;
+  assert.ok(commonSelectors.isDigitKey({ keyCode: keyCode0 }));
+  assert.ok(commonSelectors.isDigitKey({ key: '0' }));
+
+  const keyCode2 = 50;
+  assert.ok(commonSelectors.isDigitKey({ keyCode: keyCode2 }));
+  assert.ok(commonSelectors.isDigitKey({ key: '2' }));
+
+  const keyCode9 = 57;
+  assert.ok(commonSelectors.isDigitKey({ keyCode: keyCode9 }));
+  assert.ok(commonSelectors.isDigitKey({ key: '9' }));
+
+  assert.equal(commonSelectors.isDigitKey({ keyCode: 47 }), false);
+  assert.equal(commonSelectors.isDigitKey({ key: '/' }), false);
+
+  assert.equal(commonSelectors.isDigitKey({ keyCode: 58 }), false);
+  assert.equal(commonSelectors.isDigitKey({ key: ':' }), false);
 });
 
 test('commonSelectors.true', () => {

test/utils/key_events.js

@@ -8,30 +8,30 @@ classList.contains = function(cls) {
 
 export const enterEvent = createSyntheticEvent('keyup', {
   srcElement: { classList },
-  keyCode: 13
+  key: 'Enter'
 });
 
 export const startPointEvent = createSyntheticEvent('keydown', {
   srcElement: { classList },
-  keyCode: 49
+  key: '1'
 });
 
 export const startLineStringEvent = createSyntheticEvent('keydown', {
   srcElement: { classList },
-  keyCode: 50
+  key: '2'
 });
 
 export const startPolygonEvent = createSyntheticEvent('keydown', {
   srcElement: { classList },
-  keyCode: 51
+  key: '3'
 });
 
 export const escapeEvent = createSyntheticEvent('keyup', {
   srcElement: { classList },
-  keyCode: 27
+  key: 'Escape'
 });
 
 export const backspaceEvent = createSyntheticEvent('keydown', {
   srcElement: { classList },
-  keyCode: 8
+  key: 'Backspace'
 });