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 10:56:03 +08:00
parent ffc9563f6c
commit 3d1de2ad56
3 changed files with 95 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/src/assets/template/mobile/index.tpl
View file

@ -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>

71
app/src/mobile/util/MobileBookmarks.ts Normal file
View file

@ -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")
});
}
}

20
app/src/mobile/util/initFramework.ts
View file

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