ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Frederic Junod
2018-07-19 09:01:49 +02:00
parent c1ffb0a2a9
commit 2e60961700
9 changed files with 37 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/ol/control/Attribution.js
View File

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

10
src/ol/control/Control.js
View File

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

18
src/ol/control/FullScreen.js
View File

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

12
src/ol/control/OverviewMap.js
View File

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

6
src/ol/control/Rotate.js
View File

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

2
src/ol/control/ScaleLine.js
View File

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

6
src/ol/control/Zoom.js
View File

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

6
src/ol/control/ZoomSlider.js
View File

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

4
src/ol/control/ZoomToExtent.js
View File

@@ -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