0ct0pu5/siyuan
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎨 fix https://github.com/siyuan-note/siyuan/issues/5713

Browse source
This commit is contained in:
Vanessa 2022-09-07 20:02:49 +08:00
parent 8220bad9dd
commit 092035c564
1 changed files with 51 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
app/src/protyle/header/Background.ts
View file

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