From acb99f8abe3daf21e0ec80196c0c05b01c04d38c Mon Sep 17 00:00:00 2001 From: Vanessa Date: Sun, 23 Apr 2023 10:26:20 +0800 Subject: [PATCH] :art: fix https://github.com/siyuan-note/siyuan/issues/8082 --- app/src/layout/dock/Bookmark.ts | 94 ++++++-------------------- app/src/menus/bookmark.ts | 84 +++++++++++++++++++++++ app/src/mobile/dock/MobileBookmarks.ts | 57 ++-------------- app/src/util/Tree.ts | 6 +- 4 files changed, 110 insertions(+), 131 deletions(-) create mode 100644 app/src/menus/bookmark.ts diff --git a/app/src/layout/dock/Bookmark.ts b/app/src/layout/dock/Bookmark.ts index 8eb3a4123..168fad72c 100644 --- a/app/src/layout/dock/Bookmark.ts +++ b/app/src/layout/dock/Bookmark.ts @@ -2,14 +2,12 @@ import {Tab} from "../Tab"; import {Model} from "../Model"; import {Tree} from "../../util/Tree"; import {getDockByType, setPanelFocus} from "../util"; -import {MenuItem} from "../../menus/Menu"; import {fetchPost} from "../../util/fetch"; import {updateHotkeyTip} from "../../protyle/util/compatibility"; import {openFileById} from "../../editor/util"; import {Constants} from "../../constants"; -import {Dialog} from "../../dialog"; -import {confirmDialog} from "../../dialog/confirmDialog"; -import {escapeHtml} from "../../util/escape"; +import {hasClosestByClassName} from "../../protyle/util/hasClosest"; +import {openBookmarkMenu} from "../../menus/bookmark"; export class Bookmark extends Model { private openNodes: string[]; @@ -75,79 +73,23 @@ export class Bookmark extends Model { this.tree = new Tree({ element: this.element.lastElementChild as HTMLElement, data: null, - click(element: HTMLElement) { - const id = element.getAttribute("data-node-id"); - fetchPost("/api/block/checkBlockFold", {id}, (foldResponse) => { - openFileById({ - id, - action: foldResponse.data ? [Constants.CB_GET_FOCUS, Constants.CB_GET_ALL] : [Constants.CB_GET_FOCUS, Constants.CB_GET_CONTEXT], - zoomIn: foldResponse.data + click:(element: HTMLElement, event: MouseEvent)=> { + const actionElement = hasClosestByClassName(event.target as HTMLElement, "b3-list-item__action"); + if (actionElement) { + openBookmarkMenu(actionElement.parentElement, event, this); + } else { + const id = element.getAttribute("data-node-id"); + fetchPost("/api/block/checkBlockFold", {id}, (foldResponse) => { + openFileById({ + id, + action: foldResponse.data ? [Constants.CB_GET_FOCUS, Constants.CB_GET_ALL] : [Constants.CB_GET_FOCUS, Constants.CB_GET_CONTEXT], + zoomIn: foldResponse.data + }); }); - }); + } }, rightClick: (element: HTMLElement, event: MouseEvent) => { - window.siyuan.menus.menu.remove(); - const id = element.getAttribute("data-node-id"); - if (!id) { - window.siyuan.menus.menu.append(new MenuItem({ - label: window.siyuan.languages.rename, - click: () => { - const oldBookmark = element.querySelector(".b3-list-item__text").textContent; - const dialog = new Dialog({ - title: window.siyuan.languages.rename, - content: `
-
-
- -
`, - width: "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 = oldBookmark; - inputElement.focus(); - inputElement.select(); - btnsElement[1].addEventListener("click", () => { - fetchPost("/api/bookmark/renameBookmark", { - oldBookmark, - newBookmark: inputElement.value - }, () => { - dialog.destroy(); - }); - }); - } - }).element); - } - window.siyuan.menus.menu.append(new MenuItem({ - icon: "iconTrashcan", - label: window.siyuan.languages.remove, - click: () => { - const bookmark = (id ? element.parentElement.previousElementSibling : element).querySelector(".b3-list-item__text").textContent; - confirmDialog(window.siyuan.languages.deleteOpConfirm, `${window.siyuan.languages.confirmDelete} ${escapeHtml(bookmark)}?`, () => { - 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}); - } - }); - } - }).element); - window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY}); + openBookmarkMenu(element, event, this) }, ctrlClick(element: HTMLElement) { openFileById({ @@ -169,7 +111,9 @@ export class Bookmark extends Model { position: "bottom", action: [Constants.CB_GET_FOCUS, Constants.CB_GET_CONTEXT] }); - } + }, + blockExtHTML: '', + topExtHTML: '', }); // 为了快捷键的 dispatch this.element.querySelector('[data-type="collapse"]').addEventListener("click", () => { diff --git a/app/src/menus/bookmark.ts b/app/src/menus/bookmark.ts new file mode 100644 index 000000000..e1c4ea26a --- /dev/null +++ b/app/src/menus/bookmark.ts @@ -0,0 +1,84 @@ +import {MenuItem} from "./Menu"; +import {Dialog} from "../dialog"; +import {fetchPost} from "../util/fetch"; +import {confirmDialog} from "../dialog/confirmDialog"; +import {escapeHtml} from "../util/escape"; +import {copySubMenu} from "./commonMenuItem"; +import {Bookmark} from "../layout/dock/Bookmark"; +import {isMobile} from "../util/functions"; +import {MobileBookmarks} from "../mobile/dock/MobileBookmarks"; + +export const openBookmarkMenu = (element: HTMLElement, event: MouseEvent, bookmarkObj: Bookmark | MobileBookmarks) => { + window.siyuan.menus.menu.remove(); + const id = element.getAttribute("data-node-id"); + if (!id && !window.siyuan.config.readonly) { + window.siyuan.menus.menu.append(new MenuItem({ + label: window.siyuan.languages.rename, + click: () => { + const oldBookmark = element.querySelector(".b3-list-item__text").textContent; + const dialog = new Dialog({ + title: window.siyuan.languages.rename, + content: `
+
+
+ +
`, + width: isMobile() ? "92vw" : "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 = oldBookmark; + inputElement.focus(); + inputElement.select(); + btnsElement[1].addEventListener("click", () => { + fetchPost("/api/bookmark/renameBookmark", { + oldBookmark, + newBookmark: inputElement.value + }, () => { + dialog.destroy(); + }); + }); + } + }).element); + } + window.siyuan.menus.menu.append(new MenuItem({ + label: window.siyuan.languages.copy, + type: "submenu", + icon: "iconCopy", + submenu: copySubMenu(element.getAttribute("data-node-id"), false) + }).element); + + if (!window.siyuan.config.readonly) { + window.siyuan.menus.menu.append(new MenuItem({ + icon: "iconTrashcan", + label: window.siyuan.languages.remove, + click: () => { + const bookmarkText = (id ? element.parentElement.previousElementSibling : element).querySelector(".b3-list-item__text").textContent; + confirmDialog(window.siyuan.languages.deleteOpConfirm, `${window.siyuan.languages.confirmDelete} ${escapeHtml(bookmarkText)}?`, () => { + if (id) { + fetchPost("/api/attr/setBlockAttrs", {id, attrs: {bookmark: ""}}, () => { + bookmarkObj.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: bookmarkText}); + } + }); + } + }).element); + } + window.siyuan.menus.menu.element.style.zIndex = "221"; // 移动端被右侧栏遮挡 + window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY}); +} diff --git a/app/src/mobile/dock/MobileBookmarks.ts b/app/src/mobile/dock/MobileBookmarks.ts index 8c4e5557f..e518dfb6d 100644 --- a/app/src/mobile/dock/MobileBookmarks.ts +++ b/app/src/mobile/dock/MobileBookmarks.ts @@ -3,9 +3,7 @@ import {fetchPost} from "../../util/fetch"; import {Constants} from "../../constants"; import {hasClosestByClassName} from "../../protyle/util/hasClosest"; import {openMobileFileById} from "../editor"; -import {confirmDialog} from "../../dialog/confirmDialog"; -import {escapeHtml} from "../../util/escape"; -import {Dialog} from "../../dialog"; +import {openBookmarkMenu} from "../../menus/bookmark"; export class MobileBookmarks { public element: HTMLElement; @@ -34,62 +32,15 @@ export class MobileBookmarks { 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.deleteOpConfirm, `${window.siyuan.languages.confirmDelete} ${escapeHtml(bookmark)}?`, () => { - 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}); - } - }); - } else { - const dialog = new Dialog({ - title: window.siyuan.languages.rename, - content: `
-
-
- -
`, - width: "92vw", - }); - 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(); - }); - }); - } + openBookmarkMenu(actionElement.parentElement, event, this) } else { fetchPost("/api/block/checkBlockFold", {id}, (foldResponse) => { openMobileFileById(id, foldResponse.data ? [Constants.CB_GET_FOCUS, Constants.CB_GET_ALL, Constants.CB_GET_HTML] : [Constants.CB_GET_FOCUS, Constants.CB_GET_SETID, Constants.CB_GET_CONTEXT, Constants.CB_GET_HTML]); }); } }, - blockExtHTML: window.siyuan.config.readonly ? undefined : '', - topExtHTML: window.siyuan.config.readonly ? undefined : '' + blockExtHTML: '', + topExtHTML: '' }); this.element.addEventListener("click", (event) => { let target = event.target as HTMLElement; diff --git a/app/src/util/Tree.ts b/app/src/util/Tree.ts index 47aacb7b1..0aeb8945c 100644 --- a/app/src/util/Tree.ts +++ b/app/src/util/Tree.ts @@ -82,7 +82,7 @@ export class Tree { } else { style = `padding-left: ${(item.depth - 1) * 18 + 22}px;margin-right: 2px`; } - html += `
  • ${iconHTML} ${item.name} - ${countHTML} ${this.topExtHTML || ""} + ${countHTML}
    • `; if (item.children && item.children.length > 0) { html += this.genHTML(item.children) + ""; @@ -136,7 +136,7 @@ ${item.label ? "data-label='" + item.label + "'" : ""}> style = `padding-left: ${(item.depth - 1) * 18 + 22}px;margin-right: 2px`; } html += `