fix: registerLibraryTabPanel and registerReaderTabPanel
This commit is contained in:
		
							parent
							
								
									eec0d47a96
								
							
						
					
					
						commit
						cb77a57062
					
				
							
								
								
									
										10
									
								
								addon/locale/en-US/mainWindow.ftl
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										10
									
								
								addon/locale/en-US/mainWindow.ftl
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,10 @@
 | 
			
		||||
item-section-example1-head-text =
 | 
			
		||||
    .label = Plugin Template: Item Info
 | 
			
		||||
item-section-example1-sidenav-tooltip =
 | 
			
		||||
    .tooltiptext = This is Plugin Template section (item info)
 | 
			
		||||
item-section-example2-head-text =
 | 
			
		||||
    .label = Plugin Template: Reader [{$status}]
 | 
			
		||||
item-section-example2-sidenav-tooltip =
 | 
			
		||||
    .tooltiptext = This is Plugin Template section (reader)
 | 
			
		||||
item-section-example2-button-tooltip =
 | 
			
		||||
    .tooltiptext = Unregister this section
 | 
			
		||||
							
								
								
									
										10
									
								
								addon/locale/zh-CN/mainWindow.ftl
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										10
									
								
								addon/locale/zh-CN/mainWindow.ftl
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,10 @@
 | 
			
		||||
item-section-example1-head-text =
 | 
			
		||||
    .label = 插件模板: 条目信息
 | 
			
		||||
item-section-example1-sidenav-tooltip =
 | 
			
		||||
    .tooltiptext = 这是插件模板面板(条目信息)
 | 
			
		||||
item-section-example2-head-text =
 | 
			
		||||
    .label = 插件模板: 阅读器[{$status}]
 | 
			
		||||
item-section-example2-sidenav-tooltip =
 | 
			
		||||
    .tooltiptext = 这是插件模板面板(阅读器)
 | 
			
		||||
