UNOFFICIAL MouseWheelZoom Mod

redstorm

I would really like to say many thanks to the Karl for creating this tool, it's really very useful. One critical thing for me is the possibility of mousewheel zoom option, centered at current cursor. I spend some days while trying to figure out how the main program works and its a really complex creation of piecing together many libs and logic. I also looked at forum post about mousewheel, and to continue this discussion there really is no need to update the photoswipe library! It can be reimplemented in current version without many changes.

I have made a patch for current 0.8.4 version which seems to be working very good.
We need to patch functions setupDesktopZoom, handleMouseWheel, toggleDesktopZoom
in local assets main program _files/assets/files.photo.gallery@0.8.4/js/files.js :

Locate setupDesktopZoom:function(t) and replace function content with

Xt={};var i="wheel mousewheel DOMMouseScroll";re.bind(e,i,n.handleMouseWheel);xe("unbindEvents",(function(){Xt&&re.unbind(e,i,n.handleMouseWheel)})),n.mouseZoomedIn=!1;var a,o=function(){n.mouseZoomedIn&&(e.classList.remove("pswp--zoomed-in"),n.mouseZoomedIn=!1),re.toggle_class(e,"pswp--zoom-allowed",g<=1),l()},l=function(){a&&(e.classList.remove("pswp--dragging"),a=!1)};xe("resize",o),xe("afterChange",o),xe("pointerDown",(function(){n.mouseZoomedIn&&(a=!0,e.classList.add("pswp--dragging"))})),xe("pointerUp",l),t||o()

What is changed: call re.bind(e,i,n.handleMouseWheel) without listen function, because it prevents wheel bind function at the first run and some changes in "current zoom equal or less 1" logic, which allow us to show zoom button always.

Locate handleMouseWheel:function(e) and replace it

if (n.currItem.type == "video") return; let zoomFactor = -e.deltaY; if (e.deltaMode === 1) { zoomFactor *= 0.05; } else { zoomFactor *= e.deltaMode ? 1 : 0.005; } if (e.ctrlKey) {event.preventDefault(); zoomFactor *= 2;} if (e.shiftKey) zoomFactor *= 0.1; zoomFactor = 2 ** zoomFactor; const destZoomLevel = g * zoomFactor; centerPoint = { x: e.clientX, y: e.clientY }; var zoomOut = destZoomLevel < n.currItem.initialZoomLevel; n.mouseZoomedIn = !zoomOut; n.zoomTo(destZoomLevel, centerPoint, 333); re.toggle_class(e, 'pswp--zoomed-in', !zoomOut); if(g<=n.currItem.fitRatio)return!o.closeOnScroll||qe||R?e.preventDefault():Math.abs(e.deltaY)>2&&(r=!0,n.close()),!0; e.stopPropagation(), Xt.x = 0; e.preventDefault();

Here is the main wheel function, it was taken partially from latest photoswipe sources and adopted to current version. Some part of the code related to panTo function was deleted intentionally as it was only making interference. Also it changes the zoom button +/- status depending on current zoom value more or less than initial.
Video object zooming is not working right as intended, so processing a wheel for it is skipped.
Additional functions:
[shift] + wheel = slower zooming
[ctrl] + wheel = faster zooming

And the same with function toggleDesktopZoom:function(t)

t=t||{x:ce.x/2+de.x,y:ce.y/2+de.y};var i=o.getDoubleTapZoom(!0,n.currItem),a=g>n.currItem.initialZoomLevel||g<n.currItem.initialZoomLevel;n.mouseZoomedIn=!a,n.zoomTo(a?n.currItem.initialZoomLevel:i,t,333),re.toggle_class(e,"pswp--zoomed-in",!a)

This updates zoom button logic. If current zoom more or less that initial then it will return to it, but will still toggle between double tap and initial zoom as it behaved previously.

So it's the main piece of code, which is effectively enabling mousewheel zoom + additional logic behind it.
I must also note some other fixes/updated which i consider significant.

