From 3d1de2ad56d3e777cc1811cab5e2877d0c72d2c7 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Sun, 31 Jul 2022 10:56:03 +0800
Subject: [PATCH] :sparkles: bookmark
 https://github.com/siyuan-note/siyuan/issues/5545

---
 app/src/assets/template/mobile/index.tpl |  4 ++
 app/src/mobile/util/MobileBookmarks.ts   | 71 ++++++++++++++++++++++++
 app/src/mobile/util/initFramework.ts     | 20 +++++++
 3 files changed, 95 insertions(+)
 create mode 100644 app/src/mobile/util/MobileBookmarks.ts

diff --git a/app/src/assets/template/mobile/index.tpl b/app/src/assets/template/mobile/index.tpl
index 89af4f14a..bb1c6e6a3 100644
--- a/app/src/assets/template/mobile/index.tpl
+++ b/app/src/assets/template/mobile/index.tpl
@@ -29,11 +29,15 @@
     <div class="toolbar toolbar--border toolbar--dark">
         <svg data-type="sidebar-file-tab" class="toolbar__icon toolbar__icon--active"><use xlink:href="#iconFiles"></use></svg>
         <svg data-type="sidebar-outline-tab" class="toolbar__icon"><use xlink:href="#iconAlignCenter"></use></svg>
+        <svg data-type="sidebar-bookmark-tab" class="toolbar__icon"><use xlink:href="#iconBookmark"></use></svg>
+        <svg data-type="sidebar-tag-tab" class="toolbar__icon"><use xlink:href="#iconTags"></use></svg>
         <svg data-type="sidebar-backlink-tab" class="toolbar__icon"><use xlink:href="#iconLink"></use></svg>
     </div>
     <div class="fn__flex-1 b3-list--mobile">
         <div class="fn__flex-column" data-type="sidebar-file"></div>
         <div class="fn__flex-column fn__none" data-type="sidebar-outline"></div>
+        <div class="fn__flex-column fn__none" data-type="sidebar-bookmark"></div>
+        <div class="fn__flex-column fn__none" data-type="sidebar-tag"></div>
         <div class="fn__flex-column fn__none" data-type="sidebar-backlink"></div>
     </div>
 </div>
diff --git a/app/src/mobile/util/MobileBookmarks.ts b/app/src/mobile/util/MobileBookmarks.ts
new file mode 100644
index 000000000..b92adf27e
--- /dev/null
+++ b/app/src/mobile/util/MobileBookmarks.ts
@@ -0,0 +1,71 @@
+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";
+
+export class MobileBookmarks {
+    public element: HTMLElement;
+    private tree: Tree;
+    private openNodes: string[];
+
+    constructor() {
+        this.element = document.querySelector('#sidebar [data-type="sidebar-bookmark"]');
+        this.element.innerHTML = `<div class="toolbar">
+    <div class="fn__space"></div>
+    <div class="toolbar__text">
+        ${window.siyuan.languages.bookmark}
+    </div>
+    <span class="fn__space"></span>
+    <svg data-type="expand" class="toolbar__icon"><use xlink:href="#iconFullscreen"></use></svg>
+    <span class="fn__space"></span>
+    <svg data-type="collapse" class="toolbar__icon"><use xlink:href="#iconContract"></use></svg>
+</div>
+<div class="fn__flex-1 bookmarkList"></div>
+<img style="position: absolute;top: 0;left: 0;height: 100%;width: 100%;padding: 30vw;box-sizing: border-box;" src="/stage/loading-pure.svg">`;
+
+        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]);
+            }
+        });
+        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();
+                            break;
+                        case "expand":
+                            this.tree.expandAll();
+                            break;
+                    }
+                }
+                target = target.parentElement;
+            }
+        });
+        this.update();
+    }
+
+    public update() {
+        this.element.lastElementChild.classList.remove("fn__none")
+        fetchPost("/api/bookmark/getBookmark", {}, 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 a21fd5380..48c095a82 100644
--- a/app/src/mobile/util/initFramework.ts
+++ b/app/src/mobile/util/initFramework.ts
@@ -14,6 +14,8 @@ import {MobileFiles} from "./MobileFiles";
 import {MobileOutline} from "./MobileOutline";
 import {hasTopClosestByTag} from "../../protyle/util/hasClosest";
 import {MobileBacklinks} from "./MobileBacklinks";
+import {MobileBookmarks} from "./MobileBookmarks";
+import {MobileTags} from "./MobileTags";
 
 export const initFramework = () => {
     setInlineStyle();
@@ -21,6 +23,8 @@ export const initFramework = () => {
     const sidebarElement = document.getElementById("sidebar");
     let outline: MobileOutline;
     let backlink: MobileBacklinks;
+    let bookmark: MobileBookmarks
+    let tag: MobileTags
     sidebarElement.querySelector(".toolbar--border").addEventListener(getEventName(), (event: Event & { target: Element }) => {
         const svgElement = hasTopClosestByTag(event.target, "svg");
         if (!svgElement || svgElement.classList.contains("toolbar__icon--active")) {
@@ -42,6 +46,18 @@ export const initFramework = () => {
                     } else {
                         backlink.update();
                     }
+                } else if (type === "sidebar-bookmark-tab") {
+                    if (!backlink) {
+                        bookmark = new MobileBookmarks();
+                    } else {
+                        backlink.update();
+                    }
+                } else if (type === "sidebar-tag-tab") {
+                    if (!backlink) {
+                        tag = new MobileTags();
+                    } else {
+                        backlink.update();
+                    }
                 }
                 svgElement.classList.add("toolbar__icon--active");
                 sidebarElement.lastElementChild.querySelector(`[data-type="${itemType.replace("-tab", "")}"]`).classList.remove("fn__none");
@@ -60,6 +76,10 @@ export const initFramework = () => {
             outline.update();
         } else if (type === "sidebar-backlink-tab") {
             backlink.update();
+        } else if (type === "sidebar-bookmark-tab") {
+            bookmark.update();
+        } else if (type === "sidebar-tag-tab") {
+            tag.update();
         }
     });
     document.getElementById("toolbarMore").addEventListener(getEventName(), () => {