Merge pull request #10332 from ahocevar/no-touch-action-css

Conditional default prevention instead of touch-action: none

src/ol/MapBrowserEventHandler.js

@@ -3,12 +3,13 @@
  */
 
 import 'elm-pep';
-import {DEVICE_PIXEL_RATIO} from './has.js';
+import {DEVICE_PIXEL_RATIO, PASSIVE_EVENT_LISTENERS} from './has.js';
 import MapBrowserEventType from './MapBrowserEventType.js';
 import MapBrowserPointerEvent from './MapBrowserPointerEvent.js';
 import {listen, unlistenByKey} from './events.js';
 import EventTarget from './events/Target.js';
 import PointerEventType from './pointer/EventType.js';
+import EventType from './events/EventType.js';
 
 class MapBrowserEventHandler extends EventTarget {
 
@@ -84,6 +85,12 @@ class MapBrowserEventHandler extends EventTarget {
       PointerEventType.POINTERDOWN,
       this.handlePointerDown_, this);
 
+    /**
+     * @type {PointerEvent}
+     * @private
+     */
+    this.originalPointerMoveEvent_;
+
     /**
      * @type {?import("./events.js").EventsKey}
      * @private
@@ -92,6 +99,13 @@ class MapBrowserEventHandler extends EventTarget {
       PointerEventType.POINTERMOVE,
       this.relayEvent_, this);
 
+    /**
+     * @private
+     */
+    this.boundHandleTouchMove_ = this.handleTouchMove_.bind(this);
+
+    this.element_.addEventListener(EventType.TOUCHMOVE, this.boundHandleTouchMove_,
+      PASSIVE_EVENT_LISTENERS ? {passive: false} : false);
   }
 
   /**
@@ -246,11 +260,26 @@ class MapBrowserEventHandler extends EventTarget {
    * @private
    */
   relayEvent_(pointerEvent) {
+    this.originalPointerMoveEvent_ = pointerEvent;
     const dragging = !!(this.down_ && this.isMoving_(pointerEvent));
     this.dispatchEvent(new MapBrowserPointerEvent(
       pointerEvent.type, this.map_, pointerEvent, dragging));
   }
 
+  /**
+   * Flexible handling of a `touch-action: none` css equivalent: because calling
+   * `preventDefault()` on a `pointermove` event does not stop native page scrolling
+   * and zooming, we also listen for `touchmove` and call `preventDefault()` on it
+   * when an interaction (currently `DragPan` handles the event.
+   * @param {TouchEvent} event Event.
+   * @private
+   */
+  handleTouchMove_(event) {
+    if (this.originalPointerMoveEvent_.defaultPrevented) {
+      event.preventDefault();
+    }
+  }
+
   /**
    * @param {PointerEvent} pointerEvent Pointer
    * event.
@@ -271,6 +300,8 @@ class MapBrowserEventHandler extends EventTarget {
       unlistenByKey(this.relayedListenerKey_);
       this.relayedListenerKey_ = null;
     }
+    this.element_.removeEventListener(EventType.TOUCHMOVE, this.boundHandleTouchMove_);
+
     if (this.pointerdownListenerKey_) {
       unlistenByKey(this.pointerdownListenerKey_);
       this.pointerdownListenerKey_ = null;

src/ol/PluggableMap.js

@@ -131,17 +131,6 @@ import {toUserCoordinate, fromUserCoordinate} from './proj.js';
  */
 
 
-/**
- * @param {HTMLElement} element Element.
- * @param {string} touchAction Value for `touch-action'.
- */
-function setTouchAction(element, touchAction) {
-  element.style.msTouchAction = touchAction;
-  element.style.touchAction = touchAction;
-  element.setAttribute('touch-action', touchAction);
-}
-
-
 /**
  * @fires import("./MapBrowserEvent.js").MapBrowserEvent
  * @fires import("./MapEvent.js").MapEvent
@@ -305,12 +294,6 @@ class PluggableMap extends BaseObject {
      */
     this.keyHandlerKeys_ = null;
 
-    /**
-     * @private
-     * @type {?Array<import("./events.js").EventsKey>}
-     */
-    this.focusHandlerKeys_ = null;
-
     const handleBrowserEvent = this.handleBrowserEvent.bind(this);
     this.viewport_.addEventListener(EventType.CONTEXTMENU, handleBrowserEvent, false);
     this.viewport_.addEventListener(EventType.WHEEL, handleBrowserEvent,
@@ -939,6 +922,7 @@ class PluggableMap extends BaseObject {
     const type = opt_type || browserEvent.type;
     const mapBrowserEvent = new MapBrowserEvent(type, this, browserEvent);
     this.handleMapBrowserEvent(mapBrowserEvent);
+    browserEvent.preventDefault();
   }
 
   /**
@@ -1044,12 +1028,6 @@ class PluggableMap extends BaseObject {
       targetElement = this.getTargetElement();
     }
 
-    if (this.focusHandlerKeys_) {
-      for (let i = 0, ii = this.focusHandlerKeys_.length; i < ii; ++i) {
-        unlistenByKey(this.focusHandlerKeys_[i]);
-      }
-      this.focusHandlerKeys_ = null;
-    }
     if (this.keyHandlerKeys_) {
       for (let i = 0, ii = this.keyHandlerKeys_.length; i < ii; ++i) {
         unlistenByKey(this.keyHandlerKeys_[i]);
@@ -1078,15 +1056,6 @@ class PluggableMap extends BaseObject {
       if (!this.renderer_) {
         this.renderer_ = this.createRenderer();
       }
-      let hasFocus = true;
-      if (targetElement.hasAttribute('tabindex')) {
-        hasFocus = document.activeElement === targetElement;
-        this.focusHandlerKeys_ = [
-          listen(targetElement, EventType.FOCUS, setTouchAction.bind(this, this.viewport_, 'none')),
-          listen(targetElement, EventType.BLUR, setTouchAction.bind(this, this.viewport_, 'auto'))
-        ];
-      }
-      setTouchAction(this.viewport_, hasFocus ? 'none' : 'auto');
 
       const keyboardEventTarget = !this.keyboardEventTarget_ ?
         targetElement : this.keyboardEventTarget_;

src/ol/control/ZoomSlider.js

@@ -136,7 +136,6 @@ 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);
 

src/ol/events/EventType.js

@@ -34,5 +34,6 @@ export default {
   KEYPRESS: 'keypress',
   LOAD: 'load',
   RESIZE: 'resize',
+  TOUCHMOVE: 'touchmove',
   WHEEL: 'wheel'
 };

src/ol/interaction/DragPan.js

@@ -115,6 +115,7 @@ class DragPan extends PointerInteraction {
     }
     this.lastCentroid = centroid;
     this.lastPointersCount_ = targetPointers.length;
+    mapBrowserEvent.originalEvent.preventDefault();
   }
 
   /**

src/ol/interaction/Pointer.js

@@ -95,6 +95,16 @@ class PointerInteraction extends Interaction {
 
   }
 
+  /**
+   * Returns the current number of pointers involved in the interaction,
+   * e.g. `2` when two fingers are used.
+   * @return {number} The number of pointers.
+   * @api
+   */
+  getPointerCount() {
+    return this.targetPointers.length;
+  }
+
   /**
    * Handle pointer down events.
    * @param {import("../MapBrowserPointerEvent.js").default} mapBrowserEvent Event.