Add onFocusOnly option to interaction defaults

examples/interaction-options.html

@@ -0,0 +1,19 @@
+---
+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.
+   * By default, pinch-zoom and wheel/trackpad zoom interactions 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, fractional"
+---
+<div tabindex="1" id="map" class="map"></div>

examples/interaction-options.js

@@ -0,0 +1,22 @@
+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({
+    constrainResolution: true, onFocusOnly: true
+  }),
+  layers: [
+    new TileLayer({
+      source: new OSM()
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 2
+  })
+});

examples/mousewheel-zoom.html

@@ -1,18 +0,0 @@
----
-layout: example.html
-title: Mousewheel/Trackpad Zoom
-shortdesc: Shows advanced wheel/trackpad zoom options.
-docs: >
-  This example uses a custom `ol/interaction/MouseWheelZoom` configuration:
-
-   * By default, wheel/trackpad zoom is always active, which can be unexpected
-     on pages with a lot of scrollable content and an embedded map. To perform
-     wheel/trackpad zoom actions only when the map has the focus, set
-     `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 tabindex="1" id="map" class="map"></div>

examples/mousewheel-zoom.js

@@ -1,26 +0,0 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import {defaults as defaultInteractions, MouseWheelZoom} from '../src/ol/interaction.js';
-import {focus} from '../src/ol/events/condition.js';
-import TileLayer from '../src/ol/layer/Tile.js';
-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
-      condition: focus // only wheel/trackpad zoom when the map has the focus
-    })
-  ]),
-  layers: [
-    new TileLayer({
-      source: new OSM()
-    })
-  ],
-  target: 'map',
-  view: new View({
-    center: [0, 0],
-    zoom: 2
-  })
-});