add: dialog examples
This commit is contained in:
xiangyu
parent
c80f3ed457
commit
ffbaf8cd3d
@ -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`
|
||||
|
||||
@ -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
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
startup.begin=插件加载中
|
||||
startup.finish=插件已就绪
|
||||
menuitem.label=插件模板: 菜单
|
||||
menuitem.label=插件模板: 帮助工具样例
|
||||
menupopup.label=插件模板: 弹出菜单
|
||||
menuitem.submenulabel=插件模板：子菜单
|
||||
menuitem.filemenulabel=插件模板: 文件菜单
|
||||
|
||||
@ -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",
|
||||
|
||||
26
src/hooks.ts
26
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,
|
||||
};
|
||||
|
||||
@ -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(
|
||||
"",
|
||||
"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");
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user