Remove lightbox legacy html tags

src/components/Lightbox.vue

@@ -70,7 +70,7 @@ export default {
 				siteTime: media.takenOnSiteTime,
 				offset: media.takenOnDayOffset
 			};
-			return (media.context == 'marker') ? [takenOn, postedOn] : [postedOn, takenOn];
+			return (media.source == 'marker') ? [takenOn, postedOn] : [postedOn, takenOn];
 		}
 	},
 	mounted() {
@@ -84,40 +84,18 @@ export default {
 		this.$refs.nav.addEventListener('wheel', this.onWheel, {passive: false});
 		this.$refs.nav.addEventListener('mousedown', this.onDragStart);
 		window.addEventListener('mouseup', this.onDragEnd);
-
-		this.enable();
 	},
 	beforeUnmount() {
-		this.disable();
 		if(this.resizeTimer) clearTimeout(this.resizeTimer);
 		window.removeEventListener('mouseup', this.onDragEnd);
 		window.removeEventListener('resize', this.sizeOverlay);
 		window.removeEventListener('mousemove', this.onDragMove);
 	},
 	methods: {
-		enable() {
+		open(album, startId, source) {
-			document.body.addEventListener('click', this.onBodyClick);
-		},
-		disable() {
-			document.body.removeEventListener('click', this.onBodyClick);
-		},
-		onBodyClick(event) {
-			const link = event.target.closest('a[data-lightbox], area[data-lightbox]');
-			if(!link) return;
-			event.preventDefault();
-			this.start(link);
-		},
-		start(link) {
 			this.sizeOverlay();
-			this.album = [];
+			this.album = album.map((options) => this.mapMedia(options, source));
-			let imageNumber = 0;
+			const startIndex = Math.max(this.album.findIndex((media) => media.id == startId), 0);
-			const setName = link.getAttribute('data-lightbox');
-
-			const links = [...document.querySelectorAll(`${link.tagName}[data-lightbox="${CSS.escape(setName)}"]`)];
-			links.forEach((item, index) => {
-				this.addToAlbum(item);
-				if(item === link) imageNumber = index;
-			});
 
 			this.fade(this.$refs.overlay, true, this.fadeDuration);
 			this.fade(this.$refs.lightboxEl, true, this.fadeDuration);
@@ -125,7 +103,7 @@ export default {
 			if(this.disableScrolling) document.body.classList.add('lb-disable-scrolling');
 
 			window.addEventListener('resize', this.sizeOverlay);
-			this.changeImage(imageNumber);
+			this.changeImage(startIndex);
 		},
 		end(dispose = false) {
 			this.disableKeyboardNav();
@@ -146,54 +124,42 @@ export default {
 
 			if(this.disableScrolling) document.body.classList.remove('lb-disable-scrolling');
 		},
-		addToAlbum(link) {
+		mapMedia(options, source) {
-			const img = link.querySelector('img');
+			return {
-			this.album.push({
+				alt: '',
-				alt: link.getAttribute('data-alt') || '',
+				link: options.media_path,
-				link: link.getAttribute('href'),
+				orientation: parseInt(options.rotate || '0', 10),
-				orientation: parseInt(link.getAttribute('data-orientation') || '0', 10),
+				type: options.subtype || 'image',
-				type: link.getAttribute('data-type') || 'image',
+				id: options.id_media,
-				id: link.getAttribute('data-id'),
+				width: parseInt(options.width || '0', 10),
-				width: parseInt(img?.getAttribute('width') || '0', 10),
+				height: parseInt(options.height || '0', 10),
-				height: parseInt(img?.getAttribute('height') || '0', 10),
+				source,
-				context: link.getAttribute('data-context') || '',
+				comment: options.comment || '',
-				comment: link.getAttribute('data-comment') || '',
+				postedOnLocalTime: options.posted_on_formatted_time_local || '',
-				postedOnLocalTime: link.getAttribute('data-posted-on-local-time') || '',
+				postedOnSiteTime: options.posted_on_formatted_time || '',
-				postedOnSiteTime: link.getAttribute('data-posted-on-site-time') || '',
+				postedOnDayOffset: options.posted_on_day_offset || '',
-				postedOnDayOffset: link.getAttribute('data-posted-on-day-offset') || '',
+				takenOnLocalTime: options.taken_on_formatted_time_local || '',
-				takenOnLocalTime: link.getAttribute('data-taken-on-local-time') || '',
+				takenOnSiteTime: options.taken_on_formatted_time || '',
-				takenOnSiteTime: link.getAttribute('data-taken-on-site-time') || '',
+				takenOnDayOffset: options.taken_on_day_offset || ''
-				takenOnDayOffset: link.getAttribute('data-taken-on-day-offset') || '',
+			};
-				set: link.getAttribute('data-lightbox') || ''
-			});
 		},
 		hasMediaAfterCurrent() {
 			return this.currentImageIndex < this.album.length - 1;
 		},
-		refreshAlbum() {
+		refreshAlbum(album) {
-			const current = this.album[this.currentImageIndex];
+			const current = this.currentMedia;
-			if(!current?.set) return;
+			if(!current) return;
 
-			const links = [...document.querySelectorAll(`a[data-lightbox="${CSS.escape(current.set)}"], area[data-lightbox="${CSS.escape(current.set)}"]`)];
+			const existingIds = new Set(this.album.map((media) => media.id));
-			if(!links.length) return;
+			album.forEach((options) => {
+				if(existingIds.has(options.id_media)) return;
 
-			const existingKeys = new Set(this.album.map((media) => this.getMediaKey(media)));
+				this.album.push(this.mapMedia(options, current.source));
-			links.forEach((link) => {
+				existingIds.add(options.id_media);
-				const key = this.getLinkMediaKey(link);
-				if(existingKeys.has(key)) return;
-
-				this.addToAlbum(link);
-				existingKeys.add(key);
 			});
 
 			this.updateNav();
 		},
-		getMediaKey(media) {
-			return `${media.set}:${media.id}`;
-		},
-		getLinkMediaKey(link) {
-			return `${link.getAttribute('data-lightbox') || ''}:${link.getAttribute('data-id')}`;
-		},
 		getMaxSizes(mediaType) {
 			let maxWidth = window.innerWidth - this.containerPadding.left - this.containerPadding.right;
 			let maxHeight = window.innerHeight - this.containerPadding.top - this.containerPadding.bottom - this.positionFromTop;

src/components/Project.vue

@@ -69,6 +69,9 @@ export default {
 				isMarkerVisible: (oLngLat) => this.$refs.mapCtrl.isMarkerVisible(oLngLat),
 				findMarkerByMediaId: (iMediaId) => this.$refs.mapCtrl.findMarkerByMediaId(iMediaId)
 			},
+			lightbox: {
+				open: (iMediaId, sSource) => this.openLightbox(iMediaId, sSource)
+			},
 			project: this
 		};
 	},
@@ -119,13 +122,19 @@ export default {
 			const pMapReady = this.initProjectMap();
 			await this.feed.init(pMapReady);
 		},
+		openLightbox(iMediaId, sSource) {
+			const aoAlbum = (sSource == 'marker')
+				? (this.$refs.mapCtrl.findMarkerByMediaId(iMediaId)?.medias || [])
+				: this.feed.posts.filter((oPost) => oPost.type == 'media');
+			this.$refs.lightbox.open(aoAlbum, iMediaId, sSource);
+		},
 		async onLightboxMediaChange(oMedia) {
 			this.hash.items = [this.project.codename, 'media', oMedia.id];
-			if(oMedia.set == 'post-medias') {
+			if(oMedia.source == 'post') {
 				(await this.feed.findPost('media', oMedia.id))?.panMapToMarker();
 				if(!this.$refs.lightbox.hasMediaAfterCurrent()) {
 					await this.feed.getNextFeed();
-					this.$refs.lightbox.refreshAlbum();
+					this.$refs.lightbox.refreshAlbum(this.feed.posts.filter((oPost) => oPost.type == 'media'));
 				}
 			}
 		},

src/components/ProjectMap.vue

@@ -56,7 +56,7 @@ export default {
 		baseMap: String
 	},
 	emits: ['update:base-map'],
-	inject: ['lang', 'consts', 'isMobile', 'projects', 'hash'],
+	inject: ['lang', 'consts', 'isMobile', 'projects', 'hash', 'lightbox'],
 	data() {
 		return {
 			map: null,
@@ -331,7 +331,9 @@ export default {
 			});
 		},
 		findMarkerByMediaId(iMediaId) {
-			return this.markers.find((oMarker) => (oMarker.medias || []).some((oMedia) => oMedia.id_media == iMediaId)) || null;
+			return this.markers.find((oMarker) => oMarker.type == 'media' && oMarker.id == iMediaId) //Look for an actual media marker first
+				|| this.markers.find((oMarker) => (oMarker.medias || []).some((oMedia) => oMedia.id_media == iMediaId)) //Look for a media within a message marker
+				|| null;
 		},
 		openMarkerPopup(iMarkerId, sMarkerType) {
 			let oMarker = this.markers.find((oCandidate) => oCandidate.id == iMarkerId && oCandidate.type == sMarkerType);
@@ -370,6 +372,7 @@ export default {
 				.provide('lang', this.lang)
 				.provide('consts', this.consts)
 				.provide('isMobile', this.isMobile)
+				.provide('lightbox', this.lightbox)
 				.mount($Popup);
 		},
 		closePopup() {

src/components/ProjectMediaLink.vue

@@ -12,10 +12,11 @@ export default {
 		type: String
 	},
 	emits: ['opening-lightbox'],
-	inject: ['lang', 'isMobile'],
+	inject: ['lang', 'isMobile', 'lightbox'],
 	methods: {
 		openMedia() {
-			this.$refs.link.click();
+			this.$emit('opening-lightbox', this.options);
+			this.lightbox.open(this.options.id_media, this.type);
 		}
 	}
 };
@@ -25,20 +26,7 @@ export default {
 	<a
 		class="media-link drill"
 		:href="options.media_path"
-		:data-lightbox="type+'-medias'"
+		@click.prevent="openMedia"
-		:data-type="options.subtype"
-		:data-id="options.id_media"
-		:data-orientation="options.rotate"
-		:data-context="type"
-		:data-comment="options.comment"
-		:data-posted-on-local-time="options.posted_on_formatted_time_local"
-		:data-posted-on-site-time="options.posted_on_formatted_time"
-		:data-posted-on-day-offset="options.posted_on_day_offset"
-		:data-taken-on-local-time="options.taken_on_formatted_time_local"
-		:data-taken-on-site-time="options.taken_on_formatted_time"
-		:data-taken-on-day-offset="options.taken_on_day_offset"
-		@click="$emit('opening-lightbox', $event)"
-		ref="link"
 	>
 		<img
 			:src="options.thumb_path"