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

Merge pull request #13911 from MoonE/remove-mouse-position-undefined-html

Browse Source 
Remove MousePosition's deprecated undefinedHTML option
This commit is contained in:
MoonE
2022-07-31 10:09:31 +02:00
committed by GitHub
parent 0992787d7a 417753422e
commit b534368394
4 changed files with 25 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
changelog/upgrade-notes.md
+4
View File
@@ -18,6 +18,10 @@ The default intervals now align with integer minutes and seconds better suited t
Inserting with `setAt` or `insertAt` beyond the current length used to create a sparse Collection with `undefined` inserted for any missing indexes. This will now throw an error instead. Inserting with `setAt` or `insertAt` beyond the current length used to create a sparse Collection with `undefined` inserted for any missing indexes. This will now throw an error instead.
#### ol/control/MousePosition
The control will now by default keep displaying the last mouse position when the mouse leaves the viewport. With `placeholder: ' '` you can keep the old behaviour. The `placeholder` option no longer accepts `false` as a valid value, instead simply omit the option. The `undefinedHTML` option has been removed. You should use `placeholder` instead.
### 6.15.0 ### 6.15.0
#### Deprecated `tilePixelRatio` option for data tile sources. #### Deprecated `tilePixelRatio` option for data tile sources.
src/ol/control/MousePosition.js
+8 -35
View File
@@ -41,13 +41,11 @@ const COORDINATE_FORMAT = 'coordinateFormat';
* callback. * callback.
* @property {HTMLElement|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. * control to be rendered outside of the map's viewport.
* @property {string|boolean} [placeholder] Markup to show when the mouse position is not * @property {string} [placeholder] Markup to show when the mouse position is not
* available (e.g. when the pointer leaves the map viewport). By default, a non-breaking space * available (e.g. when the pointer leaves the map viewport). By default, a non-breaking space is rendered
* is rendered when the mouse leaves the viewport. To render something else, provide a string * initially and the last position is retained when the mouse leaves the viewport.
* to be used as the text content (e.g. 'no position' or '' for an empty string). Set the placeholder * When a string is provided (e.g. `'no position'` or `''` for an empty string) it is used as a
* to `false` to retain the last position when the mouse leaves the viewport. In a future release, this * placeholder.
* will be the default behavior.
* @property {string} [undefinedHTML=' '] This option is deprecated. Use the `placeholder` option instead.
*/ */
/** /**
@@ -104,41 +102,16 @@ class MousePosition extends Control {
} }
/** /**
* Change this to `false` when removing the deprecated `undefinedHTML` option. * @private
* @type {boolean} * @type {boolean}
*/ */
let renderOnMouseOut = true; this.renderOnMouseOut_ = options.placeholder !== undefined;
/**
* @type {string}
*/
let placeholder = ' ';
if ('undefinedHTML' in options) {
// deprecated behavior
if (options.undefinedHTML !== undefined) {
placeholder = options.undefinedHTML;
}
renderOnMouseOut = !!placeholder;
} else if ('placeholder' in options) {
if (options.placeholder === false) {
renderOnMouseOut = false;
} else {
placeholder = String(options.placeholder);
}
}
/** /**
* @private * @private
* @type {string} * @type {string}
*/ */
this.placeholder_ = placeholder; this.placeholder_ = this.renderOnMouseOut_ ? options.placeholder : ' ';
/**
* @private
* @type {boolean}
*/
this.renderOnMouseOut_ = renderOnMouseOut;
/** /**
* @private * @private
test/browser/spec/ol/control/mouseposition.test.js
+6 -83
View File
@@ -69,10 +69,7 @@ describe('ol/control/MousePosition', function () {
ctrl.setMap(map); ctrl.setMap(map);
map.renderSync(); map.renderSync();
const element = document.querySelector( const element = document.querySelector('.ol-mouse-position');
'.ol-mouse-position',
map.getTarget()
);
simulateEvent(EventType.POINTEROUT, width + 1, height + 1); simulateEvent(EventType.POINTEROUT, width + 1, height + 1);
expect(element.innerHTML).to.be('some text'); expect(element.innerHTML).to.be('some text');
@@ -84,15 +81,12 @@ describe('ol/control/MousePosition', function () {
expect(element.innerHTML).to.be('some text'); expect(element.innerHTML).to.be('some text');
}); });
it('renders the last posisition if placeholder is false and mouse moves outside the viewport', function () { it('renders the last posisition if placeholder is not set and mouse moves outside the viewport', function () {
const ctrl = new MousePosition({placeholder: false}); const ctrl = new MousePosition();
ctrl.setMap(map); ctrl.setMap(map);
map.renderSync(); map.renderSync();
const element = document.querySelector( const element = document.querySelector('.ol-mouse-position');
'.ol-mouse-position',
map.getTarget()
);
simulateEvent(EventType.POINTEROUT, width + 1, height + 1); simulateEvent(EventType.POINTEROUT, width + 1, height + 1);
expect(element.innerHTML).to.be(' '); expect(element.innerHTML).to.be(' ');
@@ -105,17 +99,14 @@ describe('ol/control/MousePosition', function () {
expect(element.innerHTML).to.be('20,-30'); expect(element.innerHTML).to.be('20,-30');
}); });
it('renders an empty space if placehodler is set to the same and mouse moves outside the viewport', function () { it('renders an empty space if placeholder is set to the same and mouse moves outside the viewport', function () {
const ctrl = new MousePosition({ const ctrl = new MousePosition({
placeholder: '', placeholder: '',
}); });
ctrl.setMap(map); ctrl.setMap(map);
map.renderSync(); map.renderSync();
const element = document.querySelector( const element = document.querySelector('.ol-mouse-position');
'.ol-mouse-position',
map.getTarget()
);
simulateEvent(EventType.POINTEROUT, width + 1, height + 1); simulateEvent(EventType.POINTEROUT, width + 1, height + 1);
expect(element.innerHTML).to.be(''); expect(element.innerHTML).to.be('');
@@ -128,73 +119,5 @@ describe('ol/control/MousePosition', function () {
expect(element.innerHTML).to.be(''); expect(element.innerHTML).to.be('');
}); });
}); });
describe('undefinedHTML (deprecated)', function () {
it('renders undefinedHTML when mouse moves out', function () {
const ctrl = new MousePosition({
undefinedHTML: 'some text',
});
ctrl.setMap(map);
map.renderSync();
const element = document.querySelector(
'.ol-mouse-position',
map.getTarget()
);
simulateEvent(EventType.POINTEROUT, width + 1, height + 1);
expect(element.innerHTML).to.be('some text');
simulateEvent(EventType.POINTERMOVE, 20, 30);
expect(element.innerHTML).to.be('20,-30');
simulateEvent(EventType.POINTEROUT, width + 1, height + 1);
expect(element.innerHTML).to.be('some text');
});
it('clears the mouse position by default when the mouse moves outside the viewport', function () {
const ctrl = new MousePosition();
ctrl.setMap(map);
map.renderSync();
const element = document.querySelector(
'.ol-mouse-position',
map.getTarget()
);
simulateEvent(EventType.POINTEROUT, width + 1, height + 1);
expect(element.innerHTML).to.be(' ');
target.dispatchEvent(new PointerEvent('pointermove'));
simulateEvent(EventType.POINTERMOVE, 20, 30);
expect(element.innerHTML).to.be('20,-30');
simulateEvent(EventType.POINTEROUT, width + 1, height + 1);
expect(element.innerHTML).to.be(' ');
});
it('retains the mouse position when undefinedHTML is falsey and mouse moves outside the viewport', function () {
const ctrl = new MousePosition({
undefinedHTML: '',
});
ctrl.setMap(map);
map.renderSync();
const element = document.querySelector(
'.ol-mouse-position',
map.getTarget()
);
simulateEvent(EventType.POINTEROUT, width + 1, height + 1);
expect(element.innerHTML).to.be('');
target.dispatchEvent(new PointerEvent('pointermove'));
simulateEvent(EventType.POINTERMOVE, 20, 30);
expect(element.innerHTML).to.be('20,-30');
simulateEvent(EventType.POINTEROUT, width + 1, height + 1);
expect(element.innerHTML).to.be('20,-30');
});
});
}); });
}); });
test/browser/spec/ol/control/scaleline.test.js
+7 -16
View File
@@ -37,10 +37,7 @@ describe('ol.control.ScaleLine', function () {
it('defaults to "ol-scale-line"', function () { it('defaults to "ol-scale-line"', function () {
const ctrl = new ScaleLine(); const ctrl = new ScaleLine();
ctrl.setMap(map); ctrl.setMap(map);
const element = document.querySelector( const element = document.querySelector('.ol-scale-line');
'.ol-scale-line',
map.getTarget()
);
expect(element).to.not.be(null); expect(element).to.not.be(null);
expect(element).to.be.a(HTMLDivElement); expect(element).to.be.a(HTMLDivElement);
}); });
@@ -51,16 +48,10 @@ describe('ol.control.ScaleLine', function () {
ctrl.setMap(map); ctrl.setMap(map);
// check that the default was not chosen // check that the default was not chosen
const element1 = document.querySelector( const element1 = document.querySelector('.ol-scale-line');
'.ol-scale-line',
map.getTarget()
);
expect(element1).to.be(null); expect(element1).to.be(null);
// check if the configured classname was chosen // check if the configured classname was chosen
const element2 = document.querySelector( const element2 = document.querySelector('.humpty-dumpty');
'.humpty-dumpty',
map.getTarget()
);
expect(element2).to.not.be(null); expect(element2).to.not.be(null);
expect(element2).to.be.a(HTMLDivElement); expect(element2).to.be.a(HTMLDivElement);
}); });
@@ -640,7 +631,7 @@ describe('ol.control.ScaleLine', function () {
}) })
); );
map.renderSync(); map.renderSync();
const element = document.querySelector('.ol-scale-text', map.getTarget()); const element = document.querySelector('.ol-scale-text');
expect(element).to.not.be(null); expect(element).to.not.be(null);
expect(element).to.be.a(HTMLDivElement); expect(element).to.be.a(HTMLDivElement);
const text = element.innerText; const text = element.innerText;
@@ -661,7 +652,7 @@ describe('ol.control.ScaleLine', function () {
}) })
); );
map.renderSync(); map.renderSync();
const element = document.querySelector('.ol-scale-text', map.getTarget()); const element = document.querySelector('.ol-scale-text');
expect(element).to.not.be(null); expect(element).to.not.be(null);
expect(element).to.be.a(HTMLDivElement); expect(element).to.be.a(HTMLDivElement);
const text = element.innerText; const text = element.innerText;
@@ -683,7 +674,7 @@ describe('ol.control.ScaleLine', function () {
}) })
); );
map.renderSync(); map.renderSync();
const element = document.querySelector('.ol-scale-text', map.getTarget()); const element = document.querySelector('.ol-scale-text');
expect(element).to.not.be(null); expect(element).to.not.be(null);
expect(element).to.be.a(HTMLDivElement); expect(element).to.be.a(HTMLDivElement);
const text = element.innerText; const text = element.innerText;
@@ -705,7 +696,7 @@ describe('ol.control.ScaleLine', function () {
}) })
); );
map.renderSync(); map.renderSync();
const element = document.querySelector('.ol-scale-text', map.getTarget()); const element = document.querySelector('.ol-scale-text');
expect(element).to.not.be(null); expect(element).to.not.be(null);
expect(element).to.be.a(HTMLDivElement); expect(element).to.be.a(HTMLDivElement);
const text = element.innerText; const text = element.innerText;