Merge pull request #7904 from ahocevar/focus-scroll

Add focus condition, e.g. for wheel zoom

examples/mousewheel-zoom.html

@@ -1,12 +1,18 @@
 ---
 layout: example.html
 title: Mousewheel/Trackpad Zoom
-shortdesc: Restrict wheel/trackpad zooming to integer zoom levels.
+shortdesc: Shows advanced wheel/trackpad zoom options.
 docs: >
-  By default, the `ol.interaction.MouseWheelZoom` can leave the map at
+  This example uses a custom `ol.interaction.MouseWheelZoom` configuration:
-  fractional zoom levels. If instead you want to constrain wheel/trackpad
+
-  zooming to integer zoom levels, set <code>constrainResolution: true</code>
+   * By default, wheel/trackpad zoom is always active, which can be unexpected
-  when constructing the interaction.
+     on pages with a lot of scrollable content and an embedded map. To perform
-tags: "trackpad, mousewheel, zoom, interaction"
+     wheel/trackpad zoom actions only when the map has the focus, set
+     `condition: ol.events.condition.focus` as constructor option. This requires
+     a map div with a `tabindex` attribute set.
+   * By default, the interaction can leave the map at fractional zoom levels. If
+     instead you want to constrain wheel/trackpad zooming to integer zoom
+     levels, set `constrainResolution: true`.
+tags: "trackpad, mousewheel, zoom, scroll, interaction"
 ---
-<div id="map" class="map"></div>
+<div tabindex="1" id="map" class="map"></div>

examples/mousewheel-zoom.js

@@ -1,6 +1,7 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {defaults as defaultInteractions} from '../src/ol/interaction.js';
+import {focus} from '../src/ol/events/condition.js';
 import MouseWheelZoom from '../src/ol/interaction/MouseWheelZoom.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import OSM from '../src/ol/source/OSM.js';
@@ -9,7 +10,8 @@ import OSM from '../src/ol/source/OSM.js';
 const map = new Map({
   interactions: defaultInteractions({mouseWheelZoom: false}).extend([
     new MouseWheelZoom({
-      constrainResolution: true // force zooming to a integer zoom
+      constrainResolution: true, // force zooming to a integer zoom
+      condition: focus // only wheel/trackpad zoom when the map has the focus
     })
   ]),
   layers: [

src/ol/events/condition.js

@@ -41,6 +41,19 @@ export const altShiftKeysOnly = function(mapBrowserEvent) {
 };
 
 
+/**
+ * Return `true` if the map has the focus. This condition requires a map target
+ * element with a `tabindex` attribute, e.g. `<div id="map" tabindex="1">`.
+ *
+ * @param {ol.MapBrowserEvent} event Map browser event.
+ * @return {boolean} The map has the focus.
+ * @api
+ */
+export const focus = function(event) {
+  return event.target.getTargetElement() === document.activeElement;
+};
+
+
 /**
  * Return always true.
  *