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 @@
+
+
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 = `
+
+
`;
+
+ 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(), () => {