Remove IE11 compat code

src/adapters/equirectangular/index.js

@@ -128,7 +128,7 @@ export class EquirectangularAdapter extends AbstractAdapter {
         const b = binary.indexOf('</x:xmpmeta>');
         const data = binary.substring(a, b);
 
-        if (a !== -1 && b !== -1 && data.indexOf('GPano:') !== -1) {
+        if (a !== -1 && b !== -1 && data.includes('GPano:')) {
           return {
             fullWidth    : getXMPValue(data, 'FullPanoWidthPixels'),
             fullHeight   : getXMPValue(data, 'FullPanoHeightPixels'),

src/buttons/AbstractButton.js

@@ -1,7 +1,7 @@
 import { AbstractComponent } from '../components/AbstractComponent';
 import { KEY_CODES } from '../data/constants';
 import { PSVError } from '../PSVError';
-import { getEventKey, isPlainObject, toggleClass } from '../utils';
+import { isPlainObject, toggleClass } from '../utils';
 
 /**
  * @namespace PSV.buttons
@@ -96,7 +96,7 @@ export class AbstractButton extends AbstractComponent {
     });
 
     this.container.addEventListener('keydown', (e) => {
-      if (getEventKey(e) === KEY_CODES.Enter && this.prop.enabled) {
+      if (e.key === KEY_CODES.Enter && this.prop.enabled) {
         this.onClick();
         e.stopPropagation();
       }
@@ -225,8 +225,8 @@ export class AbstractButton extends AbstractComponent {
   __setIcon(icon, container = this.container) {
     if (icon) {
       container.innerHTML = icon;
-      // classList not supported on IE11, className is read-only !!!!
-      container.querySelector('svg').setAttribute('class', 'psv-button-svg');
+      // className is read-only on SVGElement
+      container.querySelector('svg').classList.add('psv-button-svg');
     }
     else {
       container.innerHTML = '';

src/buttons/AbstractMoveButton.js

@@ -1,7 +1,6 @@
 import { KEY_CODES } from '../data/constants';
 import { SYSTEM } from '../data/system';
 import arrow from '../icons/arrow.svg';
-import { getEventKey } from '../utils';
 import { PressHandler } from '../utils/PressHandler';
 import { AbstractButton } from './AbstractButton';
 
@@ -79,8 +78,8 @@ export class AbstractMoveButton extends AbstractButton {
       case 'mousedown': this.__onMouseDown(); break;
       case 'mouseup':   this.__onMouseUp(); break;
       case 'touchend':  this.__onMouseUp(); break;
-      case 'keydown':   getEventKey(e) === KEY_CODES.Enter && this.__onMouseDown(); break;
-      case 'keyup':     getEventKey(e) === KEY_CODES.Enter && this.__onMouseUp(); break;
+      case 'keydown':   e.key === KEY_CODES.Enter && this.__onMouseDown(); break;
+      case 'keyup':     e.key === KEY_CODES.Enter && this.__onMouseUp(); break;
       // @formatter:on
     }
     /* eslint-enable */

src/buttons/AbstractZoomButton.js

@@ -1,6 +1,5 @@
 import { KEY_CODES } from '../data/constants';
 import { SYSTEM } from '../data/system';
-import { getEventKey } from '../utils';
 import { PressHandler } from '../utils/PressHandler';
 import { AbstractButton } from './AbstractButton';
 
@@ -62,8 +61,8 @@ export class AbstractZoomButton extends AbstractButton {
       case 'mousedown': this.__onMouseDown(); break;
       case 'mouseup':   this.__onMouseUp(); break;
       case 'touchend':  this.__onMouseUp(); break;
-      case 'keydown':   getEventKey(e) === KEY_CODES.Enter && this.__onMouseDown(); break;
-      case 'keyup':     getEventKey(e) === KEY_CODES.Enter && this.__onMouseUp(); break;
+      case 'keydown':   e.key === KEY_CODES.Enter && this.__onMouseDown(); break;
+      case 'keyup':     e.key === KEY_CODES.Enter && this.__onMouseUp(); break;
       // @formatter:on
     }
     /* eslint-enable */

src/components/Overlay.js

@@ -1,7 +1,6 @@
 import { EVENTS, KEY_CODES } from '../data/constants';
-import { getEventKey } from '../utils';
-import { AbstractComponent } from './AbstractComponent';
 import { PSVError } from '../PSVError';
+import { AbstractComponent } from './AbstractComponent';
 
 /**
  * @summary Overlay component
@@ -87,7 +86,7 @@ export class Overlay extends AbstractComponent {
     switch (e.type) {
       // @formatter:off
       case 'mouseup':  this.prop.dissmisable && this.hide(); break;
-      case 'keydown':  getEventKey(e) === KEY_CODES.Escape && this.prop.dissmisable && this.hide(); break;
+      case 'keydown':  e.key === KEY_CODES.Escape && this.prop.dissmisable && this.hide(); break;
       // @formatter:on
     }
     /* eslint-enable */

src/components/Panel.js

@@ -1,7 +1,7 @@
 import { EVENTS, KEY_CODES } from '../data/constants';
 import { SYSTEM } from '../data/system';
 import { PSVError } from '../PSVError';
-import { getEventKey, toggleClass } from '../utils';
+import { toggleClass } from '../utils';
 import { AbstractComponent } from './AbstractComponent';
 
 /**
@@ -112,7 +112,7 @@ export class Panel extends AbstractComponent {
       case 'touchmove':  this.__onTouchMove(e);  break;
       case 'mouseup':    this.__onMouseUp(e);    break;
       case 'touchend':   this.__onMouseUp(e);    break;
-      case 'keydown':    getEventKey(e) === KEY_CODES.Escape && this.hide(); break;
+      case 'keydown':    e.key === KEY_CODES.Escape && this.hide(); break;
       // @formatter:on
     }
     /* eslint-enable */
@@ -181,7 +181,7 @@ export class Panel extends AbstractComponent {
     if (config.clickHandler) {
       this.prop.clickHandler = config.clickHandler;
       this.prop.keyHandler = (e) => {
-        if (getEventKey(e) === KEY_CODES.Enter) {
+        if (e.key === KEY_CODES.Enter) {
           config.clickHandler(e);
         }
       };

src/plugins/settings/index.js

@@ -129,15 +129,7 @@ export class SettingsPlugin extends AbstractPlugin {
    * @param {string} id
    */
   removeSetting(id) {
-    let idx = -1;
-    // FIXME use findIndex, one day, when IE11 is totally dead
-    this.settings.some((setting, i) => {
-      if (setting.id === id) {
-        idx = i;
-        return true;
-      }
-      return false;
-    });
+    const idx = this.settings.findIndex(setting => setting.id === id);
     if (idx !== -1) {
       this.settings.splice(idx, 1);
 

src/plugins/video/index.js

@@ -53,7 +53,7 @@ export class VideoPlugin extends AbstractPlugin {
   constructor(psv, options) {
     super(psv);
 
-    if (this.psv.adapter.constructor.id.indexOf('video') === -1) {
+    if (!this.psv.adapter.constructor.id.includes('video')) {
       throw new PSVError('VideoPlugin can only be used with a video adapter.');
     }
 

src/services/EventsHandler.js

@@ -1,5 +1,4 @@
 import * as THREE from 'three';
-import { Animation } from '../utils/Animation';
 import {
   ACTIONS,
   CTRLZOOM_TIMEOUT,
@@ -16,18 +15,8 @@ import {
 import { SYSTEM } from '../data/system';
 import gestureIcon from '../icons/gesture.svg';
 import mousewheelIcon from '../icons/mousewheel.svg';
-import {
-  clone,
-  distance,
-  each,
-  getClosest,
-  getEventKey,
-  getPosition,
-  isEmpty,
-  isFullscreenEnabled,
-  normalizeWheel,
-  throttle
-} from '../utils';
+import { clone, distance, each, getClosest, getPosition, isEmpty, isFullscreenEnabled, normalizeWheel, throttle } from '../utils';
+import { Animation } from '../utils/Animation';
 import { PressHandler } from '../utils/PressHandler';
 import { AbstractService } from './AbstractService';
 
@@ -200,36 +189,34 @@ export class EventsHandler extends AbstractService {
 
   /**
    * @summary Handles keyboard events
-   * @param {KeyboardEvent} evt
+   * @param {KeyboardEvent} e
    * @private
    */
-  __onKeyDown(evt) {
-    const key = getEventKey(evt);
-
+  __onKeyDown(e) {
     if (this.config.mousewheelCtrlKey) {
-      this.state.ctrlKeyDown = key === KEY_CODES.Control;
+      this.state.ctrlKeyDown = e.key === KEY_CODES.Control;
 
       if (this.state.ctrlKeyDown) {
         clearTimeout(this.state.ctrlZoomTimeout);
         this.psv.overlay.hide(IDS.CTRL_ZOOM);
       }
     }
 
-    const e = this.psv.trigger(EVENTS.KEY_PRESS, key);
-    if (e.isDefaultPrevented()) {
+    const e2 = this.psv.trigger(EVENTS.KEY_PRESS, e.key);
+    if (e2.isDefaultPrevented()) {
       return;
     }
 
     if (!this.state.keyboardEnabled) {
       return;
     }
 
-    if (this.config.keyboard[key] === ACTIONS.TOGGLE_AUTOROTATE) {
+    if (this.config.keyboard[e.key] === ACTIONS.TOGGLE_AUTOROTATE) {
       this.psv.toggleAutorotate();
     }
-    else if (this.config.keyboard[key] && !this.state.keyHandler.time) {
+    else if (this.config.keyboard[e.key] && !this.state.keyHandler.time) {
       /* eslint-disable */
-      switch (this.config.keyboard[key]) {
+      switch (this.config.keyboard[e.key]) {
         // @formatter:off
         case ACTIONS.ROTATE_LAT_UP: this.psv.dynamics.position.roll({latitude: false}); break;
         case ACTIONS.ROTATE_LAT_DOWN: this.psv.dynamics.position.roll({latitude: true});  break;

src/services/Renderer.js

@@ -134,10 +134,10 @@ export class Renderer extends AbstractService {
       case EVENTS.ZOOM_UPDATED:     this.__onZoomUpdated(); break;
       case EVENTS.POSITION_UPDATED: this.__onPositionUpdated(); break;
       case EVENTS.CONFIG_CHANGED:
-        if (evt.args[0].indexOf('fisheye') !== -1) {
+        if (evt.args[0].includes('fisheye')) {
           this.__onPositionUpdated();
         }
-        if (evt.args[0].indexOf('mousemove') !== -1) {
+        if (evt.args[0].includes('mousemove')) {
           this.canvasContainer.style.cursor = this.psv.config.mousemove ? 'move' : 'default';
         }
         break;

src/utils/browser.js

@@ -6,22 +6,7 @@
  * @param {boolean} [active] - forced state
  */
 export function toggleClass(element, className, active) {
-  // manual implementation for IE11 and SVGElement
-  if (!element.classList) {
-    let currentClassName = element.getAttribute('class') || '';
-    const currentActive = currentClassName.indexOf(className) !== -1;
-    const regex = new RegExp('(?:^|\\s)' + className + '(?:\\s|$)');
-
-    if ((active === undefined || active) && !currentActive) {
-      currentClassName += currentClassName.length > 0 ? ' ' + className : className;
-    }
-    else if (!active) {
-      currentClassName = currentClassName.replace(regex, ' ');
-    }
-
-    element.setAttribute('class', currentClassName);
-  }
-  else if (active === undefined) {
+  if (active === undefined) {
     element.classList.toggle(className);
   }
   else if (active && !element.classList.contains(className)) {
@@ -88,15 +73,15 @@ export function hasParent(el, parent) {
  * @returns {HTMLElement}
  */
 export function getClosest(el, selector) {
-  const matches = el.matches || el.msMatchesSelector;
-  let test = el;
   // When el is document or window, the matches does not exist
-  if (!matches) {
+  if (!el.matches) {
     return null;
   }
 
+  let test = el;
+
   do {
-    if (matches.bind(test)(selector)) {
+    if (test.matches(selector)) {
       return test;
     }
     test = test instanceof SVGElement ? test.parentNode : test.parentElement;
@@ -126,73 +111,14 @@ export function getPosition(el) {
   return { left, top };
 }
 
-/**
- * @summary Map between keyboard events `keyCode|which` and `key`
- * @memberOf PSV.utils
- * @type {Object<int, string>}
- * @readonly
- * @private
- */
-const KEYMAP = {
-  13 : 'Enter',
-  17 : 'Control',
-  27 : 'Escape',
-  32 : ' ',
-  33 : 'PageUp',
-  34 : 'PageDown',
-  37 : 'ArrowLeft',
-  38 : 'ArrowUp',
-  39 : 'ArrowRight',
-  40 : 'ArrowDown',
-  46 : 'Delete',
-  107: '+',
-  109: '-',
-};
-
-/**
- * @summary Map for non standard keyboard events `key` for IE and Edge
- * @see https://github.com/shvaikalesh/shim-keyboard-event-key
- * @type {Object<string, string>}
- * @readonly
- * @private
- */
-const MS_KEYMAP = {
-  Add     : '+',
-  Del     : 'Delete',
-  Down    : 'ArrowDown',
-  Esc     : 'Escape',
-  Left    : 'ArrowLeft',
-  Right   : 'ArrowRight',
-  Spacebar: ' ',
-  Subtract: '-',
-  Up      : 'ArrowUp',
-};
-
-/**
- * @summary Returns the key name of a KeyboardEvent
- * @memberOf PSV.utils
- * @param {KeyboardEvent} evt
- * @returns {string}
- */
-export function getEventKey(evt) {
-  let key = evt.key || KEYMAP[evt.keyCode || evt.which];
-
-  if (key && MS_KEYMAP[key]) {
-    key = MS_KEYMAP[key];
-  }
-
-  return key;
-}
-
 /**
  * @summary Detects if fullscreen is enabled
  * @memberOf PSV.utils
  * @param {HTMLElement} elt
  * @returns {boolean}
  */
 export function isFullscreenEnabled(elt) {
-  /* eslint-disable-next-line max-len */
-  return (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) === elt;
+  return (document.fullscreenElement || document.webkitFullscreenElement) === elt;
 }
 
 /**
@@ -201,17 +127,15 @@ export function isFullscreenEnabled(elt) {
  * @param {HTMLElement} elt
  */
 export function requestFullscreen(elt) {
-  /* eslint-disable-next-line max-len */
-  (elt.requestFullscreen || elt.mozRequestFullScreen || elt.webkitRequestFullscreen || elt.msRequestFullscreen).call(elt);
+  (elt.requestFullscreen || elt.webkitRequestFullscreen).call(elt);
 }
 
 /**
  * @summary Exits fullscreen mode
  * @memberOf PSV.utils
  */
 export function exitFullscreen() {
-  /* eslint-disable-next-line max-len */
-  (document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen).call(document);
+  (document.exitFullscreen || document.webkitExitFullscreen).call(document);
 }
 
 /**

types/utils/browser.d.ts

@@ -23,11 +23,6 @@ export function hasParent(el: HTMLElement, parent: HTMLElement): boolean;
  */
 export function getClosest(el: HTMLElement | SVGElement, selector: string): HTMLElement;
 
-/**
- * @summary Returns the key name of a KeyboardEvent
- */
-export function getEventKey(evt: KeyboardEvent): string;
-
 /**
  * @summary Detects if fullscreen is enabled
  */