From 092035c564a00aa17bad01d85f0c4aa718872562 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Wed, 7 Sep 2022 20:02:49 +0800
Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/5713

---
 app/src/protyle/header/Background.ts | 74 +++++++++++++++++++---------
 1 file changed, 51 insertions(+), 23 deletions(-)

diff --git a/app/src/protyle/header/Background.ts b/app/src/protyle/header/Background.ts
index 5ad2bfc6f..67ae73aeb 100644
--- a/app/src/protyle/header/Background.ts
+++ b/app/src/protyle/header/Background.ts
@@ -49,31 +49,59 @@ export class Background {
         this.tagsElement = this.element.querySelector(".protyle-background__tags") as HTMLElement;
         this.iconElement = this.element.querySelector(".protyle-background__icon") as HTMLElement;
         this.imgElement = this.element.firstElementChild.firstElementChild as HTMLImageElement;
-        this.imgElement.addEventListener("mousedown", (event: MouseEvent & { target: HTMLElement }) => {
-            event.preventDefault();
-            if (!this.element.firstElementChild.querySelector(".protyle-icons").classList.contains("fn__none")) {
-                return;
-            }
-            const y = event.clientY;
-            const documentSelf = document;
-            const height = this.imgElement.naturalHeight * this.imgElement.clientWidth / this.imgElement.naturalWidth - this.imgElement.clientHeight;
-            let originalPositionY = parseFloat(this.imgElement.style.objectPosition.substring(7)) || 50;
-            if (this.imgElement.style.objectPosition.endsWith("px")) {
-                originalPositionY = -parseInt(this.imgElement.style.objectPosition.substring(7)) / height * 100;
-            }
-            documentSelf.onmousemove = (moveEvent: MouseEvent) => {
-                this.imgElement.style.objectPosition = `center ${((y - moveEvent.clientY) / height * 100 + originalPositionY).toFixed(2)}%`;
+        if (isMobile()) {
+            this.imgElement.addEventListener("touchstart", (event: TouchEvent & { target: HTMLElement }) => {
                 event.preventDefault();
-            };
+                if (!this.element.firstElementChild.querySelector(".protyle-icons").classList.contains("fn__none")) {
+                    return;
+                }
+                const y = event.touches[0].clientY;
+                const documentSelf = document;
+                const height = this.imgElement.naturalHeight * this.imgElement.clientWidth / this.imgElement.naturalWidth - this.imgElement.clientHeight;
+                let originalPositionY = parseFloat(this.imgElement.style.objectPosition.substring(7)) || 50;
+                if (this.imgElement.style.objectPosition.endsWith("px")) {
+                    originalPositionY = -parseInt(this.imgElement.style.objectPosition.substring(7)) / height * 100;
+                }
+                documentSelf.ontouchmove = (moveEvent) => {
+                    this.imgElement.style.objectPosition = `center ${((y - moveEvent.touches[0].clientY) / height * 100 + originalPositionY).toFixed(2)}%`;
+                    event.preventDefault();
+                };
 
-            documentSelf.onmouseup = () => {
-                documentSelf.onmousemove = null;
-                documentSelf.onmouseup = null;
-                documentSelf.ondragstart = null;
-                documentSelf.onselectstart = null;
-                documentSelf.onselect = null;
-            };
-        });
+                documentSelf.ontouchend = () => {
+                    documentSelf.ontouchmove = null;
+                    documentSelf.ontouchstart = null;
+                    documentSelf.ondragstart = null;
+                    documentSelf.onselectstart = null;
+                    documentSelf.onselect = null;
+                };
+            });
+        } else {
+            this.imgElement.addEventListener("mousedown", (event: MouseEvent & { target: HTMLElement }) => {
+                event.preventDefault();
+                if (!this.element.firstElementChild.querySelector(".protyle-icons").classList.contains("fn__none")) {
+                    return;
+                }
+                const y = event.clientY;
+                const documentSelf = document;
+                const height = this.imgElement.naturalHeight * this.imgElement.clientWidth / this.imgElement.naturalWidth - this.imgElement.clientHeight;
+                let originalPositionY = parseFloat(this.imgElement.style.objectPosition.substring(7)) || 50;
+                if (this.imgElement.style.objectPosition.endsWith("px")) {
+                    originalPositionY = -parseInt(this.imgElement.style.objectPosition.substring(7)) / height * 100;
+                }
+                documentSelf.onmousemove = (moveEvent: MouseEvent) => {
+                    this.imgElement.style.objectPosition = `center ${((y - moveEvent.clientY) / height * 100 + originalPositionY).toFixed(2)}%`;
+                    event.preventDefault();
+                };
+
+                documentSelf.onmouseup = () => {
+                    documentSelf.onmousemove = null;
+                    documentSelf.onmouseup = null;
+                    documentSelf.ondragstart = null;
+                    documentSelf.onselectstart = null;
+                    documentSelf.onselect = null;
+                };
+            });
+        }
         this.element.querySelector("input").addEventListener("change", (event: InputEvent & { target: HTMLInputElement }) => {
             if (event.target.files.length === 0) {
                 return;