From ffbaf8cd3d7487004c3e0d1c0ce7a082e2984cd4 Mon Sep 17 00:00:00 2001 From: xiangyu <3170102889@zju.edu.cn> Date: Sun, 15 Jan 2023 20:37:56 +0800 Subject: [PATCH] add: dialog examples --- README.md | 8 + addon/chrome/locale/en-US/addon.properties | 2 +- addon/chrome/locale/zh-CN/addon.properties | 2 +- package.json | 2 +- src/hooks.ts | 26 ++ src/modules/examples.ts | 274 ++++++++++++++++++++- 6 files changed, 310 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 07cbca0..0cd7409 100644 --- a/README.md +++ b/README.md @@ -83,6 +83,14 @@ Search `@example` in `src/examples.ts`. The examples are called in `src/hooks.ts See [`src/modules/preferenceScript.ts`](./src/modules/preferenceScript.ts) +### HelperExamples + +- dialogExample +- clipboardExample +- filePickerExample +- progressWindowExample +- vtableExample(See Preference Pane Examples) + ## Quick Start Guide ### Install Pre-built `xpi` diff --git a/addon/chrome/locale/en-US/addon.properties b/addon/chrome/locale/en-US/addon.properties index 5e89df6..515590b 100644 --- a/addon/chrome/locale/en-US/addon.properties +++ b/addon/chrome/locale/en-US/addon.properties @@ -1,6 +1,6 @@ startup.begin=Addon is loading startup.finish=Addon is ready -menuitem.label=Addon Template: Menuitem +menuitem.label=Addon Template: Helper Examples menupopup.label=Addon Template: Menupopup menuitem.submenulabel=Addon Template menuitem.filemenulabel=Addon Template: File Menuitem diff --git a/addon/chrome/locale/zh-CN/addon.properties b/addon/chrome/locale/zh-CN/addon.properties index 437fe12..281d1b2 100644 --- a/addon/chrome/locale/zh-CN/addon.properties +++ b/addon/chrome/locale/zh-CN/addon.properties @@ -1,6 +1,6 @@ startup.begin=插件加载中 startup.finish=插件已就绪 -menuitem.label=插件模板: 菜单 +menuitem.label=插件模板: 帮助工具样例 menupopup.label=插件模板: 弹出菜单 menuitem.submenulabel=插件模板：子菜单 menuitem.filemenulabel=插件模板: 文件菜单 diff --git a/package.json b/package.json index c27c21a..a4af2e8 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ }, "homepage": "https://github.com/windingwind/zotero-addon-template#readme", "dependencies": { - "zotero-plugin-toolkit": "^1.0.4" + "zotero-plugin-toolkit": "^1.0.6" }, "devDependencies": { "@types/node": "^18.11.17", diff --git a/src/hooks.ts b/src/hooks.ts index d44a389..1213266 100644 --- a/src/hooks.ts +++ b/src/hooks.ts @@ -1,5 +1,6 @@ import { BasicExampleFactory, + HelperExampleFactory, KeyExampleFactory, UIExampleFactory, } from "./modules/examples"; @@ -67,6 +68,8 @@ async function onStartup() { text: `[100%] ${getString("startup.finish")}`, }); popupWin.startCloseTimer(5000); + + addon.hooks.onDialogEvents("dialogExample"); } function onShutdown(): void { @@ -131,6 +134,28 @@ function onShortcuts(type: string) { } } +function onDialogEvents(type: string) { + switch (type) { + case "dialogExample": + HelperExampleFactory.dialogExample(); + break; + case "clipboardExample": + HelperExampleFactory.clipboardExample(); + break; + case "filePickerExample": + HelperExampleFactory.filePickerExample(); + break; + case "progressWindowExample": + HelperExampleFactory.progressWindowExample(); + break; + case "vtableExample": + HelperExampleFactory.vtableExample(); + break; + default: + break; + } +} + // Add your hooks here. For element click, etc. // Keep in mind hooks only do dispatch. Don't add code that does real jobs in hooks. // Otherwise the code would be hard to read and maintian. @@ -141,4 +166,5 @@ export default { onNotify, onPrefsEvent, onShortcuts, + onDialogEvents, }; diff --git a/src/modules/examples.ts b/src/modules/examples.ts index 2ea7959..a82a826 100644 --- a/src/modules/examples.ts +++ b/src/modules/examples.ts @@ -205,7 +205,7 @@ export class UIExampleFactory { tag: "menuitem", id: "zotero-itemmenu-addontemplate-test", label: getString("menuitem.label"), - oncommand: "alert('Hello World! Default Menuitem.')", + commandListener: (ev) => addon.hooks.onDialogEvents("dialogExample"), icon: menuIcon, }); } @@ -423,3 +423,275 @@ export class UIExampleFactory { ); } } + +export class HelperExampleFactory { + @example + static async dialogExample() { + const dialogData: { [key: string | number]: any } = { + inputValue: "test", + checkboxValue: true, + loadCallback: () => { + ztoolkit.log(dialogData, "Dialog Opened!"); + }, + unloadCallback: () => { + ztoolkit.log(dialogData, "Dialog closed!"); + }, + }; + const dialogHelper = new ztoolkit.Dialog(10, 2) + .addCell(0, 0, { + tag: "h1", + properties: { innerHTML: "Helper Examples" }, + }) + .addCell(1, 0, { + tag: "h2", + properties: { innerHTML: "Dialog Data Binding" }, + }) + .addCell(2, 0, { + tag: "p", + properties: { + innerHTML: + "Elements with attribute 'data-bind' are binded to the prop under 'dialogData' with the same name.", + }, + styles: { + width: "200px", + }, + }) + .addCell(3, 0, { + tag: "label", + namespace: "html", + attributes: { + for: "dialog-checkbox", + }, + properties: { innerHTML: "bind:checkbox" }, + }) + .addCell( + 3, + 1, + { + tag: "input", + namespace: "html", + id: "dialog-checkbox", + attributes: { + "data-bind": "checkboxValue", + "data-prop": "checked", + type: "checkbox", + }, + properties: { label: "Cell 1,0" }, + }, + false + ) + .addCell(4, 0, { + tag: "label", + namespace: "html", + attributes: { + for: "dialog-input", + }, + properties: { innerHTML: "bind:input" }, + }) + .addCell( + 4, + 1, + { + tag: "input", + namespace: "html", + id: "dialog-input", + attributes: { + "data-bind": "inputValue", + "data-prop": "value", + type: "text", + }, + }, + false + ) + .addCell(5, 0, { + tag: "h2", + properties: { innerHTML: "Toolkit Helper Examples" }, + }) + .addCell( + 6, + 0, + { + tag: "button", + namespace: "html", + attributes: { + type: "button", + }, + listeners: [ + { + type: "click", + listener: (e: Event) => { + addon.hooks.onDialogEvents("clipboardExample"); + }, + }, + ], + children: [ + { + tag: "div", + styles: { + padding: "2.5px 15px", + }, + properties: { + innerHTML: "example:clipboard", + }, + }, + ], + }, + false + ) + .addCell( + 7, + 0, + { + tag: "button", + namespace: "html", + attributes: { + type: "button", + }, + listeners: [ + { + type: "click", + listener: (e: Event) => { + addon.hooks.onDialogEvents("filePickerExample"); + }, + }, + ], + children: [ + { + tag: "div", + styles: { + padding: "2.5px 15px", + }, + properties: { + innerHTML: "example:filepicker", + }, + }, + ], + }, + false + ) + .addCell( + 8, + 0, + { + tag: "button", + namespace: "html", + attributes: { + type: "button", + }, + listeners: [ + { + type: "click", + listener: (e: Event) => { + addon.hooks.onDialogEvents("progressWindowExample"); + }, + }, + ], + children: [ + { + tag: "div", + styles: { + padding: "2.5px 15px", + }, + properties: { + innerHTML: "example:progressWindow", + }, + }, + ], + }, + false + ) + .addCell( + 9, + 0, + { + tag: "button", + namespace: "html", + attributes: { + type: "button", + }, + listeners: [ + { + type: "click", + listener: (e: Event) => { + addon.hooks.onDialogEvents("vtableExample"); + }, + }, + ], + children: [ + { + tag: "div", + styles: { + padding: "2.5px 15px", + }, + properties: { + innerHTML: "example:virtualized-table", + }, + }, + ], + }, + false + ) + .addButton("Confirm", "confirm") + .addButton("Cancel", "cancel") + .addButton("Help", "help", { + noClose: true, + callback: (e) => { + dialogHelper.window?.alert( + "Help Clicked! Dialog will not be closed." + ); + }, + }) + .setDialogData(dialogData) + .open("Dialog Example"); + await dialogData.unloadLock.promise; + ztoolkit.getGlobal("alert")( + `Close dialog with ${dialogData._lastButtonId}.\nCheckbox: ${dialogData.checkboxValue}\nInput: ${dialogData.inputValue}.` + ); + ztoolkit.log(dialogData); + } + + @example + static clipboardExample() { + new ztoolkit.Clibpoard() + .addText( + "![Plugin Template](https://github.com/windingwind/zotero-plugin-template)", + "text/unicode" + ) + .addText( + 'Plugin Template', + "text/html" + ) + .copy(); + ztoolkit.getGlobal("alert")("Copied!"); + } + + @example + static async filePickerExample() { + const path = await new ztoolkit.FilePicker( + "Import File", + "open", + [ + ["PNG File(*.png)", "*.png"], + ["Any", "*.*"], + ], + "image.png" + ).open(); + ztoolkit.getGlobal("alert")(`Selected ${path}`); + } + + @example + static progressWindowExample() { + new ztoolkit.ProgressWindow(config.addonName) + .createLine({ + text: "ProgressWindow Example!", + type: "success", + progress: 100, + }) + .show(); + } + + @example + static vtableExample() { + ztoolkit.getGlobal("alert")("See src/modules/preferenceScript.ts"); + } +}