Error resolved of zoom in and also add multilangual #1427
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
his pull request introduces a comprehensive internationalization (i18n) system to the BookReader UI, enabling multi-language support. It refactors all user-facing text strings to use a centralized, key-based translation framework, making the component more accessible and user-friendly for a global audience.
The initial implementation includes full dictionary support for English (en) and German (de).
Key Features & Implementation
Centralized i18n Core (src/i18n/index.js): A new I18n class manages language loading, translation lookups (i18n.t()), and variable interpolation (e.g., i18n.t('key', { count: 5 })). It defaults to English if a translation key is missing in the selected language.
Language Dictionaries (src/i18n/languages/): All UI strings are now stored in language-specific files (en.js, de.js). This structure makes it straightforward to add new languages in the future.
UI Integration: Core components like Navbar.js, Toolbar.js, and the SearchView have been updated to replace hardcoded strings with calls to the i18n.t() function.
Configuration Options (options.js):
enableI18n: A new boolean flag (defaulting to true) to enable or disable the i18n system.
interfaceLanguage: Allows developers to explicitly set the UI language (e.g., 'de').
Automatic Language Detection: A new initializeLanguage() utility function automatically sets the language based on user preferences in localStorage or the browser's language settings, falling back to English.
Language Switcher Component (LanguageSwitcher.js): A new, self-contained UI component has been added. While not yet integrated into the toolbar by default, it provides a ready-to-use dropdown for users to switch languages dynamically. It includes styling, accessibility features, and event handling.
Documentation and Demo:
src/i18n/README.md: Comprehensive documentation for the new i18n system.
src/i18n/demo.html: A new demo page to showcase and test the i18n features in isolation.
Changes by File
New Files (src/i18n/*):
index.js: Core i18n logic and instance.
languages/en.js, languages/de.js: Translation dictionaries.
LanguageSwitcher.js: Reusable UI component for language selection.
language-switcher.css: Styles for the switcher.
README.md, demo.html, integration-example.js: Documentation and examples.
Modified Files:
src/BookReader.js: Initializes the i18n system based on options.
src/BookReader/Navbar/Navbar.js: Replaced hardcoded labels and titles with i18n keys.
src/BookReader/Toolbar/Toolbar.js: Replaced all UI text in the toolbar and share dialog with i18n keys.
src/BookReader/options.js: Added enableI18n and interfaceLanguage options. Default navigation control labels are now i18n keys.
src/plugins/search/view.js: Updated search results text and button titles to be translatable.
Also this PR updates the zoomIn() method in Mode1UpLit so that when the zoom level exceeds 2.0, the view automatically recenters on the current page, matching the behavior in jumpToIndex() for high zoom navigation. This improves the reading experience by preventing the page from drifting off-center when incrementally zooming in.
Changes
Updated zoomIn() to:
Detect when the new zoom level is greater than 2.0.
Call jumpToIndex() for the first visible page after zoom to re-center it.
Keeps existing throttled updates to rendered pages and visible region refresh.
Ensures behavior is consistent between high zoom page jumps and zoom button presses.
Reasoning
Previously, zooming in at high zoom levels would not adjust the scroll position, causing the target page to shift out of center view. This was inconsistent with the jumpToIndex() behavior and made fine zoom adjustments frustrating.
Testing
Opened a book in Mode1Up view.
Zoomed in past 2.0 scale using the zoom button.
Confirmed that the current page remains centered after each click.
Verified normal zoom (< 2.0) behavior is unaffected.
Impact
Improves usability for readers who prefer high magnification by keeping their focus point stable when zooming in.