Change photo with a two-finger horizontal trackpad swipe

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');