add: views example for menu

src/views.ts

@@ -1,4 +1,4 @@
-import { Addon, getZotero, createXULElement } from "./addon";
+import Addon from "./addon";
 import AddonModule from "./module";
 const { addonRef, addonID } = require("../package.json");
 
@@ -17,23 +17,49 @@ class AddonViews extends AddonModule {
   }
 
   public initViews() {
-    const Zotero = getZotero();
+    const Zotero = this._Addon.Zotero;
     // You can init the UI elements that
     // cannot be initialized with overlay.xul
     Zotero.debug("Initializing UI");
-    const _window: Window = Zotero.getMainWindow();
+    const menuIcon =
-    const menuitem = createXULElement(_window.document, "menuitem");
+      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsSAAALEgHS3X78AAAC9klEQVQ4jU1TzW/UZRB+Zub9fexXt7s0YG0RAlTAg6EqjfUkMYYDN2OiJngxXOBEBP0T9KY3LiQe1JgYP4BEw0laBSGgSSVIYhNLw5cuaaXdbnf39/G+73jo/hommcxhMk9m5nkeUlUU4RQkBJ25kwRHv358LmAcEUbKRNxJfRAb8kbIqip1Mw2mn4nOMJ4IVWUAuHE/e3m1748IAyt9bxZXbPDCWHiJGa37qzZcz9SUAsK1e+kJowBtAoAIAEJDVcNAKaCZYweHzjPRyORo8P1fS/apwGBqZiGpzN5JT9UiEkPFLAAa1FCos5Z4fdBG9cf5ZO7geGhOX+y+Hwq1XhwLPv234z8UhjgFTGLBACoFiir828+Xb/etTnVT3TpSZrPw2D7993L+7njdLN5q5Tfnl+3JekRwCpgPLvW/AXAYQD7YQgwTanHUowj2P4eSC+W3Stz7dXtdzjngQCSAV1gAht77obdJAxPQy9VZjywOUFKFEkBeCZNbcWjhUd9+Mde73CwzVKEAiIXghaABw/VyxfSYHD+8y7yqCpQMaSzkmYDMYWhXw7R3NsxnTMgGz1dWgBWAVUgtpKUddfllelwe1SOayz3YKWgo5uy7W739H8+uff7sSHCtHNAp9VAhwAzu9pmDbB+mC/90/Ru/t3R07xb58vpDNxkbqFOloZhzJuz4eTE5GzB1haGdVJmL2zOn2NOUq3dX/XPtxB/aVqE/AFUCGAoOGL3hEi+N1qS7pUwaCdLXJ+JPDAC1HjIc03okuLKS6EPrcX5nnf9slni+m+u+1cTLsanq4pv7GnvbqTaEYBVAJFhnAnzugW0VvpA5vLKW6sXU4dvL9+w7E03+yroNhkLZqNWQ1qohdWohdQwTmAjqVLGnwT/dXnavhUIsBLS6+tZIiW74jR9t6l0BKpIIMF5hYkO4+sCeth67zcBe7VRfmr1rPyobuJUEknv4Qu6F5AGAAVwhAJnHfgWiouEVgVUc8AqphHRzosnXC8aedPD/kPxathRorWcAAAAASUVORK5CYII=";
-    menuitem.id = "zotero-itemmenu-addontemplate-test";
+    // item menuitem with icon
-    menuitem.setAttribute("label", "Addon Template");
+    this._Addon.utils.UI.insertMenuItem("item", {
-    menuitem.setAttribute("oncommand", "alert('Hello World!')");
+      tag: "menuitem",
-    // menuitem.className = "menuitem-iconic";
+      id: "zotero-itemmenu-addontemplate-test",
-    // menuitem.style["list-style-image"] =
+      label: "Addon Template: Menuitem",
-    //   "url('chrome/skin/default/addontemplate/favicon@0.5x.png')";
+      oncommand: "alert('Hello World! Default Menuitem.')",
-    _window.document.querySelector("#zotero-itemmenu").appendChild(menuitem);
+      icon: menuIcon,
+    });
+    // item menupopup with sub-menuitems
+    this._Addon.utils.UI.insertMenuItem(
+      "item",
+      {
+        tag: "menu",
+        label: "Addon Template: Menupopup",
+        subElementOptions: [
+          {
+            tag: "menuitem",
+            label: "Addon Template",
+            oncommand: "alert('Hello World! Sub Menuitem.')",
+          },
+        ],
+      },
+      "before",
+      this._Addon.Zotero.getMainWindow().document.querySelector(
+        "#zotero-itemmenu-addontemplate-test"
+      )
+    );
+    // menu->File menuitem
+    this._Addon.utils.UI.insertMenuItem("menuFile", {
+      tag: "menuitem",
+      label: "Addon Template: File Menuitem",
+      oncommand: "alert('Hello World! File Menuitem.')",
+    });
   }
 
   public initPrefs() {
-    const Zotero = getZotero();
+    const Zotero = this._Addon.Zotero;
     Zotero.PreferencePanes.register({
       pluginID: addonID,
       src: `${this._Addon.rootURI}/chrome/content/preferences.xhtml`,
@@ -42,7 +68,7 @@ class AddonViews extends AddonModule {
   }
 
   public unInitViews() {
-    const Zotero = getZotero();
+    const Zotero = this._Addon.Zotero;
     Zotero.debug("Uninitializing UI");
     const _window: Window = Zotero.getMainWindow();
     _window.document