441 lines
16 KiB
TypeScript
441 lines
16 KiB
TypeScript
import {
|
|
Plugin,
|
|
showMessage,
|
|
confirm,
|
|
Dialog,
|
|
Menu,
|
|
openTab,
|
|
adaptHotkey,
|
|
getFrontend,
|
|
getBackend,
|
|
IModel,
|
|
Setting
|
|
} from "siyuan";
|
|
import "@/index.scss";
|
|
|
|
import HelloExample from "@/hello.svelte";
|
|
import SettingPannel from "@/libs/setting-panel.svelte";
|
|
|
|
const STORAGE_NAME = "menu-config";
|
|
const TAB_TYPE = "custom_tab";
|
|
const DOCK_TYPE = "dock_tab";
|
|
|
|
export default class PluginSample extends Plugin {
|
|
|
|
private customTab: () => IModel;
|
|
private isMobile: boolean;
|
|
|
|
async onload() {
|
|
this.data[STORAGE_NAME] = {readonlyText: "Readonly"};
|
|
|
|
console.log("loading plugin-sample", this.i18n);
|
|
|
|
const frontEnd = getFrontend();
|
|
this.isMobile = frontEnd === "mobile" || frontEnd === "browser-mobile";
|
|
// 图标的制作参见帮助文档
|
|
this.addIcons(`<symbol id="iconFace" viewBox="0 0 32 32">
|
|
<path d="M13.667 17.333c0 0.92-0.747 1.667-1.667 1.667s-1.667-0.747-1.667-1.667 0.747-1.667 1.667-1.667 1.667 0.747 1.667 1.667zM20 15.667c-0.92 0-1.667 0.747-1.667 1.667s0.747 1.667 1.667 1.667 1.667-0.747 1.667-1.667-0.747-1.667-1.667-1.667zM29.333 16c0 7.36-5.973 13.333-13.333 13.333s-13.333-5.973-13.333-13.333 5.973-13.333 13.333-13.333 13.333 5.973 13.333 13.333zM14.213 5.493c1.867 3.093 5.253 5.173 9.12 5.173 0.613 0 1.213-0.067 1.787-0.16-1.867-3.093-5.253-5.173-9.12-5.173-0.613 0-1.213 0.067-1.787 0.16zM5.893 12.627c2.28-1.293 4.040-3.4 4.88-5.92-2.28 1.293-4.040 3.4-4.88 5.92zM26.667 16c0-1.040-0.16-2.040-0.44-2.987-0.933 0.2-1.893 0.32-2.893 0.32-4.173 0-7.893-1.92-10.347-4.92-1.4 3.413-4.187 6.093-7.653 7.4 0.013 0.053 0 0.12 0 0.187 0 5.88 4.787 10.667 10.667 10.667s10.667-4.787 10.667-10.667z"></path>
|
|
</symbol>
|
|
<symbol id="iconSaving" viewBox="0 0 32 32">
|
|
<path d="M20 13.333c0-0.733 0.6-1.333 1.333-1.333s1.333 0.6 1.333 1.333c0 0.733-0.6 1.333-1.333 1.333s-1.333-0.6-1.333-1.333zM10.667 12h6.667v-2.667h-6.667v2.667zM29.333 10v9.293l-3.76 1.253-2.24 7.453h-7.333v-2.667h-2.667v2.667h-7.333c0 0-3.333-11.28-3.333-15.333s3.28-7.333 7.333-7.333h6.667c1.213-1.613 3.147-2.667 5.333-2.667 1.107 0 2 0.893 2 2 0 0.28-0.053 0.533-0.16 0.773-0.187 0.453-0.347 0.973-0.427 1.533l3.027 3.027h2.893zM26.667 12.667h-1.333l-4.667-4.667c0-0.867 0.12-1.72 0.347-2.547-1.293 0.333-2.347 1.293-2.787 2.547h-8.227c-2.573 0-4.667 2.093-4.667 4.667 0 2.507 1.627 8.867 2.68 12.667h2.653v-2.667h8v2.667h2.68l2.067-6.867 3.253-1.093v-4.707z"></path>
|
|
</symbol>`);
|
|
|
|
const topBarElement = this.addTopBar({
|
|
icon: "iconFace",
|
|
title: this.i18n.addTopBarIcon,
|
|
position: "right",
|
|
callback: () => {
|
|
let rect = topBarElement.getBoundingClientRect();
|
|
// 如果被隐藏，则使用更多按钮
|
|
if (rect.width === 0) {
|
|
rect = document.querySelector("#barMore").getBoundingClientRect();
|
|
}
|
|
this.addMenu(rect);
|
|
}
|
|
});
|
|
|
|
const statusIconTemp = document.createElement("template");
|
|
statusIconTemp.innerHTML = `<div class="toolbar__item b3-tooltips b3-tooltips__w" aria-label="Remove plugin-sample Data">
|
|
<svg>
|
|
<use xlink:href="#iconTrashcan"></use>
|
|
</svg>
|
|
</div>`;
|
|
statusIconTemp.content.firstElementChild.addEventListener("click", () => {
|
|
confirm("⚠️", this.i18n.confirmRemove.replace("${name}", this.name), () => {
|
|
this.removeData(STORAGE_NAME).then(() => {
|
|
this.data[STORAGE_NAME] = {readonlyText: "Readonly"};
|
|
showMessage(`[${this.name}]: ${this.i18n.removedData}`);
|
|
});
|
|
});
|
|
});
|
|
this.addStatusBar({
|
|
element: statusIconTemp.content.firstElementChild as HTMLElement,
|
|
});
|
|
|
|
let tabDiv = document.createElement("div");
|
|
new HelloExample({
|
|
target: tabDiv,
|
|
props: {
|
|
name: this.i18n.name,
|
|
i18n: this.i18n.hello
|
|
}
|
|
});
|
|
this.customTab = this.addTab({
|
|
type: TAB_TYPE,
|
|
init() {
|
|
this.element.appendChild(tabDiv);
|
|
console.log(this.element);
|
|
},
|
|
destroy() {
|
|
console.log("destroy tab:", TAB_TYPE);
|
|
}
|
|
});
|
|
|
|
this.addCommand({
|
|
langKey: "showDialog",
|
|
hotkey: "⇧⌘M",
|
|
callback: () => {
|
|
this.showDialog();
|
|
}
|
|
});
|
|
|
|
this.addDock({
|
|
config: {
|
|
position: "LeftBottom",
|
|
size: {width: 200, height: 0},
|
|
icon: "iconSaving",
|
|
title: "Custom Dock",
|
|
},
|
|
data: {
|
|
text: "This is my custom dock"
|
|
},
|
|
type: DOCK_TYPE,
|
|
init() {
|
|
this.element.innerHTML = `<div class="fn__flex-1 fn__flex-column">
|
|
<div class="block__icons">
|
|
<div class="block__logo">
|
|
<svg><use xlink:href="#iconEmoji"></use></svg>
|
|
Custom Dock
|
|
</div>
|
|
<span class="fn__flex-1 fn__space"></span>
|
|
<span data-type="min" class="block__icon b3-tooltips b3-tooltips__sw" aria-label="Min ${adaptHotkey("⌘W")}"><svg><use xlink:href="#iconMin"></use></svg></span>
|
|
</div>
|
|
<div class="fn__flex-1 plugin-sample__custom-dock">
|
|
${this.data.text}
|
|
</div>
|
|
</div>`;
|
|
},
|
|
destroy() {
|
|
console.log("destroy dock:", DOCK_TYPE);
|
|
}
|
|
});
|
|
|
|
const textareaElement = document.createElement("textarea");
|
|
this.setting = new Setting({
|
|
confirmCallback: () => {
|
|
this.saveData(STORAGE_NAME, {readonlyText: textareaElement.value});
|
|
}
|
|
})
|
|
this.setting.addItem({
|
|
title: "Readonly text",
|
|
createActionElement: () => {
|
|
textareaElement.className = "b3-text-field fn__block";
|
|
textareaElement.placeholder = "Readonly text in the menu";
|
|
textareaElement.value = this.data[STORAGE_NAME].readonlyText;
|
|
return textareaElement;
|
|
},
|
|
})
|
|
const btnaElement = document.createElement("button");
|
|
btnaElement.className = "b3-button b3-button--outline fn__flex-center";
|
|
btnaElement.textContent = "Open";
|
|
btnaElement.addEventListener("click", () => {
|
|
window.open("https://github.com/siyuan-note/plugin-sample-vite-svelte")
|
|
});
|
|
this.setting.addItem({
|
|
title: "Open plugin url",
|
|
description: "Open plugin url in browser",
|
|
actionElement: btnaElement,
|
|
})
|
|
|
|
console.log(this.i18n.helloPlugin);
|
|
}
|
|
|
|
onLayoutReady() {
|
|
this.loadData(STORAGE_NAME);
|
|
console.log(`frontend: ${getFrontend()}; backend: ${getBackend()}`);
|
|
}
|
|
|
|
onunload() {
|
|
console.log(this.i18n.byePlugin);
|
|
showMessage("Goodbye SiYuan Plugin");
|
|
console.log("onunload");
|
|
}
|
|
|
|
/**
|
|
* A custom setting pannel provided by svelte
|
|
*/
|
|
openDIYSetting(): void {
|
|
let dialog = new Dialog({
|
|
title: "SettingPannel",
|
|
content: `<div id="SettingPanel"></div>`,
|
|
width: "600px",
|
|
destroyCallback: (options) => {
|
|
console.log("destroyCallback", options);
|
|
//You'd better destroy the component when the dialog is closed
|
|
pannel.$destroy();
|
|
}
|
|
});
|
|
let pannel = new SettingPannel({
|
|
target: dialog.element.querySelector("#SettingPanel"),
|
|
});
|
|
}
|
|
|
|
private eventBusLog({detail}: any) {
|
|
console.log(detail);
|
|
}
|
|
|
|
private blockIconEvent({detail}: any) {
|
|
const ids: string[] = [];
|
|
detail.blockElements.forEach((item: HTMLElement) => {
|
|
ids.push(item.getAttribute("data-node-id"));
|
|
});
|
|
detail.menu.addItem({
|
|
iconHTML: "",
|
|
type: "readonly",
|
|
label: "IDs<br>" + ids.join("<br>"),
|
|
});
|
|
}
|
|
|
|
private showDialog() {
|
|
let dialog = new Dialog({
|
|
title: "Hello World",
|
|
content: `<div id="helloPanel" class="b3-dialog__content"></div>`,
|
|
width: this.isMobile ? "92vw" : "720px",
|
|
destroyCallback(options) {
|
|
// hello.$destroy();
|
|
},
|
|
});
|
|
let hello = new HelloExample({
|
|
target: dialog.element.querySelector("#helloPanel"),
|
|
props: {
|
|
name: this.i18n.name,
|
|
i18n: this.i18n.hello
|
|
}
|
|
});
|
|
}
|
|
|
|
private addMenu(rect: DOMRect) {
|
|
const menu = new Menu("topBarSample", () => {
|
|
console.log(this.i18n.byeMenu);
|
|
});
|
|
menu.addItem({
|
|
icon: "iconInfo",
|
|
label: "Dialog",
|
|
accelerator: this.commands[0].customHotkey,
|
|
click: () => this.showDialog()
|
|
});
|
|
if (!this.isMobile) {
|
|
menu.addItem({
|
|
icon: "iconLayoutBottom",
|
|
label: "Open Custom Tab",
|
|
click: () => {
|
|
const tab = openTab({
|
|
app: this.app,
|
|
custom: {
|
|
icon: "iconFace",
|
|
title: "Custom Tab",
|
|
data: {
|
|
text: "This is my custom tab",
|
|
},
|
|
fn: this.customTab
|
|
},
|
|
});
|
|
console.log(tab)
|
|
}
|
|
});
|
|
menu.addItem({
|
|
icon: "iconLayoutBottom",
|
|
label: "Open Asset Tab(open help first)",
|
|
click: () => {
|
|
const tab = openTab({
|
|
app: this.app,
|
|
asset: {
|
|
path: "assets/paragraph-20210512165953-ag1nib4.svg"
|
|
}
|
|
});
|
|
console.log(tab)
|
|
}
|
|
});
|
|
menu.addItem({
|
|
icon: "iconLayoutBottom",
|
|
label: "Open Doc Tab(open help first)",
|
|
click: async () => {
|
|
const tab = await openTab({
|
|
app: this.app,
|
|
doc: {
|
|
id: "20200812220555-lj3enxa",
|
|
}
|
|
});
|
|
console.log(tab)
|
|
}
|
|
});
|
|
menu.addItem({
|
|
icon: "iconLayoutBottom",
|
|
label: "Open Search Tab",
|
|
click: () => {
|
|
const tab = openTab({
|
|
app: this.app,
|
|
search: {
|
|
k: "SiYuan"
|
|
}
|
|
});
|
|
console.log(tab)
|
|
}
|
|
});
|
|
menu.addItem({
|
|
icon: "iconLayoutBottom",
|
|
label: "Open Card Tab",
|
|
click: () => {
|
|
const tab = openTab({
|
|
app: this.app,
|
|
card: {
|
|
type: "all"
|
|
}
|
|
});
|
|
console.log(tab)
|
|
}
|
|
});
|
|
menu.addItem({
|
|
icon: "iconLayout",
|
|
label: "Open Float Layer(open help first)",
|
|
click: () => {
|
|
this.addFloatLayer({
|
|
ids: ["20210428212840-8rqwn5o", "20201225220955-l154bn4"],
|
|
defIds: ["20230415111858-vgohvf3", "20200813131152-0wk5akh"],
|
|
x: window.innerWidth - 768 - 120,
|
|
y: 32
|
|
});
|
|
}
|
|
});
|
|
}
|
|
menu.addItem({
|
|
icon: "iconScrollHoriz",
|
|
label: "Event Bus",
|
|
type: "submenu",
|
|
submenu: [{
|
|
icon: "iconSelect",
|
|
label: "On ws-main",
|
|
click: () => {
|
|
this.eventBus.on("ws-main", this.eventBusLog);
|
|
}
|
|
}, {
|
|
icon: "iconClose",
|
|
label: "Off ws-main",
|
|
click: () => {
|
|
this.eventBus.off("ws-main", this.eventBusLog);
|
|
}
|
|
}, {
|
|
icon: "iconSelect",
|
|
label: "On click-blockicon",
|
|
click: () => {
|
|
this.eventBus.on("click-blockicon", this.blockIconEvent);
|
|
}
|
|
}, {
|
|
icon: "iconClose",
|
|
label: "Off click-blockicon",
|
|
click: () => {
|
|
this.eventBus.off("click-blockicon", this.blockIconEvent);
|
|
}
|
|
}, {
|
|
icon: "iconSelect",
|
|
label: "On click-pdf",
|
|
click: () => {
|
|
this.eventBus.on("click-pdf", this.eventBusLog);
|
|
}
|
|
}, {
|
|
icon: "iconClose",
|
|
label: "Off click-pdf",
|
|
click: () => {
|
|
this.eventBus.off("click-pdf", this.eventBusLog);
|
|
}
|
|
}, {
|
|
icon: "iconSelect",
|
|
label: "On click-editorcontent",
|
|
click: () => {
|
|
this.eventBus.on("click-editorcontent", this.eventBusLog);
|
|
}
|
|
}, {
|
|
icon: "iconClose",
|
|
label: "Off click-editorcontent",
|
|
click: () => {
|
|
this.eventBus.off("click-editorcontent", this.eventBusLog);
|
|
}
|
|
}, {
|
|
icon: "iconSelect",
|
|
label: "On click-editortitleicon",
|
|
click: () => {
|
|
this.eventBus.on("click-editortitleicon", this.eventBusLog);
|
|
}
|
|
}, {
|
|
icon: "iconClose",
|
|
label: "Off click-editortitleicon",
|
|
click: () => {
|
|
this.eventBus.off("click-editortitleicon", this.eventBusLog);
|
|
}
|
|
}, {
|
|
icon: "iconSelect",
|
|
label: "On open-noneditableblock",
|
|
click: () => {
|
|
this.eventBus.on("open-noneditableblock", this.eventBusLog);
|
|
}
|
|
}, {
|
|
icon: "iconClose",
|
|
label: "Off open-noneditableblock",
|
|
click: () => {
|
|
this.eventBus.off("open-noneditableblock", this.eventBusLog);
|
|
}
|
|
}, {
|
|
icon: "iconSelect",
|
|
label: "On loaded-protyle",
|
|
click: () => {
|
|
this.eventBus.on("loaded-protyle", this.eventBusLog);
|
|
}
|
|
}, {
|
|
icon: "iconClose",
|
|
label: "Off loaded-protyle",
|
|
click: () => {
|
|
this.eventBus.off("loaded-protyle", this.eventBusLog);
|
|
}
|
|
}]
|
|
});
|
|
menu.addSeparator();
|
|
menu.addItem({
|
|
icon: "iconSettings",
|
|
label: "Official Setting Dialog",
|
|
click: () => {
|
|
this.openSetting();
|
|
}
|
|
});
|
|
menu.addItem({
|
|
icon: "iconSettings",
|
|
label: "A custom setting dialog (by svelte)",
|
|
click: () => {
|
|
this.openDIYSetting();
|
|
}
|
|
});
|
|
menu.addItem({
|
|
icon: "iconSparkles",
|
|
label: this.data[STORAGE_NAME].readonlyText || "Readonly",
|
|
type: "readonly",
|
|
});
|
|
if (this.isMobile) {
|
|
menu.fullscreen();
|
|
} else {
|
|
menu.open({
|
|
x: rect.right,
|
|
y: rect.bottom,
|
|
isLeft: true,
|
|
});
|
|
}
|
|
}
|
|
}
|