From 5cb7e68e0a79bc802ec5140502deff061fa5ee8e Mon Sep 17 00:00:00 2001 From: Vanessa Date: Fri, 31 Mar 2023 16:41:09 +0800 Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/7688 --- app/src/assets/scss/mobile.scss | 12 ++++ app/src/assets/template/mobile/index.tpl | 1 + app/src/mobile/util/closePanel.ts | 3 + app/src/mobile/util/touch.ts | 85 +++++++++++++++--------- 4 files changed, 71 insertions(+), 30 deletions(-) diff --git a/app/src/assets/scss/mobile.scss b/app/src/assets/scss/mobile.scss index 90b32477a..44b355bd4 100644 --- a/app/src/assets/scss/mobile.scss +++ b/app/src/assets/scss/mobile.scss @@ -166,6 +166,18 @@ } } +.side-mask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 219; + background-color: #000; + opacity: 0; + transition: opacity 150ms linear; +} + #model { .config-about__logo { display: flex; diff --git a/app/src/assets/template/mobile/index.tpl b/app/src/assets/template/mobile/index.tpl index 7863f6cd3..2563d2ca8 100644 --- a/app/src/assets/template/mobile/index.tpl +++ b/app/src/assets/template/mobile/index.tpl @@ -60,5 +60,6 @@
+
diff --git a/app/src/mobile/util/closePanel.ts b/app/src/mobile/util/closePanel.ts index 6048d3573..1127dae10 100644 --- a/app/src/mobile/util/closePanel.ts +++ b/app/src/mobile/util/closePanel.ts @@ -2,4 +2,7 @@ export const closePanel = () => { document.getElementById("menu").style.right = "-100vw"; document.getElementById("sidebar").style.left = "-100vw"; document.getElementById("model").style.top = "-200vh"; + const maskElement = document.querySelector(".side-mask") as HTMLElement; + maskElement.classList.add("fn__none"); + maskElement.style.opacity = ""; }; diff --git a/app/src/mobile/util/touch.ts b/app/src/mobile/util/touch.ts index 1094c520a..402b66022 100644 --- a/app/src/mobile/util/touch.ts +++ b/app/src/mobile/util/touch.ts @@ -1,6 +1,7 @@ import {hasClosestByAttribute, hasClosestByClassName} from "../../protyle/util/hasClosest"; import {closePanel} from "./closePanel"; import {popMenu} from "../menu"; +import {activeBlur, hideKeyboardToolbar} from "./keyboardToolbar"; let clientX: number; let clientY: number; @@ -10,6 +11,16 @@ let time: number; let firstDirection: "toLeft" | "toRight"; let lastClientX: number; // 和起始方向不一致时，记录最后一次的 clientX +const popSide = (render = true) => { + if (render) { + document.getElementById("toolbarFile").dispatchEvent(new CustomEvent("click")); + } else { + hideKeyboardToolbar(); + activeBlur(); + document.getElementById("sidebar").style.left = "0"; + } +} + export const handleTouchEnd = (event: TouchEvent) => { if (window.siyuan.mobile.editor) { document.querySelectorAll(".protyle-breadcrumb__bar--hide").forEach(item => { @@ -21,6 +32,7 @@ export const handleTouchEnd = (event: TouchEvent) => { const target = event.target as HTMLElement; if (!clientX || !clientY || typeof yDiff === "undefined" || hasClosestByClassName(target, "b3-dialog") || + hasClosestByClassName(target, "keyboard") || hasClosestByAttribute(target, "id", "model") ) { return; @@ -50,46 +62,42 @@ export const handleTouchEnd = (event: TouchEvent) => { const menuElement = hasClosestByAttribute(target, "id", "menu"); if (menuElement) { if (isXScroll) { - if (scrollEnable) { - if (xDiff <= 0) { - if (lastClientX) { - popMenu(); - } else { - closePanel(); - } - } else if (lastClientX) { + if (firstDirection === "toRight") { + if (lastClientX) { + popMenu(); + } else { closePanel(); } + } else { + if (lastClientX) { + closePanel(); + } else { + popMenu(); + } } } else { - if (xDiff > 0) { - popMenu(); - } else if (menuElement.style.right !== "0px") { - closePanel(); - } + popMenu(); } return; } const sideElement = hasClosestByAttribute(target, "id", "sidebar"); if (sideElement) { if (isXScroll) { - if (scrollEnable) { - if (xDiff >= 0) { - if (lastClientX) { - document.getElementById("toolbarFile").dispatchEvent(new CustomEvent("click")); - } else { - closePanel(); - } - } else if (lastClientX) { + if (firstDirection === "toLeft") { + if (lastClientX) { + popSide(false); + } else { closePanel(); } + } else { + if (lastClientX) { + closePanel(); + } else { + popSide(false); + } } } else { - if (xDiff < 0) { - document.getElementById("toolbarFile").dispatchEvent(new CustomEvent("click")); - } else if (sideElement.style.left !== "0px") { - closePanel(); - } + popSide(false); } return; } @@ -108,7 +116,7 @@ export const handleTouchEnd = (event: TouchEvent) => { if (lastClientX) { closePanel(); } else { - document.getElementById("toolbarFile").dispatchEvent(new CustomEvent("click")); + popSide(); } } }; @@ -137,6 +145,7 @@ export const handleTouchMove = (event: TouchEvent) => { const target = event.target as HTMLElement; if (!clientX || !clientY || hasClosestByClassName(target, "b3-dialog") || + hasClosestByClassName(target, "keyboard") || hasClosestByAttribute(target, "id", "model")) { return; } @@ -172,11 +181,15 @@ export const handleTouchMove = (event: TouchEvent) => { } } - + const windowWidth = window.innerWidth; const menuElement = hasClosestByAttribute(target, "id", "menu"); if (menuElement) { if (xDiff < 0) { menuElement.style.right = xDiff + "px"; + transformMask(-xDiff / windowWidth); + } else { + menuElement.style.right = "0px"; + transformMask(0); } return; } @@ -184,13 +197,25 @@ export const handleTouchMove = (event: TouchEvent) => { if (sideElement) { if (xDiff > 0) { sideElement.style.left = -xDiff + "px"; + transformMask(xDiff / windowWidth); + } else { + sideElement.style.left = "0px"; + transformMask(0); } return; } if (firstDirection === "toRight") { - document.getElementById("sidebar").style.left = -window.innerWidth - xDiff + "px"; + document.getElementById("sidebar").style.left = -windowWidth - xDiff + "px"; + transformMask((windowWidth + xDiff) / windowWidth); } else { - document.getElementById("menu").style.right = -window.innerWidth + xDiff + "px"; + document.getElementById("menu").style.right = -windowWidth + xDiff + "px"; + transformMask((windowWidth - xDiff) / windowWidth); } } }; + +const transformMask = (opacity: number) => { + const maskElement = document.querySelector(".side-mask") as HTMLElement; + maskElement.classList.remove("fn__none"); + maskElement.style.opacity = Math.min((1 - opacity), 0.86).toString(); +}