Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Image Dialog with Zoom and Dismiss Functionality in EPUB #611

Closed

Conversation

nageshwararao1988
Copy link

This PR introduces a feature in the EPUB viewer where tapping on an image opens it in a modal dialog with zoom functionality. The following updates are included:

Image Modal Dialog: Images can now be tapped to open in a dialog.
Zoom Support: Users can zoom in and out of the displayed image for better visibility.
Dismiss Button: A "Dismiss" button is provided in the top-right corner of the dialog, allowing users to close it and return to the main content.
User Experience Improvements: Ensures a seamless interaction without interfering with the reading experience.
This feature enhances accessibility and usability for users who want to examine images closely within the EPUB content.

…onality enabled. Additionally, there should be a Dismiss button on the top right corner to allow the user to go back.
@mickael-menu
Copy link
Member

Thank you for opening a PR @nageshwararao1988.

Unfortunately, the implementation does not fit the principles of our toolkit as you implemented your specific use case instead of a general solution that would work with other apps.

For example:

  • What if an app wants to do something different than zooming the image when tapping on it? Or zoom the image when doing a long tap or a pinch instead (if we implement support for these gestures in the future).
  • The animation and the zooming UI are hard-coded in the toolkit, but should be customizable by the app. An integrator could want a different way to close the zooming view, or display the alt text of the image underneath. A core principle of the toolkit is to let the application provide its own UX.
  • The Dismiss button is hard-coded and cannot be translated.

A good way to implement this feature in Readium would be:

  • Adding information about the target element in the TapEvent sent to the host app, including the resource href if it's an image, and the position rect in the navigator view.
  • Implementing the zooming UI in the test app when receiving a TapEvent on an image, by getting the content of the image using its href, and for example implementing a zooming animation using the position rect in the TapEvent.

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.

2 participants