ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added some key mappings to navigate pages (#95)

Browse Source 
* Added some key mappings to navigate pages

* use keyboard event codes

* unused files removed

* use a reference to current page

* fix some bugs with Virtuoso

* add keymapping for space to navigate to next page

* commit my changes

* fix functions not regenerating

* fix partial scroll back to start of page issue

Co-authored-by: Aria Moradi <aria.moradi007@gmail.com>
This commit is contained in:
Manchewable
2021-05-24 12:16:05 -07:00
committed by GitHub
parent 16b34f874d
commit 23466cf853
3 changed files with 80 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
webUI/react/src/components/reader/pager/PagedPager.tsx
View File

@@ -1,4 +1,3 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
/*
* Copyright (C) Contributors to the Suwayomi project
*
@@ -8,7 +7,6 @@
import { makeStyles } from '@material-ui/core/styles';
import React, { useEffect, useRef } from 'react';
import { useHistory } from 'react-router-dom';
import Page from '../Page';
const useStyles = makeStyles({
@@ -24,13 +22,12 @@ const useStyles = makeStyles({
export default function PagedReader(props: IReaderProps) {
const {
pages, settings, setCurPage, curPage, manga, chapter, nextChapter,
pages, settings, setCurPage, curPage, nextChapter,
} = props;
const classes = useStyles();
const history = useHistory();
const pageRef = useRef<HTMLDivElement>(null);
const selfRef = useRef<HTMLDivElement>(null);
function nextPage() {
if (curPage < pages.length - 1) {
@@ -45,7 +42,11 @@ export default function PagedReader(props: IReaderProps) {
}
function keyboardControl(e:KeyboardEvent) {
switch (e.key) {
switch (e.code) {
case 'Space':
e.preventDefault();
nextPage();
break;
case 'ArrowRight':
nextPage();
break;
@@ -66,17 +67,17 @@ export default function PagedReader(props: IReaderProps) {
}
useEffect(() => {
document.addEventListener('keyup', keyboardControl, false);
pageRef.current?.addEventListener('click', clickControl);
document.addEventListener('keydown', keyboardControl);
selfRef.current?.addEventListener('click', clickControl);
return () => {
document.removeEventListener('keyup', keyboardControl);
pageRef.current?.removeEventListener('click', clickControl);
document.removeEventListener('keydown', keyboardControl);
selfRef.current?.removeEventListener('click', clickControl);
};
}, [curPage, pageRef]);
}, [selfRef, curPage]);
return (
<div ref={pageRef} className={classes.reader}>
<div ref={selfRef} className={classes.reader}>
<Page
key={curPage}
index={curPage}