Panzoom toggle Gestures

[eriksiemund]

Is your feature request related to a problem? Please describe.

Hi!
Currently, it doesn't seem to be possible to disable the effects of gestures. There is the option "gestures", but this only allows to enable/disable them and this only at initialization.

Describe the solution you'd like

It would be great if there were a few flags that I could set in my code, that toggle the effects of certain gestures. In my specific use case, it would be great to disable panning unless the image scale is large enough to extend beyond either dimension. I have the panzoom instance inside a slider and would like the panning/dragging gesture to go though to the slider before that moment and be captured by panzoom once it's actually extending the container. I could also see other scenario, where I would like to enable or disable panning, pinching, scrolling etc. depending on the context to allow those gestures to be captured by the parent element.

Describe alternatives you've considered

I've tried using the gestures option, different combinations of pointer-events, touch-action and event.preventDefault, as well as switching between the 'mousemove' panMode and 'drag' depending on a condition. This was hacky but working as I would like it, but then again, it's drag by default on mobile so I couldn't go with this.

Additional context

Using panzoom v6.1.14

Many thanks in advance

[fancyapps]

Hi,

First, this already works. Panzoom is designed to run inside a Carousel slide, and that combination is exactly how Fancybox itself is built: it creates the layout with Carousel and uses the Zoomable plugin to add zoom and pan functionality to the slide content.

But, almost every Panzoom option can be a function, and it is re-evaluated every time the option is read — not only at initialization. So you never need to re-create the instance to change behavior:

Panzoom(container, {
  wheelAction: (ref) => (myCondition ? "zoom" : false),
  clickAction: (ref) => (myCondition ? "toggleFull" : false),
  panMode: (ref) => (myCondition ? "drag" : "mousemove"),
});

gestures works the same way, and it is re-checked on every gesture start, so it does work as a runtime kill switch:

gestures: (ref) => (myCondition ? {} : false),

Note, it has to be truthy at initialization, if it resolves to false at the moment the instance becomes ready, the Gestures instance is never created and cannot be switched back on later.

[eriksiemund]

Hi,
Thanks for pointing out that the condition has to be truthy at init. I was already using the gestures option as a function before, but the condition was false when the instance became ready. Now it's working, I appreciate you taking the time to help me!