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() {
-			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) {
+		open(album, startId, source) {
 			this.sizeOverlay();
-			this.album = [];
-			let imageNumber = 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.album = album.map((options) => this.mapMedia(options, source));
+			const startIndex = Math.max(this.album.findIndex((media) => media.id == startId), 0);
 
 			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) {
-			const img = link.querySelector('img');
-			this.album.push({
-				alt: link.getAttribute('data-alt') || '',
-				link: link.getAttribute('href'),
-				orientation: parseInt(link.getAttribute('data-orientation') || '0', 10),
-				type: link.getAttribute('data-type') || 'image',
-				id: link.getAttribute('data-id'),
-				width: parseInt(img?.getAttribute('width') || '0', 10),
-				height: parseInt(img?.getAttribute('height') || '0', 10),
-				context: link.getAttribute('data-context') || '',
-				comment: link.getAttribute('data-comment') || '',
-				postedOnLocalTime: link.getAttribute('data-posted-on-local-time') || '',
-				postedOnSiteTime: link.getAttribute('data-posted-on-site-time') || '',
-				postedOnDayOffset: link.getAttribute('data-posted-on-day-offset') || '',
-				takenOnLocalTime: link.getAttribute('data-taken-on-local-time') || '',
-				takenOnSiteTime: link.getAttribute('data-taken-on-site-time') || '',
-				takenOnDayOffset: link.getAttribute('data-taken-on-day-offset') || '',
-				set: link.getAttribute('data-lightbox') || ''
-			});
+		mapMedia(options, source) {
+			return {
+				alt: '',
+				link: options.media_path,
+				orientation: parseInt(options.rotate || '0', 10),
+				type: options.subtype || 'image',
+				id: options.id_media,
+				width: parseInt(options.width || '0', 10),
+				height: parseInt(options.height || '0', 10),
+				source,
+				comment: options.comment || '',
+				postedOnLocalTime: options.posted_on_formatted_time_local || '',
+				postedOnSiteTime: options.posted_on_formatted_time || '',
+				postedOnDayOffset: options.posted_on_day_offset || '',
+				takenOnLocalTime: options.taken_on_formatted_time_local || '',
+				takenOnSiteTime: options.taken_on_formatted_time || '',
+				takenOnDayOffset: options.taken_on_day_offset || ''
+			};
 		},
 		hasMediaAfterCurrent() {
 			return this.currentImageIndex < this.album.length - 1;
 		},
-		refreshAlbum() {
-			const current = this.album[this.currentImageIndex];
-			if(!current?.set) return;
+		refreshAlbum(album) {
+			const current = this.currentMedia;
+			if(!current) return;
 
-			const links = [...document.querySelectorAll(`a[data-lightbox="${CSS.escape(current.set)}"], area[data-lightbox="${CSS.escape(current.set)}"]`)];
-			if(!links.length) return;
+			const existingIds = new Set(this.album.map((media) => media.id));
+			album.forEach((options) => {
+				if(existingIds.has(options.id_media)) return;
 
-			const existingKeys = new Set(this.album.map((media) => this.getMediaKey(media)));
-			links.forEach((link) => {
-				const key = this.getLinkMediaKey(link);
-				if(existingKeys.has(key)) return;
-
-				this.addToAlbum(link);
-				existingKeys.add(key);
+				this.album.push(this.mapMedia(options, current.source));
+				existingIds.add(options.id_media);
 			});
 
 			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;