Use 'HTMLElement' type instead of 'Element' in controls

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;

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) {

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) {

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/layer/Layer>|module:ol/Collection.<module:ol/layer/Layer>} [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');

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;

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.
  */

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.
  */
 

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';

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