diff --git a/copyparty/web/baguettebox.js b/copyparty/web/baguettebox.js index 21d9cba3..3a6e9880 100644 --- a/copyparty/web/baguettebox.js +++ b/copyparty/web/baguettebox.js @@ -29,6 +29,7 @@ window.baguetteBox = (function () { isOverlayVisible = false, touch = {}, // start-pos touchFlag = false, // busy + scrollTimer = 0, re_i = /^[^?]+\.(a?png|avif|bmp|gif|heif|jpe?g|jfif|svg|webp)(\?|$)/i, re_v = /^[^?]+\.(webm|mkv|mp4)(\?|$)/i, anims = ['slideIn', 'fadeIn', 'none'], @@ -91,6 +92,30 @@ window.baguetteBox = (function () { touchendHandler(); }; + var overlayWheelHandler = function (e) { + if (!options.noScrollbars || anymod(e)) + return; + + ev(e); + + var x = e.deltaX, + y = e.deltaY, + d = Math.abs(x) > Math.abs(y) ? x : y; + + if (e.deltaMode) + d *= 10; + + if (Date.now() - scrollTimer < (Math.abs(d) > 20 ? 100 : 300)) + return; + + scrollTimer = Date.now(); + + if (d > 0) + showNextImage(); + else + showPreviousImage(); + }; + var trapFocusInsideOverlay = function (e) { if (overlay.style.display === 'block' && (overlay.contains && !overlay.contains(e.target))) { e.stopPropagation(); @@ -451,6 +476,7 @@ window.baguetteBox = (function () { bind(document, 'keyup', keyUpHandler); bind(document, 'fullscreenchange', onFSC); bind(overlay, 'click', overlayClickHandler); + bind(overlay, 'wheel', overlayWheelHandler); bind(btnPrev, 'click', showPreviousImage); bind(btnNext, 'click', showNextImage); bind(btnClose, 'click', hideOverlay); @@ -473,6 +499,7 @@ window.baguetteBox = (function () { unbind(document, 'keyup', keyUpHandler); unbind(document, 'fullscreenchange', onFSC); unbind(overlay, 'click', overlayClickHandler); + unbind(overlay, 'wheel', overlayWheelHandler); unbind(btnPrev, 'click', showPreviousImage); unbind(btnNext, 'click', showNextImage); unbind(btnClose, 'click', hideOverlay);