From 3a3bd13ff59b299b5214ce69bd28e94a147df958 Mon Sep 17 00:00:00 2001 From: Vanessa Date: Sun, 31 Jul 2022 17:12:55 +0800 Subject: [PATCH] :sparkles: fix https://github.com/siyuan-note/siyuan/issues/5545 --- app/src/layout/dock/Bookmark.ts | 6 +- app/src/layout/dock/Tag.ts | 10 +- app/src/mobile/util/MobileBookmarks.ts | 6 +- app/src/mobile/util/MobileTags.ts | 173 +++++++++++++++++++++++++ app/src/mobile/util/initFramework.ts | 2 +- app/src/mobile/util/search.ts | 2 +- 6 files changed, 182 insertions(+), 17 deletions(-) create mode 100644 app/src/mobile/util/MobileTags.ts diff --git a/app/src/layout/dock/Bookmark.ts b/app/src/layout/dock/Bookmark.ts index ca9c08e59..b204f22e7 100644 --- a/app/src/layout/dock/Bookmark.ts +++ b/app/src/layout/dock/Bookmark.ts @@ -101,7 +101,7 @@ export class Bookmark extends Model {
`, - width: isMobile() ? "80vw" : "520px", + width: "520px", }); const btnsElement = dialog.element.querySelectorAll(".b3-button"); btnsElement[0].addEventListener("click", () => { @@ -143,9 +143,7 @@ export class Bookmark extends Model { } }); } else { - fetchPost("/api/bookmark/removeBookmark", {bookmark}, () => { - this.update(); - }); + fetchPost("/api/bookmark/removeBookmark", {bookmark}); } }); } diff --git a/app/src/layout/dock/Tag.ts b/app/src/layout/dock/Tag.ts index e44fba166..28c3c1e8f 100644 --- a/app/src/layout/dock/Tag.ts +++ b/app/src/layout/dock/Tag.ts @@ -94,7 +94,7 @@ export class Tag extends Model {
`, - width: isMobile() ? "80vw" : "520px", + width: "520px", }); const btnsElement = dialog.element.querySelectorAll(".b3-button"); btnsElement[0].addEventListener("click", () => { @@ -107,9 +107,7 @@ export class Tag extends Model { inputElement.focus(); inputElement.select(); btnsElement[1].addEventListener("click", () => { - fetchPost("/api/tag/renameTag", {oldLabel: labelName, newLabel: inputElement.value}, () => { - dialog.destroy(); - }); + fetchPost("/api/tag/renameTag", {oldLabel: labelName, newLabel: inputElement.value}); }); } }).element); @@ -118,9 +116,7 @@ export class Tag extends Model { label: window.siyuan.languages.remove, click: () => { confirmDialog(window.siyuan.languages.delete, `${window.siyuan.languages.confirmDelete} ${escapeHtml(labelName)}?`, () => { - fetchPost("/api/tag/removeTag", {label: labelName}, () => { - this.update(); - }); + fetchPost("/api/tag/removeTag", {label: labelName}); }); }, }).element); diff --git a/app/src/mobile/util/MobileBookmarks.ts b/app/src/mobile/util/MobileBookmarks.ts index 5d483460d..90c0e7668 100644 --- a/app/src/mobile/util/MobileBookmarks.ts +++ b/app/src/mobile/util/MobileBookmarks.ts @@ -50,9 +50,7 @@ export class MobileBookmarks { } }); } else { - fetchPost("/api/bookmark/removeBookmark", {bookmark}, () => { - this.update(); - }); + fetchPost("/api/bookmark/removeBookmark", {bookmark}); } }); } else { @@ -63,7 +61,7 @@ export class MobileBookmarks {
`, - width: isMobile() ? "80vw" : "520px", + width: "80vw", }); const btnsElement = dialog.element.querySelectorAll(".b3-button"); btnsElement[0].addEventListener("click", () => { diff --git a/app/src/mobile/util/MobileTags.ts b/app/src/mobile/util/MobileTags.ts new file mode 100644 index 000000000..8325f44fd --- /dev/null +++ b/app/src/mobile/util/MobileTags.ts @@ -0,0 +1,173 @@ +import {Tree} from "../../util/Tree"; +import {fetchPost} from "../../util/fetch"; +import {hasClosestByClassName} from "../../protyle/util/hasClosest"; +import {MenuItem} from "../../menus/Menu"; +import {Dialog} from "../../dialog"; +import {confirmDialog} from "../../dialog/confirmDialog"; +import {escapeHtml} from "../../util/escape"; +import {popSearch, toolbarSearchEvent} from "./search"; + +export class MobileTags { + public element: HTMLElement; + private tree: Tree; + private openNodes: string[]; + + constructor() { + this.element = document.querySelector('#sidebar [data-type="sidebar-tag"]'); + this.element.innerHTML = `
+
+
+ ${window.siyuan.languages.tag} +
+ + + + + + +
+
+`; + + this.tree = new Tree({ + element: this.element.querySelector(".tagList") as HTMLElement, + data: null, + click: (element: HTMLElement) => { + const actionElement = hasClosestByClassName(event.target as HTMLElement, "b3-list-item__action"); + if (actionElement) { + const labelName = element.getAttribute("data-label"); + if (actionElement.getAttribute("data-type") === "edit") { + const dialog = new Dialog({ + title: window.siyuan.languages.rename, + content: `
+
+
+ +
`, + width: "80vw", + }); + 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.focus(); + inputElement.select(); + btnsElement[1].addEventListener("click", () => { + fetchPost("/api/tag/renameTag", {oldLabel: labelName, newLabel: inputElement.value}); + }); + } else { + confirmDialog(window.siyuan.languages.delete, `${window.siyuan.languages.confirmDelete} ${escapeHtml(labelName)}?`, () => { + fetchPost("/api/tag/removeTag", {label: labelName}); + }); + } + } else { + const modelElement = document.getElementById("model"); + const modelMainElement = document.getElementById("modelMain"); + popSearch(modelElement, modelMainElement); + (document.getElementById("toolbarSearch") as HTMLInputElement).value = `#${element.getAttribute("data-label")}#`; + toolbarSearchEvent(); + } + }, + topExtHTML: '' + }); + this.element.addEventListener("click", (event) => { + let target = event.target as HTMLElement; + while (target && !target.isEqualNode(this.element)) { + if (target.classList.contains("toolbar__icon")) { + const type = target.getAttribute("data-type"); + switch (type) { + case "collapse": + this.tree.collapseAll(); + event.preventDefault(); + event.stopPropagation(); + break; + case "expand": + this.tree.expandAll(); + event.preventDefault(); + event.stopPropagation(); + break; + case "sort": + window.siyuan.menus.menu.remove(); + window.siyuan.menus.menu.append(new MenuItem({ + icon: window.siyuan.config.tag.sort === 0 ? "iconSelect" : undefined, + label: window.siyuan.languages.fileNameASC, + click: () => { + window.siyuan.config.tag.sort = 0; + this.update(); + }, + }).element); + window.siyuan.menus.menu.append(new MenuItem({ + icon: window.siyuan.config.tag.sort === 1 ? "iconSelect" : undefined, + label: window.siyuan.languages.fileNameDESC, + click: () => { + window.siyuan.config.tag.sort = 1; + this.update(); + }, + }).element); + window.siyuan.menus.menu.append(new MenuItem({ + icon: window.siyuan.config.tag.sort === 4 ? "iconSelect" : undefined, + label: window.siyuan.languages.fileNameNatASC, + click: () => { + window.siyuan.config.tag.sort = 4; + this.update(); + }, + }).element); + window.siyuan.menus.menu.append(new MenuItem({ + icon: window.siyuan.config.tag.sort === 5 ? "iconSelect" : undefined, + label: window.siyuan.languages.fileNameNatDESC, + click: () => { + window.siyuan.config.tag.sort = 5; + this.update(); + }, + }).element); + window.siyuan.menus.menu.append(new MenuItem({ + icon: window.siyuan.config.tag.sort === 7 ? "iconSelect" : undefined, + label: window.siyuan.languages.refCountASC, + click: () => { + window.siyuan.config.tag.sort = 7; + this.update(); + }, + }).element); + window.siyuan.menus.menu.append(new MenuItem({ + icon: window.siyuan.config.tag.sort === 8 ? "iconSelect" : undefined, + label: window.siyuan.languages.refCountDESC, + click: () => { + window.siyuan.config.tag.sort = 8; + this.update(); + }, + }).element); + window.siyuan.menus.menu.popup({x: event.clientX, y: event.clientY}); + window.siyuan.menus.menu.element.style.zIndex = "310"; + event.preventDefault(); + event.stopPropagation(); + break; + } + } + target = target.parentElement; + } + }); + this.update(); + } + + public update() { + this.element.lastElementChild.classList.remove("fn__none") + fetchPost("/api/tag/getTag", { + sort: window.siyuan.config.tag.sort + }, response => { + if (this.openNodes) { + this.openNodes = this.tree.getExpandIds(); + } + this.tree.updateData(response.data); + if (this.openNodes) { + this.tree.setExpandIds(this.openNodes); + } else { + this.openNodes = this.tree.getExpandIds(); + } + this.element.lastElementChild.classList.add("fn__none") + }); + } +} diff --git a/app/src/mobile/util/initFramework.ts b/app/src/mobile/util/initFramework.ts index 48c095a82..0b35e3c6b 100644 --- a/app/src/mobile/util/initFramework.ts +++ b/app/src/mobile/util/initFramework.ts @@ -56,7 +56,7 @@ export const initFramework = () => { if (!backlink) { tag = new MobileTags(); } else { - backlink.update(); + tag.update(); } } svgElement.classList.add("toolbar__icon--active"); diff --git a/app/src/mobile/util/search.ts b/app/src/mobile/util/search.ts index bc46095b3..c302202c9 100644 --- a/app/src/mobile/util/search.ts +++ b/app/src/mobile/util/search.ts @@ -24,7 +24,7 @@ const onRecentBlocks = (data: IBlock[], matchedRootCount?:number, matchedBlockCo let toolbarSearchTimeout = 0; -const toolbarSearchEvent = () => { +export const toolbarSearchEvent = () => { clearTimeout(toolbarSearchTimeout); toolbarSearchTimeout = window.setTimeout(() => { const inputElement = document.getElementById("toolbarSearch") as HTMLInputElement;