/** * @module ol/interaction/KeyboardZoom */ import {inherits} from '../index.js'; import EventType from '../events/EventType.js'; import {targetNotEditable} from '../events/condition.js'; import Interaction, {zoomByDelta} from '../interaction/Interaction.js'; /** * @typedef {Object} Options * @property {number} [duration=100] Animation duration in milliseconds. * @property {module:ol/events/condition~Condition} [condition] A function that * takes an {@link module:ol/MapBrowserEvent~MapBrowserEvent} and returns a * boolean to indicate whether that event should be handled. Default is * {@link module:ol/events/condition~targetNotEditable}. * @property {number} [delta=1] The zoom level delta on each key press. */ /** * @classdesc * Allows the user to zoom the map using keyboard + and -. * Note that, although this interaction is by default included in maps, * the keys can only be used when browser focus is on the element to which * the keyboard events are attached. By default, this is the map div, * though you can change this with the `keyboardEventTarget` in * {@link module:ol/Map~Map}. `document` never loses focus but, for any other * element, focus will have to be on, and returned to, this element if the keys * are to function. * See also {@link moudle:ol/interaction/KeyboardPan~KeyboardPan}. * * @constructor * @param {module:ol/interaction/KeyboardZoom~Options=} opt_options Options. * @extends {module:ol/interaction/Interaction~Interaction} * @api */ const KeyboardZoom = function(opt_options) { Interaction.call(this, { handleEvent: handleEvent }); const options = opt_options ? opt_options : {}; /** * @private * @type {module:ol/events/condition~Condition} */ this.condition_ = options.condition ? options.condition : targetNotEditable; /** * @private * @type {number} */ this.delta_ = options.delta ? options.delta : 1; /** * @private * @type {number} */ this.duration_ = options.duration !== undefined ? options.duration : 100; }; inherits(KeyboardZoom, Interaction); /** * Handles the {@link module:ol/MapBrowserEvent~MapBrowserEvent map browser event} if it was a * `KeyEvent`, and decides whether to zoom in or out (depending on whether the * key pressed was '+' or '-'). * @param {module:ol/MapBrowserEvent~MapBrowserEvent} mapBrowserEvent Map browser event. * @return {boolean} `false` to stop event propagation. * @this {module:ol/interaction/KeyboardZoom~KeyboardZoom} */ function handleEvent(mapBrowserEvent) { let stopEvent = false; if (mapBrowserEvent.type == EventType.KEYDOWN || mapBrowserEvent.type == EventType.KEYPRESS) { const keyEvent = mapBrowserEvent.originalEvent; const charCode = keyEvent.charCode; if (this.condition_(mapBrowserEvent) && (charCode == '+'.charCodeAt(0) || charCode == '-'.charCodeAt(0))) { const map = mapBrowserEvent.map; const delta = (charCode == '+'.charCodeAt(0)) ? this.delta_ : -this.delta_; const view = map.getView(); zoomByDelta(view, delta, undefined, this.duration_); mapBrowserEvent.preventDefault(); stopEvent = true; } } return !stopEvent; } export default KeyboardZoom;