Generate media popup on the fly

src/components/project.vue

@@ -313,32 +313,16 @@ export default {
 			//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, {mainClasses: 'media', iconMain: 'marker', iconSub: msg.subtype});
-				app.mount($Marker);
+				createApp(SpotIconStack, {mainClasses: 'media', iconMain: 'marker', iconSub: msg.subtype}).mount($Marker);
 
-				const $Popup = document.createElement('div');
-				const popupElement = new Popup({
-						anchor: 'bottom',
-						offset: [0, this.markerSize.height * -1],
-						closeButton: false
-					})
-					.setDOMContent($Popup)
+				const marker = new Marker({element: $Marker, anchor: 'bottom'})
 					.setLngLat([msg.longitude, msg.latitude])
-					.setMaxWidth(300)
 					.addTo(this.map)
-				;
-				const popupContent = createApp(ProjectPopup, {
-					type: 'media',
-					options: msg,
-					medias: [msg],
-					project: this.currProject
-				});
-				popupContent.provide('spot', this.spot).mount($Popup);
-
-				new Marker({element: $Marker, anchor: 'bottom'})
-					.setLngLat([msg.longitude, msg.latitude])
-					.setPopup(popupElement)
-					.addTo(this.map);
+					.getElement().addEventListener('click', (oEvent) => {
+						oEvent.preventDefault();
+						oEvent.stopPropagation();
+						this.openMediaPopup(msg);
+					});
 			});
 		},
 		async positionMap(oTrack) {
@@ -397,6 +381,28 @@ export default {
 				}
 			}));
 		},
+		openMediaPopup(oMedia) {
+			this.closeMarkerPopup();
+
+			const $Popup = document.createElement('div');
+			this.popup.element = new Popup({
+					anchor: 'bottom',
+					offset: [0, this.markerSize.height * -1],
+					closeButton: false
+				})
+				.setDOMContent($Popup)
+				.setLngLat([oMedia.longitude, oMedia.latitude])
+				.setMaxWidth(300)
+				.addTo(this.map);
+
+			this.popup.content = createApp(ProjectPopup, {
+				type: 'media',
+				options: oMedia,
+				medias: [oMedia],
+				project: this.currProject
+			});
+			this.popup.content.provide('spot', this.spot).mount($Popup);
+		},
 		openMarkerPopup(oFeature) {
 			this.closeMarkerPopup();
 

src/styles/_page.project.scss

@@ -52,12 +52,18 @@
 			.#{variables.$fa-css-prefix}-stack-2x {
 				color: color.$message-flashy;
 			}
+			.#{variables.$fa-css-prefix}-stack-1x {
+				color: color.$message;
+			}
 		}
 
 		&.media {
 			.#{variables.$fa-css-prefix}-stack-2x {
 				color: color.$media-flashy;
 			}
+			.#{variables.$fa-css-prefix}-stack-1x {
+				color: color.$media;
+			}
 		}
 
 		&.track {