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

⚡

Browse source
This commit is contained in:
Vanessa 2023-04-06 19:14:23 +08:00
parent 6d672cc85f
commit d475bee01e
7 changed files with 29 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -149,20 +149,16 @@
}
.side-panel {
top: 0;
left: -110vw;
right: auto;
position: fixed;
background-color: var(--b3-theme-surface);
height: 100vh;
width: 100vw;
z-index: 220;
transition: top .15s cubic-bezier(0, 0, .2, 1) 0ms, left .15s cubic-bezier(0, 0, .2, 1) 0ms;
transform: translateX(-100vw);
transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms;
&--all {
left: 0;
right: 0;
top: -200vh;
transform: translateY(-100vh);
}
}
@ -246,10 +242,9 @@
}
#menu {
transition: right 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms;
transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms;
z-index: 220;
right: -110vw;
left: auto;
transform: translateX(100vw);
}
.keyboard {

2
app/src/mobile/menu/index.ts
View file

@ -18,7 +18,7 @@ import {getRecentDocs} from "./getRecentDocs";
export const popMenu = () => {
activeBlur();
hideKeyboardToolbar();
document.getElementById("menu").style.right = "0";
document.getElementById("menu").style.transform = "translateX(0)";
};
export const initRightMenu = () => {

2
app/src/mobile/menu/model.ts
View file

@ -5,7 +5,7 @@ export const openModel = (obj: {
bindEvent: (element: HTMLElement) => void
}) => {
const modelElement = document.getElementById("model");
modelElement.style.top = "0";
modelElement.style.transform = "translateY(0)";
modelElement.querySelector(".toolbar__icon use").setAttribute("xlink:href", "#" + obj.icon);
modelElement.querySelector(".toolbar__text").innerHTML = obj.title;
const modelMainElement = modelElement.querySelector("#modelMain") as HTMLElement;

14
app/src/mobile/util/MobileBackFoward.ts
View file

@ -103,9 +103,9 @@ export const goForward = () => {
!window.siyuan.menus.menu.element.classList.contains("fn__none")) {
window.siyuan.menus.menu.element.dispatchEvent(new CustomEvent("click", {detail: "back"}));
return;
} else if (document.getElementById("model").style.top === "0px" ||
document.getElementById("menu").style.right === "0px" ||
document.getElementById("sidebar").style.left === "0px") {
} else if (document.getElementById("model").style.transform === "translateY(0)" ||
document.getElementById("menu").style.transform === "translateX(0)" ||
document.getElementById("sidebar").style.transform === "translateX(0)") {
closePanel();
return;
}
@ -125,11 +125,11 @@ export const goBack = () => {
!window.siyuan.menus.menu.element.classList.contains("fn__none")) {
window.siyuan.menus.menu.element.dispatchEvent(new CustomEvent("click", {detail: "back"}));
return;
} else if (document.getElementById("model").style.top === "0px") {
document.getElementById("model").style.top = "-200vh";
} else if (document.getElementById("model").style.transform === "translateY(0)") {
document.getElementById("model").style.transform = "";
return;
} else if (document.getElementById("menu").style.right === "0px" ||
document.getElementById("sidebar").style.left === "0px") {
} else if (document.getElementById("menu").style.transform === "translateX(0)" ||
document.getElementById("sidebar").style.transform === "translateX(0)") {
closePanel();
return;
}

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

@ -1,7 +1,7 @@
export const closePanel = () => {
document.getElementById("menu").style.right = "-100vw";
document.getElementById("sidebar").style.left = "-100vw";
document.getElementById("model").style.top = "-200vh";
document.getElementById("menu").style.transform = "";
document.getElementById("sidebar").style.transform = "";
document.getElementById("model").style.transform = "";
const maskElement = document.querySelector(".side-mask") as HTMLElement;
maskElement.classList.add("fn__none");
maskElement.style.opacity = "";

4
app/src/mobile/util/initFramework.ts
View file

@ -85,7 +85,7 @@ export const initFramework = () => {
document.getElementById("toolbarFile").addEventListener("click", () => {
hideKeyboardToolbar();
activeBlur();
sidebarElement.style.left = "0";
sidebarElement.style.transform = "translateX(0)";
const type = sidebarElement.querySelector(".toolbar--border .toolbar__icon--active").getAttribute("data-type");
if (type === "sidebar-outline-tab") {
outline.update();
@ -131,7 +131,7 @@ export const initFramework = () => {
}, Constants.TIMEOUT_INPUT);
}
document.getElementById("modelClose").addEventListener("click", () => {
document.getElementById("model").style.top = "-200vh";
document.getElementById("model").style.transform = "";
});
initEditorName();
if (getOpenNotebookCount() > 0) {

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

@ -17,7 +17,7 @@ const popSide = (render = true) => {
} else {
hideKeyboardToolbar();
activeBlur();
document.getElementById("sidebar").style.left = "0";
document.getElementById("sidebar").style.transform = "translateX(0)";
}
};
@ -40,6 +40,8 @@ export const handleTouchEnd = (event: TouchEvent) => {
return;
}
window.siyuan.mobile.editor.protyle.contentElement.style.overflow = "";
// 有些事件不经过 touchstart 和 touchmove，因此需设置为 null 不再继续执行
clientX = null;
// 有些事件不经过 touchmove
@ -208,10 +210,10 @@ export const handleTouchMove = (event: TouchEvent) => {
const menuElement = hasClosestByAttribute(target, "id", "menu");
if (menuElement) {
if (xDiff < 0) {
menuElement.style.right = xDiff + "px";
menuElement.style.transform = `translateX(${-xDiff}px)`;
transformMask(-xDiff / windowWidth);
} else {
menuElement.style.right = "0px";
menuElement.style.transform = "translateX(0)";
transformMask(0);
}
return;
@ -219,23 +221,24 @@ export const handleTouchMove = (event: TouchEvent) => {
const sideElement = hasClosestByAttribute(target, "id", "sidebar");
if (sideElement) {
if (xDiff > 0) {
sideElement.style.left = -xDiff + "px";
sideElement.style.transform = `translateX(${-xDiff}px)`;
transformMask(xDiff / windowWidth);
} else {
sideElement.style.left = "0px";
sideElement.style.transform = "translateX(0)";
transformMask(0);
}
return;
}
if (firstDirection === "toRight") {
document.getElementById("sidebar").style.left = -windowWidth - xDiff + "px";
document.getElementById("sidebar").style.transform = `translateX(${-xDiff - windowWidth}px)`;
transformMask((windowWidth + xDiff) / windowWidth);
} else {
document.getElementById("menu").style.right = -windowWidth + xDiff + "px";
document.getElementById("menu").style.transform = `translateX(${windowWidth - xDiff}px)`;
transformMask((windowWidth - xDiff) / windowWidth);
}
activeBlur();
hideKeyboardToolbar();
window.siyuan.mobile.editor.protyle.contentElement.style.overflow = "hidden";
}
};