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

Add panel-aware keyboard shortcuts to reader

Browse Source 
Extend keyboard navigation to support panel mode when enabled.

Changes:
- Check for panel-mode attribute before routing key events
- Route Arrow keys and Vim keys (h/l) to panel navigation in panel mode
- Add 'P' key to toggle panel mode
- Add 'Escape' key to exit panel mode
- Maintain backward compatibility with existing page navigation

When panel mode is active:
- ArrowRight/l: next panel
- ArrowLeft/h: previous panel
- Escape/P: exit panel mode

When panel mode is inactive:
- ArrowRight/l: next page (existing behavior)
- ArrowLeft/h: previous page (existing behavior)
- P: enter panel mode (new feature)
This commit is contained in:
john-okeefe
2026-04-13 16:43:32 -04:00
parent ffaceaf962
commit 36537e3728
1 changed files with 215 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
reader.js
+179 -148
View File
@@ -1,7 +1,7 @@
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";
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 +16,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 +40,231 @@ 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() annotations = new Map();
annotationsByValue = new Map() annotationsByValue = new Map();
closeSideBar() { closeSideBar() {
$('#dimming-overlay').classList.remove('show') $("#dimming-overlay").classList.remove("show");
$('#side-bar').classList.remove('show') $("#side-bar").classList.remove("show");
} }
constructor() { constructor() {
$('#side-bar-button').addEventListener('click', () => { $("#side-bar-button").addEventListener("click", () => {
$('#dimming-overlay').classList.add('show') $("#dimming-overlay").classList.add("show");
$('#side-bar').classList.add('show') $("#side-bar").classList.add("show");
}) });
$('#dimming-overlay').addEventListener('click', () => this.closeSideBar()) $("#dimming-overlay").addEventListener("click", () => this.closeSideBar());
const menu = createMenu([ const menu = createMenu([
{ {
name: 'layout', name: "layout",
label: 'Layout', label: "Layout",
type: 'radio', type: "radio",
items: [ items: [
['Paginated', 'paginated'], ["Paginated", "paginated"],
['Scrolled', 'scrolled'], ["Scrolled", "scrolled"],
], ],
onclick: value => { onclick: (value) => {
this.view?.renderer.setAttribute('flow', value) this.view?.renderer.setAttribute("flow", value);
}, },
}, },
]) ]);
menu.element.classList.add('menu') menu.element.classList.add("menu");
$('#menu-button').append(menu.element) $("#menu-button").append(menu.element);
$('#menu-button > button').addEventListener('click', () => $("#menu-button > button").addEventListener("click", () =>
menu.element.classList.toggle('show')) menu.element.classList.toggle("show"),
menu.groups.layout.select('paginated') );
menu.groups.layout.select("paginated");
} }
async open(file) { async open(file) {
this.view = document.createElement('foliate-view') this.view = document.createElement("foliate-view");
document.body.append(this.view) document.body.append(this.view);
await this.view.open(file) await this.view.open(file);
this.view.addEventListener('load', this.#onLoad.bind(this)) this.view.addEventListener("load", this.#onLoad.bind(this));
this.view.addEventListener('relocate', this.#onRelocate.bind(this)) this.view.addEventListener("relocate", this.#onRelocate.bind(this));
const { book } = this.view const { book } = this.view;
book.transformTarget?.addEventListener('data', ({ detail }) => { book.transformTarget?.addEventListener("data", ({ detail }) => {
detail.data = Promise.resolve(detail.data).catch(e => { detail.data = Promise.resolve(detail.data).catch((e) => {
console.error(new Error(`Failed to load ${detail.name}`, { cause: e })) console.error(new Error(`Failed to load ${detail.name}`, { cause: e }));
return '' return "";
}) });
}) });
this.view.renderer.setStyles?.(getCSS(this.style)) this.view.renderer.setStyles?.(getCSS(this.style));
this.view.renderer.next() this.view.renderer.next();
$('#header-bar').style.visibility = 'visible' $("#header-bar").style.visibility = "visible";
$('#nav-bar').style.visibility = 'visible' $("#nav-bar").style.visibility = "visible";
$('#left-button').addEventListener('click', () => this.view.goLeft()) $("#left-button").addEventListener("click", () => this.view.goLeft());
$('#right-button').addEventListener('click', () => this.view.goRight()) $("#right-button").addEventListener("click", () => this.view.goRight());
const slider = $('#progress-slider') const slider = $("#progress-slider");
slider.dir = book.dir slider.dir = book.dir;
slider.addEventListener('input', e => slider.addEventListener("input", (e) =>
this.view.goToFraction(parseFloat(e.target.value))) this.view.goToFraction(parseFloat(e.target.value)),
);
for (const fraction of this.view.getSectionFractions()) { for (const fraction of this.view.getSectionFractions()) {
const option = document.createElement('option') const option = document.createElement("option");
option.value = fraction option.value = fraction;
$('#tick-marks').append(option) $("#tick-marks").append(option);
} }
document.addEventListener('keydown', this.#handleKeydown.bind(this)) document.addEventListener("keydown", this.#handleKeydown.bind(this));
const title = formatLanguageMap(book.metadata?.title) || 'Untitled Book' const title = formatLanguageMap(book.metadata?.title) || "Untitled Book";
document.title = title document.title = title;
$('#side-bar-title').innerText = title $("#side-bar-title").innerText = title;
$('#side-bar-author').innerText = formatContributor(book.metadata?.author) $("#side-bar-author").innerText = formatContributor(book.metadata?.author);
Promise.resolve(book.getCover?.())?.then(blob => Promise.resolve(book.getCover?.())?.then((blob) =>
blob ? $('#side-bar-cover').src = URL.createObjectURL(blob) : null) blob ? ($("#side-bar-cover").src = URL.createObjectURL(blob)) : null,
);
const toc = book.toc const toc = book.toc;
if (toc) { if (toc) {
this.#tocView = createTOCView(toc, href => { this.#tocView = createTOCView(toc, (href) => {
this.view.goTo(href).catch(e => console.error(e)) this.view.goTo(href).catch((e) => console.error(e));
this.closeSideBar() this.closeSideBar();
}) });
$('#toc-view').append(this.#tocView.element) $("#toc-view").append(this.#tocView.element);
} }
// load and show highlights embedded in the file by Calibre // load and show highlights embedded in the file by Calibre
const bookmarks = await book.getCalibreBookmarks?.() const bookmarks = await book.getCalibreBookmarks?.();
if (bookmarks) { if (bookmarks) {
const { fromCalibreHighlight } = await import('./epubcfi.js') const { fromCalibreHighlight } = await import("./epubcfi.js");
for (const obj of bookmarks) { for (const obj of bookmarks) {
if (obj.type === 'highlight') { if (obj.type === "highlight") {
const value = fromCalibreHighlight(obj) const value = fromCalibreHighlight(obj);
const color = obj.style.which const color = obj.style.which;
const note = obj.notes const note = obj.notes;
const annotation = { value, color, note } const annotation = { value, color, note };
const list = this.annotations.get(obj.spine_index) const list = this.annotations.get(obj.spine_index);
if (list) list.push(annotation) if (list) list.push(annotation);
else this.annotations.set(obj.spine_index, [annotation]) else this.annotations.set(obj.spine_index, [annotation]);
this.annotationsByValue.set(value, annotation) this.annotationsByValue.set(value, annotation);
} }
} }
this.view.addEventListener('create-overlay', e => { this.view.addEventListener("create-overlay", (e) => {
const { index } = e.detail const { index } = e.detail;
const list = this.annotations.get(index) const list = this.annotations.get(index);
if (list) for (const annotation of list) if (list)
this.view.addAnnotation(annotation) for (const annotation of list) this.view.addAnnotation(annotation);
}) });
this.view.addEventListener('draw-annotation', e => { this.view.addEventListener("draw-annotation", (e) => {
const { draw, annotation } = e.detail const { draw, annotation } = e.detail;
const { color } = annotation const { color } = annotation;
draw(Overlayer.highlight, { color }) draw(Overlayer.highlight, { color });
}) });
this.view.addEventListener('show-annotation', e => { this.view.addEventListener("show-annotation", (e) => {
const annotation = this.annotationsByValue.get(e.detail.value) const annotation = this.annotationsByValue.get(e.detail.value);
if (annotation.note) alert(annotation.note) if (annotation.note) alert(annotation.note);
}) });
} }
} }
#handleKeydown(event) { #handleKeydown(event) {
const k = event.key const k = event.key;
if (k === 'ArrowLeft' || k === 'h') this.view.goLeft() const renderer = this.view?.renderer;
else if(k === 'ArrowRight' || k === 'l') this.view.goRight()
// Check if in panel mode
if (renderer?.hasAttribute?.("panel-mode")) {
if (k === "ArrowRight" || k === "l") {
event.preventDefault();
renderer.nextPanel();
} else if (k === "ArrowLeft" || k === "h") {
event.preventDefault();
renderer.prevPanel();
} else if (k === "Escape" || k === "p") {
event.preventDefault();
renderer.togglePanelMode();
}
return;
}
if (k === "ArrowLeft" || k === "h") this.view.goLeft();
else if (k === "ArrowRight" || k === "l") this.view.goRight();
else if (k === "p") {
event.preventDefault();
renderer?.togglePanelMode?.();
}
} }
#onLoad({ detail: { doc } }) { #onLoad({ detail: { doc } }) {
doc.addEventListener('keydown', this.#handleKeydown.bind(this)) doc.addEventListener("keydown", this.#handleKeydown.bind(this));
} }
#onRelocate({ detail }) { #onRelocate({ detail }) {
const { fraction, location, tocItem, pageItem } = detail const { fraction, location, tocItem, pageItem } = detail;
const percent = percentFormat.format(fraction) const percent = percentFormat.format(fraction);
const loc = pageItem const loc = pageItem ? `Page ${pageItem.label}` : `Loc ${location.current}`;
? `Page ${pageItem.label}` const slider = $("#progress-slider");
: `Loc ${location.current}` slider.style.visibility = "visible";
const slider = $('#progress-slider') slider.value = fraction;
slider.style.visibility = 'visible' slider.title = `${percent} · ${loc}`;
slider.value = fraction if (tocItem?.href) this.#tocView?.setCurrentHref?.(tocItem.href);
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) { if (item) {
const entry = item.webkitGetAsEntry() const entry = item.webkitGetAsEntry();
open(entry.isFile ? item.getAsFile() : entry).catch(e => console.error(e)) open(entry.isFile ? item.getAsFile() : entry).catch((e) =>
console.error(e),
);
} }
} };
const dropTarget = $('#drop-target') const dropTarget = $("#drop-target");
dropTarget.addEventListener('drop', dropHandler) dropTarget.addEventListener("drop", dropHandler);
dropTarget.addEventListener('dragover', dragOverHandler) 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";