Popup.js (Leaflet-1.8.0) | : | Popup.js (Leaflet-1.9.0) | ||
---|---|---|---|---|
skipping to change at line 25 | skipping to change at line 25 | |||
* (recommended for usability), or use [Map.addLayer](#map-addlayer) to open as many as you want. | * (recommended for usability), or use [Map.addLayer](#map-addlayer) to open as many as you want. | |||
* | * | |||
* @example | * @example | |||
* | * | |||
* If you want to just bind a popup to marker click and then open it, it's reall y easy: | * If you want to just bind a popup to marker click and then open it, it's reall y easy: | |||
* | * | |||
* ```js | * ```js | |||
* marker.bindPopup(popupContent).openPopup(); | * marker.bindPopup(popupContent).openPopup(); | |||
* ``` | * ``` | |||
* Path overlays like polylines also have a `bindPopup` method. | * Path overlays like polylines also have a `bindPopup` method. | |||
* Here's a more complicated way to open a popup on a map: | * | |||
* A popup can be also standalone: | ||||
* | * | |||
* ```js | * ```js | |||
* var popup = L.popup() | * var popup = L.popup() | |||
* .setLatLng(latlng) | * .setLatLng(latlng) | |||
* .setContent('<p>Hello world!<br />This is a nice popup.</p>') | * .setContent('<p>Hello world!<br />This is a nice popup.</p>') | |||
* .openOn(map); | * .openOn(map); | |||
* ``` | * ``` | |||
* or | ||||
* ```js | ||||
* var popup = L.popup(latlng, {content: '<p>Hello world!<br />This is a nice po | ||||
pup.</p>') | ||||
* .openOn(map); | ||||
* ``` | ||||
*/ | */ | |||
// @namespace Popup | // @namespace Popup | |||
export var Popup = DivOverlay.extend({ | export var Popup = DivOverlay.extend({ | |||
// @section | // @section | |||
// @aka Popup options | // @aka Popup options | |||
options: { | options: { | |||
// @option pane: String = 'popupPane' | // @option pane: String = 'popupPane' | |||
// `Map pane` where the popup will be added. | // `Map pane` where the popup will be added. | |||
skipping to change at line 60 | skipping to change at line 66 | |||
// Max width of the popup, in pixels. | // Max width of the popup, in pixels. | |||
maxWidth: 300, | maxWidth: 300, | |||
// @option minWidth: Number = 50 | // @option minWidth: Number = 50 | |||
// Min width of the popup, in pixels. | // Min width of the popup, in pixels. | |||
minWidth: 50, | minWidth: 50, | |||
// @option maxHeight: Number = null | // @option maxHeight: Number = null | |||
// If set, creates a scrollable container of the given height | // If set, creates a scrollable container of the given height | |||
// inside a popup if its content exceeds it. | // inside a popup if its content exceeds it. | |||
// The scrollable container can be styled using the | ||||
// `leaflet-popup-scrolled` CSS class selector. | ||||
maxHeight: null, | maxHeight: null, | |||
// @option autoPan: Boolean = true | // @option autoPan: Boolean = true | |||
// Set it to `false` if you don't want the map to do panning anim ation | // Set it to `false` if you don't want the map to do panning anim ation | |||
// to fit the opened popup. | // to fit the opened popup. | |||
autoPan: true, | autoPan: true, | |||
// @option autoPanPaddingTopLeft: Point = null | // @option autoPanPaddingTopLeft: Point = null | |||
// The margin between the popup and the top left corner of the ma p | // The margin between the popup and the top left corner of the ma p | |||
// view after autopanning was performed. | // view after autopanning was performed. | |||
skipping to change at line 205 | skipping to change at line 213 | |||
this._tipContainer = DomUtil.create('div', prefix + '-tip-contain er', container); | this._tipContainer = DomUtil.create('div', prefix + '-tip-contain er', container); | |||
this._tip = DomUtil.create('div', prefix + '-tip', this._tipConta iner); | this._tip = DomUtil.create('div', prefix + '-tip', this._tipConta iner); | |||
if (this.options.closeButton) { | if (this.options.closeButton) { | |||
var closeButton = this._closeButton = DomUtil.create('a', prefix + '-close-button', container); | var closeButton = this._closeButton = DomUtil.create('a', prefix + '-close-button', container); | |||
closeButton.setAttribute('role', 'button'); // overrides the implicit role=link of <a> elements #7399 | closeButton.setAttribute('role', 'button'); // overrides the implicit role=link of <a> elements #7399 | |||
closeButton.setAttribute('aria-label', 'Close popup'); | closeButton.setAttribute('aria-label', 'Close popup'); | |||
closeButton.href = '#close'; | closeButton.href = '#close'; | |||
closeButton.innerHTML = '<span aria-hidden="true">×< /span>'; | closeButton.innerHTML = '<span aria-hidden="true">×< /span>'; | |||
DomEvent.on(closeButton, 'click', this.close, this); | DomEvent.on(closeButton, 'click', function (ev) { | |||
DomEvent.preventDefault(ev); | ||||
this.close(); | ||||
}, this); | ||||
} | } | |||
}, | }, | |||
_updateLayout: function () { | _updateLayout: function () { | |||
var container = this._contentNode, | var container = this._contentNode, | |||
style = container.style; | style = container.style; | |||
style.width = ''; | style.width = ''; | |||
style.whiteSpace = 'nowrap'; | style.whiteSpace = 'nowrap'; | |||
skipping to change at line 299 | skipping to change at line 310 | |||
_getAnchor: function () { | _getAnchor: function () { | |||
// Where should we anchor the popup on the source layer? | // Where should we anchor the popup on the source layer? | |||
return toPoint(this._source && this._source._getPopupAnchor ? thi s._source._getPopupAnchor() : [0, 0]); | return toPoint(this._source && this._source._getPopupAnchor ? thi s._source._getPopupAnchor() : [0, 0]); | |||
} | } | |||
}); | }); | |||
// @namespace Popup | // @namespace Popup | |||
// @factory L.popup(options?: Popup options, source?: Layer) | // @factory L.popup(options?: Popup options, source?: Layer) | |||
// Instantiates a `Popup` object given an optional `options` object that describ es its appearance and location and an optional `source` object that is used to t ag the popup with a reference to the Layer to which it refers. | // Instantiates a `Popup` object given an optional `options` object that describ es its appearance and location and an optional `source` object that is used to t ag the popup with a reference to the Layer to which it refers. | |||
// @alternative | ||||
// @factory L.popup(latlng: LatLng, options?: Popup options) | ||||
// Instantiates a `Popup` object given `latlng` where the popup will open and an | ||||
optional `options` object that describes its appearance and location. | ||||
export var popup = function (options, source) { | export var popup = function (options, source) { | |||
return new Popup(options, source); | return new Popup(options, source); | |||
}; | }; | |||
/* @namespace Map | /* @namespace Map | |||
* @section Interaction Options | * @section Interaction Options | |||
* @option closePopupOnClick: Boolean = true | * @option closePopupOnClick: Boolean = true | |||
* Set it to `false` if you don't want popups to close when user clicks the map. | * Set it to `false` if you don't want popups to close when user clicks the map. | |||
*/ | */ | |||
Map.mergeOptions({ | Map.mergeOptions({ | |||
End of changes. 5 change blocks. | ||||
2 lines changed or deleted | 18 lines changed or added |