Skip to content

Support image previews#747

Open
grighakobian wants to merge 12 commits intoreadium:developfrom
grighakobian:feature/image-preview
Open

Support image previews#747
grighakobian wants to merge 12 commits intoreadium:developfrom
grighakobian:feature/image-preview

Conversation

@grighakobian
Copy link
Contributor

Summary

This pull request partially addresses the feature request submitted on readium/mobile#10.

This PR adds TargetElement metadata to PointerEvent, enabling apps to detect when the user interacts with an image element(<img>, <svg>) and access its frame, source URL, and alt text. The TestApp demonstrates this with a fullscreen image preview viewer.

Navigator changes

  • JavaScript: Added extractTargetElement() in gestures.js that extracts metadata (bounding rect, tag, src, alt) from the nearest image element under the pointer. Added findNearestImageElement() to walk up the DOM tree.
  • PointerEvent.TargetElement: New struct with tag, src, alt, and frame properties, available on every -PointerEvent. The src URL is relativized against the publication base URL so it can be used directly with Publication.get().
  • Frame coordinates are converted through the full coordinate space chain (JS → spread view → navigator view).

TestApp demo

  • ImagePreviewViewController — fullscreen image viewer with UIScrollView-based pinch-to-zoom (1x–4x).
  • ImagePreviewTransition — custom spring-based animated transition from the image's in-page position to centered aspect-fit, and back on dismiss.
  • ImagePreviewNavigationController — wraps the preview and owns the custom transitioning delegate.
    Wired via a .tap observer in VisualReaderViewController.

Design decisions

  • Image-only scope (<img> and <svg>) — Video and audio elements don't benefit from a zoom preview, so detection is limited to image tags to keep the implementation focused.
  • Single tap trigger — A double-tap detector would add a delay to all tap events. Using a single tap avoids this, consistent with the behavior in Apple Books.
  • No new gesture event types — The library already provides the InputObserving API, which can be used to detect double-tap, pinch, and other gestures. Rather than adding dedicated gesture events, this PR exposes TargetElement metadata on PointerEvent, giving apps the building blocks to implement custom gesture handling on top of the existing API.
  • Preview logic in TestApp, not Navigator — The Navigator provides element metadata; how to present it is left to the app.

Previews

iPhone iPad
iphone.mov
ipad.mov

@grighakobian grighakobian force-pushed the feature/image-preview branch 2 times, most recently from cf68d97 to cdf6b48 Compare March 18, 2026 14:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant