Fix hover events on message (feed)

src/components/project.vue

@@ -46,7 +46,7 @@ export default {
 				colors:{'main':'#00ff78', 'off-track':'#0000ff', 'hitchhiking':'#FF7814'},
 				width: 4
 			},
-			popup: null
+			popup: {content: null, element: null}
 		};
 	},
 	computed: {
@@ -86,8 +86,10 @@ export default {
 	provide() {
 		return {
 			map: {
-				panTo: this.panTo,
-				openMarkerPopup: this.openMarkerPopup
+				panToBetweenPanels: this.panToBetweenPanels,
+				openMarkerPopup: this.openMarkerPopup,
+				closeMarkerPopup: this.closeMarkerPopup,
+				isMarkerVisible: this.isMarkerVisible
 			},
 			project: {
 				...this.$data,
@@ -310,10 +312,7 @@ export default {
 			//Legend
 		},
 		openMarkerPopup(oFeature) {
-			if(this.popup) {
-				this.popup.unmount();
-				this.popup = null;
-			}
+			this.closeMarkerPopup();
 
 			//Convert ID Message to feature
 			if(typeof oFeature == 'number') {
@@ -329,7 +328,7 @@ export default {
 			}
 
 			const $Popup = document.createElement('div');
-			const oPopup = new Popup({
+			this.popup.element = new Popup({
 					anchor: 'bottom',
 					offset: [0, this.markerSize.height * -1],
 					closeButton: false
@@ -355,11 +354,21 @@ export default {
 			});
 
 			nextTick(() => {
-				this.popup = createApp(vPopup);
-				this.popup.mount($Popup);
+				this.popup.content = createApp(vPopup);
+				this.popup.content.mount($Popup);
 			});
 		},
-		panTo(oLngLat, iZoom, fCallback) {
+		closeMarkerPopup() {
+			if(this.popup.content) {
+				this.popup.content.unmount();
+				this.popup.content = null;
+			}
+			if(this.popup.element) {
+				this.popup.element.remove();
+				this.popup.element = null;
+			}
+		},
+		panToBetweenPanels(oLngLat, iZoom, fCallback) {
 			const iXOffset = (this.settingsPanelOpen?getOuterWidth(this.$refs.settings):0) - (this.feedPanelOpen?getOuterWidth(this.$refs.feed):0);
 			this.map.easeTo({
 				center: oLngLat,
@@ -369,6 +378,9 @@ export default {
 			});
 			setTimeout(fCallback, 500);
 		},
+		isMarkerVisible(oLngLat){
+			return this.map.getBounds().contains(oLngLat);
+		},
 		getGoogleMapsLink(asInfo) {
 			return $('<a>', {
 				href:'https://www.google.com/maps/place/'+asInfo.lat_dms+'+'+asInfo.lon_dms+'/@'+asInfo.latitude+','+asInfo.longitude+',10z',

src/components/projectPost.vue

@@ -27,7 +27,8 @@
 				timeDiff: (this.options.formatted_time && this.options.formatted_time_local != this.options.formatted_time),
 				anchorVisible: ['message', 'media', 'post'].includes(this.options.type),
 				anchorTitle: this.spot.lang('copy_to_clipboard'),
-				anchorIcon: 'link'
+				anchorIcon: 'link',
+				popupRequested: false
 			};
 		},
 		computed: {
@@ -54,6 +55,9 @@
 			relTime() {
 				return this.modeHisto?(this.options.formatted_time || '').substr(0, 10):this.options.relative_time;
 			},
+			lngLat() {
+				return (this.options.type == 'message')?(new LngLat(this.options.longitude, this.options.latitude)):null;
+			}
 			
 		},
 		inject: ['spot', 'project', 'user', 'map', 'project'],
@@ -68,28 +72,20 @@
 				}, 5000);
 			},
 			panMapToMessage() {
+				this.popupRequested = true;
 				if(this.spot.isMobile()) this.project.toggleFeedPanel(false, 'panToInstant');
-				this.map.panTo(
-					new LngLat(this.options.longitude, this.options.latitude),
+				this.map.panToBetweenPanels(
+					this.lngLat,
 					15,
 					() => {this.map.openMarkerPopup(this.options.id_message);}
 				);
 			},
 			openMarkerPopup() {
-				//TODO
-				/*
-				let oMarker = this.spot.tmp(['markers', $(oEvent.currentTarget).data('id')]);
-				if(this.spot.tmp('map') && this.spot.tmp('map').getBounds().contains(oMarker.getLatLng()) && !oMarker.isPopupOpen()) oMarker.openPopup();
-				*/
+				if(this.map.isMarkerVisible(this.lngLat)) this.map.openMarkerPopup(this.options.id_message);
 			},
 			closeMarkerPopup() {
-				//TODO
-				/*
-				let $This = $(oEvent.currentTarget);
-				let oMarker = this.spot.tmp(['markers', $This.data('id')]);
-				if(oMarker && oMarker.isPopupOpen() && !$This.data('clicked')) oMarker.closePopup();
-				$This.data('clicked', false);
-				*/
+				if(!this.popupRequested) this.map.closeMarkerPopup();
+				this.popupRequested = false;
 			}
 		},
 		mounted() {