diff --git a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx index af3a7575..d1773e01 100644 --- a/apps/readest-app/src/app/reader/components/FoliateViewer.tsx +++ b/apps/readest-app/src/app/reader/components/FoliateViewer.tsx @@ -10,8 +10,9 @@ import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants'; import { handleKeydown, handleMousedown, - handleClick, handleMouseup, + handleClick, + handleWheel, } from '../utils/iframeEventHandlers'; import { eventDispatcher } from '@/utils/event'; @@ -93,6 +94,7 @@ const FoliateViewer: React.FC<{ detail.doc.addEventListener('mousedown', handleMousedown.bind(null, bookKey)); detail.doc.addEventListener('mouseup', handleMouseup.bind(null, bookKey)); detail.doc.addEventListener('click', handleClick.bind(null, bookKey)); + detail.doc.addEventListener('wheel', handleWheel.bind(null, bookKey)); } } }; @@ -120,24 +122,32 @@ const FoliateViewer: React.FC<{ } }; - const handleClickTurnPage = ( - msg: MessageEvent | React.MouseEvent, - ) => { + const handleTurnPage = (msg: MessageEvent | React.MouseEvent) => { if (msg instanceof MessageEvent) { - if (msg.data && msg.data.type === 'iframe-single-click' && msg.data.bookKey === bookKey) { - const viewElement = containerRef.current; - if (viewElement) { - const rect = viewElement.getBoundingClientRect(); - const { screenX } = msg.data; + if (msg.data && msg.data.bookKey === bookKey) { + const viewSettings = getViewSettings(bookKey)!; + if (msg.data.type === 'iframe-single-click') { + const viewElement = containerRef.current; + if (viewElement) { + const rect = viewElement.getBoundingClientRect(); + const { screenX } = msg.data; - const eventConsumed = eventDispatcher.dispatchSync('iframe-single-click', { screenX }); - if (!eventConsumed) { - if (screenX >= rect.left + rect.width / 2) { - viewRef.current?.goRight(); - } else if (screenX < rect.left + rect.width / 2) { - viewRef.current?.goLeft(); + const eventConsumed = eventDispatcher.dispatchSync('iframe-single-click', { screenX }); + if (!eventConsumed) { + if (screenX >= rect.left + rect.width / 2) { + viewRef.current?.goRight(); + } else if (screenX < rect.left + rect.width / 2) { + viewRef.current?.goLeft(); + } } } + } else if (msg.data.type === 'iframe-wheel' && !viewSettings.scrolled) { + const { deltaY } = msg.data; + if (deltaY > 0) { + viewRef.current?.next(1); + } else if (deltaY < 0) { + viewRef.current?.prev(1); + } } } } else { @@ -214,7 +224,7 @@ const FoliateViewer: React.FC<{ await view.goToFraction(0); } - window.addEventListener('message', handleClickTurnPage); + window.addEventListener('message', handleTurnPage); }; openBook(); @@ -224,7 +234,7 @@ const FoliateViewer: React.FC<{ return (
handleClickTurnPage(event)} + onClick={(event) => handleTurnPage(event)} ref={containerRef} /> ); diff --git a/apps/readest-app/src/app/reader/utils/iframeEventHandlers.ts b/apps/readest-app/src/app/reader/utils/iframeEventHandlers.ts index ade3707f..363090e2 100644 --- a/apps/readest-app/src/app/reader/utils/iframeEventHandlers.ts +++ b/apps/readest-app/src/app/reader/utils/iframeEventHandlers.ts @@ -57,6 +57,26 @@ export const handleMouseup = (bookKey: string, event: MouseEvent) => { ); }; +export const handleWheel = (bookKey: string, event: WheelEvent) => { + window.postMessage( + { + type: 'iframe-wheel', + bookKey, + deltaMode: event.deltaMode, + deltaX: event.deltaX, + deltaY: event.deltaY, + deltaZ: event.deltaZ, + screenX: event.screenX, + screenY: event.screenY, + clientX: event.clientX, + clientY: event.clientY, + offsetX: event.offsetX, + offsetY: event.offsetY, + }, + '*', + ); +}; + export const handleClick = (bookKey: string, event: MouseEvent) => { const now = Date.now();