item-section-example2-button-tooltip =
 | 
			
		||||
    .tooltiptext = 移除此面板
 | 
			
		||||
							
								
								
									
										24
									
								
								package.json
									
									
									
									
									
								
							
							
						
						
									
										24
									
								
								package.json
									
									
									
									
									
								
							@ -32,22 +32,22 @@
 | 
			
		||||
  },
 | 
			
		||||
  "homepage": "https://github.com/windingwind/zotero-addon-template#readme",
 | 
			
		||||
  "dependencies": {
 | 
			
		||||
    "zotero-plugin-toolkit": "^2.3.15"
 | 
			
		||||
    "zotero-plugin-toolkit": "^2.3.29"
 | 
			
		||||
  },
 | 
			
		||||
  "devDependencies": {
 | 
			
		||||
    "@types/node": "^20.10.4",
 | 
			
		||||
    "@typescript-eslint/eslint-plugin": "^7.3.1",
 | 
			
		||||
    "@typescript-eslint/parser": "^7.1.1",
 | 
			
		||||
    "chokidar": "^3.5.3",
 | 
			
		||||
    "@types/node": "^20.12.8",
 | 
			
		||||
    "@typescript-eslint/eslint-plugin": "^7.8.0",
 | 
			
		||||
    "@typescript-eslint/parser": "^7.8.0",
 | 
			
		||||
    "chokidar": "^3.6.0",
 | 
			
		||||
    "compressing": "^1.10.0",
 | 
			
		||||
    "esbuild": "^0.20.1",
 | 
			
		||||
    "eslint": "^8.55.0",
 | 
			
		||||
    "esbuild": "^0.20.2",
 | 
			
		||||
    "eslint": "^8.57.0",
 | 
			
		||||
    "eslint-config-prettier": "^9.1.0",
 | 
			
		||||
    "prettier": "^3.1.1",
 | 
			
		||||
    "release-it": "^17.0.1",
 | 
			
		||||
    "replace-in-file": "^7.0.2",
 | 
			
		||||
    "typescript": "^5.3.3",
 | 
			
		||||
    "zotero-types": "^1.3.10"
 | 
			
		||||
    "prettier": "^3.2.5",
 | 
			
		||||
    "release-it": "^17.2.1",
 | 
			
		||||
    "replace-in-file": "^7.1.0",
 | 
			
		||||
    "typescript": "^5.4.5",
 | 
			
		||||
    "zotero-types": "^1.3.24"
 | 
			
		||||
  },
 | 
			
		||||
  "eslintConfig": {
 | 
			
		||||
    "env": {
 | 
			
		||||
 | 
			
		||||
@ -39,6 +39,9 @@ async function onMainWindowLoad(win: Window): Promise<void> {
 | 
			
		||||
  // Create ztoolkit for every window
 | 
			
		||||
  addon.data.ztoolkit = createZToolkit();
 | 
			
		||||
 | 
			
		||||
  // @ts-ignore
 | 
			
		||||
  window.MozXULElement.insertFTLIfNeeded(`${config.addonRef}-mainWindow.ftl`);
 | 
			
		||||
 | 
			
		||||
  const popupWin = new ztoolkit.ProgressWindow(config.addonName, {
 | 
			
		||||
    closeOnClick: true,
 | 
			
		||||
    closeTime: -1,
 | 
			
		||||
@ -72,7 +75,7 @@ async function onMainWindowLoad(win: Window): Promise<void> {
 | 
			
		||||
 | 
			
		||||
  UIExampleFactory.registerLibraryTabPanel();
 | 
			
		||||
 | 
			
		||||
  await UIExampleFactory.registerReaderTabPanel();
 | 
			
		||||
  UIExampleFactory.registerReaderTabPanel();
 | 
			
		||||
 | 
			
		||||
  PromptExampleFactory.registerNormalCommandExample();
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -89,7 +89,7 @@ export class KeyExampleFactory {
 | 
			
		||||
    // Register an event key for Alt+L
 | 
			
		||||
    ztoolkit.Keyboard.register((ev, keyOptions) => {
 | 
			
		||||
      ztoolkit.log(ev, keyOptions.keyboard);
 | 
			
		||||
      if (keyOptions.keyboard.equals("shift,l")) {
 | 
			
		||||
      if (keyOptions.keyboard?.equals("shift,l")) {
 | 
			
		||||
        addon.hooks.onShortcuts("larger");
 | 
			
		||||
      }
 | 
			
		||||
      if (ev.shiftKey && ev.key === "S") {
 | 
			
		||||
@ -280,118 +280,110 @@ export class UIExampleFactory {
 | 
			
		||||
 | 
			
		||||
  @example
 | 
			
		||||
  static registerLibraryTabPanel() {
 | 
			
		||||
    const tabId = ztoolkit.LibraryTabPanel.register(
 | 
			
		||||
      getString("tabpanel-lib-tab-label"),
 | 
			
		||||
      (panel: XUL.Element, win: Window) => {
 | 
			
		||||
        const elem = ztoolkit.UI.createElement(win.document, "vbox", {
 | 
			
		||||
          children: [
 | 
			
		||||
            {
 | 
			
		||||
              tag: "h2",
 | 
			
		||||
              properties: {
 | 
			
		||||
                innerText: "Hello World!",
 | 
			
		||||
    Zotero.ItemPaneManager.registerSection({
 | 
			
		||||
      paneID: "example",
 | 
			
		||||
      pluginID: config.addonID,
 | 
			
		||||
      header: {
 | 
			
		||||
        l10nID: `${config.addonRef}-item-section-example1-head-text`,
 | 
			
		||||
        icon: "chrome://zotero/skin/16/universal/book.svg",
 | 
			
		||||
      },
 | 
			
		||||
      sidenav: {
 | 
			
		||||
        l10nID: `${config.addonRef}-item-section-example1-sidenav-tooltip`,
 | 
			
		||||
        icon: "chrome://zotero/skin/20/universal/save.svg",
 | 
			
		||||
      },
 | 
			
		||||
            {
 | 
			
		||||
              tag: "div",
 | 
			
		||||
              properties: {
 | 
			
		||||
                innerText: "This is a library tab.",
 | 
			
		||||
              },
 | 
			
		||||
            },
 | 
			
		||||
            {
 | 
			
		||||
              tag: "button",
 | 
			
		||||
              namespace: "html",
 | 
			
		||||
              properties: {
 | 
			
		||||
                innerText: "Unregister",
 | 
			
		||||
              },
 | 
			
		||||
              listeners: [
 | 
			
		||||
                {
 | 
			
		||||
                  type: "click",
 | 
			
		||||
                  listener: () => {
 | 
			
		||||
                    ztoolkit.LibraryTabPanel.unregister(tabId);
 | 
			
		||||
                  },
 | 
			
		||||
                },
 | 
			
		||||
              ],
 | 
			
		||||
            },
 | 
			
		||||
          ],
 | 
			
		||||
      onRender: ({ body, item, editable, tabType }) => {
 | 
			
		||||
        body.textContent = JSON.stringify({
 | 
			
		||||
          id: item?.id,
 | 
			
		||||
          editable,
 | 
			
		||||
          tabType,
 | 
			
		||||
        });
 | 
			
		||||
        panel.append(elem);
 | 
			
		||||
      },
 | 
			
		||||
      {
 | 
			
		||||
        targetIndex: 1,
 | 
			
		||||
      },
 | 
			
		||||
    );
 | 
			
		||||
    });
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  @example
 | 
			
		||||
  static async registerReaderTabPanel() {
 | 
			
		||||
    const tabId = await ztoolkit.ReaderTabPanel.register(
 | 
			
		||||
      getString("tabpanel-reader-tab-label"),
 | 
			
		||||
      (
 | 
			
		||||
        panel: XUL.TabPanel | undefined,
 | 
			
		||||
        deck: XUL.Deck,
 | 
			
		||||
        win: Window,
 | 
			
		||||
        reader: _ZoteroTypes.ReaderInstance,
 | 
			
		||||
      ) => {
 | 
			
		||||
        if (!panel) {
 | 
			
		||||
          ztoolkit.log(
 | 
			
		||||
            "This reader do not have right-side bar. Adding reader tab skipped.",
 | 
			
		||||
          );
 | 
			
		||||
          return;
 | 
			
		||||
        }
 | 
			
		||||
        ztoolkit.log(reader);
 | 
			
		||||
        const elem = ztoolkit.UI.createElement(win.document, "vbox", {
 | 
			
		||||
          id: `${config.addonRef}-${reader._instanceID}-extra-reader-tab-div`,
 | 
			
		||||
          // This is important! Don't create content for multiple times
 | 
			
		||||
          // ignoreIfExists: true,
 | 
			
		||||
          removeIfExists: true,
 | 
			
		||||
          children: [
 | 
			
		||||
    Zotero.ItemPaneManager.registerSection({
 | 
			
		||||
      paneID: "reader-example",
 | 
			
		||||
      pluginID: config.addonID,
 | 
			
		||||
      header: {
 | 
			
		||||
        l10nID: `${config.addonRef}-item-section-example2-head-text`,
 | 
			
		||||
        // Optional
 | 
			
		||||
        l10nArgs: `{"status": "Initialized"}`,
 | 
			
		||||
        // Can also have a optional dark icon
 | 
			
		||||
        icon: "chrome://zotero/skin/16/universal/book.svg",
 | 
			
		||||
      },
 | 
			
		||||
      sidenav: {
 | 
			
		||||
        l10nID: `${config.addonRef}-item-section-example2-sidenav-tooltip`,
 | 
			
		||||
        icon: "chrome://zotero/skin/20/universal/save.svg",
 | 
			
		||||
      },
 | 
			
		||||
      // Optional
 | 
			
		||||
      bodyXHTML: '<html:h1 id="test">THIS IS TEST</html:h1>',
 | 
			
		||||
      // Optional, Called when the section is first created, must be synchronous
 | 
			
		||||
      onInit: ({ item }) => {
 | 
			
		||||
        ztoolkit.log("Section init!", item?.id);
 | 
			
		||||
      },
 | 
			
		||||
      // Optional, Called when the section is destroyed, must be synchronous
 | 
			
		||||
      onDestroy: (props) => {
 | 
			
		||||
        ztoolkit.log("Section destroy!");
 | 
			
		||||
      },
 | 
			
		||||
      // Optional, Called when the section data changes (setting item/mode/tabType/inTrash), must be synchronous. return false to cancel the change
 | 
			
		||||
      onItemChange: ({ item, setEnabled, tabType }) => {
 | 
			
		||||
        ztoolkit.log(`Section item data changed to ${item?.id}`);
 | 
			
		||||
        setEnabled(tabType === "reader");
 | 
			
		||||
        return true;
 | 
			
		||||
      },
 | 
			
		||||
      // Called when the section is asked to render, must be synchronous.
 | 
			
		||||
      onRender: ({
 | 
			
		||||
        body,
 | 
			
		||||
        item,
 | 
			
		||||
        setL10nArgs,
 | 
			
		||||
        setSectionSummary,
 | 
			
		||||
        setSectionButtonStatus,
 | 
			
		||||
      }) => {
 | 
			
		||||
        ztoolkit.log("Section rendered!", item?.id);
 | 
			
		||||
        const title = body.querySelector("#test") as HTMLElement;
 | 
			
		||||
        title.style.color = "red";
 | 
			
		||||
        title.textContent = "LOADING";
 | 
			
		||||
        setL10nArgs(`{ "status": "Loading" }`);
 | 
			
		||||
        setSectionSummary("loading!");
 | 
			
		||||
        setSectionButtonStatus("test", { hidden: true });
 | 
			
		||||
      },
 | 
			
		||||
      // Optional, can be asynchronous.
 | 
			
		||||
      onAsyncRender: async ({
 | 
			
		||||
        body,
 | 
			
		||||
        item,
 | 
			
		||||
        setL10nArgs,
 | 
			
		||||
        setSectionSummary,
 | 
			
		||||
        setSectionButtonStatus,
 | 
			
		||||
      }) => {
 | 
			
		||||
        ztoolkit.log("Section secondary render start!", item?.id);
 | 
			
		||||
        await Zotero.Promise.delay(1000);
 | 
			
		||||
        ztoolkit.log("Section secondary render finish!", item?.id);
 | 
			
		||||
        const title = body.querySelector("#test") as HTMLElement;
 | 
			
		||||
        title.style.color = "green";
 | 
			
		||||
        title.textContent = item.getField("title");
 | 
			
		||||
        setL10nArgs(`{ "status": "Loaded" }`);
 | 
			
		||||
        setSectionSummary("rendered!");
 | 
			
		||||
        setSectionButtonStatus("test", { hidden: false });
 | 
			
		||||
      },
 | 
			
		||||
      // Optional, Called when the section is toggled. Can happen anytime even if the section is not visible or not rendered
 | 
			
		||||
      onToggle: ({ item }) => {
 | 
			
		||||
        ztoolkit.log("Section toggled!", item?.id);
 | 
			
		||||
      },
 | 
			
		||||
      // Optional, Buttons to be shown in the section header
 | 
			
		||||
      sectionButtons: [
 | 
			
		||||
        {
 | 
			
		||||
              tag: "h2",
 | 
			
		||||
              properties: {
 | 
			
		||||
                innerText: "Hello World!",
 | 
			
		||||
          type: "test",
 | 
			
		||||
          icon: "chrome://zotero/skin/16/universal/empty-trash.svg",
 | 
			
		||||
          l10nID: "make-it-red-item-section-example2-button-tooltip",
 | 
			
		||||
          onClick: ({ item, paneID }) => {
 | 
			
		||||
            ztoolkit.log("Section clicked!", item?.id);
 | 
			
		||||
            Zotero.ItemPaneManager.unregisterSection(paneID);
 | 
			
		||||
          },
 | 
			
		||||
        },
 | 
			
		||||
            {
 | 
			
		||||
              tag: "div",
 | 
			
		||||
              properties: {
 | 
			
		||||
                innerText: "This is a reader tab.",
 | 
			
		||||
              },
 | 
			
		||||
            },
 | 
			
		||||
            {
 | 
			
		||||
              tag: "div",
 | 
			
		||||
              properties: {
 | 
			
		||||
                innerText: `Reader: ${reader._title.slice(0, 20)}`,
 | 
			
		||||
              },
 | 
			
		||||
            },
 | 
			
		||||
            {
 | 
			
		||||
              tag: "div",
 | 
			
		||||
              properties: {
 | 
			
		||||
                innerText: `itemID: ${reader.itemID}.`,
 | 
			
		||||
              },
 | 
			
		||||
            },
 | 
			
		||||
            {
 | 
			
		||||
              tag: "button",
 | 
			
		||||
              namespace: "html",
 | 
			
		||||
              properties: {
 | 
			
		||||
                innerText: "Unregister",
 | 
			
		||||
              },
 | 
			
		||||
              listeners: [
 | 
			
		||||
                {
 | 
			
		||||
                  type: "click",
 | 
			
		||||
                  listener: () => {
 | 
			
		||||
                    ztoolkit.ReaderTabPanel.unregister(tabId);
 | 
			
		||||
                  },
 | 
			
		||||
                },
 | 
			
		||||
              ],
 | 
			
		||||
            },
 | 
			
		||||
      ],
 | 
			
		||||
    });
 | 
			
		||||
        panel.append(elem);
 | 
			
		||||
      },
 | 
			
		||||
      {
 | 
			
		||||
        targetIndex: 1,
 | 
			
		||||
      },
 | 
			
		||||
    );
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user