Feature: allow easy acces to next image on small devices (in fullscreen)

[sukima]

On a small device (max-width: 700px) the previous and next buttons are hidden. The problem is that in fullscreen mode (where I would look at images) there is no easy way advance to the next image.

Use case

I have a directory of comic book pages. I am reading them on my phone. To get the most h5ai is set to fullscreen mode. This hides the next button and also the toolbar.

Currently I have to click to expose the toolbar then carefully, deliberately, and quickly click the next button which is very hard to reach with a thumb on a mobile phone.

Feature request

I would love to just tap the image and have it advance to the next one.

Caveats

This feature would have to be disabled for non-images as the next doesn't make sense in that case (playing movies, scrolling text, etc.)

What I've done

I looked into adding an event to the #pv-container but quickly realized that the scoping of the next function makes it impossible to access from the preview-img session without a significant refactoring. Also the preview has no knowledge of which preview session is in use at any given time.

I also attempted to see if I could use CSS to make the #pv-next-area a fullscreen overlay with visibility hidden but it seems that somewhere click events are squashed.

My knowledge of the JavaScript in this project is too green for me properly implement this feature and would require guidance. Hence the fall back of submitting a request and hoping it is easier then I think it is.

[mjpieters]

On mobile devices, previews should really support swiping, like photoswipe.

[mjpieters]

Years later, I've implemented touch support by creating an add-on script you can place in the public/ext directory. It maps gestures (left and right swipes, plus doubletaps) on the preview into keyboard events that h5ai already understands.

I've made it Open Source, MIT license (matching h5ai), at https://gist.github.com/mjpieters/f4d3a250091a6626792e317d35c2d89d

@lrsjng I'd be happy to port this to a PR for h5ai; only previewTouchControls from the gist would need porting and can be simplified using the utilities available to h5ai JS code. If placed in lib/ext/preview/preview.js the code can directly call next(), prev(), toggleFullscreen() rather than send keyDown events.