--- /dev/null
+\r
+L.Popup = L.Class.extend({\r
+ includes: L.Mixin.Events,\r
+ \r
+ options: {\r
+ maxWidth: 300,\r
+ autoPan: true,\r
+ closeButton: true,\r
+ \r
+ offset: new L.Point(0, 2),\r
+ autoPanPadding: new L.Point(5, 5)\r
+ },\r
+ \r
+ initialize: function(options) {\r
+ L.Util.setOptions(this, options);\r
+ },\r
+ \r
+ onAdd: function(map) {\r
+ this._map = map;\r
+ if (!this._container) {\r
+ this._initLayout();\r
+ }\r
+ this._updateContent();\r
+ \r
+ this._container.style.opacity = '0';\r
+\r
+ this._map._panes.popupPane.appendChild(this._container);\r
+ this._map.on('viewreset', this._updatePosition, this);\r
+ if (this._map.options.closePopupOnClick) {\r
+ this._map.on('preclick', this._close, this);\r
+ }\r
+ this._update();\r
+ \r
+ this._container.style.opacity = '1'; //TODO fix ugly opacity hack\r
+ \r
+ this._opened = true;\r
+ },\r
+ \r
+ onRemove: function(map) {\r
+ map._panes.popupPane.removeChild(this._container);\r
+ map.off('viewreset', this._updatePosition, this);\r
+ map.off('click', this._close, this);\r
+\r
+ this._container.style.opacity = '0';\r
+ \r
+ this._opened = false;\r
+ },\r
+ \r
+ setLatLng: function(latlng) {\r
+ this._latlng = latlng;\r
+ if (this._opened) {\r
+ this._update();\r
+ }\r
+ return this;\r
+ },\r
+ \r
+ setContent: function(content) {\r
+ this._content = content;\r
+ if (this._opened) {\r
+ this._update();\r
+ }\r
+ return this;\r
+ },\r
+ \r
+ _close: function() {\r
+ if (this._opened) {\r
+ this._map.removeLayer(this);\r
+ }\r
+ },\r
+ \r
+ _initLayout: function() {\r
+ this._container = L.DomUtil.create('div', 'leaflet-popup');\r
+ \r
+ this._closeButton = L.DomUtil.create('a', 'leaflet-popup-close-button', this._container);\r
+ this._closeButton.href = '#close';\r
+ this._closeButton.onclick = L.Util.bind(this._onCloseButtonClick, this);\r
+ \r
+ this._wrapper = L.DomUtil.create('div', 'leaflet-popup-content-wrapper', this._container);\r
+ L.DomEvent.disableClickPropagation(this._wrapper);\r
+ this._contentNode = L.DomUtil.create('div', 'leaflet-popup-content', this._wrapper);\r
+ \r
+ this._tipContainer = L.DomUtil.create('div', 'leaflet-popup-tip-container', this._container);\r
+ this._tip = L.DomUtil.create('div', 'leaflet-popup-tip', this._tipContainer);\r
+ },\r
+ \r
+ _update: function() {\r
+ this._container.style.visibility = 'hidden';\r
+ \r
+ this._updateContent();\r
+ this._updateLayout();\r
+ this._updatePosition();\r
+ \r
+ this._container.style.visibility = '';\r
+\r
+ this._adjustPan();\r
+ },\r
+ \r
+ _updateContent: function() {\r
+ if (!this._content) return;\r
+ \r
+ if (typeof this._content == 'string') {\r
+ this._contentNode.innerHTML = this._content;\r
+ } else {\r
+ this._contentNode.innerHTML = '';\r
+ this._contentNode.appendChild(this._content);\r
+ }\r
+ },\r
+ \r
+ _updateLayout: function() {\r
+ this._container.style.width = '';\r
+ this._container.style.whiteSpace = 'nowrap';\r
+\r
+ var width = this._container.offsetWidth;\r
+ \r
+ this._container.style.width = (width > this.options.maxWidth ? this.options.maxWidth : width) + 'px';\r
+ this._container.style.whiteSpace = '';\r
+ \r
+ this._containerWidth = this._container.offsetWidth;\r
+ },\r
+ \r
+ _updatePosition: function() {\r
+ var pos = this._map.latLngToLayerPoint(this._latlng);\r
+ \r
+ this._containerBottom = -pos.y - this.options.offset.y;\r
+ this._containerLeft = pos.x - Math.round(this._containerWidth/2) + this.options.offset.x;\r
+ \r
+ this._container.style.bottom = this._containerBottom + 'px';\r
+ this._container.style.left = this._containerLeft + 'px';\r
+ },\r
+ \r
+ _adjustPan: function() {\r
+ if (!this.options.autoPan) { return; }\r
+ \r
+ var containerHeight = this._container.offsetHeight,\r
+ layerPos = new L.Point(\r
+ this._containerLeft, \r
+ -containerHeight - this._containerBottom),\r
+ containerPos = this._map.layerPointToContainerPoint(layerPos),\r
+ adjustOffset = new L.Point(0, 0),\r
+ padding = this.options.autoPanPadding,\r
+ size = this._map.getSize();\r
+ \r
+ if (containerPos.x < 0) {\r
+ adjustOffset.x = containerPos.x - padding.x;\r
+ }\r
+ if (containerPos.x + this._containerWidth > size.x) {\r
+ adjustOffset.x = containerPos.x + this._containerWidth - size.x + padding.x;\r
+ }\r
+ if (containerPos.y < 0) {\r
+ adjustOffset.y = containerPos.y - padding.y;\r
+ }\r
+ if (containerPos.y + containerHeight > size.y) {\r
+ adjustOffset.y = containerPos.y + containerHeight - size.y + padding.y;\r
+ }\r
+ \r
+ if (adjustOffset.x || adjustOffset.y) {\r
+ this._map.panBy(adjustOffset);\r
+ }\r
+ },\r
+ \r
+ _onCloseButtonClick: function(e) {\r
+ this._close();\r
+ L.DomEvent.stop(e);\r
+ }\r
+});
\ No newline at end of file
projects / mediagoblin.git / blobdiff