Use pepjs instead of our own pointerevent polyfill

This commit is contained in:
ahocevar
2019-08-28 21:48:06 +02:00
parent aca4a39863
commit 74e8e013cf
27 changed files with 197 additions and 2430 deletions

View File

@@ -9,7 +9,7 @@ import {stopPropagation} from '../events/Event.js';
import EventType from '../events/EventType.js';
import {clamp} from '../math.js';
import PointerEventType from '../pointer/EventType.js';
import PointerEventHandler from '../pointer/PointerEventHandler.js';
import 'pepjs';
/**
@@ -135,19 +135,15 @@ class ZoomSlider extends Control {
thumbElement.setAttribute('type', 'button');
thumbElement.className = className + '-thumb ' + CLASS_UNSELECTABLE;
const containerElement = this.element;
containerElement.setAttribute('touch-action', 'none');
containerElement.className = className + ' ' + CLASS_UNSELECTABLE + ' ' + CLASS_CONTROL;
containerElement.appendChild(thumbElement);
/**
* @type {PointerEventHandler}
* @private
*/
this.dragger_ = new PointerEventHandler(containerElement);
listen(this.dragger_, PointerEventType.POINTERDOWN,
listen(containerElement, PointerEventType.POINTERDOWN,
this.handleDraggerStart_, this);
listen(this.dragger_, PointerEventType.POINTERMOVE,
listen(containerElement, PointerEventType.POINTERMOVE,
this.handleDraggerDrag_, this);
listen(this.dragger_, PointerEventType.POINTERUP,
listen(containerElement, PointerEventType.POINTERUP,
this.handleDraggerEnd_, this);
listen(containerElement, EventType.CLICK, this.handleContainerClick_, this);
@@ -158,7 +154,6 @@ class ZoomSlider extends Control {
* @inheritDoc
*/
disposeInternal() {
this.dragger_.dispose();
super.disposeInternal();
}
@@ -206,7 +201,7 @@ class ZoomSlider extends Control {
}
/**
* @param {MouseEvent} event The browser event to handle.
* @param {PointerEvent} event The browser event to handle.
* @private
*/
handleContainerClick_(event) {
@@ -228,11 +223,11 @@ class ZoomSlider extends Control {
/**
* Handle dragger start events.
* @param {import("../pointer/PointerEvent.js").default} event The drag event.
* @param {PointerEvent} event The drag event.
* @private
*/
handleDraggerStart_(event) {
if (!this.dragging_ && event.originalEvent.target === this.element.firstElementChild) {
if (!this.dragging_ && event.target === this.element.firstElementChild) {
const element = /** @type {HTMLElement} */ (this.element.firstElementChild);
this.getMap().getView().beginInteraction();
this.startX_ = event.clientX - parseFloat(element.style.left);
@@ -243,9 +238,7 @@ class ZoomSlider extends Control {
const drag = this.handleDraggerDrag_;
const end = this.handleDraggerEnd_;
this.dragListenerKeys_.push(
listen(document, EventType.MOUSEMOVE, drag, this),
listen(document, PointerEventType.POINTERMOVE, drag, this),
listen(document, EventType.MOUSEUP, end, this),
listen(document, PointerEventType.POINTERUP, end, this)
);
}
@@ -255,7 +248,7 @@ class ZoomSlider extends Control {
/**
* Handle dragger drag events.
*
* @param {import("../pointer/PointerEvent.js").default} event The drag event.
* @param {PointerEvent} event The drag event.
* @private
*/
handleDraggerDrag_(event) {
@@ -270,7 +263,7 @@ class ZoomSlider extends Control {
/**
* Handle dragger end events.
* @param {import("../pointer/PointerEvent.js").default} event The drag event.
* @param {PointerEvent} event The drag event.
* @private
*/
handleDraggerEnd_(event) {