From 0f049cc461f3161420c32bfec70f2640a5f2437e Mon Sep 17 00:00:00 2001 From: Frostime Date: Sat, 20 May 2023 17:40:15 +0800 Subject: [PATCH] Dev (#2) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: svelte example for setting pannel * Must destroy svelte * onDestroy * Make hello easy * 拷贝官方的代码功能 * Use hello both in tab and dialog * fix: destroy dock --- src/dock.svelte | 23 ++++ src/hello.svelte | 62 +++++----- src/i18n/en_US.json | 11 +- src/i18n/zh_CN.json | 11 +- src/index.ts | 214 ++++++++++++++++++++++++++++++---- src/libs/b3-list.svelte | 8 ++ src/libs/setting-item.svelte | 90 ++++++++++++++ src/libs/setting-panel.svelte | 99 ++++++++++++++++ src/siyuan.d.ts | 23 +--- src/sy-dtype.d.ts | 2 +- 10 files changed, 460 insertions(+), 83 deletions(-) create mode 100644 src/dock.svelte create mode 100644 src/libs/b3-list.svelte create mode 100644 src/libs/setting-item.svelte create mode 100644 src/libs/setting-panel.svelte diff --git a/src/dock.svelte b/src/dock.svelte new file mode 100644 index 0000000..a380d69 --- /dev/null +++ b/src/dock.svelte @@ -0,0 +1,23 @@ + + +
+
+ + + +
+
+ {text} +
+
diff --git a/src/hello.svelte b/src/hello.svelte index da4baa3..b619b3f 100644 --- a/src/hello.svelte +++ b/src/hello.svelte @@ -3,68 +3,60 @@ * https://github.com/frostime/sy-plugin-template-vite -->
-
-
+
+

Hello {name} v{ver}

-
+
{time_str}
-
+
+

{@html i18n.makesure}

+
-

- 使用这个模板之前，请阅读官方教程, 确保自己已经理解了插件的基本开发流程。 -

- -

- Before using this template, please read the offical sample, make sure that you've known about the pipeline for plugin developing. -

diff --git a/src/i18n/en_US.json b/src/i18n/en_US.json index 64b8849..7e9425a 100644 --- a/src/i18n/en_US.json +++ b/src/i18n/en_US.json @@ -1,3 +1,12 @@ { - "name": "SiYuan" + "addTopBarIcon": "Add a top bar icon by plugin", + "cancel": "Cancel", + "save": "Save", + "byeMenu": "Bye, Menu!", + "helloPlugin": "Hello, Plugin!", + "byePlugin": "Bye, Plugin!", + "name": "SiYuan", + "hello": { + "makesure": "Before using this template, please read the offical sample, make sure that you've known about the pipeline for plugin developing." + } } \ No newline at end of file diff --git a/src/i18n/zh_CN.json b/src/i18n/zh_CN.json index 99335c3..7eaa3eb 100644 --- a/src/i18n/zh_CN.json +++ b/src/i18n/zh_CN.json @@ -1,3 +1,12 @@ { - "name": "思源" + "addTopBarIcon": "使用插件添加一个顶栏按钮", + "cancel": "取消", + "save": "保存", + "byeMenu": "再见，菜单！", + "helloPlugin": "你好，插件！", + "byePlugin": "再见，插件！", + "name": "思源", + "hello": { + "makesure": "使用这个模板之前，请阅读官方教程, 确保自己已经理解了插件的基本开发流程。" + } } \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 12844f3..f68a2d4 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,37 +2,205 @@ * Copyright (c) 2023 frostime. All rights reserved. * https://github.com/frostime/sy-plugin-template-vite */ -import { Plugin, showMessage, Dialog } from "siyuan" -import Hello from "./hello.svelte" -import "./index.scss" +import { Plugin, showMessage, confirm, Dialog, Menu, isMobile, openTab } from "siyuan"; +import "./index.scss"; + +import HelloExample from "./hello.svelte"; +import DockExample from "./dock.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 SamplePlugin extends Plugin { + counter: { [key: string]: number } = { + hello: 0, + }; + private customTab: () => any; + async onload() { - console.log("onload"); - showMessage("Hello World"); - this.addTopBar( - { - icon: "iconEmoji", - "title": "Hello SiYuan", - "callback": () => { - let dialog = new Dialog({ - title: "Hello World", - content: `
`, - }); - new Hello({ - target: dialog.element.querySelector("#helloPanel"), - props: { - name: this.i18n.name, - } - }); - } + showMessage("Hello SiYuan Plugin"); + console.log(this.i18n.helloPlugin); + + const topBarElement = this.addTopBar({ + icon: "iconEmoji", + title: this.i18n.addTopBarIcon, + position: "left", + callback: () => { + this.addMenu(topBarElement.getBoundingClientRect()); } - ) + }); + + let div = document.createElement("div"); + new HelloExample({ + target: div, + props: { + name: this.i18n.name, + i18n: this.i18n.hello + } + }); + this.customTab = this.addTab({ + type: TAB_TYPE, + init() { + this.element.appendChild(div); + console.log(this.element); + }, + destroy() { + console.log("destroy tab:", TAB_TYPE); + } + }); + + this.addDock({ + config: { + position: "LeftBottom", + size: { width: 200, height: 0 }, + icon: "iconEmoji", + title: "Custom Dock", + }, + data: { + text: "This is my custom dock" + }, + type: DOCK_TYPE, + init() { + this.component = new DockExample({ + target: this.element, + props: { + text: this.data.text, + } + }); + }, + destroy() { + console.log("destroy dock:", DOCK_TYPE); + this.component.$destroy(); + } + }); + + } + + private wsEvent({ detail }: any) { + console.log(detail); + } + + private async addMenu(rect: DOMRect) { + const menu = new Menu("topBarSample", () => { + console.log(this.i18n.byeMenu); + }); + menu.addItem({ + icon: "iconHelp", + label: "Confirm", + click() { + confirm("Confirm", "Is this a confirm?", () => { + showMessage("confirm"); + }, () => { + showMessage("cancel"); + }); + } + }); + menu.addItem({ + icon: "iconFeedback", + label: "Message", + click: () => { + showMessage(this.i18n.helloPlugin); + } + }); + menu.addItem({ + icon: "iconInfo", + label: "Dialog", + click: () => this.openHelloInDialog() + }); + menu.addItem({ + icon: "iconLayoutBottom", + label: "Open Tab", + click: () => { + openTab({ + custom: { + icon: "iconEmoji", + title: "Custom Tab", + data: { + text: "This is my custom tab", + }, + fn: this.customTab + }, + }); + } + }); + menu.addItem({ + icon: "iconTrashcan", + label: "Remove Data", + click: () => { + this.removeData(STORAGE_NAME); + } + }); + menu.addItem({ + icon: "iconSelect", + label: "On ws-main", + click: () => { + this.eventBus.on("ws-main", this.wsEvent); + } + }); + menu.addItem({ + icon: "iconClose", + label: "Off ws-main", + click: () => { + this.eventBus.off("ws-main", this.wsEvent); + } + }); + menu.addSeparator(); + menu.addItem({ + icon: "iconSparkles", + label: this.data[STORAGE_NAME] || "Readonly", + type: "readonly", + }); + if (isMobile()) { + menu.fullscreen(); + } else { + menu.open({ + x: rect.right, + y: rect.bottom, + isLeft: true, + }); + } + } + + openSetting(): void { + let dialog = new Dialog({ + title: "SettingPannel", + content: `
`, + width: "600px", + destroyCallback: (options) => { + console.log("destroyCallback", options); + //You must destroy the component when the dialog is closed + pannel.$destroy(); + } + }); + let pannel = new SettingPannel({ + target: dialog.element.querySelector("#SettingPanel"), + }); + } + + private openHelloInDialog() { + this.counter.hello++; + let dialog = new Dialog({ + title: "Hello World", + content: `
`, + destroyCallback(options) { + //You must destroy the component when the dialog is closed + hello.$destroy(); + }, + }); + let hello = new HelloExample({ + target: dialog.element.querySelector("#helloPanel"), + props: { + name: this.i18n.name, + i18n: this.i18n.hello + } + }); } async onunload() { - showMessage("Goodbye World"); + showMessage("Goodbye SiYuan Plugin"); console.log("onunload"); } } diff --git a/src/libs/b3-list.svelte b/src/libs/b3-list.svelte new file mode 100644 index 0000000..edbab36 --- /dev/null +++ b/src/libs/b3-list.svelte @@ -0,0 +1,8 @@ +
    +
  • + + + + +
    • +
diff --git a/src/libs/setting-item.svelte b/src/libs/setting-item.svelte new file mode 100644 index 0000000..74e08b5 --- /dev/null +++ b/src/libs/setting-item.svelte @@ -0,0 +1,90 @@ + + + diff --git a/src/libs/setting-panel.svelte b/src/libs/setting-panel.svelte new file mode 100644 index 0000000..ccf424e --- /dev/null +++ b/src/libs/setting-panel.svelte @@ -0,0 +1,99 @@ + + + + +
+
+
+

This setting panel is provided by a svelte component

+
+ + See: + 
/lib/setting-pannel.svelte
+ +
+
+
+ { + showMessage( + `Checkbox changed: ${event.detail.key} = ${event.detail.value}` + ); + }} + /> + { + showMessage( + `Input changed: ${event.detail.key} = ${event.detail.value}` + ); + }} + /> + { + showMessage("Button clicked"); + }} + /> + { + showMessage( + `Select changed: ${event.detail.key} = ${event.detail.value}` + ); + }} + /> + { + showMessage( + `Slide changed: ${event.detail.key} = ${event.detail.value}` + ); + }} + /> +
diff --git a/src/siyuan.d.ts b/src/siyuan.d.ts index b197cbc..fbca339 100644 --- a/src/siyuan.d.ts +++ b/src/siyuan.d.ts @@ -1,26 +1,5 @@ /* - * Copyright (c) 2023, Terwer . All rights reserved. - * DO NOT ALTER OR REMOVE COPYRIGHT NOTICES OR THIS FILE HEADER. - * - * This code is free software; you can redistribute it and/or modify it - * under the terms of the GNU General Public License version 2 only, as - * published by the Free Software Foundation. Terwer designates this - * particular file as subject to the "Classpath" exception as provided - * by Terwer in the LICENSE file that accompanied this code. - * - * This code is distributed in the hope that it will be useful, but WITHOUT - * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or - * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License - * version 2 for more details (a copy is included in the LICENSE file that - * accompanied this code). - * - * You should have received a copy of the GNU General Public License version - * 2 along with this work; if not, write to the Free Software Foundation, - * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA. - * - * Please contact Terwer, Shenzhen, Guangdong, China, youweics@163.com - * or visit www.terwer.space if you need additional information or have any - * questions. + * Copyright (c) 2023, SiYuan, frostime, Terwer . All rights reserved. */ declare module "siyuan" { diff --git a/src/sy-dtype.d.ts b/src/sy-dtype.d.ts index 0be02f9..0c3b465 100644 --- a/src/sy-dtype.d.ts +++ b/src/sy-dtype.d.ts @@ -4,7 +4,7 @@ */ /** - * 思源内部常用的数据格式 + * Frequently used data structures in SiYuan */ declare module "sy-dtype" {