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

32
src/components/project.vue
View File

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

4
src/components/projectPost.vue
View File

@@ -56,7 +56,7 @@
return this.mouseOverDrill?'drill-message':'marker'; return this.mouseOverDrill?'drill-message':'marker';
}, },
anchorLink() { 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() { modeHisto() {
return (this.project.currProject.mode == this.consts.modes.histo); return (this.project.currProject.mode == this.consts.modes.histo);
@@ -104,7 +104,7 @@
this.popupRequested = true; this.popupRequested = true;
if(this.isMobile()) this.project.toggleFeedPanel(false, 'panToInstant'); 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(() => { return this.map.panToBetweenPanels(this.relatedMarkerLatLng, this.focusZoomLevel, iAnimDuration).then(() => {
this.openMarkerPopup(false); this.openMarkerPopup(false);

74
src/scripts/lightbox.js
View File

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