diff --git a/src/ol/Map.js b/src/ol/Map.js index b181d62dbe..8178af1acc 100644 --- a/src/ol/Map.js +++ b/src/ol/Map.js @@ -64,7 +64,9 @@ class Map extends PluggableMap { options.controls = defaultControls(); } if (!options.interactions) { - options.interactions = defaultInteractions(); + options.interactions = defaultInteractions({ + onFocusOnly: true, + }); } super(options); diff --git a/src/ol/events/condition.js b/src/ol/events/condition.js index 4365f5fa7e..573cab3b3d 100644 --- a/src/ol/events/condition.js +++ b/src/ol/events/condition.js @@ -59,6 +59,18 @@ export const focus = function (event) { return event.target.getTargetElement().contains(document.activeElement); }; +/** + * Return `true` if the map has the focus or no 'tabindex' attribute set. + * + * @param {import("../MapBrowserEvent.js").default} event Map browser event. + * @return {boolean} The map container has the focus or no 'tabindex' attribute. + */ +export const focusWithTabindex = function (event) { + return event.map.getTargetElement().hasAttribute('tabindex') + ? focus(event) + : true; +}; + /** * Return always true. * diff --git a/src/ol/interaction.js b/src/ol/interaction.js index 55802195f5..feb41be8ff 100644 --- a/src/ol/interaction.js +++ b/src/ol/interaction.js @@ -12,7 +12,7 @@ import Kinetic from './Kinetic.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'; +import {focusWithTabindex} from './events/condition.js'; export {default as DoubleClickZoom} from './interaction/DoubleClickZoom.js'; export {default as DragAndDrop} from './interaction/DragAndDrop.js'; @@ -112,7 +112,7 @@ export function defaults(opt_options) { if (dragPan) { interactions.push( new DragPan({ - condition: options.onFocusOnly ? focus : undefined, + condition: options.onFocusOnly ? focusWithTabindex : undefined, kinetic: kinetic, }) ); @@ -149,7 +149,7 @@ export function defaults(opt_options) { if (mouseWheelZoom) { interactions.push( new MouseWheelZoom({ - condition: options.onFocusOnly ? focus : undefined, + condition: options.onFocusOnly ? focusWithTabindex : undefined, duration: options.zoomDuration, }) ); diff --git a/src/ol/interaction/DragPan.js b/src/ol/interaction/DragPan.js index 6f8b4d74a1..1d4f4daabb 100644 --- a/src/ol/interaction/DragPan.js +++ b/src/ol/interaction/DragPan.js @@ -6,7 +6,7 @@ import PointerInteraction, { } from './Pointer.js'; import {FALSE} from '../functions.js'; import {easeOut} from '../easing.js'; -import {focus, noModifierKeys, primaryAction} from '../events/condition.js'; +import {noModifierKeys, primaryAction} from '../events/condition.js'; import { rotate as rotateCoordinate, scale as scaleCoordinate, @@ -72,19 +72,6 @@ class DragPan extends PointerInteraction { this.noKinetic_ = false; } - /** - * @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); - } - /** * Handle pointer drag events. * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Event. @@ -167,10 +154,7 @@ class DragPan extends PointerInteraction { * @return {boolean} If the event was consumed. */ handleDownEvent(mapBrowserEvent) { - if ( - this.targetPointers.length > 0 && - this.conditionInternal_(mapBrowserEvent) - ) { + if (this.targetPointers.length > 0 && this.condition_(mapBrowserEvent)) { const map = mapBrowserEvent.map; const view = map.getView(); this.lastCentroid = null; diff --git a/src/ol/interaction/MouseWheelZoom.js b/src/ol/interaction/MouseWheelZoom.js index a34c6577bb..0a69ee7ee6 100644 --- a/src/ol/interaction/MouseWheelZoom.js +++ b/src/ol/interaction/MouseWheelZoom.js @@ -4,7 +4,7 @@ import EventType from '../events/EventType.js'; import Interaction, {zoomByDelta} from './Interaction.js'; import {DEVICE_PIXEL_RATIO, FIREFOX} from '../has.js'; -import {always, focus} from '../events/condition.js'; +import {always} from '../events/condition.js'; import {clamp} from '../math.js'; /** @@ -146,19 +146,6 @@ class MouseWheelZoom extends Interaction { this.deltaPerZoom_ = 300; } - /** - * @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 */ @@ -179,7 +166,7 @@ class MouseWheelZoom extends Interaction { * @return {boolean} `false` to stop event propagation. */ handleEvent(mapBrowserEvent) { - if (!this.conditionInternal_(mapBrowserEvent)) { + if (!this.condition_(mapBrowserEvent)) { return true; } const type = mapBrowserEvent.type; diff --git a/test/spec/ol/map.test.js b/test/spec/ol/map.test.js index 2c2373abcc..bd73e397aa 100644 --- a/test/spec/ol/map.test.js +++ b/test/spec/ol/map.test.js @@ -18,6 +18,7 @@ import VectorSource from '../../../src/ol/source/Vector.js'; import View from '../../../src/ol/View.js'; import XYZ from '../../../src/ol/source/XYZ.js'; import {LineString, Point, Polygon} from '../../../src/ol/geom.js'; +import {TRUE} from '../../../src/ol/functions.js'; import { clearUserProjection, fromLonLat, @@ -26,7 +27,7 @@ import { useGeographic, } from '../../../src/ol/proj.js'; import {defaults as defaultInteractions} from '../../../src/ol/interaction.js'; -import {focus} from '../../../src/ol/events/condition.js'; +import {focusWithTabindex} from '../../../src/ol/events/condition.js'; describe('ol.Map', function () { describe('constructor', function () { @@ -726,13 +727,13 @@ 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); + expect(interactions.item(0).condition_).to.be(TRUE); }); 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); + expect(interactions.item(0).condition_).to.be(focusWithTabindex); }); }); @@ -742,13 +743,13 @@ describe('ol.Map', function () { 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); + expect(interactions.item(0).condition_).to.not.be(focusWithTabindex); }); 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); + expect(interactions.item(0).condition_).to.be(focusWithTabindex); }); });