diff --git a/src/components/project.vue b/src/components/project.vue index fcdd73a..997fd94 100644 --- a/src/components/project.vue +++ b/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(); diff --git a/src/styles/_page.project.scss b/src/styles/_page.project.scss index 6bf3cbd..51de69c 100644 --- a/src/styles/_page.project.scss +++ b/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 {