From 55fb62c5519cd39aec777ddf7f312b2f4be960ed Mon Sep 17 00:00:00 2001 From: ahocevar Date: Tue, 31 Jul 2018 09:01:42 +0200 Subject: [PATCH] Add onFocusOnly option to interaction defaults --- examples/interaction-options.html | 19 +++++++++++++++++++ examples/interaction-options.js | 22 ++++++++++++++++++++++ examples/mousewheel-zoom.html | 18 ------------------ examples/mousewheel-zoom.js | 26 -------------------------- src/ol/interaction.js | 7 +++++++ test/spec/ol/map.test.js | 25 +++++++++++++++++++++++++ 6 files changed, 73 insertions(+), 44 deletions(-) create mode 100644 examples/interaction-options.html create mode 100644 examples/interaction-options.js delete mode 100644 examples/mousewheel-zoom.html delete mode 100644 examples/mousewheel-zoom.js diff --git a/examples/interaction-options.html b/examples/interaction-options.html new file mode 100644 index 0000000000..8c07ee8505 --- /dev/null +++ b/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" +--- +
diff --git a/examples/interaction-options.js b/examples/interaction-options.js new file mode 100644 index 0000000000..bc3cc90621 --- /dev/null +++ b/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 + }) +}); diff --git a/examples/mousewheel-zoom.html b/examples/mousewheel-zoom.html deleted file mode 100644 index 6ddee867f7..0000000000 --- a/examples/mousewheel-zoom.html +++ /dev/null @@ -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" ---- -
diff --git a/examples/mousewheel-zoom.js b/examples/mousewheel-zoom.js deleted file mode 100644 index effe1b8c3f..0000000000 --- a/examples/mousewheel-zoom.js +++ /dev/null @@ -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 - }) -}); diff --git a/src/ol/interaction.js b/src/ol/interaction.js index d7be0bb234..fdcb80c881 100644 --- a/src/ol/interaction.js +++ b/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 })); diff --git a/test/spec/ol/map.test.js b/test/spec/ol/map.test.js index f0f3f23cec..73f095280c 100644 --- a/test/spec/ol/map.test.js +++ b/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); }); });