add: dialog examples

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`

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

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=插件模板: 文件菜单

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",

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,
 };

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(
+        '<a href="https://github.com/windingwind/zotero-plugin-template">Plugin Template</a>',
+        "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");
+  }
+}