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

💄 https://github.com/siyuan-note/siyuan/pull/9617

Browse source
This commit is contained in:
Vanessa 2023-11-11 00:38:32 +08:00
parent bbef1699e2
commit 7d5d4a2e4b
2 changed files with 18 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
app/src/protyle/scroll/event.ts
View file

@ -5,28 +5,14 @@ import {onGet} from "../util/onGet";
import {isMobile} from "../../util/functions";
import {hasClosestBlock, hasClosestByClassName} from "../util/hasClosest";
const getOffsetTop = (element: HTMLElement, topElement: HTMLElement) => {
let tempElement = element;
let top = 0;
while (topElement.contains(tempElement)) {
top += tempElement.offsetTop;
tempElement = tempElement.offsetParent as HTMLElement;
}
return top;
};
let getIndexTimeout: number;
export const scrollEvent = (protyle: IProtyle, element: HTMLElement) => {
let elementRect = element.getBoundingClientRect();
element.addEventListener("scroll", () => {
const elementRect = element.getBoundingClientRect();
if (!protyle.toolbar.element.classList.contains("fn__none")) {
const initY = protyle.toolbar.element.getAttribute("data-inity").split(Constants.ZWSP);
const top = parseInt(initY[0]) + (parseInt(initY[1]) - element.scrollTop);
if (elementRect.width === 0) {
elementRect = element.getBoundingClientRect();
}
const toolbarHeight = 29;
if (top < elementRect.top - toolbarHeight || top > elementRect.bottom - toolbarHeight) {
if (top < elementRect.top - protyle.toolbar.toolbarHeight || top > elementRect.bottom - protyle.toolbar.toolbarHeight) {
protyle.toolbar.element.style.display = "none";
} else {
protyle.toolbar.element.style.top = top + "px";
@ -35,21 +21,28 @@ export const scrollEvent = (protyle: IProtyle, element: HTMLElement) => {
}
protyle.wysiwyg.element.querySelectorAll(".av").forEach((item: HTMLElement) => {
const headerTop = getOffsetTop(item, element) + 43;
if (item.dataset.render !== "true") {
return;
}
const scrollRect = item.querySelector(".av__scroll").getBoundingClientRect()
const headerElement = item.querySelector(".av__row--header") as HTMLElement;
if (headerElement) {
if (headerTop < element.scrollTop && headerTop + headerElement.parentElement.clientHeight > element.scrollTop) {
headerElement.style.transform = `translateY(${element.scrollTop - headerTop}px)`;
const distance = elementRect.top - scrollRect.top;
if (distance > 0 && distance < scrollRect.height) {
headerElement.style.transform = `translateY(${distance}px)`;
} else {
headerElement.style.transform = "";
}
}
const footerElement = item.querySelector(".av__row--footer") as HTMLElement;
if (footerElement) {
const footerBottom = headerTop + footerElement.parentElement.clientHeight;
const scrollBottom = element.scrollTop + element.clientHeight + 5;
if (headerTop + 42 + 36 * 2 < scrollBottom && footerBottom > scrollBottom) {
footerElement.style.transform = `translateY(${scrollBottom - footerBottom}px)`;
if (footerElement.querySelector(".av__calc--ashow")) {
const distance = elementRect.bottom - scrollRect.bottom;
if (distance < 0 && -distance < scrollRect.height) {
footerElement.style.transform = `translateY(${distance}px)`;
} else {
footerElement.style.transform = "";
}
} else {
footerElement.style.transform = "";
}
@ -67,7 +60,6 @@ export const scrollEvent = (protyle: IProtyle, element: HTMLElement) => {
if (protyle.scroll && !protyle.scroll.element.classList.contains("fn__none")) {
clearTimeout(getIndexTimeout);
getIndexTimeout = window.setTimeout(() => {
elementRect = element.getBoundingClientRect();
const targetElement = document.elementFromPoint(elementRect.left + elementRect.width / 2, elementRect.top + 10);
const blockElement = hasClosestBlock(targetElement);
if (!blockElement) {

3
app/src/protyle/toolbar/index.ts
View file

@ -51,7 +51,7 @@ export class Toolbar {
public subElement: HTMLElement;
public subElementCloseCB: () => void;
public range: Range;
private toolbarHeight: number;
public toolbarHeight: number;
constructor(protyle: IProtyle) {
const options = protyle.options;
@ -134,6 +134,7 @@ export class Toolbar {
}
const rangePosition = getSelectionPosition(nodeElement, range);
this.element.classList.remove("fn__none");
this.toolbarHeight = this.element.clientHeight;
const y = rangePosition.top - this.toolbarHeight - 4;
this.element.setAttribute("data-inity", y + Constants.ZWSP + protyle.contentElement.scrollTop.toString());
setPosition(this.element, rangePosition.left - 52, y);