0.0.2 FR 1

resources/js/Pages/Comic/Read.jsx

@@ -1,7 +1,7 @@
 import { Head, Link, router } from '@inertiajs/react';
 import AppLayout from '@/Layouts/AppLayout.jsx';
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { ChevronFirst, ChevronLast, Rows3, Settings } from "lucide-react";
+import { ChevronFirst, ChevronLast, Rows3, Settings } from 'lucide-react';
 import { Tooltip, TooltipProvider, TooltipTrigger } from '@radix-ui/react-tooltip';
 
 import { throttle } from 'lodash';
@@ -10,6 +10,7 @@ import { BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator } f
 import { Button } from '@/components/ui/button';
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
 import PrimaryButton from '@/components/PrimaryButton';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
 import { TooltipContent } from '@/components/ui/tooltip';
 
@@ -21,6 +22,8 @@ export default function Read({ auth, comic, chapter }) {
     const [isTwoPagesPerScreen, setIsTwoPagePerScreen] = useState(false); // TODO
     const [currentImage, setCurrentImage] = useState(1);
 
+    const [isJumpToPageOpen, setIsJumpToPageOpen] = useState(false);
+
     const windowSize = useWindowSize();
     const ref = useRef();
 
@@ -61,6 +64,12 @@ export default function Read({ auth, comic, chapter }) {
         }
     }
 
+    const selectOnChangeHandler = (e) => {
+        document.getElementById(`image-${e - 1}`)?.scrollIntoView();
+        setCurrentImage(e);
+        setIsJumpToPageOpen(false);
+    }
+
     const setViewPort = (e) => {
         //console.log(e.target.childNodes);
         //console.log(e.target.naturalHeight);
@@ -102,11 +111,11 @@ export default function Read({ auth, comic, chapter }) {
 
         return (<div className="basis-full">
             <img
-                id={ `image-${img.innerKey}` }
+                id={ `image-${ img.innerKey }` }
                 ref={ imgRef }
                 style={ imgStyles }
                 className={` m-auto comic-img `}
-                src={ `/image/${btoa(img.url)}` }
+                src={ `/image/${ btoa(img.url) }` }
                 onClick={ handleImageClick }
                 alt={ comic.comic.name }
             />
@@ -156,9 +165,47 @@ export default function Read({ auth, comic, chapter }) {
                     </DialogContent>
                 </Dialog>
 
-                    <Button variant="ghost">
-                     { currentImage } / { chapter.sorted.length }
-                </Button>
+                <Dialog open={ isJumpToPageOpen }>
+                    <DialogTrigger>
+                        <TooltipProvider>
+                            <Tooltip>
+                                <TooltipTrigger>
+                                    <Button variant="ghost" onClick={ () => setIsJumpToPageOpen(!isJumpToPageOpen) }>
+                                         { currentImage } / { chapter.sorted.length }
+                                    </Button>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                    <p>Jump To</p>
+                                </TooltipContent>
+                            </Tooltip>
+                        </TooltipProvider>
+                    </DialogTrigger>
+                    <DialogContent className="max-w-[600px]">
+                        <DialogHeader>
+                            <DialogTitle>Jump to</DialogTitle>
+                            <DialogDescription>
+
+                            </DialogDescription>
+                        </DialogHeader>
+                        <div className="space-y-4">
+                            <Select defaultOpen onValueChange={ (e) => selectOnChangeHandler(e) } defaultValue={ currentImage}>
+                                <SelectTrigger>
+                                    <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    { chapter.sorted.map((img, i) => (
+                                        <SelectItem key={ i + 1 } value={ i + 1 }>{ i + 1 } / { chapter.sorted.length }</SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </div>
+                        <DialogFooter>
+                            <DialogClose asChild>
+                                <PrimaryButton onClick={ () => setIsJumpToPageOpen(false) }>Done</PrimaryButton>
+                            </DialogClose>
+                        </DialogFooter>
+                    </DialogContent>
+                </Dialog>
 
                 <TooltipProvider>
                     <Tooltip>
@@ -170,7 +217,7 @@ export default function Read({ auth, comic, chapter }) {
                             </Button>
                         </TooltipTrigger>
                         <TooltipContent>
-                            <p>Content Page</p>
+                            <p>TOC</p>
                         </TooltipContent>
                     </Tooltip>
                 </TooltipProvider>