Andreas/siyuan
1
0
Fork 0
mirror of https://github.com/siyuan-note/siyuan.git synced 2026-01-04 07:48:49 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

Browse source
This commit is contained in:
Vanessa 2023-03-31 16:41:09 +08:00
parent 8a2a724341
commit 5cb7e68e0a
4 changed files with 71 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

12
app/src/assets/scss/mobile.scss
View file

@ -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;

1
app/src/assets/template/mobile/index.tpl
View file

@ -60,5 +60,6 @@
<div id="message" class="b3-snackbars"></div>
<div id="status" class="status status--hide"></div>
<div id="keyboardToolbar" class="keyboard fn__none"></div>
<div class="side-mask fn__none"></div>
</body>
</html>

3
app/src/mobile/util/closePanel.ts
View file

@ -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 = "";
};

85
app/src/mobile/util/touch.ts
View file

@ -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();
}