Move map with media selection in feed panel

src/components/project.vue

@@ -169,9 +169,6 @@ export default {
 				this.api.get('geojson', {id_project: this.currProject.id})
 			]);
 
-			//Get default basemap
-			this.baseMap = this.baseMaps.find((asBM) => asBM.default_map)?.codename ?? null;
-
 			//Build Map
 			if(this.map) this.map.remove();
 			this.map = new Map({
@@ -195,6 +192,9 @@ export default {
 				attributionControl: false
 			});
 
+			//Get default basemap
+			this.baseMap = this.baseMaps.find((asBM) => asBM.default_map)?.codename ?? null;
+
 			//Force wait for load event
 			await new Promise((resolve) => {
 				if(this.map.loaded()) resolve();

src/components/projectPost.vue

@@ -64,14 +64,28 @@
 			relTime() {
 				return this.modeHisto?(this.options.formatted_time || '').substr(0, 10):this.options.relative_time;
 			},
-			lngLat() {
-				return (
+			relatedMarker() {
+				//Find corresponding marker
+				if(!this.options.longitude && !this.options.latitude && this.options.type == 'media') {
+					return this.project.markers.find((marker) => {
+						return (marker.medias || []).some((media) => {
+							return media.id_media == this.options.id_media;
+						});
+					}) || null;
+				}
+				else if(
 					['message', 'media'].includes(this.options.type)
 					&& this.options.longitude
 					&& this.options.latitude
-				)?(new LngLat(this.options.longitude, this.options.latitude)):null;
+				) {
+					return this.options;
+				}
+				else return null;
+			},
+			relatedMarkerLatLng() {
+				let oRelatedMarker = this.relatedMarker;
+				return new LngLat(oRelatedMarker.longitude, oRelatedMarker.latitude);
 			}
-			
 		},
 		inject: ['api', 'lang', 'project', 'user', 'map', 'hash', 'consts', 'isMobile'],
 		methods: {
@@ -85,18 +99,23 @@
 				}, 5000);
 			},
 			panMapToMarker(iAnimDuration=500) {
+				if(typeof iAnimDuration !== 'number') iAnimDuration = 500; //panMapToMarker will provide event on direct call in vue template
+				
 				this.popupRequested = true;
 
 				if(this.isMobile()) this.project.toggleFeedPanel(false, 'panToInstant');
 				this.hash.items = [this.hash.items[0], this.options.type, this.options.id];
 
-				return this.map.panToBetweenPanels(this.lngLat, this.focusZoomLevel, iAnimDuration).then(() => {
+				return this.map.panToBetweenPanels(this.relatedMarkerLatLng, this.focusZoomLevel, iAnimDuration).then(() => {
 					this.openMarkerPopup(false);
 				});
 			},
 			openMarkerPopup(bMouseEvent=true) {
+				const oRelatedMarker = this.relatedMarker;
 				this.mouseOverDrill = bMouseEvent;
-				if(this.map.isMarkerVisible(this.lngLat)) this.map.openMarkerPopup(this.options.id, this.options.type);
+				if(oRelatedMarker && this.map.isMarkerVisible(this.relatedMarkerLatLng)) {
+					this.map.openMarkerPopup(oRelatedMarker.id, oRelatedMarker.type);
+				}
 			},
 			closeMarkerPopup() {
 				this.mouseOverDrill = false;
@@ -130,7 +149,7 @@
 						return this.openMarkerPopup(false);
 					case 'media':
 						this.$refs.medialink.openMedia();
-						if(this.lngLat) return this.openMarkerPopup(false);
+						if(this.relatedMarker) return this.openMarkerPopup(false);
 					default:
 						return Promise.resolve();
 				}
@@ -161,7 +180,7 @@
 		</div>
 		<div class="body">
 			<div v-if="options.type == 'message'" class="body-box">
-				<div class="drill" @click.prevent="() => {this.panMapToMarker();}" @mouseenter="openMarkerPopup" @mouseleave="closeMarkerPopup">
+				<div class="drill" @click.prevent="panMapToMarker" @mouseenter="openMarkerPopup" @mouseleave="closeMarkerPopup">
 					<span v-if="options.weather_icon && options.weather_icon!='unknown'" class="weather clickable" :title="lang.get('weather.'+options.weather_icon)">
 						<spotIcon :icon="options.weather_icon" :text="Math.round(options.weather_temp)+'°C'" text-classes="temperature" />
 					</span>
@@ -173,13 +192,13 @@
 							<projectMapLink :options="options" />
 						</p>
 						<p v-if="timeDiff">
-							<projectRelTime :icon="'time'" margin="right" :localTime="absTimeLocal" :siteTime="options.formatted_time" :offset="options.day_offset" />
+							<projectRelTime :icon="'time'" :localTime="absTimeLocal" :siteTime="options.formatted_time" :offset="options.day_offset" />
 						</p>
 					</div>
 				</div>
 			</div>
 			<div v-else-if="options.type == 'media'" class="body-box">
-				<projectMediaLink :options="options" :type="'post'" ref="medialink" @opening-lightbox="() => {if(this.lngLat) return this.panMapToMarker();}" />
+				<projectMediaLink :options="options" :type="'post'" ref="medialink" @opening-lightbox="panMapToMarker" />
 			</div>
 			<div v-else-if="options.type == 'post'">
 				<p class="message">{{ options.content }}</p>

src/components/projectRelTime.vue

@@ -11,7 +11,6 @@ export default {
 		offset: String,
 		classes: String,
 		icon: String,
-		margin: String,
 	},
 	inject: ['lang'],
 	computed: {
@@ -23,6 +22,6 @@ export default {
 </script>
 
 <template>
-	<spotIcon v-if="icon" :icon="icon" :margin="margin" :title="title" :text="localTime" width="fixed" size="lg" />
+	<spotIcon v-if="icon" :icon="icon" :title="title" :text="localTime" width="fixed" size="lg" />
 	<span v-else :class="classes" :title="title">{{ localTime }}</span>
 </template>