More zoom on touchscreen device, this allows more detailed zoom.

Locate part of string
e||t.initialZoomLevel<.7?1:1.33},maxSpreadZoom:1};Object.assign(o,a);var
and replace it with
e||t.initialZoomLevel<.7?4:1.33},maxSpreadZoom:4};Object.assign(o,a);var

File information window not working in chrome, i don't know why it can't find the BBB function, but replacing this with null fixed it, working in chrome and firefox and on mobile devices.

--type-color-hsl:"+c.split(")")[0].split("(")[1].split(",").join(""):BBB},R(P.preview,"modal-preview

--type-color-hsl:"+c.split(")")[0].split("(")[1].split(",").join(""):null},R(P.preview,"modal-preview

Karl

I might look into this again in a future release then. I personally don't use mouse wheel, because it's not part of mobile devices, Mac devices (trackpad) or PC laptops (trackpad). But I understand many still use it.

redstorm

EDIT Noticed some weird behavior when added more than 10 images to one directory and tried to open last ones. Looks like centerPoint somehow offsets to the top of the screen. So i missed that offset variable, and this part of code in handleMouseWheel function needs to be modified :

centerPoint = { x: e.clientX + de.x, y: e.clientY + de.y }

Also, while testing noticed that in function handleMouseWheel the following part

re.toggle_class(e, "pswp--zoomed-in", !zoomOut);

is creating an error Uncaught TypeError: Cannot read properties of undefined (reading 'add') in chrome, and in firefox Uncaught TypeError: can't access property "add", e.classList is undefined also preventing wheel function to work. It's related to zoom button +/- visible status only, so can be safely removed. I think it's something related to framework / template overlapping objects or function names, their visibility range and initialization order.

redstorm

And a little fun part. I plugged a mouse via usb-c <-> usb-a host converter into my samsung android phone, and the mouse wheel zoom... Yes, not working as expected! 🙂 But we can fix that also!

If we modify function initDesktopZoom to directly call setupDesktopZoom in any case... :

Q.is_dual_input ? xe("mouseUsed", (function () { n.setupDesktopZoom(); })) : Q.is_pointer ? n.setupDesktopZoom(!0) : n.setupDesktopZoom()

or a "human simplified form"

if ( Q.is_dual_input ) { xe("mouseUsed", (function () {n.setupDesktopZoom(); })); } else if (Q.is_pointer) { n.setupDesktopZoom(true); else { n.setupDesktopZoom(); }

We can use the mousewheel to zoom on android device like on desktop now!
I did not tested that on iphone yet, as i need to find where i put the lightning to usb-a host converter first...

Karl

redstorm Can you check if any mousewheel behavior is built-in to latest Photoswipe?
https://photoswipe.com/

Files Gallery already uses a customized earlier version of Photoswipe.

It seems pointless to have to re-invent the wheel 😆

redstorm

Karl re-invent the wheel 😆

Lol'd, thats sounds very funny, indeed ^^
I would say "reimplement" instead of "reinvent".

Karl Can you check if any mousewheel behavior is built-in to latest Photoswipe?

I have borrowed some code from photoswipe git src/js/scroll-wheel.js and adopted it to the current 0.8.4 version.
Nevertheless, the "reimplementation" of wheel is working fine for me now without any really noticeable issues and im very happy with it.

PS. What is probably must be done to make it final version:

Fix toggle_class in "pswp--zoomed-in" error
Carefully analyze initDesktopZoom switch cases on different devices with different input capabilities
(when we should call setupDesktopZoom or not)
Probably some sensivity options can be added to external config,
they currently hardcoded as some constants ("0.05", "0.005").
Fix weird video object pan behavior when zooming, can be observed if we don't use
if (n.currItem.type == "video") return
But is that functionality of video object zoom is really needed? And to use zoom only with images better use
if (n.currItem.type != "image") return