From 05358646a16afda900388760c72ce280a2217c25 Mon Sep 17 00:00:00 2001 From: Damien Sorel Date: Thu, 24 Mar 2022 13:09:53 +0100 Subject: [PATCH] Remove IE11 compat code --- src/adapters/equirectangular/index.js | 2 +- src/buttons/AbstractButton.js | 8 +-- src/buttons/AbstractMoveButton.js | 5 +- src/buttons/AbstractZoomButton.js | 5 +- src/components/Overlay.js | 5 +- src/components/Panel.js | 6 +- src/plugins/settings/index.js | 10 +-- src/plugins/video/index.js | 2 +- src/services/EventsHandler.js | 33 +++------- src/services/Renderer.js | 4 +- src/utils/browser.js | 92 +++------------------------ types/utils/browser.d.ts | 5 -- 12 files changed, 36 insertions(+), 141 deletions(-) diff --git a/src/adapters/equirectangular/index.js b/src/adapters/equirectangular/index.js index f1585f414..edb137744 100644 --- a/src/adapters/equirectangular/index.js +++ b/src/adapters/equirectangular/index.js @@ -128,7 +128,7 @@ export class EquirectangularAdapter extends AbstractAdapter { const b = binary.indexOf(''); 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'), diff --git a/src/buttons/AbstractButton.js b/src/buttons/AbstractButton.js index e9733652b..a4563d037 100644 --- a/src/buttons/AbstractButton.js +++ b/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 = ''; diff --git a/src/buttons/AbstractMoveButton.js b/src/buttons/AbstractMoveButton.js index 2a4e1c625..35c91fc59 100644 --- a/src/buttons/AbstractMoveButton.js +++ b/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 */ diff --git a/src/buttons/AbstractZoomButton.js b/src/buttons/AbstractZoomButton.js index 86aa1bc93..8e2c88eb8 100644 --- a/src/buttons/AbstractZoomButton.js +++ b/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 */ diff --git a/src/components/Overlay.js b/src/components/Overlay.js index d3d3563cd..5fab14972 100644 --- a/src/components/Overlay.js +++ b/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 */ diff --git a/src/components/Panel.js b/src/components/Panel.js index ef0c482f4..abc8c3bfe 100644 --- a/src/components/Panel.js +++ b/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); } }; diff --git a/src/plugins/settings/index.js b/src/plugins/settings/index.js index 27ad9551c..52780bd4a 100644 --- a/src/plugins/settings/index.js +++ b/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); diff --git a/src/plugins/video/index.js b/src/plugins/video/index.js index fb6a3a731..43273fd93 100644 --- a/src/plugins/video/index.js +++ b/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.'); } diff --git a/src/services/EventsHandler.js b/src/services/EventsHandler.js index 194d9411b..41f059645 100644 --- a/src/services/EventsHandler.js +++ b/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,14 +189,12 @@ 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); @@ -215,8 +202,8 @@ export class EventsHandler extends AbstractService { } } - 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; } @@ -224,12 +211,12 @@ export class EventsHandler extends AbstractService { 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; diff --git a/src/services/Renderer.js b/src/services/Renderer.js index f7b7e751c..e7b81729e 100644 --- a/src/services/Renderer.js +++ b/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; diff --git a/src/utils/browser.js b/src/utils/browser.js index bd6ea1f2f..301564c21 100644 --- a/src/utils/browser.js +++ b/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,64 +111,6 @@ export function getPosition(el) { return { left, top }; } -/** - * @summary Map between keyboard events `keyCode|which` and `key` - * @memberOf PSV.utils - * @type {Object} - * @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} - * @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 @@ -191,8 +118,7 @@ export function getEventKey(evt) { * @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,8 +127,7 @@ 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); } /** @@ -210,8 +135,7 @@ export function requestFullscreen(elt) { * @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); } /** diff --git a/types/utils/browser.d.ts b/types/utils/browser.d.ts index 459e9c0ff..6e4d3b729 100644 --- a/types/utils/browser.d.ts +++ b/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 */