This commit is contained in:
Vanessa 2023-11-17 22:35:16 +08:00
parent 12c9151ab3
commit 8e93286077
3 changed files with 42 additions and 31 deletions

View file

@ -6,7 +6,7 @@ import {globalClick} from "./click";
import {goBack, goForward} from "../../util/backForward";
import {Constants} from "../../constants";
import {isIPad} from "../../protyle/util/compatibility";
import {globalTouchEnd} from "./touch";
import {globalTouchEnd, globalTouchStart} from "./touch";
import {initDockMenu} from "../../menus/dock";
import {hasClosestByAttribute, hasClosestByClassName} from "../../protyle/util/hasClosest";
import {initTabMenu} from "../../menus/tab";
@ -80,34 +80,7 @@ export const initWindowEvent = (app: App) => {
// 触摸屏背景和嵌入块按钮显示
const backgroundElement = hasClosestByClassName(target, "protyle-background")
if (backgroundElement) {
if (target.tagName === "IMG" && backgroundElement.firstElementChild.querySelector(".protyle-icons").classList.contains("fn__none")) {
// 文档背景位置调整
const contentElement = hasClosestByClassName(backgroundElement, "protyle-content");
if (!contentElement) {
return;
}
contentElement.style.overflow = "hidden"
const y = event.touches[0].clientY;
const documentSelf = document;
const height = (target as HTMLImageElement).naturalHeight * target.clientWidth / (target as HTMLImageElement).naturalWidth - target.clientHeight;
let originalPositionY = parseFloat(target.style.objectPosition.substring(7)) || 50;
if (target.style.objectPosition.endsWith("px")) {
originalPositionY = -parseInt(target.style.objectPosition.substring(7)) / height * 100;
}
documentSelf.ontouchmove = (moveEvent) => {
target.style.objectPosition = `center ${((y - moveEvent.touches[0].clientY) / height * 100 + originalPositionY).toFixed(2)}%`;
};
documentSelf.ontouchend = () => {
contentElement.style.overflow = ""
documentSelf.ontouchmove = null;
documentSelf.ontouchstart = null;
documentSelf.ondragstart = null;
documentSelf.onselectstart = null;
documentSelf.onselect = null;
};
} else {
if (!globalTouchStart(event)) {
backgroundElement.classList.toggle("protyle-background--mobileshow");
}
return;
@ -156,7 +129,7 @@ export const initWindowEvent = (app: App) => {
const backlinkBreadcrumbItemElement = hasClosestByClassName(target, "protyle-breadcrumb__item");
if (backlinkBreadcrumbItemElement) {
const breadcrumbId = backlinkBreadcrumbItemElement.getAttribute("data-id")||backlinkBreadcrumbItemElement.getAttribute("data-node-id");
const breadcrumbId = backlinkBreadcrumbItemElement.getAttribute("data-id") || backlinkBreadcrumbItemElement.getAttribute("data-node-id");
if (breadcrumbId) {
fetchPost("/api/block/checkBlockFold", {id: breadcrumbId}, (foldResponse) => {
openFileById({

View file

@ -12,6 +12,41 @@ import {Tab} from "../../layout/Tab";
import {Editor} from "../../editor";
import {hideTooltip} from "../../dialog/tooltip";
export const globalTouchStart = (event: TouchEvent) => {
// 文档背景位置调整
const target = event.target as HTMLElement;
const backgroundElement = hasClosestByClassName(target, "protyle-background")
if (backgroundElement && target.tagName === "IMG" && backgroundElement.firstElementChild.querySelector(".protyle-icons").classList.contains("fn__none")) {
const contentElement = hasClosestByClassName(target, "protyle-content", true);
if (!contentElement) {
return false;
}
contentElement.style.overflow = "hidden";
const y = event.touches[0].clientY;
const height = (target as HTMLImageElement).naturalHeight * target.clientWidth / (target as HTMLImageElement).naturalWidth - target.clientHeight;
let originalPositionY = parseFloat(target.style.objectPosition.substring(7)) || 50;
if (target.style.objectPosition.endsWith("px")) {
originalPositionY = -parseInt(target.style.objectPosition.substring(7)) / height * 100;
}
const documentSelf = document;
documentSelf.ontouchmove = (moveEvent) => {
target.style.objectPosition = `center ${((y - moveEvent.touches[0].clientY) / height * 100 + originalPositionY).toFixed(2)}%`;
};
documentSelf.ontouchend = () => {
contentElement.style.overflow = "";
documentSelf.ontouchmove = null;
documentSelf.ontouchstart = null;
documentSelf.ondragstart = null;
documentSelf.onselectstart = null;
documentSelf.onselect = null;
};
event.stopImmediatePropagation();
return true;
}
return false;
}
export const globalTouchEnd = (event: TouchEvent, yDiff: number, time: number, app: App) => {
const target = event.target as HTMLElement;
const isIPadBoolean = isIPad();

View file

@ -8,7 +8,7 @@ import {popMenu} from "../menu";
import {activeBlur, hideKeyboardToolbar} from "./keyboardToolbar";
import {isIPhone} from "../../protyle/util/compatibility";
import {App} from "../../index";
import {globalTouchEnd} from "../../boot/globalEvent/touch";
import {globalTouchEnd, globalTouchStart} from "../../boot/globalEvent/touch";
let clientX: number;
let clientY: number;
@ -145,6 +145,9 @@ export const handleTouchEnd = (event: TouchEvent, app: App) => {
};
export const handleTouchStart = (event: TouchEvent) => {
if (globalTouchStart(event)) {
return;
}
firstDirection = null;
xDiff = undefined;
yDiff = undefined;