From 2e60961700c3e14149882fec77409bef08d440cb Mon Sep 17 00:00:00 2001 From: Frederic Junod Date: Thu, 19 Jul 2018 09:01:49 +0200 Subject: [PATCH] Use 'HTMLElement' type instead of 'Element' in controls --- src/ol/control/Attribution.js | 10 +++++----- src/ol/control/Control.js | 10 +++++----- src/ol/control/FullScreen.js | 18 +++++++++--------- src/ol/control/OverviewMap.js | 12 ++++++------ src/ol/control/Rotate.js | 6 +++--- src/ol/control/ScaleLine.js | 2 +- src/ol/control/Zoom.js | 6 +++--- src/ol/control/ZoomSlider.js | 6 +++--- src/ol/control/ZoomToExtent.js | 4 ++-- 9 files changed, 37 insertions(+), 37 deletions(-) diff --git a/src/ol/control/Attribution.js b/src/ol/control/Attribution.js index 57d4d8922e..9b610883b1 100644 --- a/src/ol/control/Attribution.js +++ b/src/ol/control/Attribution.js @@ -13,7 +13,7 @@ import {visibleAtResolution} from '../layer/Layer.js'; /** * @typedef {Object} Options * @property {string} [className='ol-attribution'] CSS class name. - * @property {Element|string} [target] Specify a target if you + * @property {HTMLElement|string} [target] Specify a target if you * want the control to be rendered outside of the map's * viewport. * @property {boolean} [collapsible=true] Specify if attributions can @@ -25,7 +25,7 @@ import {visibleAtResolution} from '../layer/Layer.js'; * @property {string} [label='i'] Text label to use for the * collapsed attributions button. * Instead of text, also an element (e.g. a `span` element) can be used. - * @property {string|Element} [collapseLabel='»'] Text label to use + * @property {string|HTMLElement} [collapseLabel='»'] Text label to use * for the expanded attributions button. * Instead of text, also an element (e.g. a `span` element) can be used. * @property {function(module:ol/MapEvent)} [render] Function called when @@ -60,7 +60,7 @@ class Attribution extends Control { /** * @private - * @type {Element} + * @type {HTMLElement} */ this.ulElement_ = document.createElement('UL'); @@ -90,7 +90,7 @@ class Attribution extends Control { if (typeof collapseLabel === 'string') { /** * @private - * @type {Element} + * @type {HTMLElement} */ this.collapseLabel_ = document.createElement('span'); this.collapseLabel_.textContent = collapseLabel; @@ -103,7 +103,7 @@ class Attribution extends Control { if (typeof label === 'string') { /** * @private - * @type {Element} + * @type {HTMLElement} */ this.label_ = document.createElement('span'); this.label_.textContent = label; diff --git a/src/ol/control/Control.js b/src/ol/control/Control.js index ebeea4f3e0..873779a2c4 100644 --- a/src/ol/control/Control.js +++ b/src/ol/control/Control.js @@ -10,13 +10,13 @@ import {listen, unlistenByKey} from '../events.js'; /** * @typedef {Object} Options - * @property {Element} [element] The element is the control's + * @property {HTMLElement} [element] The element is the control's * container element. This only needs to be specified if you're developing * a custom control. * @property {function(module:ol/MapEvent)} [render] Function called when * the control should be re-rendered. This is called in a `requestAnimationFrame` * callback. - * @property {Element|string} [target] Specify a target if you want + * @property {HTMLElement|string} [target] Specify a target if you want * the control to be rendered outside of the map's viewport. */ @@ -56,13 +56,13 @@ class Control extends BaseObject { /** * @protected - * @type {Element} + * @type {HTMLElement} */ this.element = options.element ? options.element : null; /** * @private - * @type {Element} + * @type {HTMLElement} */ this.target_ = null; @@ -140,7 +140,7 @@ class Control extends BaseObject { * after `setMap` is called on the control). If no `target` is set in the * options passed to the control constructor and if `setTarget` is not called * then the control is added to the map's overlay container. - * @param {Element|string} target Target. + * @param {HTMLElement|string} target Target. * @api */ setTarget(target) { diff --git a/src/ol/control/FullScreen.js b/src/ol/control/FullScreen.js index 15ce93e7bc..9de77ff1c6 100644 --- a/src/ol/control/FullScreen.js +++ b/src/ol/control/FullScreen.js @@ -34,16 +34,16 @@ const getChangeType = (function() { /** * @typedef {Object} Options * @property {string} [className='ol-full-screen'] CSS class name. - * @property {string|Element} [label='\u2922'] Text label to use for the button. + * @property {string|HTMLElement} [label='\u2922'] Text label to use for the button. * Instead of text, also an element (e.g. a `span` element) can be used. - * @property {string|Element} [labelActive='\u00d7'] Text label to use for the + * @property {string|HTMLElement} [labelActive='\u00d7'] Text label to use for the * button when full-screen is active. * Instead of text, also an element (e.g. a `span` element) can be used. * @property {string} [tipLabel='Toggle full-screen'] Text label to use for the button tip. * @property {boolean} [keys=false] Full keyboard access. - * @property {Element|string} [target] Specify a target if you want the + * @property {HTMLElement|string} [target] Specify a target if you want the * control to be rendered outside of the map's viewport. - * @property {Element|string} [source] The element to be displayed + * @property {HTMLElement|string} [source] The element to be displayed * fullscreen. When not provided, the element containing the map viewport will * be displayed fullscreen. */ @@ -87,7 +87,7 @@ class FullScreen extends Control { /** * @private - * @type {Element} + * @type {HTMLElement} */ this.labelNode_ = typeof label === 'string' ? document.createTextNode(label) : label; @@ -96,7 +96,7 @@ class FullScreen extends Control { /** * @private - * @type {Element} + * @type {HTMLElement} */ this.labelActiveNode_ = typeof labelActive === 'string' ? document.createTextNode(labelActive) : labelActive; @@ -126,7 +126,7 @@ class FullScreen extends Control { /** * @private - * @type {Element|string|undefined} + * @type {HTMLElement|string|undefined} */ this.source_ = options.source; @@ -231,7 +231,7 @@ function isFullScreen() { /** * Request to fullscreen an element. - * @param {Element} element Element to request fullscreen + * @param {HTMLElement} element Element to request fullscreen */ function requestFullScreen(element) { if (element.requestFullscreen) { @@ -247,7 +247,7 @@ function requestFullScreen(element) { /** * Request to fullscreen an element with keyboard input. - * @param {Element} element Element to request fullscreen + * @param {HTMLElement} element Element to request fullscreen */ function requestFullScreenWithKeys(element) { if (element.mozRequestFullScreenWithKeys) { diff --git a/src/ol/control/OverviewMap.js b/src/ol/control/OverviewMap.js index 435fd4d4cc..8e9379cb4f 100644 --- a/src/ol/control/OverviewMap.js +++ b/src/ol/control/OverviewMap.js @@ -39,17 +39,17 @@ const MIN_RATIO = 0.1; * @typedef {Object} Options * @property {string} [className='ol-overviewmap'] CSS class name. * @property {boolean} [collapsed=true] Whether the control should start collapsed or not (expanded). - * @property {string|Element} [collapseLabel='«'] Text label to use for the + * @property {string|HTMLElement} [collapseLabel='«'] Text label to use for the * expanded overviewmap button. Instead of text, also an element (e.g. a `span` element) can be used. * @property {boolean} [collapsible=true] Whether the control can be collapsed or not. - * @property {string|Element} [label='»'] Text label to use for the collapsed + * @property {string|HTMLElement} [label='»'] Text label to use for the collapsed * overviewmap button. Instead of text, also an element (e.g. a `span` element) can be used. * @property {Array.|module:ol/Collection.} [layers] * Layers for the overview map. If not set, then all main map layers are used * instead. * @property {function(module:ol/MapEvent)} [render] Function called when the control * should be re-rendered. This is called in a `requestAnimationFrame` callback. - * @property {Element|string} [target] Specify a target if you want the control + * @property {HTMLElement|string} [target] Specify a target if you want the control * to be rendered outside of the map's viewport. * @property {string} [tipLabel='Overview map'] Text label to use for the button tip. * @property {module:ol/View} [view] Custom view for the overview map. If not provided, @@ -104,7 +104,7 @@ class OverviewMap extends Control { if (typeof collapseLabel === 'string') { /** * @private - * @type {Element} + * @type {HTMLElement} */ this.collapseLabel_ = document.createElement('span'); this.collapseLabel_.textContent = collapseLabel; @@ -118,7 +118,7 @@ class OverviewMap extends Control { if (typeof label === 'string') { /** * @private - * @type {Element} + * @type {HTMLElement} */ this.label_ = document.createElement('span'); this.label_.textContent = label; @@ -137,7 +137,7 @@ class OverviewMap extends Control { this.handleClick_, this); /** - * @type {Element} + * @type {HTMLElement} * @private */ this.ovmapDiv_ = document.createElement('DIV'); diff --git a/src/ol/control/Rotate.js b/src/ol/control/Rotate.js index 6b364daa66..cccff5dfa9 100644 --- a/src/ol/control/Rotate.js +++ b/src/ol/control/Rotate.js @@ -11,7 +11,7 @@ import EventType from '../events/EventType.js'; /** * @typedef {Object} Options * @property {string} [className='ol-rotate'] CSS class name. - * @property {string|Element} [label='⇧'] Text label to use for the rotate button. + * @property {string|HTMLElement} [label='⇧'] Text label to use for the rotate button. * Instead of text, also an element (e.g. a `span` element) can be used. * @property {string} [tipLabel='Reset rotation'] Text label to use for the rotate tip. * @property {number} [duration=250] Animation duration in milliseconds. @@ -20,7 +20,7 @@ import EventType from '../events/EventType.js'; * be re-rendered. This is called in a `requestAnimationFrame` callback. * @property {function()} [resetNorth] Function called when the control is clicked. * This will override the default `resetNorth`. - * @property {Element|string} [target] Specify a target if you want the control to be + * @property {HTMLElement|string} [target] Specify a target if you want the control to be * rendered outside of the map's viewport. */ @@ -53,7 +53,7 @@ class Rotate extends Control { const label = options.label !== undefined ? options.label : '\u21E7'; /** - * @type {Element} + * @type {HTMLElement} * @private */ this.label_ = null; diff --git a/src/ol/control/ScaleLine.js b/src/ol/control/ScaleLine.js index c854920cfd..ffb86aca12 100644 --- a/src/ol/control/ScaleLine.js +++ b/src/ol/control/ScaleLine.js @@ -42,7 +42,7 @@ const LEADING_DIGITS = [1, 2, 5]; * @property {number} [minWidth=64] Minimum width in pixels. * @property {function(module:ol/MapEvent)} [render] Function called when the control * should be re-rendered. This is called in a `requestAnimationFrame` callback. - * @property {Element|string} [target] Specify a target if you want the control + * @property {HTMLElement|string} [target] Specify a target if you want the control * to be rendered outside of the map's viewport. * @property {module:ol/control/ScaleLine~Units|string} [units='metric'] Units. */ diff --git a/src/ol/control/Zoom.js b/src/ol/control/Zoom.js index b6a0cc1fb1..011e1959fb 100644 --- a/src/ol/control/Zoom.js +++ b/src/ol/control/Zoom.js @@ -12,14 +12,14 @@ import {easeOut} from '../easing.js'; * @typedef {Object} Options * @property {number} [duration=250] Animation duration in milliseconds. * @property {string} [className='ol-zoom'] CSS class name. - * @property {string|Element} [zoomInLabel='+'] Text label to use for the zoom-in + * @property {string|HTMLElement} [zoomInLabel='+'] Text label to use for the zoom-in * button. Instead of text, also an element (e.g. a `span` element) can be used. - * @property {string|Element} [zoomOutLabel='-'] Text label to use for the zoom-out button. + * @property {string|HTMLElement} [zoomOutLabel='-'] Text label to use for the zoom-out button. * Instead of text, also an element (e.g. a `span` element) can be used. * @property {string} [zoomInTipLabel='Zoom in'] Text label to use for the button tip. * @property {string} [zoomOutTipLabel='Zoom out'] Text label to use for the button tip. * @property {number} [delta=1] The zoom delta applied on each click. - * @property {Element|string} [target] Specify a target if you want the control to be + * @property {HTMLElement|string} [target] Specify a target if you want the control to be * rendered outside of the map's viewport. */ diff --git a/src/ol/control/ZoomSlider.js b/src/ol/control/ZoomSlider.js index e2369689c2..3ad70d7724 100644 --- a/src/ol/control/ZoomSlider.js +++ b/src/ol/control/ZoomSlider.js @@ -180,7 +180,7 @@ class ZoomSlider extends Control { width: container.offsetWidth, height: container.offsetHeight }; - const thumb = container.firstElementChild; + const thumb = /** @type {HTMLElement} */ (container.firstElementChild); const computedStyle = getComputedStyle(thumb); const thumbWidth = thumb.offsetWidth + parseFloat(computedStyle['marginRight']) + @@ -242,7 +242,7 @@ class ZoomSlider extends Control { */ handleDraggerDrag_(event) { if (this.dragging_) { - const element = this.element.firstElementChild; + const element = /** @type {HTMLElement} */ (this.element.firstElementChild); const deltaX = event.clientX - this.previousX_ + parseInt(element.style.left, 10); const deltaY = event.clientY - this.previousY_ + parseInt(element.style.top, 10); const relativePosition = this.getRelativePosition_(deltaX, deltaY); @@ -284,7 +284,7 @@ class ZoomSlider extends Control { */ setThumbPosition_(res) { const position = this.getPositionForResolution_(res); - const thumb = this.element.firstElementChild; + const thumb = /** @type {HTMLElement} */ (this.element.firstElementChild); if (this.direction_ == Direction.HORIZONTAL) { thumb.style.left = this.widthLimit_ * position + 'px'; diff --git a/src/ol/control/ZoomToExtent.js b/src/ol/control/ZoomToExtent.js index 22a4e659dd..113f7682ee 100644 --- a/src/ol/control/ZoomToExtent.js +++ b/src/ol/control/ZoomToExtent.js @@ -10,9 +10,9 @@ import {CLASS_CONTROL, CLASS_UNSELECTABLE} from '../css.js'; /** * @typedef {Object} Options * @property {string} [className='ol-zoom-extent'] Class name. - * @property {Element|string} [target] Specify a target if you want the control + * @property {HTMLElement|string} [target] Specify a target if you want the control * to be rendered outside of the map's viewport. - * @property {string|Element} [label='E'] Text label to use for the button. + * @property {string|HTMLElement} [label='E'] Text label to use for the button. * Instead of text, also an element (e.g. a `span` element) can be used. * @property {string} [tipLabel='Fit to extent'] Text label to use for the button tip. * @property {module:ol/extent~Extent} [extent] The extent to zoom to. If undefined the validity