web2468/src/hooks/useEdgeGesture.js

import {useEffect, useState} from "react";
import {toast} from "react-toastify";
import {localStorageGet, localStorageSet} from "@utils/helpers";
const objInfo={
    timer:null
}
const useEdgeGesture = () => {
    const [isSideGesture, setIsSideGesture] = useState(false);
    const getSidedGesture = () => {
        let isguesture=parseInt(localStorageGet("IOS_GUESTURE",0));
        if (isguesture===1){
            return 1;
        }
        return 0;
    }
    const setSidedGesture = (isGuesture=0) => {
        setIsSideGesture(isGuesture);
        localStorageSet("IOS_GUESTURE",isGuesture);
    }
    let isEdgeGesture=false;
    let isTouchingEdge = false;
    const handleGesture=(e)=>{
        if (global.isIOS){
            // 获取触摸点的坐标
            const touchX = e.touches[0].clientX;
            const touchY = e.touches[0].clientY;

            // 假设边缘手势区域的阈值为 20px
            const edgeThreshold = 20;

            // 检查触摸点是否在屏幕边缘
            const isGesture = touchX < edgeThreshold || touchX > window.innerWidth - edgeThreshold ||
                touchY < edgeThreshold || touchY > window.innerHeight - edgeThreshold;
            isEdgeGesture=isGesture;
            if (isEdgeGesture) {
                isTouchingEdge = false;
                // 如果触摸点在边缘区域内
                removeTouchMove();
                document.addEventListener("touchmove",handleGestureMove);
            } else {
                // 如果触摸点不在边缘区域内，重置触摸边缘的状态
                isTouchingEdge = false;
                setSidedGesture(0);
                removeTouchMove();
            }
        }
    }
    const handleGestureMove=(e)=>{
        if (isEdgeGesture){
            if (!isTouchingEdge) {
                // 如果之前没有触摸边缘，记录触摸边缘的状态，并设置一个定时器
                isTouchingEdge = true;
                resetTimer();
                objInfo.timer=setTimeout(function() {
                    if (isTouchingEdge) {
                        // console.log('用户执行了边缘手势');
                        // // 这里可以执行相应的逻辑
                        setSidedGesture(1);
                        // toast.success("11111111");
                        isTouchingEdge = false;
                        removeTouchMove();
                    }
                }, 60); // 设置一个时间阈值，例如 300 毫秒
            }
        }
    }
    const resetTimer=()=>{
        if (objInfo.timer!=null){
            clearTimeout(objInfo.timer);
            objInfo.timer=null;
        }
    }
    const removeTouchMove=()=>{
        document.removeEventListener('touchmove', handleGestureMove);
    }
    useEffect(() => {
        // 监听 touchstart 事件
        document.addEventListener('touchstart', handleGesture);
        // document.addEventListener('touchmove', handleGesture);
        return ()=>{
            document.removeEventListener('touchstart', handleGesture);
            removeTouchMove();
            resetTimer();
        }
    }, []);
    return {isSideGesture,setIsSideGesture,getSidedGesture,setSidedGesture};
}
export default useEdgeGesture;