turkey/cv4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.0.2 FR 1

Browse Source
This commit is contained in:
User
2025-01-01 12:24:47 -05:00
parent 9777e46316
commit da807296f3
15 changed files with 212 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/Pages/Comic/Chapters.jsx
View File

@@ -48,7 +48,7 @@ export default function Chapters({ auth, comic, chapters, histories, offset }) {
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button size="sm" variant="outline" asChild className={ isRead ? 'bg-gray-200 hover:bg-gray-300' : '' }>
<Button size="sm" variant="outline" asChild className={ isRead ? 'bg-gray-200 hover:bg-gray-300 dark:bg-slate-800 dark:hover:bg-slate-700' : '' }>
<Link className="relative" href={ `/comic/${ comic.comic.path_word }/${ props.uuid }` }>
{ props.name }
{ isNew && <Plus size={ 16 } className="text-xs absolute right-0 top-0" /> }

61
resources/js/Pages/Comic/Read.jsx
View File

@@ -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>