📱 https://github.com/siyuan-note/siyuan/issues/7688

app/src/mobile/index.ts

@@ -19,6 +19,7 @@ import {hideKeyboardToolbar, showKeyboardToolbar} from "./util/keyboardToolbar";
 import {getLocalStorage} from "../protyle/util/compatibility";
 import {openMobileFileById} from "./editor";
 import {getSearch} from "../util/functions";
+import {initRightMenu} from "./menu";
 
 class App {
     constructor() {
@@ -63,15 +64,14 @@ class App {
                         fetchPost("/api/system/getEmojiConf", {}, emojiResponse => {
                             window.siyuan.emojis = emojiResponse.data as IEmoji[];
                             initFramework();
+                            initRightMenu();
                         });
                     });
                     addGA();
                 });
             });
-            if (navigator.userAgent.indexOf("iPhone") > -1) {
+            document.addEventListener("touchstart", handleTouchStart, false);
-                document.addEventListener("touchstart", handleTouchStart, false);
+            document.addEventListener("touchmove", handleTouchMove, false);
-                document.addEventListener("touchmove", handleTouchMove, false);
-            }
             document.addEventListener("touchend", handleTouchEnd, false);
         });
         setNoteBook();

app/src/mobile/menu/index.ts

@@ -18,11 +18,11 @@ import {getRecentDocs} from "./getRecentDocs";
 export const popMenu = () => {
     activeBlur();
     hideKeyboardToolbar();
+    document.getElementById("menu").style.right = "0";
+};
+
+export const initRightMenu = () => {
     const menuElement = document.getElementById("menu");
-    if (menuElement.innerHTML !== "") {
-        menuElement.style.right = "0";
-        return;
-    }
     let accountHTML = "";
     if (window.siyuan.user && !window.siyuan.config.readonly) {
         accountHTML = `<div class="b3-menu__item" id="menuAccount">
@@ -203,5 +203,4 @@ ${accountHTML}
             target = target.parentElement;
         }
     });
-    menuElement.style.right = "0";
+}
-};

app/src/mobile/util/touch.ts

@@ -1,11 +1,14 @@
-import {goBack, goForward} from "./MobileBackFoward";
+import {hasClosestByAttribute} from "../../protyle/util/hasClosest";
+import {closePanel} from "./closePanel";
+import {popMenu} from "../menu";
 
 let clientX: number;
 let clientY: number;
 let xDiff: number;
 let yDiff: number;
+let time: number;
 
-export const handleTouchEnd = () => {
+export const handleTouchEnd = (event: TouchEvent) => {
     if (window.siyuan.mobile.editor) {
         document.querySelectorAll(".protyle-breadcrumb__bar--hide").forEach(item => {
             item.classList.remove("protyle-breadcrumb__bar--hide");
@@ -13,46 +16,97 @@ export const handleTouchEnd = () => {
         window.siyuan.hideBreadcrumb = false;
     }
 
-    if (!clientX || !clientY || navigator.userAgent.indexOf("iPhone") === -1) {
+    if (!clientX || !clientY || xDiff === 0) {
         return;
     }
 
-    if (Math.abs(xDiff) > Math.abs(yDiff) && Math.abs(xDiff) > window.innerWidth / 4) {
+    const target = event.target as HTMLElement
-        if (xDiff > 0) {
+    let scrollElement = hasClosestByAttribute(target, "data-type", "NodeCodeBlock") || hasClosestByAttribute(target, "data-type", "NodeTable")
-            goForward();
+    if (scrollElement) {
-        } else {
+        scrollElement = scrollElement.classList.contains("table") ? (scrollElement.firstElementChild as HTMLElement) : (scrollElement.firstElementChild.nextElementSibling as HTMLElement)
-            // 后退
+        if ((xDiff < 0 && scrollElement.scrollLeft > 0) ||
-            goBack();
+            (xDiff > 0 && scrollElement.clientWidth + scrollElement.scrollLeft < scrollElement.scrollWidth)) {
+            return;
         }
     }
 
-    clientX = null;
+    let show = false
-    clientY = null;
+    if (new Date().getTime() - time < 1000) {
+        show = true
+    } else if (Math.abs(xDiff) > window.innerWidth / 3) {
+        show = true
+    }
+    const menuElement = hasClosestByAttribute(target, "id", "menu")
+    if (show && menuElement && xDiff < 0) {
+        closePanel();
+        return;
+    }
+    const sideElement = hasClosestByAttribute(target, "id", "sidebar")
+    if (show && sideElement && xDiff > 0) {
+        closePanel();
+        return;
+    }
+    if (!show) {
+        closePanel();
+        return;
+    }
+    if (Math.abs(xDiff) > Math.abs(yDiff)) {
+        if (xDiff > 0) {
+            popMenu();
+        } else {
+            document.getElementById("toolbarFile").dispatchEvent(new CustomEvent("click"))
+        }
+    }
 };
 
 export const handleTouchStart = (event: TouchEvent) => {
     xDiff = 0;
     yDiff = 0;
-    clientX = event.touches[0].clientX;
+    if (navigator.userAgent.indexOf("iPhone") > -1 ||
-    if ((clientX < 48 || clientX > window.innerWidth - 24)) {
+        (event.touches[0].clientX > 8 && event.touches[0].clientX < window.innerWidth - 8)) {
+        clientX = event.touches[0].clientX;
         clientY = event.touches[0].clientY;
+        time = new Date().getTime();
     } else {
         clientX = null;
         clientY = null;
+        time = 0;
         event.stopImmediatePropagation();
     }
 };
 
 export const handleTouchMove = (event: TouchEvent) => {
-    if (!clientX || !clientY) return;
+    if (!clientX || !clientY) {
+        return;
+    }
     xDiff = Math.floor(clientX - event.touches[0].clientX);
     yDiff = Math.floor(clientY - event.touches[0].clientY);
-    // TODO 动画效果
+
     if (Math.abs(xDiff) > Math.abs(yDiff)) {
+        const target = event.target as HTMLElement
+        let scrollElement = hasClosestByAttribute(target, "data-type", "NodeCodeBlock") || hasClosestByAttribute(target, "data-type", "NodeTable")
+        if (scrollElement) {
+            scrollElement = scrollElement.classList.contains("table") ? (scrollElement.firstElementChild as HTMLElement) : (scrollElement.firstElementChild.nextElementSibling as HTMLElement)
+            if ((xDiff < 0 && scrollElement.scrollLeft > 0) ||
+                (xDiff > 0 && scrollElement.clientWidth + scrollElement.scrollLeft < scrollElement.scrollWidth)) {
+                return;
+            }
+        }
+        const menuElement = hasClosestByAttribute(target, "id", "menu")
+        if (menuElement && xDiff < 0) {
+            menuElement.style.right = xDiff + "px"
+            return;
+        }
+        const sideElement = hasClosestByAttribute(target, "id", "sidebar")
+        if (sideElement && xDiff > 0) {
+            sideElement.style.left = -xDiff + "px"
+            return;
+        }
+        console.log(event);
         if (xDiff < 0) {
-            // "left->right"
+            document.getElementById("sidebar").style.left = -window.innerWidth - xDiff + "px"
         } else {
-            // "right->left"
+            document.getElementById("menu").style.right = -window.innerWidth + xDiff + "px"
         }
     }
 };