Bookhoard/foliate-js
1
0
Fork 0
mirror of https://github.com/john-okeefe/foliate-js.git synced 2026-09-09 11:29:14 -04:00
Code Issues Packages Projects Releases Wiki Activity

Implement zoom control functionality for fixed-layout e-books

Browse Source 
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.
This commit is contained in:
john-okeefe
2026-04-16 21:37:54 -04:00
parent 76dcd8f0f7
commit 3f9ab7528b
3 changed files with 1306 additions and 621 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fixed-layout.js
+761 -283
View File
File diff suppressed because it is too large Load Diff
reader.html
+219 -153
View File
@@ -1,58 +1,61 @@
<!DOCTYPE html> <!doctype html>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="color-scheme" content="light dark"> <meta name="color-scheme" content="light dark" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self' blob:; script-src 'self'; style-src 'self' blob: 'unsafe-inline'; img-src 'self' blob: data:; connect-src 'self' blob: data: *; frame-src blob: data:; object-src blob: data:; form-action 'none';"> <meta
http-equiv="Content-Security-Policy"
content="default-src 'self' blob:; script-src 'self'; style-src 'self' blob: 'unsafe-inline'; img-src 'self' blob: data:; connect-src 'self' blob: data: *; frame-src blob: data:; object-src blob: data:; form-action 'none';"
/>
<title>E-Book Reader</title> <title>E-Book Reader</title>
<style> <style>
:root { :root {
--active-bg: rgba(0, 0, 0, .05); --active-bg: rgba(0, 0, 0, 0.05);
} }
@supports (color-scheme: light dark) { @supports (color-scheme: light dark) {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--active-bg: rgba(255, 255, 255, .1); --active-bg: rgba(255, 255, 255, 0.1);
} }
} }
} }
html { html {
height: 100%; height: 100%;
} }
body { body {
margin: 0 auto; margin: 0 auto;
height: 100%; height: 100%;
font: menu; font: menu;
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
} }
#drop-target { #drop-target {
height: 100vh; height: 100vh;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
visibility: hidden; visibility: hidden;
} }
#drop-target h1 { #drop-target h1 {
font-weight: 900; font-weight: 900;
} }
#file-button { #file-button {
font: inherit; font: inherit;
background: none; background: none;
border: 0; border: 0;
padding: 0; padding: 0;
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
} }
.icon { .icon {
display: block; display: block;
fill: none; fill: none;
stroke: currentcolor; stroke: currentcolor;
stroke-width: 2px; stroke-width: 2px;
} }
.empty-state-icon { .empty-state-icon {
margin: auto; margin: auto;
} }
.toolbar { .toolbar {
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
@@ -64,30 +67,30 @@ body {
padding: 6px; padding: 6px;
transition: opacity 250ms ease; transition: opacity 250ms ease;
visibility: hidden; visibility: hidden;
} }
.toolbar button { .toolbar button {
padding: 3px; padding: 3px;
border-radius: 6px; border-radius: 6px;
background: none; background: none;
border: 0; border: 0;
color: GrayText; color: GrayText;
} }
.toolbar button:hover { .toolbar button:hover {
background: rgba(0, 0, 0, .1); background: rgba(0, 0, 0, 0.1);
color: currentcolor; color: currentcolor;
} }
#header-bar { #header-bar {
top: 0; top: 0;
} }
#nav-bar { #nav-bar {
bottom: 0; bottom: 0;
} }
#progress-slider { #progress-slider {
flex-grow: 1; flex-grow: 1;
margin: 0 12px; margin: 0 12px;
visibility: hidden; visibility: hidden;
} }
#side-bar { #side-bar {
visibility: hidden; visibility: hidden;
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
@@ -101,15 +104,19 @@ body {
flex-direction: column; flex-direction: column;
background: Canvas; background: Canvas;
color: CanvasText; color: CanvasText;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), 0 0 40px rgba(0, 0, 0, .2); box-shadow:
transition: visibility 0s linear 300ms, transform 300ms ease; 0 0 0 1px rgba(0, 0, 0, 0.2),
} 0 0 40px rgba(0, 0, 0, 0.2);
#side-bar.show { transition:
visibility 0s linear 300ms,
transform 300ms ease;
}
#side-bar.show {
visibility: visible; visibility: visible;
transform: translateX(0); transform: translateX(0);
transition-delay: 0s; transition-delay: 0s;
} }
#dimming-overlay { #dimming-overlay {
visibility: hidden; visibility: hidden;
position: fixed; position: fixed;
z-index: 2; z-index: 2;
@@ -117,188 +124,247 @@ body {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, .2); background: rgba(0, 0, 0, 0.2);
opacity: 0; opacity: 0;
transition: visibility 0s linear 300ms, opacity 300ms ease; transition:
} visibility 0s linear 300ms,
#dimming-overlay.show { opacity 300ms ease;
}
#dimming-overlay.show {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
transition-delay: 0s; transition-delay: 0s;
} }
#side-bar-header { #side-bar-header {
padding: 1rem; padding: 1rem;
display: flex; display: flex;
border-bottom: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
align-items: center; align-items: center;
} }
#side-bar-cover { #side-bar-cover {
height: 10vh; height: 10vh;
min-height: 60px; min-height: 60px;
max-height: 180px; max-height: 180px;
border-radius: 3px; border-radius: 3px;
border: 0; border: 0;
background: lightgray; background: lightgray;
box-shadow: 0 0 1px rgba(0, 0, 0, .1), 0 0 16px rgba(0, 0, 0, .1); box-shadow:
0 0 1px rgba(0, 0, 0, 0.1),
0 0 16px rgba(0, 0, 0, 0.1);
margin-inline-end: 1rem; margin-inline-end: 1rem;
} }
#side-bar-cover:not([src]) { #side-bar-cover:not([src]) {
display: none; display: none;
} }
#side-bar-title { #side-bar-title {
margin: .5rem 0; margin: 0.5rem 0;
font-size: inherit; font-size: inherit;
} }
#side-bar-author { #side-bar-author {
margin: .5rem 0; margin: 0.5rem 0;
font-size: small; font-size: small;
color: GrayText; color: GrayText;
} }
#toc-view { #toc-view {
padding: .5rem; padding: 0.5rem;
overflow-y: scroll; overflow-y: scroll;
} }
#toc-view li, #toc-view ol { #toc-view li,
#toc-view ol {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
#toc-view a, #toc-view span { #toc-view a,
#toc-view span {
display: block; display: block;
border-radius: 6px; border-radius: 6px;
padding: 8px; padding: 8px;
margin: 2px 0; margin: 2px 0;
} }
#toc-view a { #toc-view a {
color: CanvasText; color: CanvasText;
text-decoration: none; text-decoration: none;
} }
#toc-view a:hover { #toc-view a:hover {
background: var(--active-bg); background: var(--active-bg);
} }
#toc-view span { #toc-view span {
color: GrayText; color: GrayText;
} }
#toc-view svg { #toc-view svg {
margin-inline-start: -24px; margin-inline-start: -24px;
padding-inline-start: 5px; padding-inline-start: 5px;
padding-inline-end: 6px; padding-inline-end: 6px;
fill: CanvasText; fill: CanvasText;
cursor: default; cursor: default;
transition: transform .2s ease; transition: transform 0.2s ease;
opacity: .5; opacity: 0.5;
} }
#toc-view svg:hover { #toc-view svg:hover {
opacity: 1; opacity: 1;
} }
#toc-view [aria-current] { #toc-view [aria-current] {
font-weight: bold; font-weight: bold;
background: var(--active-bg); background: var(--active-bg);
} }
#toc-view [aria-expanded="false"] svg { #toc-view [aria-expanded="false"] svg {
transform: rotate(-90deg); transform: rotate(-90deg);
} }
#toc-view [aria-expanded="false"] + [role="group"] { #toc-view [aria-expanded="false"] + [role="group"] {
display: none; display: none;
} }
.menu-container { .menu-container {
position: relative; position: relative;
} }
.menu, .menu ul { .menu,
.menu ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.menu { .menu {
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
right: 0; right: 0;
background: Canvas; background: Canvas;
color: CanvasText; color: CanvasText;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), 0 0 16px rgba(0, 0, 0, .1); box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.2),
0 0 16px rgba(0, 0, 0, 0.1);
padding: 6px; padding: 6px;
cursor: default; cursor: default;
} }
.menu.show { .menu.show {
visibility: visible; visibility: visible;
} }
.menu li { .menu li {
padding: 6px 12px; padding: 6px 12px;
padding-left: 24px; padding-left: 24px;
border-radius: 6px; border-radius: 6px;
} }
.menu li:hover { .menu li:hover {
background: var(--active-bg); background: var(--active-bg);
} }
.menu li[aria-checked="true"] { .menu li[aria-checked="true"] {
background-position: center left; background-position: center left;
background-repeat: no-repeat; background-repeat: no-repeat;
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E'); background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");
} }
.popover { .popover {
background: Canvas; background: Canvas;
color: CanvasText; color: CanvasText;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), 0 0 16px rgba(0, 0, 0, .1), 0 0 32px rgba(0, 0, 0, .1); box-shadow:
} 0 0 0 1px rgba(0, 0, 0, 0.2),
.popover-arrow-down { 0 0 16px rgba(0, 0, 0, 0.1),
0 0 32px rgba(0, 0, 0, 0.1);
}
.popover-arrow-down {
fill: Canvas; fill: Canvas;
filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .2)); filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.2));
} }
.popover-arrow-up { .popover-arrow-up {
fill: Canvas; fill: Canvas;
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .2)); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.2));
} }
</style> </style>
<input type="file" id="file-input" hidden> <input type="file" id="file-input" hidden />
<div id="drop-target" class="filter"> <div id="drop-target" class="filter">
<div> <div>
<svg class="icon empty-state-icon" width="72" height="72" aria-hidden="true"> <svg
<path d="M36 18s-6-6-12-6-15 6-15 6v42s9-6 15-6 12 6 12 6c4-4 8-6 12-6s12 2 15 6V18c-6-4-12-6-15-6-4 0-8 2-12 6m0 0v42"/> class="icon empty-state-icon"
</svg> width="72"
<h1>Drop a book here!</h1> height="72"
<p>Or <button id="file-button">choose a file</button> to open it.</p> aria-hidden="true"
</div> >
<path
d="M36 18s-6-6-12-6-15 6-15 6v42s9-6 15-6 12 6 12 6c4-4 8-6 12-6s12 2 15 6V18c-6-4-12-6-15-6-4 0-8 2-12 6m0 0v42"
/>
</svg>
<h1>Drop a book here!</h1>
<p>Or <button id="file-button">choose a file</button> to open it.</p>
</div>
</div> </div>
<div id="dimming-overlay" aria-hidden="true"></div> <div id="dimming-overlay" aria-hidden="true"></div>
<div id="side-bar"> <div id="side-bar">
<div id="side-bar-header"> <div id="side-bar-header">
<img id="side-bar-cover"> <img id="side-bar-cover" />
<div> <div>
<h1 id="side-bar-title"></h1> <h1 id="side-bar-title"></h1>
<p id="side-bar-author"></p> <p id="side-bar-author"></p>
</div>
</div> </div>
<div id="toc-view"></div> </div>
<div id="toc-view"></div>
</div> </div>
<div id="header-bar" class="toolbar"> <div id="header-bar" class="toolbar">
<button id="side-bar-button" aria-label="Show sidebar"> <button id="side-bar-button" aria-label="Show sidebar">
<svg class="icon" width="24" height="24" aria-hidden="true"> <svg class="icon" width="24" height="24" aria-hidden="true">
<path d="M 4 6 h 16 M 4 12 h 16 M 4 18 h 16"/> <path d="M 4 6 h 16 M 4 12 h 16 M 4 18 h 16" />
</svg> </svg>
</button>
<div id="menu-button" class="menu-container">
<button aria-label="Show settings" aria-haspopup="true">
<svg class="icon" width="24" height="24" aria-hidden="true">
<path
d="M5 12.7a7 7 0 0 1 0-1.4l-1.8-2 2-3.5 2.7.5a7 7 0 0 1 1.2-.7L10 3h4l.9 2.6 1.2.7 2.7-.5 2 3.4-1.8 2a7 7 0 0 1 0 1.5l1.8 2-2 3.5-2.7-.5a7 7 0 0 1-1.2.7L14 21h-4l-.9-2.6a7 7 0 0 1-1.2-.7l-2.7.5-2-3.4 1.8-2Z"
/>
<circle cx="12" cy="12" r="3" />
</svg>
</button> </button>
<div id="menu-button" class="menu-container"> </div>
<button aria-label="Show settings" aria-haspopup="true">
<svg class="icon" width="24" height="24" aria-hidden="true">
<path d="M5 12.7a7 7 0 0 1 0-1.4l-1.8-2 2-3.5 2.7.5a7 7 0 0 1 1.2-.7L10 3h4l.9 2.6 1.2.7 2.7-.5 2 3.4-1.8 2a7 7 0 0 1 0 1.5l1.8 2-2 3.5-2.7-.5a7 7 0 0 1-1.2.7L14 21h-4l-.9-2.6a7 7 0 0 1-1.2-.7l-2.7.5-2-3.4 1.8-2Z"/>
<circle cx="12" cy="12" r="3"/>
</svg>
</button>
</div>
</div> </div>
<div id="nav-bar" class="toolbar"> <div id="nav-bar" class="toolbar">
<button id="left-button" aria-label="Go left"> <button id="left-button" aria-label="Go left">
<svg class="icon" width="24" height="24" aria-hidden="true"> <svg class="icon" width="24" height="24" aria-hidden="true">
<path d="M 15 6 L 9 12 L 15 18"/> <path d="M 15 6 L 9 12 L 15 18" />
</svg> </svg>
</button>
<input
id="progress-slider"
type="range"
min="0"
max="1"
step="any"
list="tick-marks"
/>
<datalist id="tick-marks"></datalist>
<button id="right-button" aria-label="Go right">
<svg class="icon" width="24" height="24" aria-hidden="true">
<path d="M 9 6 L 15 12 L 9 18" />
</svg>
</button>
<!-- NEW: Zoom controls -->
<div id="zoom-controls" style="display: flex; gap: 4px; margin-left: 12px">
<button id="zoom-out" aria-label="Zoom out" title="Zoom Out">
<svg class="icon" width="20" height="20" aria-hidden="true">
<path d="M 9 9 L 15 15 M 15 9 L 9 15" />
</svg>
</button> </button>
<input id="progress-slider" type="range" min="0" max="1" step="any" list="tick-marks"> <button
<datalist id="tick-marks"></datalist> id="zoom-reset"
<button id="right-button" aria-label="Go right"> aria-label="Reset zoom"
<svg class="icon" width="24" height="24" aria-hidden="true"> title="Reset Zoom"
<path d="M 9 6 L 15 12 L 9 18"/> style="font-size: 11px"
</svg> >
100%
</button> </button>
<button id="zoom-in" aria-label="Zoom in" title="Zoom In">
<svg class="icon" width="20" height="20" aria-hidden="true">
<path d="M 9 9 h 6 M 12 6 v 6" />
</svg>
</button>
<button
id="magnifier-toggle"
aria-label="Toggle magnifier"
title="Toggle Magnifier"
>
<svg class="icon" width="20" height="20" aria-hidden="true">
<circle cx="10" cy="10" r="4" />
<path d="M 14 14 L 18 18" />
</svg>
</button>
</div>
</div> </div>
<script src="reader.js" type="module"></script> <script src="reader.js" type="module"></script>
reader.js
+326 -185
View File
@@ -1,7 +1,8 @@
import './view.js' import "./view.js";
import { createTOCView } from './ui/tree.js' import { createTOCView } from "./ui/tree.js";
import { createMenu } from './ui/menu.js' import { createMenu } from "./ui/menu.js";
import { Overlayer } from './overlayer.js' import { Overlayer } from "./overlayer.js";
import { FixedLayout } from "./fixed-layout.js";
const getCSS = ({ spacing, justify, hyphenate }) => ` const getCSS = ({ spacing, justify, hyphenate }) => `
@namespace epub "http://www.idpf.org/2007/ops"; @namespace epub "http://www.idpf.org/2007/ops";
@@ -16,9 +17,9 @@ const getCSS = ({ spacing, justify, hyphenate }) => `
} }
p, li, blockquote, dd { p, li, blockquote, dd {
line-height: ${spacing}; line-height: ${spacing};
text-align: ${justify ? 'justify' : 'start'}; text-align: ${justify ? "justify" : "start"};
-webkit-hyphens: ${hyphenate ? 'auto' : 'manual'}; -webkit-hyphens: ${hyphenate ? "auto" : "manual"};
hyphens: ${hyphenate ? 'auto' : 'manual'}; hyphens: ${hyphenate ? "auto" : "manual"};
-webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-before: 3;
-webkit-hyphenate-limit-after: 2; -webkit-hyphenate-limit-after: 2;
-webkit-hyphenate-limit-lines: 2; -webkit-hyphenate-limit-lines: 2;
@@ -40,200 +41,340 @@ const getCSS = ({ spacing, justify, hyphenate }) => `
aside[epub|type~="rearnote"] { aside[epub|type~="rearnote"] {
display: none; display: none;
} }
` `;
const $ = document.querySelector.bind(document) const $ = document.querySelector.bind(document);
const locales = 'en' const locales = "en";
const percentFormat = new Intl.NumberFormat(locales, { style: 'percent' }) const percentFormat = new Intl.NumberFormat(locales, { style: "percent" });
const listFormat = new Intl.ListFormat(locales, { style: 'short', type: 'conjunction' }) const listFormat = new Intl.ListFormat(locales, {
style: "short",
type: "conjunction",
});
const formatLanguageMap = x => { const formatLanguageMap = (x) => {
if (!x) return '' if (!x) return "";
if (typeof x === 'string') return x if (typeof x === "string") return x;
const keys = Object.keys(x) const keys = Object.keys(x);
return x[keys[0]] return x[keys[0]];
} };
const formatOneContributor = contributor => typeof contributor === 'string' const formatOneContributor = (contributor) =>
? contributor : formatLanguageMap(contributor?.name) typeof contributor === "string"
? contributor
: formatLanguageMap(contributor?.name);
const formatContributor = contributor => Array.isArray(contributor) const formatContributor = (contributor) =>
Array.isArray(contributor)
? listFormat.format(contributor.map(formatOneContributor)) ? listFormat.format(contributor.map(formatOneContributor))
: formatOneContributor(contributor) : formatOneContributor(contributor);
class Reader { class Reader {
#tocView #tocView;
style = { style = {
spacing: 1.4, spacing: 1.4,
justify: true, justify: true,
hyphenate: true, hyphenate: true,
};
annotations = new Map();
annotationsByValue = new Map();
closeSideBar() {
$("#dimming-overlay").classList.remove("show");
$("#side-bar").classList.remove("show");
}
constructor() {
$("#side-bar-button").addEventListener("click", () => {
$("#dimming-overlay").classList.add("show");
$("#side-bar").classList.add("show");
});
$("#dimming-overlay").addEventListener("click", () => this.closeSideBar());
const menu = createMenu([
{
name: "layout",
label: "Layout",
type: "radio",
items: [
["Paginated", "paginated"],
["Scrolled", "scrolled"],
],
onclick: (value) => {
this.view?.renderer.setAttribute("flow", value);
},
},
]);
menu.element.classList.add("menu");
$("#menu-button").append(menu.element);
$("#menu-button > button").addEventListener("click", () =>
menu.element.classList.toggle("show"),
);
menu.groups.layout.select("paginated");
}
async open(file) {
this.view = document.createElement("foliate-view");
document.body.append(this.view);
await this.view.open(file);
this.view.addEventListener("load", this.#onLoad.bind(this));
this.view.addEventListener("relocate", this.#onRelocate.bind(this));
const { book } = this.view;
// DEBUG: Log book and renderer info
console.log("[Reader Debug] 📖 Book opened:", {
title: book.metadata?.title,
type: file.name,
rendition: book.rendition,
isFixedLayout: this.view.isFixedLayout,
renderer: this.view.renderer?.localName,
rendererClass: this.view.renderer?.constructor.name,
isFixedLayoutInstance: this.view.renderer instanceof FixedLayout,
});
book.transformTarget?.addEventListener("data", ({ detail }) => {
detail.data = Promise.resolve(detail.data).catch((e) => {
console.error(new Error(`Failed to load ${detail.name}`, { cause: e }));
return "";
});
});
this.view.renderer.setStyles?.(getCSS(this.style));
this.view.renderer.next();
$("#header-bar").style.visibility = "visible";
$("#nav-bar").style.visibility = "visible";
$("#left-button").addEventListener("click", () => this.view.goLeft());
$("#right-button").addEventListener("click", () => this.view.goRight());
const slider = $("#progress-slider");
slider.dir = book.dir;
slider.addEventListener("input", (e) =>
this.view.goToFraction(parseFloat(e.target.value)),
);
for (const fraction of this.view.getSectionFractions()) {
const option = document.createElement("option");
option.value = fraction;
$("#tick-marks").append(option);
} }
annotations = new Map()
annotationsByValue = new Map() document.addEventListener("keydown", this.#handleKeydown.bind(this));
closeSideBar() { console.log("[Reader Debug] 🔧 Setting up zoom control listeners...");
$('#dimming-overlay').classList.remove('show')
$('#side-bar').classList.remove('show') // Add zoom control listeners
$("#zoom-in").addEventListener("click", () => {
console.log("[Reader Debug] 🔍 Zoom in button clicked");
const renderer = this.view.renderer;
console.log(
"[Reader Debug] Renderer:",
renderer?.localName,
renderer?.constructor.name,
);
console.log(
"[Reader Debug] Is FixedLayout?",
renderer instanceof FixedLayout,
);
if (renderer instanceof FixedLayout) {
const current = renderer.getAttribute("zoom") || 1;
const newZoom = Math.min(10, parseFloat(current) * 1.2);
renderer.setAttribute("zoom", newZoom);
$("#zoom-reset").textContent = `${Math.round(newZoom * 100)}%`;
console.log("[Reader Debug] ✅ Zoom applied:", current, "->", newZoom);
} else {
console.log("[Reader Debug] ❌ Not a FixedLayout renderer, ignoring");
}
});
$("#zoom-out").addEventListener("click", () => {
console.log("[Reader Debug] 🔍 Zoom out button clicked");
const renderer = this.view.renderer;
console.log(
"[Reader Debug] Is FixedLayout?",
renderer instanceof FixedLayout,
);
if (renderer instanceof FixedLayout) {
const current = renderer.getAttribute("zoom") || 1;
const newZoom = Math.max(0.1, parseFloat(current) / 1.2);
renderer.setAttribute("zoom", newZoom);
$("#zoom-reset").textContent = `${Math.round(newZoom * 100)}%`;
console.log("[Reader Debug] ✅ Zoom applied:", current, "->", newZoom);
} else {
console.log("[Reader Debug] ❌ Not a FixedLayout renderer, ignoring");
}
});
$("#zoom-reset").addEventListener("click", () => {
console.log("[Reader Debug] 🔄 Reset zoom button clicked");
const renderer = this.view.renderer;
console.log(
"[Reader Debug] Is FixedLayout?",
renderer instanceof FixedLayout,
);
if (renderer instanceof FixedLayout) {
renderer.removeAttribute("zoom");
renderer.dragOffset = { x: 0, y: 0 };
$("#zoom-reset").textContent = "100%";
console.log("[Reader Debug] ✅ Zoom reset");
} else {
console.log("[Reader Debug] ❌ Not a FixedLayout renderer, ignoring");
}
});
$("#magnifier-toggle").addEventListener("click", () => {
console.log("[Reader Debug] 🔍 Magnifier toggle button clicked");
const renderer = this.view.renderer;
console.log(
"[Reader Debug] Is FixedLayout?",
renderer instanceof FixedLayout,
);
if (renderer instanceof FixedLayout) {
renderer.toggleMagnifier();
console.log("[Reader Debug] ✅ Magnifier toggled");
} else {
console.log("[Reader Debug] ❌ Not a FixedLayout renderer, ignoring");
}
});
console.log("[Reader Debug] ✅ Zoom control listeners configured");
const title = formatLanguageMap(book.metadata?.title) || "Untitled Book";
document.title = title;
$("#side-bar-title").innerText = title;
$("#side-bar-author").innerText = formatContributor(book.metadata?.author);
Promise.resolve(book.getCover?.())?.then((blob) =>
blob ? ($("#side-bar-cover").src = URL.createObjectURL(blob)) : null,
);
const toc = book.toc;
if (toc) {
this.#tocView = createTOCView(toc, (href) => {
this.view.goTo(href).catch((e) => console.error(e));
this.closeSideBar();
});
$("#toc-view").append(this.#tocView.element);
} }
constructor() {
$('#side-bar-button').addEventListener('click', () => {
$('#dimming-overlay').classList.add('show')
$('#side-bar').classList.add('show')
})
$('#dimming-overlay').addEventListener('click', () => this.closeSideBar())
const menu = createMenu([ // load and show highlights embedded in the file by Calibre
{ const bookmarks = await book.getCalibreBookmarks?.();
name: 'layout', if (bookmarks) {
label: 'Layout', const { fromCalibreHighlight } = await import("./epubcfi.js");
type: 'radio', for (const obj of bookmarks) {
items: [ if (obj.type === "highlight") {
['Paginated', 'paginated'], const value = fromCalibreHighlight(obj);
['Scrolled', 'scrolled'], const color = obj.style.which;
], const note = obj.notes;
onclick: value => { const annotation = { value, color, note };
this.view?.renderer.setAttribute('flow', value) const list = this.annotations.get(obj.spine_index);
}, if (list) list.push(annotation);
}, else this.annotations.set(obj.spine_index, [annotation]);
]) this.annotationsByValue.set(value, annotation);
menu.element.classList.add('menu')
$('#menu-button').append(menu.element)
$('#menu-button > button').addEventListener('click', () =>
menu.element.classList.toggle('show'))
menu.groups.layout.select('paginated')
}
async open(file) {
this.view = document.createElement('foliate-view')
document.body.append(this.view)
await this.view.open(file)
this.view.addEventListener('load', this.#onLoad.bind(this))
this.view.addEventListener('relocate', this.#onRelocate.bind(this))
const { book } = this.view
book.transformTarget?.addEventListener('data', ({ detail }) => {
detail.data = Promise.resolve(detail.data).catch(e => {
console.error(new Error(`Failed to load ${detail.name}`, { cause: e }))
return ''
})
})
this.view.renderer.setStyles?.(getCSS(this.style))
this.view.renderer.next()
$('#header-bar').style.visibility = 'visible'
$('#nav-bar').style.visibility = 'visible'
$('#left-button').addEventListener('click', () => this.view.goLeft())
$('#right-button').addEventListener('click', () => this.view.goRight())
const slider = $('#progress-slider')
slider.dir = book.dir
slider.addEventListener('input', e =>
this.view.goToFraction(parseFloat(e.target.value)))
for (const fraction of this.view.getSectionFractions()) {
const option = document.createElement('option')
option.value = fraction
$('#tick-marks').append(option)
}
document.addEventListener('keydown', this.#handleKeydown.bind(this))
const title = formatLanguageMap(book.metadata?.title) || 'Untitled Book'
document.title = title
$('#side-bar-title').innerText = title
$('#side-bar-author').innerText = formatContributor(book.metadata?.author)
Promise.resolve(book.getCover?.())?.then(blob =>
blob ? $('#side-bar-cover').src = URL.createObjectURL(blob) : null)
const toc = book.toc
if (toc) {
this.#tocView = createTOCView(toc, href => {
this.view.goTo(href).catch(e => console.error(e))
this.closeSideBar()
})
$('#toc-view').append(this.#tocView.element)
}
// load and show highlights embedded in the file by Calibre
const bookmarks = await book.getCalibreBookmarks?.()
if (bookmarks) {
const { fromCalibreHighlight } = await import('./epubcfi.js')
for (const obj of bookmarks) {
if (obj.type === 'highlight') {
const value = fromCalibreHighlight(obj)
const color = obj.style.which
const note = obj.notes
const annotation = { value, color, note }
const list = this.annotations.get(obj.spine_index)
if (list) list.push(annotation)
else this.annotations.set(obj.spine_index, [annotation])
this.annotationsByValue.set(value, annotation)
}
}
this.view.addEventListener('create-overlay', e => {
const { index } = e.detail
const list = this.annotations.get(index)
if (list) for (const annotation of list)
this.view.addAnnotation(annotation)
})
this.view.addEventListener('draw-annotation', e => {
const { draw, annotation } = e.detail
const { color } = annotation
draw(Overlayer.highlight, { color })
})
this.view.addEventListener('show-annotation', e => {
const annotation = this.annotationsByValue.get(e.detail.value)
if (annotation.note) alert(annotation.note)
})
} }
}
this.view.addEventListener("create-overlay", (e) => {
const { index } = e.detail;
const list = this.annotations.get(index);
if (list)
for (const annotation of list) this.view.addAnnotation(annotation);
});
this.view.addEventListener("draw-annotation", (e) => {
const { draw, annotation } = e.detail;
const { color } = annotation;
draw(Overlayer.highlight, { color });
});
this.view.addEventListener("show-annotation", (e) => {
const annotation = this.annotationsByValue.get(e.detail.value);
if (annotation.note) alert(annotation.note);
});
} }
#handleKeydown(event) { }
const k = event.key #handleKeydown(event) {
if (k === 'ArrowLeft' || k === 'h') this.view.goLeft() const k = event.key;
else if(k === 'ArrowRight' || k === 'l') this.view.goRight() console.log("[Reader Debug] ⌨️ Key pressed:", k);
} if (k === "ArrowLeft" || k === "h") this.view.goLeft();
#onLoad({ detail: { doc } }) { else if (k === "ArrowRight" || k === "l") this.view.goRight();
doc.addEventListener('keydown', this.#handleKeydown.bind(this)) else if (k === "+" || k === "=") {
} console.log("[Reader Debug] 🔍 Zoom in via keyboard");
#onRelocate({ detail }) { const renderer = this.view.renderer;
const { fraction, location, tocItem, pageItem } = detail if (renderer instanceof FixedLayout) {
const percent = percentFormat.format(fraction) const current = renderer.getAttribute("zoom") || 1;
const loc = pageItem const newZoom = Math.min(10, parseFloat(current) * 1.2);
? `Page ${pageItem.label}` renderer.setAttribute("zoom", newZoom);
: `Loc ${location.current}` $("#zoom-reset").textContent = `${Math.round(newZoom * 100)}%`;
const slider = $('#progress-slider') console.log(
slider.style.visibility = 'visible' "[Reader Debug] ✅ Keyboard zoom applied:",
slider.value = fraction current,
slider.title = `${percent} · ${loc}` "->",
if (tocItem?.href) this.#tocView?.setCurrentHref?.(tocItem.href) newZoom,
);
}
} else if (k === "-" || k === "_") {
console.log("[Reader Debug] 🔍 Zoom out via keyboard");
const renderer = this.view.renderer;
if (renderer instanceof FixedLayout) {
const current = renderer.getAttribute("zoom") || 1;
const newZoom = Math.max(0.1, parseFloat(current) / 1.2);
renderer.setAttribute("zoom", newZoom);
$("#zoom-reset").textContent = `${Math.round(newZoom * 100)}%`;
console.log(
"[Reader Debug] ✅ Keyboard zoom applied:",
current,
"->",
newZoom,
);
}
} else if (k === "0") {
console.log("[Reader Debug] 🔄 Reset zoom via keyboard");
const renderer = this.view.renderer;
if (renderer instanceof FixedLayout) {
renderer.removeAttribute("zoom");
renderer.dragOffset = { x: 0, y: 0 };
$("#zoom-reset").textContent = "100%";
console.log("[Reader Debug] ✅ Keyboard zoom reset");
}
} }
}
#onLoad({ detail: { doc } }) {
doc.addEventListener("keydown", this.#handleKeydown.bind(this));
}
#onRelocate({ detail }) {
const { fraction, location, tocItem, pageItem } = detail;
const percent = percentFormat.format(fraction);
const loc = pageItem ? `Page ${pageItem.label}` : `Loc ${location.current}`;
const slider = $("#progress-slider");
slider.style.visibility = "visible";
slider.value = fraction;
slider.title = `${percent} · ${loc}`;
if (tocItem?.href) this.#tocView?.setCurrentHref?.(tocItem.href);
}
} }
const open = async file => { const open = async (file) => {
document.body.removeChild($('#drop-target')) document.body.removeChild($("#drop-target"));
const reader = new Reader() const reader = new Reader();
globalThis.reader = reader globalThis.reader = reader;
await reader.open(file) await reader.open(file);
} };
const dragOverHandler = e => e.preventDefault() const dragOverHandler = (e) => e.preventDefault();
const dropHandler = e => { const dropHandler = (e) => {
e.preventDefault() e.preventDefault();
const item = Array.from(e.dataTransfer.items) const item = Array.from(e.dataTransfer.items).find(
.find(item => item.kind === 'file') (item) => item.kind === "file",
if (item) { );
const entry = item.webkitGetAsEntry() if (item) {
open(entry.isFile ? item.getAsFile() : entry).catch(e => console.error(e)) const entry = item.webkitGetAsEntry();
} open(entry.isFile ? item.getAsFile() : entry).catch((e) =>
} console.error(e),
const dropTarget = $('#drop-target') );
dropTarget.addEventListener('drop', dropHandler) }
dropTarget.addEventListener('dragover', dragOverHandler) };
const dropTarget = $("#drop-target");
dropTarget.addEventListener("drop", dropHandler);
dropTarget.addEventListener("dragover", dragOverHandler);
$('#file-input').addEventListener('change', e => $("#file-input").addEventListener("change", (e) =>
open(e.target.files[0]).catch(e => console.error(e))) open(e.target.files[0]).catch((e) => console.error(e)),
$('#file-button').addEventListener('click', () => $('#file-input').click()) );
$("#file-button").addEventListener("click", () => $("#file-input").click());
const params = new URLSearchParams(location.search) const params = new URLSearchParams(location.search);
const url = params.get('url') const url = params.get("url");
if (url) open(url).catch(e => console.error(e)) if (url) open(url).catch((e) => console.error(e));
else dropTarget.style.visibility = 'visible' else dropTarget.style.visibility = "visible";