Skip to content

Commit

Permalink
Refactor Popup/Tooltip to use common code from DivOverlay (#6639)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
johnd0e committed Jan 19, 2022
1 parent f3f27b0 commit fb0b2a1
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 96 deletions.
72 changes: 72 additions & 0 deletions 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';
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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 changes: 21 additions & 54 deletions src/layer/Popup.js
View file
Expand Up @@ -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';

/*
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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) {
Expand All @@ -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',
Expand All @@ -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);
}
},

Expand Down Expand Up @@ -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);
}

if (latlng) {
popup.setLatLng(latlng);
}

if (this.hasLayer(popup)) {
return this;
}

if (this._popup && this._popup.options.autoClose) {
this.closePopup();
}
this._initOverlay(Popup, popup, latlng, options)
.openOn(this);

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;
}
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -424,17 +396,16 @@ 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;
},

// @method closePopup(): this
// Closes the popup bound to this layer if it is open.
closePopup: function () {
if (this._popup) {
this._popup._close();
this._popup.close();
}
return this;
},
Expand All @@ -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;
},
Expand Down
52 changes: 10 additions & 42 deletions src/layer/Tooltip.js
View file
Expand Up @@ -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';

/*
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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);
}

if (latlng) {
tooltip.setLatLng(latlng);
}

if (this.hasLayer(tooltip)) {
return this;
}
this._initOverlay(Tooltip, tooltip, latlng, options)
.openOn(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;
}

});
Expand Down Expand Up @@ -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)) {
Expand Down Expand Up @@ -338,30 +312,24 @@ 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;
},

// @method closeTooltip(): this
// 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;
},
Expand Down

0 comments on commit fb0b2a1

Please sign in to comment.