Merge pull request #10291 from ahocevar/tabindex

tabindex without focus condition

examples/interaction-options.html

@@ -1,14 +0,0 @@
----
-layout: example.html
-title: Interaction Options
-shortdesc: Shows interaction options for custom scroll and zoom behavior.
-docs: >
-  This example uses a custom `ol/interaction/defaults` configuration:
-  by default, wheel/trackpad zoom and drag panning is always active, which
-  can be unexpected on pages with a lot of scrollable content and an embedded
-  map. To perform wheel/trackpad zoom and drag-pan actions only when the map
-  has the focus, set `onFocusOnly: true` as option. This requires a map div
-  with a `tabindex` attribute set.
-tags: "trackpad, mousewheel, zoom, scroll, interaction, fractional"
----
-<div tabindex="1" id="map" class="map"></div>

examples/page-scroll.html

@@ -0,0 +1,10 @@
+---
+layout: example.html
+title: Page Scrolling
+shortdesc: Shows a map that does not interrupt page scrolling.
+docs: >
+  To perform wheel/trackpad zoom and drag-pan actions only when the map
+  has the focus, configure your map div with a `tabindex` attribute.
+tags: "trackpad, mousewheel, zoom, scroll, page"
+---
+<div tabindex="1" id="map" class="map"></div>

examples/page-scroll.js

@@ -1,14 +1,10 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {defaults as defaultInteractions} from '../src/ol/interaction.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
 
 
 const map = new Map({
-  interactions: defaultInteractions({
-    onFocusOnly: true
-  }),
   layers: [
     new TileLayer({
       source: new OSM()

src/ol/interaction/DragPan.js

@@ -3,7 +3,7 @@
  */
 import {scale as scaleCoordinate, rotate as rotateCoordinate} from '../coordinate.js';
 import {easeOut} from '../easing.js';
-import {noModifierKeys, primaryAction} from '../events/condition.js';
+import {noModifierKeys, primaryAction, focus} from '../events/condition.js';
 import {FALSE} from '../functions.js';
 import PointerInteraction, {centroid as centroidFromPointers} from './Pointer.js';
 
@@ -69,6 +69,20 @@ class DragPan extends PointerInteraction {
 
   }
 
+  /**
+   * @private
+   * @param {import("../MapBrowserEvent").default} mapBrowserEvent Event.
+   * @return {boolean} Condition passes.
+   */
+  conditionInternal_(mapBrowserEvent) {
+    let pass = true;
+    if (mapBrowserEvent.map.getTargetElement().hasAttribute('tabindex')) {
+      pass = focus(mapBrowserEvent);
+    }
+    return pass && this.condition_(mapBrowserEvent);
+  }
+
+
   /**
    * @inheritDoc
    */
@@ -145,7 +159,7 @@ class DragPan extends PointerInteraction {
    * @inheritDoc
    */
   handleDownEvent(mapBrowserEvent) {
-    if (this.targetPointers.length > 0 && this.condition_(mapBrowserEvent)) {
+    if (this.targetPointers.length > 0 && this.conditionInternal_(mapBrowserEvent)) {
       const map = mapBrowserEvent.map;
       const view = map.getView();
       this.lastCentroid = null;

src/ol/interaction/MouseWheelZoom.js

@@ -1,7 +1,7 @@
 /**
  * @module ol/interaction/MouseWheelZoom
  */
-import {always} from '../events/condition.js';
+import {always, focus} from '../events/condition.js';
 import EventType from '../events/EventType.js';
 import {DEVICE_PIXEL_RATIO, FIREFOX} from '../has.js';
 import Interaction, {zoomByDelta} from './Interaction.js';
@@ -134,6 +134,20 @@ class MouseWheelZoom extends Interaction {
 
   }
 
+  /**
+   * @private
+   * @param {import("../MapBrowserEvent").default} mapBrowserEvent Event.
+   * @return {boolean} Condition passes.
+   */
+  conditionInternal_(mapBrowserEvent) {
+    let pass = true;
+    if (mapBrowserEvent.map.getTargetElement().hasAttribute('tabindex')) {
+      pass = focus(mapBrowserEvent);
+    }
+    return pass && this.condition_(mapBrowserEvent);
+  }
+
+
   /**
    * @private
    */
@@ -149,7 +163,7 @@ class MouseWheelZoom extends Interaction {
    * @override
    */
   handleEvent(mapBrowserEvent) {
-    if (!this.condition_(mapBrowserEvent)) {
+    if (!this.conditionInternal_(mapBrowserEvent)) {
       return true;
     }
     const type = mapBrowserEvent.type;