Vanessa 2022-09-30 10:39:35 +08:00
parent d1e67e055b
commit b699e98a79
2 changed files with 60 additions and 55 deletions

View File

@ -82,10 +82,6 @@ export class Backlink extends Model {
<span class="fn__space"></span>
<span data-type="refresh" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.refresh}"><svg><use xlink:href='#iconRefresh'></use></svg></span>
<span class="fn__space"></span>
<span data-type="expand" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.expand} ${updateHotkeyTip(window.siyuan.config.keymap.editor.general.expand.custom)}">
<svg><use xlink:href="#iconFullscreen"></use></svg>
</span>
<span class="fn__space"></span>
<span data-type="collapse" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="${window.siyuan.languages.collapse} ${updateHotkeyTip(window.siyuan.config.keymap.editor.general.collapse.custom)}">
<svg><use xlink:href="#iconContract"></use></svg>
</span>
@ -105,10 +101,6 @@ export class Backlink extends Model {
<input class="b3-text-field b3-text-field--small b3-form__icon-input" placeholder="Enter ${window.siyuan.languages.search}" />
</label>
<span class="fn__space"></span>
<span data-type="mExpand" class="block__icon b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.expand}">
<svg><use xlink:href="#iconFullscreen"></use></svg>
</span>
<span class="fn__space"></span>
<span data-type="mCollapse" class="block__icon b3-tooltips b3-tooltips__nw" aria-label="${window.siyuan.languages.collapse}">
<svg><use xlink:href="#iconContract"></use></svg>
</span>
@ -138,64 +130,35 @@ export class Backlink extends Model {
this.tree = new Tree({
element: this.element.querySelector(".backlinkList") as HTMLElement,
data: null,
click(element: HTMLElement) {
click(element) {
openFileById({
id: element.getAttribute("data-node-id"),
action: [Constants.CB_GET_FOCUS, Constants.CB_GET_CONTEXT]
});
},
ctrlClick(element: HTMLElement) {
ctrlClick(element) {
openFileById({
id: element.getAttribute("data-node-id"),
keepCursor: true,
action: [Constants.CB_GET_CONTEXT]
});
},
altClick(element: HTMLElement) {
altClick(element) {
openFileById({
id: element.getAttribute("data-node-id"),
position: "right",
action: [Constants.CB_GET_FOCUS, Constants.CB_GET_CONTEXT]
});
},
shiftClick(element: HTMLElement) {
shiftClick(element) {
openFileById({
id: element.getAttribute("data-node-id"),
position: "bottom",
action: [Constants.CB_GET_FOCUS, Constants.CB_GET_CONTEXT]
});
},
toggleClick: (liElement: HTMLElement) => {
const svgElement = liElement.firstElementChild.firstElementChild;
if (svgElement.classList.contains("b3-list-item__arrow--open")) {
svgElement.classList.remove("b3-list-item__arrow--open");
liElement.nextElementSibling?.classList.add("fn__none");
} else {
svgElement.classList.add("b3-list-item__arrow--open");
if (liElement.nextElementSibling && liElement.nextElementSibling.tagName === "DIV") {
liElement.nextElementSibling.classList.remove("fn__none");
} else {
fetchPost("/api/ref/getBacklinkDoc", {
defID: this.blockId,
refTreeID: liElement.getAttribute("data-node-id")
}, (response) => {
const editorElement = document.createElement("div");
liElement.after(editorElement);
const editor = new Protyle(editorElement, {
blockId: "",
backlinkData: response.data.backlinks,
render: {
background: false,
title: false,
gutter: true,
scroll: false,
breadcrumb: false,
}
});
this.editors.push(editor);
});
}
}
toggleClick: (liElement) => {
this.toggleItem(liElement);
}
});
this.mTree = new Tree({
@ -228,21 +191,21 @@ export class Backlink extends Model {
});
}
},
ctrlClick(element: HTMLElement) {
ctrlClick(element) {
openFileById({
id: element.getAttribute("data-node-id"),
keepCursor: true,
action: [Constants.CB_GET_CONTEXT]
});
},
altClick(element: HTMLElement) {
altClick(element) {
openFileById({
id: element.getAttribute("data-node-id"),
position: "right",
action: [Constants.CB_GET_FOCUS, Constants.CB_GET_CONTEXT]
});
},
shiftClick(element: HTMLElement) {
shiftClick(element) {
openFileById({
id: element.getAttribute("data-node-id"),
position: "bottom",
@ -273,10 +236,12 @@ export class Backlink extends Model {
});
// 为了快捷键的 dispatch
this.element.querySelector('[data-type="collapse"]').addEventListener("click", () => {
this.tree.collapseAll();
});
this.element.querySelector('[data-type="expand"]').addEventListener("click", () => {
this.tree.expandAll();
this.tree.element.querySelectorAll(".protyle").forEach(item => {
item.classList.add("fn__none");
});
this.tree.element.querySelectorAll(".b3-list-item__arrow").forEach(item => {
item.classList.remove("b3-list-item__arrow--open");
});
});
this.element.addEventListener("click", (event) => {
if (this.type === "local") {
@ -292,11 +257,13 @@ export class Backlink extends Model {
case "refresh":
this.refresh();
break;
case "mExpand":
this.mTree.expandAll();
break;
case "mCollapse":
this.mTree.collapseAll();
this.mTree.element.querySelectorAll(".protyle").forEach(item => {
item.classList.add("fn__none");
});
this.mTree.element.querySelectorAll(".b3-list-item__arrow").forEach(item => {
item.classList.remove("b3-list-item__arrow--open");
});
break;
case "min":
getDockByType("backlink").toggleModel("backlink");
@ -342,6 +309,39 @@ export class Backlink extends Model {
}
}
private toggleItem(liElement: HTMLElement) {
const svgElement = liElement.firstElementChild.firstElementChild;
if (svgElement.classList.contains("b3-list-item__arrow--open")) {
svgElement.classList.remove("b3-list-item__arrow--open");
liElement.nextElementSibling?.classList.add("fn__none");
} else {
svgElement.classList.add("b3-list-item__arrow--open");
if (liElement.nextElementSibling && liElement.nextElementSibling.tagName === "DIV") {
liElement.nextElementSibling.classList.remove("fn__none");
} else {
fetchPost("/api/ref/getBacklinkDoc", {
defID: this.blockId,
refTreeID: liElement.getAttribute("data-node-id")
}, (response) => {
const editorElement = document.createElement("div");
liElement.after(editorElement);
const editor = new Protyle(editorElement, {
blockId: "",
backlinkData: response.data.backlinks,
render: {
background: false,
title: false,
gutter: true,
scroll: false,
breadcrumb: false,
}
});
this.editors.push(editor);
});
}
}
}
private turnToRef(element: HTMLElement, isDynamic: boolean) {
element.querySelector(".b3-list-item__action").innerHTML = '<svg class="fn__rotate"><use xlink:href="#iconRefresh"></use></svg>';
this.element.querySelector('.block__icon[data-type="refresh"] svg').classList.add("fn__rotate");
@ -434,6 +434,7 @@ export class Backlink extends Model {
} else {
countElement.classList.remove("fn__none");
countElement.textContent = data.linkRefsCount.toString();
this.toggleItem(this.tree.element.firstElementChild.firstElementChild as HTMLElement);
}
const mCountElement = this.element.querySelector(".listMCount");
if (data.mentionsCount === 0) {

View File

@ -92,7 +92,11 @@ export const setPadding = (protyle: IProtyle) => {
bottomHeight = protyle.element.clientHeight / 2 + "px";
}
}
protyle.wysiwyg.element.style.padding = `16px ${min16}px ${bottomHeight} ${min24}px`;
if (protyle.options.backlinkData) {
protyle.wysiwyg.element.style.padding = `4px ${min16}px 4px ${min24}px`;
} else {
protyle.wysiwyg.element.style.padding = `16px ${min16}px ${bottomHeight} ${min24}px`;
}
if (!isMobile()) {
// 防止右侧分屏后左侧页签抖动10 为滚动条宽度
if (!window.siyuan.config.editor.fullWidth) {