Customize media markers

src/components/project.vue

@@ -299,6 +299,7 @@ export default {
 			*/
 
 			//Medias
+			//TODO Use same way of displaying markers (so that openMarkerPopup works on all markers)
 			this.markers.medias.forEach(msg => {
 				const $Marker = document.createElement('div');
 				const app = createApp(SpotIconStack, {iconMain: 'message', iconSub:'image'});
@@ -315,8 +316,8 @@ export default {
 					.setMaxWidth(300)
 					.addTo(this.map)
 				;
-					console.log(msg);
 				const popupContent = createApp(ProjectPopup, {
+					type: 'media',
 					options: msg,
 					medias: [msg],
 					project: this.currProject
@@ -416,6 +417,7 @@ export default {
 				.addTo(this.map);
 
 			this.popup.content = createApp(ProjectPopup, {
+				type: 'message',
 				options: oFeature.properties,
 				medias: JSON.parse(oFeature.properties.medias || '[]'),
 				project: this.currProject
@@ -585,8 +587,9 @@ export default {
 			}
 		},
 		async findPost(oPost) {
-			if(this.goToPost(oPost)) {
+			let oRef = this.goToPost(oPost);
-				//if(oPost.type=='media' || oPost.type=='message') $Post.find('a.drill').click();
+			if(oRef) {
+				oRef.executeMainAction();
 			}
 			else if(!this.feed.outOfData) {
 				await this.getNextFeed();
@@ -598,17 +601,17 @@ export default {
 			let bFound = false;
 			let aoRefs = this.$refs.posts.filter((post) => {return post.postId == oPost.type+'-'+oPost.id;});
 			if(aoRefs.length == 1) {
+				let oRef = aoRefs[0];
 				this.$refs.feedSimpleBar.scrollElement.scrollTop += Math.round(
-					aoRefs[0].$el.getBoundingClientRect().top
+					oRef.$el.getBoundingClientRect().top
 					+ window.pageYOffset
 					- parseFloat(getComputedStyle(this.$refs.feedSimpleBar.$el).paddingTop)
 				);
-				aoRefs[0].executeMainAction();
-				//this.spot.flushHash(['post', 'message']);
-				bFound = true;
-			}
 				
-			return bFound;
+				//this.spot.flushHash(['post', 'message']);
+				
+				return oRef;
+			}
 		}
 	}
 }

src/components/projectPopup.vue

@@ -13,35 +13,45 @@ export default {
 		projectRelTime
 	},
 	props: {
+		type: String,
 		options: Object,
 		medias: Array,
 		project: Object
 	},
-	inject: ['spot']
+	inject: ['spot'],
+	computed: {
+		timeIcon() {
+			return (this.type == 'media')?'image-shot':'time';
+		}
+	}
 }
 </script>
 
 <template>
-	<div class="info-window">
+	<div :class="'info-window '+type">
+		<div class="header" v-if="type=='message'">
 			<h1>
 				<spotIcon :icon="'message'" :classes="'fa-lg'" :text="spot.lang('post_message')+' '+spot.lang('counter', options.displayed_id)" />
 				<span class="message-type">({{ options.type }})</span>
 			</h1>
 			<div class="separator"></div>
+		</div>
 		<p class="coordinates">
 			<spotIcon :icon="'coords'" :classes="'fa-fw fa-lg'" :margin="true" />
 			<projectMapLink :options="options" />
 		</p>
 		<p class="time">
-			<projectRelTime :icon="'time'" :localTime="options.formatted_time_local" :siteTime="options.formatted_time" :offset="options.day_offset" />
+			<projectRelTime :icon="timeIcon" :localTime="options.formatted_time_local" :siteTime="options.formatted_time" :offset="options.day_offset" />
 			<span v-if="project.mode==spot.consts.modes.blog"> ({{ options.relative_time }})</span>
 		</p>
 		<p class="weather" v-if="options.weather_icon && options.weather_icon!='unknown'" :title="options.weather_cond==''?'':spot.lang(options.weather_cond)">
 			<spotIcon :icon="options.weather_icon" :classes="'fa-fw fa-lg'" :text="options.weather_temp+'°C'" />
 		</p>
-		<div v-if="medias" class="separator"></div>
+		<div v-if="medias.length > 0">
-		<div v-if="medias" class="medias">
+			<div class="separator"></div>
+			<div class="medias">
 				<projectMediaLink v-for="media in medias" :options="media" :type="'marker'" />
 			</div>
 		</div>
+	</div>
 </template>

src/components/projectPost.vue

@@ -32,7 +32,8 @@
 				anchorIcon: 'link',
 				popupRequested: false,
 				postMessage: '',
-				sending: false
+				sending: false,
+				focusZoomLevel: 15
 			};
 		},
 		computed: {
@@ -60,7 +61,11 @@
 				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;
+				return (
+					['message', 'media'].includes(this.options.type)
+					&& this.options.longitude
+					&& this.options.latitude
+				)?(new LngLat(this.options.longitude, this.options.latitude)):null;
 			}
 			
 		},
@@ -80,7 +85,7 @@
 				if(this.spot.isMobile()) this.project.toggleFeedPanel(false, 'panToInstant');
 				this.map.panToBetweenPanels(
 					this.lngLat,
-					15,
+					this.focusZoomLevel,
 					() => {this.map.openMarkerPopup(this.options.id_message);}
 				);
 			},
@@ -119,6 +124,7 @@
 						break;
 					case 'media':
 						this.$refs.medialink.openMedia();
+						if(this.lngLat) this.map.panToBetweenPanels(this.lngLat, this.focusZoomLevel);
 						break;
 				}
 			}

src/styles/_page.project.map.scss

@@ -38,7 +38,7 @@ $thumbnail-max-size: 60px;
 				font-weight: normal;
 				font-size: calc(1em / 1.4);
 				margin-left: 0.5em;
-				vertical-align: text-bottom;
+				vertical-align: middle;
 			}
 
 			p {
@@ -50,16 +50,13 @@ $thumbnail-max-size: 60px;
 				}
 			}
 
-			.medias {
+			a.media-link {
-				line-height: 0;
+				img {
-				display: grid;
+					width: auto;
-				gap: var.$elem-spacing;
+					height: auto;
-				grid-template-columns: repeat(auto-fill, minmax($thumbnail-max-size, 1fr));
+					image-orientation: from-image;
-				place-items: center;
+					transition: All 0.2s;
-
+					border-radius: var.$block-radius;
-				a {
-					&:last-child {
-						margin-right: 0;
 				}
 
 				&.drill {
@@ -78,15 +75,37 @@ $thumbnail-max-size: 60px;
 						}
 					}
 				}
+			}
+
+			&.message {
+				.medias {
+					line-height: 0;
+					display: grid;
+					gap: var.$elem-spacing;
+					grid-template-columns: repeat(auto-fill, minmax($thumbnail-max-size, 1fr));
+					place-items: center;
+
+					a.media-link {
+						&:last-child {
+							margin-right: 0;
+						}
 
 						img {
-						width: auto;
-						height: auto;
 							max-width: $thumbnail-max-size;
 							max-height: calc($thumbnail-max-size * 2/3);
-						border-radius: var.$block-radius;
+						}
-						image-orientation: from-image;
+					}
-						transition: All 0.2s;
+				}
+			}
+
+			&.media {
+				.coordinates {
+					margin: 0;
+				}
+
+				.medias {
+					a.media-link img {
+						width: 100%;
 					}
 				}
 			}