danak/dpage-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hasMultiplePages

Browse Source
This commit is contained in:
hamid zarghami
2026-05-06 15:13:06 +03:30
parent ae7eae34d9
commit 25822b05a6
1 changed files with 48 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/viewer/components/BookViewer.tsx
+48 -38
View File
@@ -109,6 +109,7 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
); );
const displayWidth = Math.round(bookWidth * VIEWER_SCALE); const displayWidth = Math.round(bookWidth * VIEWER_SCALE);
const displayHeight = Math.round(bookHeight * VIEWER_SCALE); const displayHeight = Math.round(bookHeight * VIEWER_SCALE);
const hasMultiplePages = pages.length > 1;
// موبایل: از ابعاد viewport برای جا دادن کتاب در صفحه // موبایل: از ابعاد viewport برای جا دادن کتاب در صفحه
const [viewport, setViewport] = useState(() => const [viewport, setViewport] = useState(() =>
@@ -290,6 +291,7 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
}, [isAutoPlayActive]); }, [isAutoPlayActive]);
const handleLinkClick = useCallback((linkUrl: string) => { const handleLinkClick = useCallback((linkUrl: string) => {
if (pages.length <= 1) return;
if (linkUrl.startsWith('page://')) { if (linkUrl.startsWith('page://')) {
const action = linkUrl.replace('page://', ''); const action = linkUrl.replace('page://', '');
const pageFlipAPI = bookRef.current?.pageFlip() as PageFlipWithFlipController | undefined; const pageFlipAPI = bookRef.current?.pageFlip() as PageFlipWithFlipController | undefined;
@@ -432,13 +434,13 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
startPage={startPage} startPage={startPage}
autoSize={false} autoSize={false}
maxShadowOpacity={isDesktop ? 0.5 : 0} maxShadowOpacity={isDesktop ? 0.5 : 0}
showCover={true} showCover={hasMultiplePages}
mobileScrollSupport={!usePortrait} mobileScrollSupport={!usePortrait}
clickEventForward={true} clickEventForward={true}
useMouseEvents={true} useMouseEvents={hasMultiplePages}
swipeDistance={usePortrait ? 48 : 30} swipeDistance={hasMultiplePages ? (usePortrait ? 48 : 30) : 9999}
startZIndex={1} startZIndex={1}
showPageCorners={true} showPageCorners={hasMultiplePages}
disableFlipByClick={true} disableFlipByClick={true}
className="flipbook-container mx-auto max-w-full" className="flipbook-container mx-auto max-w-full"
style={{}} style={{}}
@@ -464,23 +466,27 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
</div> </div>
<div className="shrink-0 max-md:min-h-12 flex items-center gap-3 md:gap-6 bg-white rounded-full px-4 md:px-6 py-2 md:py-3 shadow-lg"> <div className="shrink-0 max-md:min-h-12 flex items-center gap-3 md:gap-6 bg-white rounded-full px-4 md:px-6 py-2 md:py-3 shadow-lg">
{/* دکمه راست: فارسی = صفحه بعد | لاتین = صفحه قبل */} {hasMultiplePages && (
<button <>
type="button" {/* دکمه راست: فارسی = صفحه بعد | لاتین = صفحه قبل */}
onClick={() => { <button
stopAutoPlayByUser(); type="button"
if (leftToRightFlip) { onClick={() => {
goToPrevPage(); stopAutoPlayByUser();
} else { if (leftToRightFlip) {
goToNextPage(); goToPrevPage();
} } else {
}} goToNextPage();
disabled={leftToRightFlip ? currentPage <= 0 : currentPage >= pages.length - 1} }
className="p-2 md:p-2 min-h-11 min-w-11 md:min-h-0 md:min-w-0 inline-flex items-center justify-center rounded-full hover:bg-gray-100 active:bg-gray-200 disabled:opacity-30 disabled:cursor-not-allowed transition-all" }}
aria-label={leftToRightFlip ? 'صفحه قبل' : 'صفحه بعد'} disabled={leftToRightFlip ? currentPage <= 0 : currentPage >= pages.length - 1}
> className="p-2 md:p-2 min-h-11 min-w-11 md:min-h-0 md:min-w-0 inline-flex items-center justify-center rounded-full hover:bg-gray-100 active:bg-gray-200 disabled:opacity-30 disabled:cursor-not-allowed transition-all"
<ArrowRight2 color='black' size={20} className="text-gray-700 md:w-6 md:h-6" /> aria-label={leftToRightFlip ? 'صفحه قبل' : 'صفحه بعد'}
</button> >
<ArrowRight2 color='black' size={20} className="text-gray-700 md:w-6 md:h-6" />
</button>
</>
)}
{/* شماره صفحه */} {/* شماره صفحه */}
<div className="flex items-center gap-2 min-w-[100px] md:min-w-[120px] justify-center"> <div className="flex items-center gap-2 min-w-[100px] md:min-w-[120px] justify-center">
@@ -489,23 +495,27 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
</span> </span>
</div> </div>
{/* دکمه چپ: فارسی = صفحه قبل | لاتین = صفحه بعد */} {hasMultiplePages && (
<button <>
type="button" {/* دکمه چپ: فارسی = صفحه قبل | لاتین = صفحه بعد */}
onClick={() => { <button
stopAutoPlayByUser(); type="button"
if (leftToRightFlip) { onClick={() => {
goToNextPage(); stopAutoPlayByUser();
} else { if (leftToRightFlip) {
goToPrevPage(); goToNextPage();
} } else {
}} goToPrevPage();
disabled={leftToRightFlip ? currentPage >= pages.length - 1 : currentPage <= 0} }
className="p-2 md:p-2 min-h-11 min-w-11 md:min-h-0 md:min-w-0 inline-flex items-center justify-center rounded-full hover:bg-gray-100 active:bg-gray-200 disabled:opacity-30 disabled:cursor-not-allowed transition-all" }}
aria-label={leftToRightFlip ? 'صفحه بعد' : 'صفحه قبل'} disabled={leftToRightFlip ? currentPage >= pages.length - 1 : currentPage <= 0}
> className="p-2 md:p-2 min-h-11 min-w-11 md:min-h-0 md:min-w-0 inline-flex items-center justify-center rounded-full hover:bg-gray-100 active:bg-gray-200 disabled:opacity-30 disabled:cursor-not-allowed transition-all"
<ArrowLeft2 color='black' size={20} className="text-gray-700 md:w-6 md:h-6" /> aria-label={leftToRightFlip ? 'صفحه بعد' : 'صفحه قبل'}
</button> >
<ArrowLeft2 color='black' size={20} className="text-gray-700 md:w-6 md:h-6" />
</button>
</>
)}
</div> </div>
</div> </div>
); );