franzz/spot
1
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

Fix lightbox multi-loading

Browse Source
This commit is contained in:
Franzz
2026-05-07 16:58:52 +02:00
parent 7aaaff7dda
commit e6d11f424d
3 changed files with 56 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/project.vue
View File

@@ -97,7 +97,7 @@ export default {
async init() {
this.initProject();
this.initLightbox();
await Promise.all([
this.initFeed(),
this.initMap()
@@ -107,7 +107,7 @@ export default {
if(this.hash.items.length == 3) await this.findPost(this.hash.items[1], this.hash.items[2]);
},
quit() {
this.lightbox?.end();
this.lightbox.end();
this.$refs.feedSimpleBar.scrollElement.removeEventListener('scroll', this.onFeedScroll);
this.setFeedUpdateTimer(-1);
this.map.remove();
@@ -121,20 +121,22 @@ export default {
this.baseMaps = {};
},
initLightbox() {
this.lightbox = new Lightbox({
alwaysShowNavOnTouchDevices: true,
albumLabel: 'Media %1 / %2',
fadeDuration: 300,
imageFadeDuration: 400,
positionFromTop: 0,
resizeDuration: 400,
hasVideo: true,
onMediaChange: (oMedia) => {
this.hash.items = [this.currProject.codename, 'media', oMedia.id];
if(oMedia.set == 'post-medias') this.goToPost('media', oMedia.id);
},
onClosing: () => {this.hash.items = [this.hash.items[0]];}
});
if(!this.lightbox) {
this.lightbox = new Lightbox({
alwaysShowNavOnTouchDevices: true,
albumLabel: 'Media %1 / %2',
fadeDuration: 300,
imageFadeDuration: 400,
positionFromTop: 0,
resizeDuration: 400,
hasVideo: true,
onMediaChange: (oMedia) => {
this.hash.items = [this.currProject.codename, 'media', oMedia.id];
if(oMedia.set == 'post-medias') this.goToPost('media', oMedia.id);
},
onClosing: () => {this.hash.items = [this.hash.items[0]];}
});
}
},
async initFeed() {
//Simplebar event

4
src/components/projectPost.vue
View File

@@ -56,7 +56,7 @@
return this.mouseOverDrill?'drill-message':'marker';
},
anchorLink() {
return '#'+[this.hash.page, this.hash.items[0], this.options.type, this.options.id].join(this.consts.hash_sep);
return '#'+[this.hash.page, this.project.currProject.codename, this.options.type, this.options.id].join(this.consts.hash_sep);
},
modeHisto() {
return (this.project.currProject.mode == this.consts.modes.histo);
@@ -104,7 +104,7 @@
this.popupRequested = true;
if(this.isMobile()) this.project.toggleFeedPanel(false, 'panToInstant');
this.hash.items = [this.hash.items[0], this.options.type, this.options.id];
this.hash.items = [this.project.currProject.codename, this.options.type, this.options.id];
return this.map.panToBetweenPanels(this.relatedMarkerLatLng, this.focusZoomLevel, iAnimDuration).then(() => {
this.openMarkerPopup(false);

74
src/scripts/lightbox.js
View File

@@ -41,12 +41,12 @@ export default class Lightbox {
init() {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
this.enable();
this.build();
this.enable();
}, { once: true });
} else {
this.enable();
this.build();
this.enable();
}
}
@@ -66,41 +66,42 @@ export default class Lightbox {
}
build() {
if (document.getElementById('lightbox')) return;
const wrapper = document.createElement('div');
wrapper.innerHTML = `
<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div>
<div id="lightbox" tabindex="-1" class="lightbox">
<div class="lb-outerContainer">
<div class="lb-container">
<img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" />
<div class="lb-nav">
<div class="lb-prev-area">
<a class="lb-prev" aria-label="Previous image" href="" role="button">${this.renderIcon('prev')}</a>
if (!document.getElementById('lightbox')) {
const wrapper = document.createElement('div');
wrapper.innerHTML = `
<div id="lightboxOverlay" tabindex="-1" class="lightboxOverlay"></div>
<div id="lightbox" tabindex="-1" class="lightbox">
<div class="lb-outerContainer">
<div class="lb-container">
<img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" />
<video class="lb-video" controls autoplay></video>
<div class="lb-nav">
<div class="lb-prev-area">
<a class="lb-prev" aria-label="Previous image" href="" role="button">${this.renderIcon('prev')}</a>
</div>
<div class="lb-next-area">
<a class="lb-next" aria-label="Next image" href="" role="button">${this.renderIcon('next')}</a>
</div>
</div>
<div class="lb-next-area">
<a class="lb-next" aria-label="Next image" href="" role="button">${this.renderIcon('next')}</a>
<div class="lb-loader">
<a class="lb-cancel" href="#">${this.renderIcon('cancel')}</a>
</div>
</div>
<div class="lb-loader">
<a class="lb-cancel" href="#">${this.renderIcon('cancel')}</a>
</div>
<div class="lb-dataContainer desktop">
<div class="lb-data">
<div class="lb-details">
<span class="lb-caption"></span>
</div>
<div class="lb-closeContainer">
<a class="lb-close" href="#" role="button">${this.renderIcon('close')}</a>
</div>
</div>
</div>
</div>
<div class="lb-dataContainer desktop">
<div class="lb-data">
<div class="lb-details">
<span class="lb-caption"></span>
</div>
<div class="lb-closeContainer">
<a class="lb-close" href="#" role="button">${this.renderIcon('close')}</a>
</div>
</div>
</div>
</div>
`;
document.body.append(...wrapper.children);
`;
document.body.append(...wrapper.children);
}
this.overlay = document.getElementById('lightboxOverlay');
this.lightbox = document.getElementById('lightbox');
@@ -114,11 +115,7 @@ export default class Lightbox {
this.dataContainer = this.lightbox.querySelector('.lb-dataContainer');
this.prev = this.lightbox.querySelector('.lb-prev');
this.next = this.lightbox.querySelector('.lb-next');
this.video = document.createElement('video');
this.video.className = 'lb-video';
this.video.controls = true;
this.video.autoplay = true;
this.image.insertAdjacentElement('afterend', this.video);
this.video = this.lightbox.querySelector('.lb-video');
this.setVisible(this.overlay, false);
this.setVisible(this.lightbox, false);
@@ -538,6 +535,7 @@ export default class Lightbox {
}
setImageTransform(transform) {
if (!this.image) return;
this.image.style.setProperty('--scale', String(transform.scale));
this.image.style.setProperty('--translate-x', `${transform.translateX}px`);
this.image.style.setProperty('--translate-y', `${transform.translateY}px`);
@@ -580,8 +578,8 @@ export default class Lightbox {
end() {
this.disableKeyboardNav();
this.video.pause();
this.video.removeAttribute('src');
this.video?.pause();
this.video?.removeAttribute('src');
this.container.classList.remove('lb-video-nav', 'moveable', 'moving');
window.removeEventListener('resize', this.boundOnResize);
window.removeEventListener('mousemove', this.boundOnDragMove);