diff --git a/photologue/static/gallery_detail.js b/photologue/static/gallery_detail.js index ed345d6..56cbb94 100644 --- a/photologue/static/gallery_detail.js +++ b/photologue/static/gallery_detail.js @@ -5,7 +5,7 @@ // Init gallery -lightGallery(document.getElementById('lightgallery'), { +const lgInstance = lightGallery(document.getElementById('lightgallery'), { selector: 'a.photo-item', plugins: [lgAdmin, lgHash, lgThumbnail, lgZoom, lgVideo], autoplayFirstVideo: true, @@ -26,6 +26,41 @@ lightGallery(document.getElementById('lightgallery'), { //Add download warning code const lgContainer = document.getElementById('lightgallery'); +// Change photo with a two-finger horizontal swipe on a trackpad. Without this the +// browser reads the gesture as "go back" and leaves the gallery. +const SWIPE_DISTANCE = 80; // horizontal pixels before switching photo +const SWIPE_COOLDOWN = 400; // ms, so the inertia of one swipe moves one photo +const SWIPE_GAP = 200; // ms of quiet that starts a new gesture +let swipeOuter = null; +let swipeAmount = 0; +let swipeLastWheel = 0; +let swipeLastMove = 0; + +function onTrackpadSwipe(e) { + // Leave vertical scrolling, and zoomed in photos, alone. + if (Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return; + e.preventDefault(); + if (swipeOuter.classList.contains('lg-zoomed')) return; + + const now = performance.now(); + if (now - swipeLastWheel > SWIPE_GAP) swipeAmount = 0; + swipeLastWheel = now; + if (now - swipeLastMove < SWIPE_COOLDOWN) return; + + swipeAmount += e.deltaX; + if (Math.abs(swipeAmount) < SWIPE_DISTANCE) return; + if (swipeAmount > 0) lgInstance.goToNextSlide(); + else lgInstance.goToPrevSlide(); + swipeAmount = 0; + swipeLastMove = now; +} + +lgContainer.addEventListener('lgAfterOpen', () => { + swipeOuter = document.querySelector('.lg-outer'); + swipeAmount = 0; + swipeOuter.addEventListener('wheel', onTrackpadSwipe, { passive: false }); +}); + // On attend que la galerie soit ouverte pour cibler le bouton lgContainer.addEventListener('lgAfterOpen', () => { const downloadBtn = document.querySelector('.lg-download');