From a70f6fe64cde57e3355e95e010b0fb46babdc76d Mon Sep 17 00:00:00 2001 From: Franzz Date: Wed, 9 Sep 2026 17:46:38 +0200 Subject: [PATCH] Remove lightbox legacy html tags --- src/components/Lightbox.vue | 96 ++++++++++------------------- src/components/Project.vue | 13 +++- src/components/ProjectMap.vue | 7 ++- src/components/ProjectMediaLink.vue | 20 ++---- 4 files changed, 51 insertions(+), 85 deletions(-) diff --git a/src/components/Lightbox.vue b/src/components/Lightbox.vue index eaa78ab..306edec 100644 --- a/src/components/Lightbox.vue +++ b/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; diff --git a/src/components/Project.vue b/src/components/Project.vue index 200ec65..0230a17 100644 --- a/src/components/Project.vue +++ b/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')); } } }, diff --git a/src/components/ProjectMap.vue b/src/components/ProjectMap.vue index e512807..b2c6a1d 100644 --- a/src/components/ProjectMap.vue +++ b/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() { diff --git a/src/components/ProjectMediaLink.vue b/src/components/ProjectMediaLink.vue index 9f97cab..4c70d85 100644 --- a/src/components/ProjectMediaLink.vue +++ b/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 {