Update deprecated KeyboardEvent properties

examples/layer-spy.js

@@ -40,11 +40,11 @@ const map = new Map({
 
 let radius = 75;
 document.addEventListener('keydown', function (evt) {
-  if (evt.which === 38) {
+  if (evt.key === 'ArrowUp') {
     radius = Math.min(radius + 5, 150);
     map.render();
     evt.preventDefault();
-  } else if (evt.which === 40) {
+  } else if (evt.key === 'ArrowDown') {
     radius = Math.max(radius - 5, 25);
     map.render();
     evt.preventDefault();

examples/magnify.js

@@ -32,11 +32,11 @@ const map = new Map({
 
 let radius = 75;
 document.addEventListener('keydown', function (evt) {
-  if (evt.which === 38) {
+  if (evt.key === 'ArrowUp') {
     radius = Math.min(radius + 5, 150);
     map.render();
     evt.preventDefault();
-  } else if (evt.which === 40) {
+  } else if (evt.key === 'ArrowDown') {
     radius = Math.max(radius - 5, 25);
     map.render();
     evt.preventDefault();

src/ol/events/Key.js

@@ -0,0 +1,14 @@
+/**
+ * @module ol/events/Key
+ */
+
+/**
+ * @enum {string}
+ * @const
+ */
+export default {
+  LEFT: 'ArrowLeft',
+  UP: 'ArrowUp',
+  RIGHT: 'ArrowRight',
+  DOWN: 'ArrowDown',
+};

src/ol/interaction/KeyboardPan.js

@@ -3,7 +3,7 @@
  */
 import EventType from '../events/EventType.js';
 import Interaction, {pan} from './Interaction.js';
-import KeyCode from '../events/KeyCode.js';
+import Key from '../events/Key.js';
 import {noModifierKeys, targetNotEditable} from '../events/condition.js';
 import {rotate as rotateCoordinate} from '../coordinate.js';
 
@@ -88,24 +88,24 @@ class KeyboardPan extends Interaction {
       const keyEvent = /** @type {KeyboardEvent} */ (
         mapBrowserEvent.originalEvent
       );
-      const keyCode = keyEvent.keyCode;
+      const key = keyEvent.key;
       if (
         this.condition_(mapBrowserEvent) &&
-        (keyCode == KeyCode.DOWN ||
-          keyCode == KeyCode.LEFT ||
-          keyCode == KeyCode.RIGHT ||
-          keyCode == KeyCode.UP)
+        (key == Key.DOWN ||
+          key == Key.LEFT ||
+          key == Key.RIGHT ||
+          key == Key.UP)
       ) {
         const map = mapBrowserEvent.map;
         const view = map.getView();
         const mapUnitsDelta = view.getResolution() * this.pixelDelta_;
         let deltaX = 0,
           deltaY = 0;
-        if (keyCode == KeyCode.DOWN) {
+        if (key == Key.DOWN) {
           deltaY = -mapUnitsDelta;
-        } else if (keyCode == KeyCode.LEFT) {
+        } else if (key == Key.LEFT) {
           deltaX = -mapUnitsDelta;
-        } else if (keyCode == KeyCode.RIGHT) {
+        } else if (key == Key.RIGHT) {
           deltaX = mapUnitsDelta;
         } else {
           deltaY = mapUnitsDelta;

test/browser/spec/ol/interaction/keyboardpan.test.js

@@ -31,22 +31,22 @@ describe('ol.interaction.KeyboardPan', function () {
         preventDefault: Event.prototype.preventDefault,
       });
 
-      event.originalEvent.keyCode = 40; // DOWN
+      event.originalEvent.key = 'ArrowDown';
       map.handleMapBrowserEvent(event);
       expect(spy.getCall(0).args[0].center).to.eql([0, -128]);
       view.setCenter([0, 0]);
 
-      event.originalEvent.keyCode = 38; // UP
+      event.originalEvent.key = 'ArrowUp';
       map.handleMapBrowserEvent(event);
       expect(spy.getCall(1).args[0].center).to.eql([0, 128]);
       view.setCenter([0, 0]);
 
-      event.originalEvent.keyCode = 37; // LEFT
+      event.originalEvent.key = 'ArrowLeft';
       map.handleMapBrowserEvent(event);
       expect(spy.getCall(2).args[0].center).to.eql([-128, 0]);
       view.setCenter([0, 0]);
 
-      event.originalEvent.keyCode = 39; // RIGHT
+      event.originalEvent.key = 'ArrowRight';
       map.handleMapBrowserEvent(event);
       expect(spy.getCall(3).args[0].center).to.eql([128, 0]);
       view.setCenter([0, 0]);

test/browser/spec/ol/interaction/keyboardzoom.test.js

@@ -53,7 +53,7 @@ describe('ol.interaction.KeyboardZoom', function () {
         preventDefault: Event.prototype.preventDefault,
       });
 
-      event.originalEvent.charCode = '+';
+      event.originalEvent.key = '+';
       map.handleMapBrowserEvent(event);
       expect(spy.called).to.be(false);
     });