Merge pull request 'Add mouse and keyboard control scroll. Add auto homing when window resize.' (#19) from FatttSnake into dev

Reviewed-on: FatttSnake/fatweb-ui#19

src/components/home/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import FitFullScreen from '@/components/common/FitFullScreen'
 import FitCenter from '@/components/common/FitCenter'
 import { MainFrameworkContext } from '@/pages/MainFramework'
@@ -13,7 +13,7 @@ const Home: React.FC = () => {
 
     const fitFullScreenRef = useRef<HTMLDivElement>(null)
     const scrollTimeout = useRef(0)
-    const touchStart = useRef(0)
+    const clickStart = useRef(0)
 
     const [currentContent, setCurrentContent] = useState(0)
 
@@ -24,6 +24,14 @@ const Home: React.FC = () => {
         })
     }, [setNavbarHidden, setPreventScroll])
 
+    useLayoutEffect(() => {
+        const handleWindowResize = () => {
+            handleScrollToContent(currentContent)()
+        }
+        window.addEventListener('resize', handleWindowResize)
+        return () => window.removeEventListener('resize', handleWindowResize)
+    })
+
     const handleScrollToContent = (index: number) => {
         return () => {
             if (!index) {
@@ -73,11 +81,11 @@ const Home: React.FC = () => {
     }
 
     const handleTouchStart = (event: React.TouchEvent) => {
-        touchStart.current = event.touches[0].clientY
+        clickStart.current = event.touches[0].clientY
     }
 
     const handleTouchEnd = (event: React.TouchEvent) => {
-        const moveLength = touchStart.current - event.changedTouches[0].clientY
+        const moveLength = clickStart.current - event.changedTouches[0].clientY
         if (Math.abs(moveLength) < 100) {
             return
         }
@@ -89,6 +97,32 @@ const Home: React.FC = () => {
         }
     }
 
+    const handleMouseDown = (event: React.MouseEvent) => {
+        clickStart.current = event.clientY
+    }
+
+    const handleMouseUp = (event: React.MouseEvent) => {
+        const moveLength = clickStart.current - event.clientY
+        if (Math.abs(moveLength) < 100) {
+            return
+        }
+
+        if (moveLength > 0) {
+            handleScrollDown()
+        } else {
+            handleScrollUp()
+        }
+    }
+
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+        if (event.key === 'ArrowUp') {
+            handleScrollUp()
+        }
+        if (event.key === 'ArrowDown') {
+            handleScrollDown()
+        }
+    }
+
     const content = [
         {
             backgroundColor: '#FBFBFB',
@@ -101,7 +135,15 @@ const Home: React.FC = () => {
 
     return (
         <>
-            <div onWheel={handleWheel} onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd}>
+            <div
+                tabIndex={0}
+                onWheel={handleWheel}
+                onTouchStart={handleTouchStart}
+                onTouchEnd={handleTouchEnd}
+                onMouseDown={handleMouseDown}
+                onMouseUp={handleMouseUp}
+                onKeyDown={handleKeyDown}
+            >
                 {content.map((element, index) => {
                     return <FitFullScreen key={index} {...element} />
                 })}