Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 3 commits into from Jan 19, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6d72f92
Refactor openPopup/Tooltip to use common functions [Map/Layer]\_initO…
May 6, 2019
00d9ac7
DivOverlay: common functions openOn/close
May 6, 2019
d9238e2
DivOverlay: new public method `toggle`
Mar 31, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
72 changes: 72 additions & 0 deletions src/layer/DivOverlay.js
View file
Open in desktop
@@ -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
Open in desktop
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
Open in desktop
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