forked from joekrill/silverbullet-treeview
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtreeview.ts
154 lines (140 loc) · 4.45 KB
/
treeview.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
import { asset, editor, system } from "$sb/syscalls.ts";
import { getPageTree } from "./api.ts";
import {
getCustomStyles,
isTreeViewEnabled,
PLUG_NAME,
Position,
setTreeViewEnabled,
} from "./config.ts";
import { supportsPageRenaming } from "./compatability.ts";
import { getPlugConfig } from "./config.ts";
import { getSilverBulletTheme } from "./config.ts";
/**
* Keeps track of the current rendered position of the treeview.
*/
let currentPosition: Position | undefined;
/**
* Toggles the treeview and it's preferred state.
*/
export async function toggleTree() {
const currentValue = await isTreeViewEnabled();
if (!currentValue) {
await showTree();
} else {
await hideTree();
}
}
/**
* Hides the treeview and sets it to disabled.
*/
export async function hideTree() {
if (currentPosition) {
await editor.hidePanel(currentPosition);
currentPosition = undefined;
await setTreeViewEnabled(false);
}
}
/**
* Shows the treeview only if it is currently enabled.
*/
export async function showTreeIfEnabled() {
try {
const env = await system.getEnv();
if (env === "server") {
return;
}
if (await isTreeViewEnabled()) {
return await showTree();
}
} catch (err) {
console.error("showTreeIfEnabled failed", err);
}
}
/**
* Shows the treeview and sets it to enabled.
*/
export async function showTree() {
const theme = await getSilverBulletTheme();
const config = await getPlugConfig();
if (currentPosition && config.position !== currentPosition) {
// This can be caused if the position preference in SETTINGS was changed
// while the tree was visible. If we don't first hide the page tree,
// we'll end up with multiple trees visible.
await hideTree();
}
const [
sortableTreeCss,
sortableTreeJs,
plugCss,
plugJs,
iconFolderMinus,
iconFolderPlus,
iconNavigation2,
iconRefresh,
iconXCircle,
] = await Promise.all([
asset.readAsset(PLUG_NAME, "assets/sortable-tree/sortable-tree.css"),
asset.readAsset(PLUG_NAME, "assets/sortable-tree/sortable-tree.js"),
asset.readAsset(PLUG_NAME, "assets/treeview.css"),
asset.readAsset(PLUG_NAME, "assets/treeview.js"),
asset.readAsset(PLUG_NAME, "assets/icons/folder-minus.svg"),
asset.readAsset(PLUG_NAME, "assets/icons/folder-plus.svg"),
asset.readAsset(PLUG_NAME, "assets/icons/navigation-2.svg"),
asset.readAsset(PLUG_NAME, "assets/icons/refresh-cw.svg"),
asset.readAsset(PLUG_NAME, "assets/icons/x-circle.svg"),
]);
const { currentPage, nodes } = await getPageTree(config.pageExcludeRegex);
const customStyles = await getCustomStyles();
const treeViewConfig = {
nodes,
currentPage,
treeElementId: "treeview-tree",
dragAndDrop: {
...config.dragAndDrop,
enabled: config.dragAndDrop.enabled && await supportsPageRenaming(),
},
};
await editor.showPanel(
config.position,
config.size,
`
<html>
<head>
<link rel="stylesheet" href="/.client/main.css" />
<style>
${sortableTreeCss}
${plugCss}
${customStyles ?? ""}
</style>
</head>
<body>
<div class="treeview-root">
<div class="treeview-header">
<div class="treeview-actions">
<div class="treeview-actions-left">
<button type="button" data-treeview-action="expand-all" title="Expand all">${iconFolderPlus}</button>
<button type="button" data-treeview-action="collapse-all" title="Collapse all">${iconFolderMinus}</button>
<button type="button" data-treeview-action="reveal-current-page" title="Reveal current page">${iconNavigation2}</button>
<button type="button" data-treeview-action="refresh" title="Refresh treeview">${iconRefresh}</button>
</div>
<div class="treeview-actions-right">
<button type="button" data-treeview-action="close-panel" title="Close tree">${iconXCircle}</button>
</div>
</div>
</div>
<div id="${treeViewConfig.treeElementId}"></div>
</div>
</body>
</html>`,
`
// Workaound until showPanel provides the current theme
document.documentElement.dataset.theme = ${JSON.stringify(theme)};
${sortableTreeJs}
${plugJs}
initializeTreeViewPanel(${JSON.stringify(treeViewConfig)});
`,
);
await setTreeViewEnabled(true);
currentPosition = config.position;
}