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

Search

Browse Source
This commit is contained in:
User
2024-12-28 22:41:16 -05:00
parent 55414d56a4
commit 2b52f7f15a
8 changed files with 163 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -113,7 +113,11 @@ export default function Chapters({ auth, comic, chapters, histories }) {
</tr>
<tr>
<td className="text-right pr-3">Authors</td>
<td>{ comic.comic.author.map(a => <Badge key={ a.path_word } className="m-2" variant="outline"><Link>{ a.name }</Link></Badge>) }</td>
<td>{ comic.comic.author.map(a => (
<Badge key={ a.path_word } className="m-2" variant="outline">
<Link href={ route('comics.author', [a.path_word]) }>{ a.name }</Link>
</Badge>
) ) }</td>
</tr>
<tr>
<td className="text-right pr-3">Description</td>

12
resources/js/Pages/Comic/Index.jsx
View File

@@ -12,7 +12,7 @@ import { useToast } from '@/hooks/use-toast.js';
export default function Index({ comics, offset, auth }) {
const url = new URL(window.location).searchParams;
const url = new URL(window.location); //searchParams
const [favourites, setFavourites] = useState(auth.user.favourites);
const { toast } = useToast();
@@ -43,7 +43,11 @@ export default function Index({ comics, offset, auth }) {
<CardContent>
<CardTitle><Link href={ `/comic/${ props.path_word }` }>{ props.name }</Link></CardTitle>
<CardDescription className="pt-2">
{ props.author.map(a => <Badge className="m-1" key={ a.path_word } variant="outline"><Link>{ a.name }</Link></Badge>) }
{ props.author.map(a => (
<Badge className="m-1" key={ a.path_word } variant="outline">
{ a.name }
</Badge>)
) }
</CardDescription>
</CardContent>
</Card>
@@ -65,11 +69,11 @@ export default function Index({ comics, offset, auth }) {
<PaginationContent>
{ parseInt(offset) !== 0 &&
<PaginationItem>
<PaginationPrevious href={ `/?${url}` } only={['comics', 'offset']} headers={{ offset: parseInt(offset) - 30 }} />
<PaginationPrevious href={ `${ url.pathname }?${ url.searchParams }` } only={['comics', 'offset']} headers={{ offset: parseInt(offset) - 30 }} />
</PaginationItem>
}
<PaginationItem>
<PaginationNext href={ `/?${url}` } only={['comics', 'offset']} headers={{ offset: parseInt(offset) + 30 }} />
<PaginationNext href={ `${ url.pathname }?${ url.searchParams }` } only={['comics', 'offset']} headers={{ offset: parseInt(offset) + 30 }} />
</PaginationItem>
</PaginationContent>
</Pagination>

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

@@ -18,7 +18,7 @@ export default function Read({ auth, comic, chapter }) {
const validReadingModes = ['rtl', 'utd'];
const [readingMode, setReadingMode] = useState('rtl'); // rtl, utd
const [isTwoPagesPerScreen, setIsTwoPagePerScreen] = useState(false);
const [isTwoPagesPerScreen, setIsTwoPagePerScreen] = useState(false); // TODO
const [currentImage, setCurrentImage] = useState(1);
const windowSize = useWindowSize();
@@ -228,13 +228,13 @@ export default function Read({ auth, comic, chapter }) {
let visibleImageIndex = 0;
// Determine which image is visible based on scroll position
images.forEach((image, index) => {
images.forEach((image, i) => {
const imageTop = image.offsetTop; // Distance from top of the container
const imageBottom = imageTop + image.offsetHeight;
// Check if the image is in the visible area
if (containerScrollTop + 80 >= imageTop && containerScrollTop < imageBottom) {
visibleImageIndex = index;
visibleImageIndex = i;
}
});
@@ -242,12 +242,9 @@ export default function Read({ auth, comic, chapter }) {
setCurrentImage(visibleImageIndex + 1);
};
const throttledHandleScroll = throttle(handleScroll, 100); // Throttle for performance
const throttledHandleScroll = throttle(handleScroll, 1000); // Throttle for performance
ref.current.addEventListener("scroll", throttledHandleScroll);
// Initial check for visible image
handleScroll();
return () => {
if (ref.current) {
ref.current.removeEventListener("scroll", throttledHandleScroll);