leaflet: hyperlink popup will not displace the viewcp-4.2.8-1

hyperlink popups always opend above the links
when it did not fit into the view it would scroll
this scrolling caused problem in calc by messing the grid

now popup will not trigger the scroll
and would be adjusted to fit in view

Change-Id: I6c886e0dc57b010db16f51baed0e7a0465e52d4f
Reviewed-on: https://gerrit.libreoffice.org/c/online/+/101863
Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice@gmail.com>
Reviewed-by: Andras Timar <andras.timar@collabora.com>

1 files changed, 30 insertions, 1 deletions

diff --git a/loleaflet/src/layer/tile/TileLayer.js b/loleaflet/src/layer/tile/TileLayer.js
index cba7cf179..ba0157ac7 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -1207,13 +1207,42 @@ L.TileLayer = L.GridLayer.extend({
 	_showURLPopUp: function(position, url) {
 		// # for internal links
 		if (!url.startsWith('#')) {
-			this._map.hyperlinkPopup = new L.Popup({className: 'hyperlink-popup', closeButton: false, closeOnClick: false})
+			this._map.hyperlinkPopup = new L.Popup({className: 'hyperlink-popup', closeButton: false, closeOnClick: false, autoPan: false})
 			.setContent('<a href="' + url + '" target="_blank">' + url + '</a>')
 			.setLatLng(position)
 			.openOn(this._map);
+			var offsetDiffTop = $('.hyperlink-popup').offset().top - $('#map').offset().top;
+			var offsetDiffLeft = $('.hyperlink-popup').offset().left - $('#map').offset().left;
+			if (offsetDiffTop < 10) this._movePopUpBelow();
+			if (offsetDiffLeft < 10) this._movePopUpRight();
 		}
 	},
 
+	_movePopUpBelow: function() {
+		var popUp = $('.hyperlink-popup').first();
+		var pixBounds = L.bounds(this._map.latLngToLayerPoint(this._visibleCursor.getSouthWest()),
+			this._map.latLngToLayerPoint(this._visibleCursor.getNorthEast()));
+		var cursorSize = pixBounds.getSize().multiplyBy(this._map.getZoomScale(this._map.getZoom()));
+		var bottom = cursorSize.y + popUp.height();
+
+		popUp.css({
+			'bottom': bottom ? -bottom + 'px': '',
+			'display': 'flex',
+			'flex-direction': 'column-reverse'
+		});
+		$('.leaflet-popup-tip-container').first().css('transform', 'rotate(180deg)');
+	},
+
+	_movePopUpRight: function() {
+		$('.leaflet-popup-content-wrapper').first().css({
+			'position': 'relative',
+			'left': this._map.hyperlinkPopup._containerLeft * -1
+		});
+		$('.leaflet-popup-tip-container').first().css({
+			'left': '25px'
+		});
+	},
+
 	_closeURLPopUp: function() {
 		this._map.closePopup(this._map.hyperlinkPopup);
 		this._map.hyperlinkPopup = null;