[Libreoffice-commits] online.git: loleaflet/src

[Pranam Lashkari (via logerrit)]

 loleaflet/src/layer/tile/TileLayer.js |   31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

New commits:
commit 28d163f843ae69f5bbd3a71147533cba5a672578
Author:     Pranam Lashkari <lpranam at collabora.com>
AuthorDate: Sun Aug 9 23:50:30 2020 +0530
Commit:     Aron Budea <aron.budea at collabora.com>
CommitDate: Wed Sep 9 08:07:30 2020 +0200

    leaflet: hyperlink popup will not displace the view
    
    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/+/100407
    Tested-by: Jenkins
    Tested-by: Jenkins CollaboraOffice <jenkinscollaboraoffice at gmail.com>
    Reviewed-by: Aron Budea <aron.budea at collabora.com>

diff --git a/loleaflet/src/layer/tile/TileLayer.js b/loleaflet/src/layer/tile/TileLayer.js
index 16744d019..9d3299b88 100644
--- a/loleaflet/src/layer/tile/TileLayer.js
+++ b/loleaflet/src/layer/tile/TileLayer.js
@@ -1235,13 +1235,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;