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

✨ bookmark https://github.com/siyuan-note/siyuan/issues/5545

Browse source
This commit is contained in:
Vanessa 2022-07-31 11:55:15 +08:00
parent 64f1f17b3e
commit 176c1375a1
2 changed files with 79 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
app/src/mobile/util/MobileBookmarks.ts
View file

@ -2,9 +2,11 @@ import {Tree} from "../../util/Tree";
import {fetchPost} from "../../util/fetch";
import {Constants} from "../../constants";
import {hasClosestByClassName} from "../../protyle/util/hasClosest";
import {onGet} from "../../protyle/util/onGet";
import {openMobileFileById} from "../editor";
import {MenuItem} from "../../menus/Menu";
import {confirmDialog} from "../../dialog/confirmDialog";
import {escapeHtml} from "../../util/escape";
import {Dialog} from "../../dialog";
import {isMobile} from "../../util/functions";
export class MobileBookmarks {
public element: HTMLElement;
@ -29,9 +31,66 @@ export class MobileBookmarks {
this.tree = new Tree({
element: this.element.querySelector(".bookmarkList") as HTMLElement,
data: null,
click(element: HTMLElement) {
openMobileFileById(element.getAttribute("data-node-id"), true, [Constants.CB_GET_FOCUS]);
}
click: (element: HTMLElement, event: MouseEvent) => {
const id = element.getAttribute("data-node-id");
const actionElement = hasClosestByClassName(event.target as HTMLElement, "b3-list-item__action");
if (actionElement) {
const bookmark = (id ? element.parentElement.previousElementSibling : element).querySelector(".b3-list-item__text").textContent;
if (actionElement.getAttribute("data-type") === "remove") {
confirmDialog(window.siyuan.languages.delete, `${window.siyuan.languages.confirmDelete} <b>${escapeHtml(bookmark)}</b>?`, () => {
if (id) {
fetchPost("/api/attr/setBlockAttrs", {id, attrs: {bookmark: ""}}, () => {
this.update();
});
document.querySelectorAll(`.protyle-wysiwyg [data-node-id="${id}"]`).forEach((item) => {
item.setAttribute("bookmark", "");
const bookmarkElement = item.querySelector(".protyle-attr--bookmark");
if (bookmarkElement) {
bookmarkElement.remove();
}
});
} else {
fetchPost("/api/bookmark/removeBookmark", {bookmark}, () => {
this.update();
});
}
});
} else {
const dialog = new Dialog({
title: window.siyuan.languages.rename,
content: `<div class="b3-dialog__content"><input class="b3-text-field fn__block"></div>
<div class="b3-dialog__action">
<button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
<button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
</div>`,
width: isMobile() ? "80vw" : "520px",
});
const btnsElement = dialog.element.querySelectorAll(".b3-button");
btnsElement[0].addEventListener("click", () => {
dialog.destroy();
});
const inputElement = dialog.element.querySelector("input");
dialog.bindInput(inputElement, () => {
(btnsElement[1] as HTMLButtonElement).click();
});
inputElement.value = bookmark;
inputElement.focus();
inputElement.select();
btnsElement[1].addEventListener("click", () => {
fetchPost("/api/bookmark/renameBookmark", {
oldBookmark: bookmark,
newBookmark: inputElement.value
}, () => {
dialog.destroy();
});
});
}
} else {
openMobileFileById(id, true, [Constants.CB_GET_FOCUS]);
}
},
blockExtHTML: '<span class="b3-list-item__action" data-type="remove"><svg><use xlink:href="#iconTrashcan"></use></svg></span>',
topExtHTML: '<span class="b3-list-item__action" data-type="edit"><svg><use xlink:href="#iconEdit"></use></svg></span><span class="b3-list-item__action" data-type="remove"><svg><use xlink:href="#iconTrashcan"></use></svg></span>'
});
this.element.addEventListener("click", (event) => {
let target = event.target as HTMLElement;

18
app/src/util/Tree.ts
View file

@ -1,5 +1,5 @@
import {getIconByType} from "../editor/getIcon";
import {hasClosestByTag} from "../protyle/util/hasClosest";
import {hasClosestByMatchTag, hasClosestByTag} from "../protyle/util/hasClosest";
import {isMobile} from "./functions";
import {mathRender} from "../protyle/markdown/mathRender";
import {unicode2Emoji} from "../emoji";
@ -9,6 +9,7 @@ export class Tree {
public element: HTMLElement;
private data: IBlockTree[];
private blockExtHTML: string;
private topExtHTML: string;
private click: (element: HTMLElement, event: MouseEvent) => void;
@ -21,6 +22,7 @@ export class Tree {
element: HTMLElement,
data: IBlockTree[],
blockExtHTML?: string,
topExtHTML?: string,
click?(element: HTMLElement, event: MouseEvent): void
ctrlClick?(element: HTMLElement): void
altClick?(element: HTMLElement): void
@ -34,6 +36,7 @@ export class Tree {
this.rightClick = options.rightClick;
this.element = options.element;
this.blockExtHTML = options.blockExtHTML;
this.topExtHTML = options.topExtHTML;
this.updateData(options.data);
this.bindEvent();
}
@ -78,6 +81,7 @@ ${item.label ? "data-label='" + item.label + "'" : ""}>
${iconHTML}
<span class="b3-list-item__text"${item.type === "outline" ? ' title="' + Lute.EscapeHTMLStr(Lute.BlockDOM2Content(item.name)) + '"' : ""}>${item.name}</span>
${countHTML}
${this.topExtHTML || ""}
</li>`;
if (item.children && item.children.length > 0) {
html += this.genHTML(item.children) + "</ul>";
@ -184,8 +188,16 @@ data-def-path="${item.defPath}">
event.preventDefault();
break;
}
if (target.tagName === "LI") {
if (target.classList.contains("b3-list-item__action") && this.click) {
// 移动端书签父节点删除按钮
const liElement = hasClosestByMatchTag(target, "LI")
if (liElement) {
this.click(liElement, event);
}
event.preventDefault();
event.stopPropagation();
break;
} else if (target.tagName === "LI") {
this.setCurrent(target);
if (target.getAttribute("data-node-id") || target.getAttribute("data-treetype") === "tag") {
if (this.ctrlClick && window.siyuan.ctrlIsPressed) {