akai/readest
2
1
Fork 1
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

Add type stubs for foliate-view

Browse Source
This commit is contained in:
chrox
2024-10-10 19:18:30 +02:00
parent c07385f13f
commit b38cfd70ba
1 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/readest-app/src/components/FoliateViewer.tsx
+12 -3
View File
@@ -4,7 +4,7 @@ import React, { useEffect, useRef } from 'react';
import { BookDoc } from '@/libs/document';
type FoliateViewerProps = {
book: BookDoc | null;
book: BookDoc;
};
const getCSS = (spacing: number, justify: boolean, hyphenate: boolean) => `
@@ -46,6 +46,15 @@ const getCSS = (spacing: number, justify: boolean, hyphenate: boolean) => `
}
`;
interface FoliateView extends HTMLElement {
open: (book: BookDoc) => Promise<void>;
renderer: {
setStyles: (css: string) => void;
next: () => Promise<void>;
prev: () => Promise<void>;
};
}
const FoliateViewer: React.FC<FoliateViewerProps> = ({ book }) => {
const viewRef = useRef<HTMLDivElement>(null);
const isViewCreated = useRef(false);
@@ -54,7 +63,7 @@ const FoliateViewer: React.FC<FoliateViewerProps> = ({ book }) => {
if (isViewCreated.current) return;
const openBook = async () => {
await import('foliate-js/view.js');
const view = document.createElement('foliate-view');
const view = document.createElement('foliate-view') as FoliateView;
document.body.append(view);
viewRef.current?.appendChild(view);
@@ -76,7 +85,7 @@ const FoliateViewer: React.FC<FoliateViewerProps> = ({ book }) => {
const leftThreshold = width * 0.5;
const rightThreshold = width * 0.5;
const existingView = viewRef.current?.querySelector('foliate-view');
const existingView = viewRef.current?.querySelector('foliate-view') as FoliateView;
if (clientX < leftThreshold) {
existingView?.renderer?.prev();
} else if (clientX > rightThreshold) {