archive-gh-me/Leaflet
1
0
Fork 0
mirror of https://github.com/Leaflet/Leaflet.git synced 2026-02-01 17:27:23 +00:00
Code Issues Projects Releases Wiki Activity

Refactor Popup/Tooltip to use common code from DivOverlay (#6639)

Browse Source 
* Refactor openPopup/Tooltip to use common functions [Map/Layer]\_initOverlay

* DivOverlay: common functions openOn/close

Refactor [Map\Layer] open/close-Popup/Tooltip to use DivOverlay's openOn/close

* DivOverlay: new public method `toggle`

Refactor Layer\ togglePopup/Tooltip: use common method DivOverlay\toggle

Popup: do not clear map._popup on close as it's redundant
This commit is contained in:
johnd0e 2022-01-19 13:29:56 +03:00 committed by GitHub
parent f3f27b0ff6
commit fb0b2a169e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 103 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
src/layer/DivOverlay.js
View File

@ -1,3 +1,4 @@
import {Map} from '../map/Map';
import {Layer} from './Layer';
import {FeatureGroup} from './FeatureGroup';
import * as Util from '../core/Util';
@ -37,6 +38,49 @@ export var DivOverlay = Layer.extend({
this._source = source;
},
// @method openOn(map: Map): this
// Adds the overlay to the map.
// Alternative to `map.openPopup(popup)`/`.openTooltip(tooltip)`.
openOn: function (map) {
map = arguments.length ? map : this._source._map; // experimental, not the part of public api
if (!map.hasLayer(this)) {
map.addLayer(this);
}
return this;
},
// @method close(): this
// Closes the overlay.
// Alternative to `map.closePopup(popup)`/`.closeTooltip(tooltip)`
// and `layer.closePopup()`/`.closeTooltip()`.
close: function () {
if (this._map) {
this._map.removeLayer(this);
}
return this;
},
// @method toggle(layer?: Layer): this
// Opens or closes the overlay bound to layer depending on its current state.
// Argument may be omitted only for overlay bound to layer.
// Alternative to `layer.togglePopup()`/`.toggleTooltip()`.
toggle: function (layer) {
if (this._map) {
this.close();
} else {
if (arguments.length) {
this._source = layer;
} else {
layer = this._source;
}
this._prepareOpen();
// open the overlay on the map
this.openOn(layer._map);
}
return this;
},
onAdd: function (map) {
this._zoomAnimated = map._zoomAnimated;
@ -248,3 +292,31 @@ export var DivOverlay = Layer.extend({
}
});
Map.include({
_initOverlay: function (OverlayClass, content, latlng, options) {
var overlay = content;
if (!(overlay instanceof OverlayClass)) {
overlay = new OverlayClass(options).setContent(content);
}
if (latlng) {
overlay.setLatLng(latlng);
}
return overlay;
}
});
Layer.include({
_initOverlay: function (OverlayClass, old, content, options) {
var overlay = content;
if (overlay instanceof OverlayClass) {
Util.setOptions(overlay, options);
overlay._source = this;
} else {
overlay = (old && !options) ? old : new OverlayClass(options, this);
overlay.setContent(content);
}
return overlay;
}
});

75
src/layer/Popup.js
View File

@ -4,7 +4,6 @@ import * as DomUtil from '../dom/DomUtil';
import {Point, toPoint} from '../geometry/Point';
import {Map} from '../map/Map';
import {Layer} from './Layer';
import * as Util from '../core/Util';
import {Path} from './vector/Path';
/*
@ -110,10 +109,17 @@ export var Popup = DivOverlay.extend({
// @namespace Popup
// @method openOn(map: Map): this
// Adds the popup to the map and closes the previous one. The same as `map.openPopup(popup)`.
// Alternative to `map.openPopup(popup)`.
// Adds the popup to the map and closes the previous one.
openOn: function (map) {
map.openPopup(this);
return this;
map = arguments.length ? map : this._source._map; // experimental, not the part of public api
if (!map.hasLayer(this) && map._popup && map._popup.options.autoClose) {
map.removeLayer(map._popup);
}
map._popup = this;
return DivOverlay.prototype.openOn.call(this, map);
},
onAdd: function (map) {
@ -164,7 +170,7 @@ export var Popup = DivOverlay.extend({
var events = DivOverlay.prototype.getEvents.call(this);
if (this.options.closeOnClick !== undefined ? this.options.closeOnClick : this._map.options.closePopupOnClick) {
events.preclick = this._close;
events.preclick = this.close;
}
if (this.options.keepInView) {
@ -174,12 +180,6 @@ export var Popup = DivOverlay.extend({
return events;
},
_close: function () {
if (this._map) {
this._map.closePopup(this);
}
},
_initLayout: function () {
var prefix = 'leaflet-popup',
container = this._container = DomUtil.create('div',
@ -203,7 +203,7 @@ export var Popup = DivOverlay.extend({
closeButton.href = '#close';
closeButton.innerHTML = '<span aria-hidden="true">&#215;</span>';
DomEvent.on(closeButton, 'click', this._close, this);
DomEvent.on(closeButton, 'click', this.close, this);
}
},
@ -321,35 +321,18 @@ Map.include({
// @method openPopup(content: String|HTMLElement, latlng: LatLng, options?: Popup options): this
// Creates a popup with the specified content and options and opens it in the given point on a map.
openPopup: function (popup, latlng, options) {
if (!(popup instanceof Popup)) {
popup = new Popup(options).setContent(popup);
}
this._initOverlay(Popup, popup, latlng, options)
.openOn(this);
if (latlng) {
popup.setLatLng(latlng);
}
if (this.hasLayer(popup)) {
return this;
}
if (this._popup && this._popup.options.autoClose) {
this.closePopup();
}
this._popup = popup;
return this.addLayer(popup);
return this;
},
// @method closePopup(popup?: Popup): this
// Closes the popup previously opened with [openPopup](#map-openpopup) (or the given one).
closePopup: function (popup) {
if (!popup || popup === this._popup) {
popup = this._popup;
this._popup = null;
}
popup = arguments.length ? popup : this._popup;
if (popup) {
this.removeLayer(popup);
popup.close();
}
return this;
}
@ -378,18 +361,7 @@ Layer.include({
// necessary event listeners. If a `Function` is passed it will receive
// the layer as the first argument and should return a `String` or `HTMLElement`.
bindPopup: function (content, options) {
if (content instanceof Popup) {
Util.setOptions(content, options);
this._popup = content;
content._source = this;
} else {
if (!this._popup || options) {
this._popup = new Popup(options, this);
}
this._popup.setContent(content);
}
this._popup = this._initOverlay(Popup, this._popup, content, options);
if (!this._popupHandlersAdded) {
this.on({
click: this._openPopup,
@ -424,9 +396,8 @@ Layer.include({
openPopup: function (latlng) {
if (this._popup && this._popup._prepareOpen(latlng)) {
// open the popup on the map
this._map.openPopup(this._popup, latlng);
this._popup.openOn(this._map);
}
return this;
},
@ -434,7 +405,7 @@ Layer.include({
// Closes the popup bound to this layer if it is open.
closePopup: function () {
if (this._popup) {
this._popup._close();
this._popup.close();
}
return this;
},
@ -443,11 +414,7 @@ Layer.include({
// Opens or closes the popup bound to this layer depending on its current state.
togglePopup: function () {
if (this._popup) {
if (this._popup._map) {
this.closePopup();
} else {
this.openPopup();
}
this._popup.toggle(this);
}
return this;
},

52
src/layer/Tooltip.js
View File

@ -2,7 +2,6 @@ import {DivOverlay} from './DivOverlay';
import {toPoint} from '../geometry/Point';
import {Map} from '../map/Map';
import {Layer} from './Layer';
import * as Util from '../core/Util';
import * as DomUtil from '../dom/DomUtil';
/*
@ -119,18 +118,12 @@ export var Tooltip = DivOverlay.extend({
var events = DivOverlay.prototype.getEvents.call(this);
if (!this.options.permanent) {
events.preclick = this._close;
events.preclick = this.close;
}
return events;
},
_close: function () {
if (this._map) {
this._map.closeTooltip(this);
}
},
_initLayout: function () {
var prefix = 'leaflet-tooltip',
className = prefix + ' ' + (this.options.className || '') + ' leaflet-zoom-' + (this._zoomAnimated ? 'animated' : 'hide');
@ -231,25 +224,17 @@ Map.include({
// @method openTooltip(content: String|HTMLElement, latlng: LatLng, options?: Tooltip options): this
// Creates a tooltip with the specified content and options and open it.
openTooltip: function (tooltip, latlng, options) {
if (!(tooltip instanceof Tooltip)) {
tooltip = new Tooltip(options).setContent(tooltip);
}
this._initOverlay(Tooltip, tooltip, latlng, options)
.openOn(this);
if (latlng) {
tooltip.setLatLng(latlng);
}
if (this.hasLayer(tooltip)) {
return this;
}
return this.addLayer(tooltip);
return this;
},
// @method closeTooltip(tooltip: Tooltip): this
// Closes the tooltip given as parameter.
closeTooltip: function (tooltip) {
return this.removeLayer(tooltip);
tooltip.close();
return this;
}
});
@ -280,18 +265,7 @@ Layer.include({
this.unbindTooltip();
}
if (content instanceof Tooltip) {
Util.setOptions(content, options);
this._tooltip = content;
content._source = this;
} else {
if (!this._tooltip || options) {
this._tooltip = new Tooltip(options, this);
}
this._tooltip.setContent(content);
}
this._tooltip = this._initOverlay(Tooltip, this._tooltip, content, options);
this._initTooltipInteractions();
if (this._tooltip.options.permanent && this._map && this._map.hasLayer(this)) {
@ -338,9 +312,8 @@ Layer.include({
openTooltip: function (latlng) {
if (this._tooltip && this._tooltip._prepareOpen(latlng)) {
// open the tooltip on the map
this._map.openTooltip(this._tooltip, latlng);
this._tooltip.openOn(this._map);
}
return this;
},
@ -348,20 +321,15 @@ Layer.include({
// Closes the tooltip bound to this layer if it is open.
closeTooltip: function () {
if (this._tooltip) {
this._tooltip._close();
return this._tooltip.close();
}
return this;
},
// @method toggleTooltip(): this
// Opens or closes the tooltip bound to this layer depending on its current state.
toggleTooltip: function () {
if (this._tooltip) {
if (this._tooltip._map) {
this.closeTooltip();
} else {
this.openTooltip();
}
this._tooltip.toggle(this);
}
return this;
},