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
-  })
-});

src/ol/interaction.js

@@ -12,6 +12,7 @@ import KeyboardZoom from './interaction/KeyboardZoom.js';
 import MouseWheelZoom from './interaction/MouseWheelZoom.js';
 import PinchRotate from './interaction/PinchRotate.js';
 import PinchZoom from './interaction/PinchZoom.js';
+import {focus} from './events/condition.js';
 
 export {default as DoubleClickZoom} from './interaction/DoubleClickZoom.js';
 export {default as DragAndDrop} from './interaction/DragAndDrop.js';
@@ -39,6 +40,10 @@ export {default as Translate} from './interaction/Translate.js';
  * @typedef {Object} DefaultsOptions
  * @property {boolean} [altShiftDragRotate=true] Whether Alt-Shift-drag rotate is
  * desired.
+ * @property {boolean} [onFocusOnly=false] Interact only when the map has the
+ * focus. This affects the `MouseWheelZoom` and `DragPan` interactions and is
+ * useful when page scroll is desired for maps that do not have the browser's
+ * focus.
  * @property {boolean} [constrainResolution=false] Zoom to the closest integer
  * zoom level after the wheel/trackpad or pinch gesture ends.
  * @property {boolean} [doubleClickZoom=true] Whether double click zoom is
@@ -108,6 +113,7 @@ export function defaults(opt_options) {
   const dragPan = options.dragPan !== undefined ? options.dragPan : true;
   if (dragPan) {
     interactions.push(new DragPan({
+      condition: options.onFocusOnly ? focus : undefined,
       kinetic: kinetic
     }));
   }
@@ -139,6 +145,7 @@ export function defaults(opt_options) {
     options.mouseWheelZoom : true;
   if (mouseWheelZoom) {
     interactions.push(new MouseWheelZoom({
+      condition: options.onFocusOnly ? focus : undefined,
       constrainResolution: options.constrainResolution,
       duration: options.zoomDuration
     }));

test/spec/ol/map.test.js

@@ -5,7 +5,9 @@ import Overlay from '../../../src/ol/Overlay.js';
 import View from '../../../src/ol/View.js';
 import LineString from '../../../src/ol/geom/LineString.js';
 import {TOUCH} from '../../../src/ol/has.js';
+import {focus} from '../../../src/ol/events/condition.js';
 import {defaults as defaultInteractions} from '../../../src/ol/interaction.js';
+import DragPan from '../../../src/ol/interaction/DragPan.js';
 import DoubleClickZoom from '../../../src/ol/interaction/DoubleClickZoom.js';
 import Interaction from '../../../src/ol/interaction/Interaction.js';
 import MouseWheelZoom from '../../../src/ol/interaction/MouseWheelZoom.js';
@@ -501,6 +503,29 @@ describe('ol.Map', function() {
         expect(interactions.item(0).useAnchor_).to.eql(true);
         interactions.item(0).setMouseAnchor(false);
         expect(interactions.item(0).useAnchor_).to.eql(false);
+        expect(interactions.item(0).condition_).to.not.be(focus);
+      });
+      it('uses the focus condition when onFocusOnly option is set', function() {
+        options.onFocusOnly = true;
+        options.mouseWheelZoom = true;
+        const interactions = defaultInteractions(options);
+        expect(interactions.item(0).condition_).to.be(focus);
+      });
+    });
+
+    describe('create dragpan interaction', function() {
+      it('creates dragpan interaction', function() {
+        options.dragPan = true;
+        const interactions = defaultInteractions(options);
+        expect(interactions.getLength()).to.eql(1);
+        expect(interactions.item(0)).to.be.a(DragPan);
+        expect(interactions.item(0).condition_).to.not.be(focus);
+      });
+      it('uses the focus condition when onFocusOnly option is set', function() {
+        options.onFocusOnly = true;
+        options.dragPan = true;
+        const interactions = defaultInteractions(options);
+        expect(interactions.item(0).condition_).to.be(focus);
       });
     });