Feature/reader vertical pager keyboard bindings scrolling (#452)

* Scroll up when clicking shift + space * Add keyboard bindings to arrow up and down Align scroll amount with using other keys like space, arrow right/left * Add scroll inversion with shift to other key bindings * Scroll per mouse dragging
Suwayomi · Nov 12, 2023 · dabe883 · dabe883
1 parent 9b96560
commit dabe883
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 3 deletions.
diff --git a/src/components/reader/Page.tsx b/src/components/reader/Page.tsx
@@ -55,6 +55,7 @@ function imageStyle(settings: IReaderSettings): any {
         minWidth: '50vw',
         width: dimensions.width < dimensions.height ? '100vw' : '100%',
         maxWidth: '100%',
+        pointerEvents: 'none',
     };
 }
 

diff --git a/src/components/reader/pager/VerticalPager.tsx b/src/components/reader/pager/VerticalPager.tsx
@@ -83,6 +83,33 @@ export function VerticalPager(props: IReaderProps) {
         };
     }, [settings.loadNextOnEnding, nextChapter]);
 
+    const mouseYPos = useRef<number>(0);
+    const didMouseMove = useRef(false);
+
+    function dragScreen(e: MouseEvent) {
+        didMouseMove.current = true;
+        window.scrollBy(0, mouseYPos.current - e.pageY);
+    }
+
+    function dragControl(e: MouseEvent) {
+        mouseYPos.current = e.pageY;
+        selfRef.current?.addEventListener('mousemove', dragScreen);
+    }
+
+    function removeDragControl() {
+        selfRef.current?.removeEventListener('mousemove', dragScreen);
+    }
+
+    useEffect(() => {
+        selfRef.current?.addEventListener('mousedown', dragControl);
+        selfRef.current?.addEventListener('mouseup', removeDragControl);
+
+        return () => {
+            selfRef.current?.removeEventListener('mousedown', dragControl);
+            selfRef.current?.removeEventListener('mouseup', removeDragControl);
+        };
+    }, [selfRef]);
+
     const go = useCallback(
         (direction: 'up' | 'down') => {
             if (direction === 'down' && isAtBottom()) {
@@ -107,13 +134,18 @@ export function VerticalPager(props: IReaderProps) {
         const handleKeyboard = (e: KeyboardEvent) => {
             switch (e.code) {
                 case 'Space':
+                    e.preventDefault();
+                    go(e.shiftKey ? 'up' : 'down');
+                    break;
+                case 'ArrowDown':
                 case 'ArrowRight':
                     e.preventDefault();
-                    go('down');
+                    go(e.shiftKey ? 'up' : 'down');
                     break;
+                case 'ArrowUp':
                 case 'ArrowLeft':
                     e.preventDefault();
-                    go('up');
+                    go(e.shiftKey ? 'down' : 'up');
                     break;
                 default:
                     break;
@@ -144,7 +176,14 @@ export function VerticalPager(props: IReaderProps) {
                 margin: '0 auto',
                 width: '100%',
             }}
-            onClick={(e) => go(e.clientX > window.innerWidth / 2 ? 'down' : 'up')}
+            onClick={(e) => {
+                if (didMouseMove.current) {
+                    didMouseMove.current = false;
+                    return;
+                }
+
+                go(e.clientX > window.innerWidth / 2 ? 'down' : 'up');
+            }}
         >
             {pages.map((page) => (
                 <Page