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

🎨 面包屑优化

Browse source
This commit is contained in:
Vanessa 2024-11-04 22:56:55 +08:00
parent 6ac292ff01
commit 571f753d66
3 changed files with 34 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
app/src/protyle/breadcrumb/index.ts
View file

@ -31,6 +31,7 @@ import {emitOpenMenu} from "../../plugin/EventBus";
import {isInAndroid, isIPad, isMac, updateHotkeyTip} from "../util/compatibility";
import {resize} from "../util/resize";
import {listIndent, listOutdent} from "../wysiwyg/list";
import {improveBreadcrumbAppearance} from "../wysiwyg/renderBacklink";
export class Breadcrumb {
public element: HTMLElement;
@ -651,30 +652,8 @@ ${padHTML}
html += '<svg class="protyle-breadcrumb__arrow"><use xlink:href="#iconRight"></use></svg>';
}
});
this.element.classList.remove("protyle-breadcrumb__bar--nowrap");
this.element.innerHTML = html;
const itemElements = Array.from(this.element.querySelectorAll(".protyle-breadcrumb__text"));
if (itemElements.length === 0) {
return;
}
let jump = false;
while (this.element.scrollHeight > 30 && !jump && itemElements.length > 1) {
itemElements.find((item, index) => {
if (index > 0) {
if (!item.classList.contains("protyle-breadcrumb__text--ellipsis")) {
item.classList.add("protyle-breadcrumb__text--ellipsis");
return true;
}
if (index === itemElements.length - 1 && item.classList.contains("protyle-breadcrumb__text--ellipsis")) {
jump = true;
}
}
});
}
this.element.classList.add("protyle-breadcrumb__bar--nowrap");
if (this.element.lastElementChild) {
this.element.scrollLeft = (this.element.lastElementChild as HTMLElement).offsetLeft - this.element.clientWidth + 14;
}
improveBreadcrumbAppearance(this.element.parentElement);
});
/// #endif
}

3
app/src/protyle/render/blockRender.ts
View file

@ -3,7 +3,7 @@ import {fetchPost, fetchSyncPost} from "../../util/fetch";
import {processRender} from "../util/processCode";
import {highlightRender} from "./highlightRender";
import {Constants} from "../../constants";
import {genBreadcrumb} from "../wysiwyg/renderBacklink";
import {genBreadcrumb, improveBreadcrumbAppearance} from "../wysiwyg/renderBacklink";
import {avRender} from "./av/render";
export const blockRender = (protyle: IProtyle, element: Element, top?: number) => {
@ -115,6 +115,7 @@ const renderEmbed = (blocks: {
item.lastElementChild.insertAdjacentHTML("beforebegin", html +
// 辅助上下移动时进行选中
`<div style="position: absolute;">${Constants.ZWSP}</div>`);
improveBreadcrumbAppearance(item.querySelector(".protyle-wysiwyg__embed"));
} else {
item.lastElementChild.insertAdjacentHTML("beforebegin", `<div class="ft__smaller ft__secondary b3-form__space--small" contenteditable="false">${window.siyuan.languages.refExpired}</div>
<div style="position: absolute;">${Constants.ZWSP}</div>`);

34
app/src/protyle/wysiwyg/renderBacklink.ts
View file

@ -19,9 +19,7 @@ export const renderBacklink = (protyle: IProtyle, backlinkData: {
html += genBreadcrumb(item.blockPaths, false, index) + setBacklinkFold(item.dom, item.expand);
});
protyle.wysiwyg.element.innerHTML = html;
protyle.wysiwyg.element.querySelectorAll(".protyle-breadcrumb__bar .protyle-breadcrumb__item--active").forEach((item:HTMLElement) => {
item.parentElement.scrollLeft = item.offsetLeft;
});
improveBreadcrumbAppearance(protyle.wysiwyg.element);
processRender(protyle.wysiwyg.element);
highlightRender(protyle.wysiwyg.element);
avRender(protyle.wysiwyg.element, protyle);
@ -120,5 +118,33 @@ export const genBreadcrumb = (blockPaths: IBreadcrumb[], renderFirst: boolean, p
html += '<svg class="protyle-breadcrumb__arrow"><use xlink:href="#iconRight"></use></svg>';
}
});
return `<div contenteditable="false" style="margin-bottom: 8px" class="protyle-breadcrumb__bar protyle-breadcrumb__bar--nowrap">${html}</div>`;
return `<div contenteditable="false" class="protyle-breadcrumb__bar protyle-breadcrumb__bar--nowrap">${html}</div>`;
};
export const improveBreadcrumbAppearance = (element: HTMLElement) => {
element.querySelectorAll(".protyle-breadcrumb__bar").forEach((item: HTMLElement) => {
item.classList.remove("protyle-breadcrumb__bar--nowrap");
const itemElements = Array.from(item.querySelectorAll(".protyle-breadcrumb__text"));
if (itemElements.length === 0) {
return;
}
let jump = false;
while (item.scrollHeight > 30 && !jump && itemElements.length > 1) {
itemElements.find((item, index) => {
if (index > 0) {
if (!item.classList.contains("protyle-breadcrumb__text--ellipsis")) {
item.classList.add("protyle-breadcrumb__text--ellipsis");
return true;
}
if (index === itemElements.length - 1 && item.classList.contains("protyle-breadcrumb__text--ellipsis")) {
jump = true;
}
}
});
}
item.classList.add("protyle-breadcrumb__bar--nowrap");
if (item.lastElementChild) {
item.scrollLeft = (item.lastElementChild as HTMLElement).offsetLeft - item.clientWidth + 14;
}
});
}