The zoom percentage display had two bugs:
1. Scroll-zoom never updated the status bar percentage because the
'zoom' event listener was registered inside the magnifier-toggle
click handler (only added on click, and re-added on each click).
2. After reset (fit-page), the status bar showed '100%' but the
zoom-in button treated the current scale as 1.0 (absolute), not
the fit-page scale (e.g. 0.3). This caused a wild zoom jump
from '100%' to '120%' that was actually a 4x visual change.
Fix by introducing a #baseScale field that captures the fit-page or
fit-width scale whenever the component renders in auto-fit mode. The
new currentScale getter exposes the actual transform scale, and
zoomPercent expresses it as a percentage of baseScale. All zoom-in/
zoom-out handlers (buttons and keyboard) now use currentScale instead
of getAttribute('zoom') || 1, and all percentage displays use
zoomPercent. The zoom event listener is registered once at setup
rather than inside the magnifier toggle handler.
Also removes all diagnostic console.log statements from fixed-layout.js
and reader.js.
When pressing 0 to reset zoom, the code was calling
removeAttribute('zoom') on the renderer, which removed the DOM
attribute but left the internal zoom/transform state stale. This meant
subsequent zoom operations would compound on the old hidden state.
Replace with the new resetZoom() method that properly clears the
numeric zoom and triggers a clean re-render.
Magnifier (fixed-layout.js):
- Rewrite magnifier to use CSS background-image for comics (blob URLs
from iframe img elements) and canvas drawImage for PDFs. Replaces
broken iframe.cloneNode approach that created empty sandboxed clones.
- Detect which iframe is under the cursor by checking bounding rects,
so magnifier works on both left and right panes.
- Forward mousemove events from iframe documents to handleMagnifierMove
so the magnifier follows the cursor inside iframes.
- Add background-repeat: no-repeat to lens styles.
- Add zoomMagnifierEnabled getter for external state checks.
Interaction mode toggle (PDF only):
- Add 'interaction-mode' observed attribute with 'select'/'pan' values.
- In select mode (default for PDFs): mouse events pass through for text
selection; Shift+drag enables panning as a fallback.
- In pan mode: drag-to-pan works as normal.
- Comic books always use pan mode (no text to select).
- Auto-detect PDF via #isPDF flag set in #showSpread from onZoom presence.
- Add isPDF getter so reader.js can show/hide the toggle button.
- Add toggle button in reader.html, hidden by default, shown for PDFs
via the view 'load' event.
- Escape key dismisses the magnifier.
Zoom percentage display (reader.js):
- Dispatch 'zoom' CustomEvent from #zoomByRatio with the new scale.
- Listener in reader.js updates the percentage display on scroll zoom.
Also includes minor formatting (line wrapping) in #goLeft/#goRight.
This commit adds comprehensive zoom control capabilities for fixed-layout
e-book content, allowing users to zoom in, out, and reset zoom levels for
better readability and content inspection.
Key features added:
- Zoom control UI with +/- buttons and percentage display
- Keyboard shortcuts for zoom operations (Ctrl/Cmd +, -, 0)
- Mouse wheel zoom with Ctrl/Cmd modifier key
- Drag-to-pan functionality when zoomed in
- Smooth zoom transitions and state management
- Zoom constraints (min/max limits) to prevent over-zooming
Changes include:
- FixedLayout: Enhanced with zoom state management, drag handlers,
and keyboard/mouse event listeners for intuitive zoom control
- Reader UI: Added zoom control toolbar with visual feedback
- FixedLayout renderer integration with reader zoom controls
The zoom controls provide a seamless experience for users who need to
examine fixed-layout content more closely or adjust content size for
their preferred reading experience.
- Support the `prefix` attribute (for the `property` attr on `<meta>`)
- Localized titles, names (including `sortAs`)
- `belongsTo`, including `calibre:series`
- `altIdentifier`, converted to URN where possible
- Remove `producer`. It's now `contributor` with `role: 'bkp'`.
NOTE: this is a breaking change if you assumed that `title` will always
be a string, `author` will always be an array, etc.
Massively simplify margin/padding and header/footer layout and eliminate
unnecessary resizes and resize loops.
Also remove layout and style API from View, as these are only applicable
to the paginator.
The original idea of including this function in `./view.js` seems to be
that it's shared between the demo reader and Foliate. But
- It's currently not used in the demo reader any more.
- It works, but it lacks features.
- In any case it's not coupled with anything else in `./view.js`, so at
best it should be a separate module.
Also: remove unused variable and fix indentation
- Remove special handling of footnotes
- Open all links by default
- Reader can return `true` to prevent default action
- Expose link handling as a method, which the reader can use to set up
links outside renderers (e.g. in popup footnotes)
john-okeefe
John Factotum
Balki