Add item pane API example

src-2.0/bootstrap.js

@@ -11,24 +11,18 @@ function install() {
 async function startup({ id, version, rootURI }) {
 	log("Starting 2.0");
 
-	Zotero.PreferencePanes.register({
-		pluginID: '[email protected]',
-		src: rootURI + 'preferences.xhtml',
-		scripts: [rootURI + 'preferences.js']
-	});
-
 	Services.scriptloader.loadSubScript(rootURI + 'make-it-red.js');
 	MakeItRed.init({ id, version, rootURI });
 	MakeItRed.addToAllWindows();
 	await MakeItRed.main();
 }
 
-function onMainWindowLoad({ window }) {
-	MakeItRed.addToWindow(window);
+function onMainWindowLoad({ win }) {
+	MakeItRed.addToWindow(win);
 }
 
-function onMainWindowUnload({ window }) {
-	MakeItRed.removeFromWindow(window);
+function onMainWindowUnload(win) {
+	MakeItRed.removeFromWindow(win);
 }
 
 function shutdown() {

src-2.0/itemPaneSections.js

@@ -0,0 +1,97 @@
+(() => {
+	MakeItRed.registerItemPaneSections = function() {
+		// A minimal example
+		Zotero.ItemPaneManager.registerSection({
+			paneID: "example",
+			pluginID: this.id,
+			header: {
+				l10nID: "make-it-red-item-section-example1-head-text",
+				icon: "chrome://zotero/skin/16/universal/book.svg",
+			},
+			sidenav: {
+				l10nID: "make-it-red-item-section-example1-sidenav-tooltip",
+				icon: "chrome://zotero/skin/20/universal/save.svg",
+				showByDefault: true,
+			},
+			onRender: ({ body, item, editable, tabType }) => {
+				body.textContent
+					= JSON.stringify({
+						id: item?.id,
+						editable,
+						tabType,
+					});
+			},
+		});
+
+		// A full example
+		Zotero.ItemPaneManager.registerSection({
+			paneID: "reader-example",
+			pluginID: this.id,
+			header: {
+				l10nID: "make-it-red-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: "make-it-red-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 }) => {
+				this.log("Section init!", item?.id);
+			},
+			// Optional, Called when the section is destroyed, must be synchronous
+			onDestroy: (props) => {
+				this.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 }) => {
+				this.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 }) => {
+				this.log("Section rendered!", item?.id);
+				let title = body.querySelector("#test");
+				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 }) => {
+				this.log("Section secondary render start!", item?.id);
+				await Zotero.Promise.delay(1000);
+				this.log("Section secondary render finish!", item?.id);
+				let title = body.querySelector("#test");
+				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 }) => {
+				this.log("Section toggled!", item?.id);
+			},
+			// Optional, Buttons to be shown in the section header
+			sectionButtons: [
+				{
+					type: "test",
+					icon: "chrome://zotero/skin/16/universal/empty-trash.svg",
+					l10nID: "make-it-red-item-section-example2-button-tooltip",
+					onClick: ({ item, paneID }) => {
+						this.log("Section clicked!", item?.id);
+						Zotero.ItemPaneManager.unregisterSection(paneID);
+					},
+				},
+			],
+		});
+	}
+})();

src-2.0/locale/en-US/make-it-red-preferences.ftl

@@ -0,0 +1,2 @@
+make-it-red-title = Plugin Settings
+make-it-red-intensity = Intensity

src-2.0/locale/en-US/make-it-red.ftl

@@ -1,2 +1,13 @@
 make-it-red-green-instead =
     .label = Make It Green Instead
+
+make-it-red-item-section-example1-head-text =
+    .label = Make It Red: Item Info
+make-it-red-item-section-example1-sidenav-tooltip =
+    .tooltiptext = This is Make It Red section (item info)
+make-it-red-item-section-example2-head-text =
+    .label = Make It Red: Reader [{$status}]
+make-it-red-item-section-example2-sidenav-tooltip =
+    .tooltiptext = This is Make It Red section (reader)
+make-it-red-item-section-example2-button-tooltip =
+    .tooltiptext = Unregister this section

src-2.0/make-it-red.js

@@ -18,6 +18,11 @@ MakeItRed = {
 	},
 
 	addToWindow(window) {
+		if (window._makeItRedAdded) {
+			return;
+		}
+		window._makeItRedAdded = true;
+
 		let doc = window.document;
 
 		// Add a stylesheet to the main Zotero pane
@@ -61,12 +66,17 @@ MakeItRed = {
 	},
 
 	removeFromWindow(window) {
-		var doc = window.document;
+		if (!window._makeItRedAdded) {
+			return;
+		}
+		window._makeItRedAdded = false;
+
+		let doc = window.document;
 		// Remove all elements added to DOM
 		for (let id of this.addedElementIDs) {
 			doc.getElementById(id)?.remove();
 		}
-		doc.querySelector('[href="make-it-red.ftl"]').remove();
+		doc.querySelector('[href="make-it-red.ftl"]')?.remove();
 	},
 
 	removeFromAllWindows() {
@@ -84,10 +94,18 @@ MakeItRed = {
 
 	async main() {
 		// Global properties are included automatically in Zotero 7
-		var host = new URL('https://foo.com/path').host;
+		let host = new URL('https://foo.com/path').host;
 		this.log(`Host is ${host}`);
 
 		// Retrieve a global pref
 		this.log(`Intensity is ${Zotero.Prefs.get('extensions.make-it-red.intensity', true)}`);
+
+		// Load sub scripts
+		Services.scriptloader.loadSubScript(this.rootURI + 'preferencePanes.js', this);
+		Services.scriptloader.loadSubScript(this.rootURI + 'itemPaneSections.js', this);
+
+		// Use Zotero plugin API to register stuff
+		this.registerPrefPanes();
+		this.registerItemPaneSections();
 	},
 };

src-2.0/preferencePanes.js

@@ -0,0 +1,10 @@
+(() => {
+	MakeItRed.registerPrefPanes = function () {
+		Zotero.PreferencePanes.register({
+			pluginID: MakeItRed.id,
+			src: MakeItRed.rootURI + 'preferences.xhtml',
+			scripts: [MakeItRed.rootURI + 'preferences.js'],
+			label: "Make It Red",
+		})
+	}
+})();

src-2.0/preferences.js

@@ -0,0 +1 @@
+Zotero.debug("Make It Red Pref Pane Loaded!");

src-2.0/preferences.xhtml

@@ -0,0 +1,18 @@
+<linkset>
+	<html:link rel="localization" href="make-it-red-preferences.ftl" />
+</linkset>
+<vbox id="zotero-prefpane-make-it-red">
+	<groupbox>
+		<label><html:h2 data-l10n-id="make-it-red-title"></html:h2></label>
+		<hbox>
+			<html:label
+				for="make-it-red-intensity"
+				data-l10n-id="make-it-red-intensity"
+			></html:label>
+			<html:input
+				id="make-it-red-intensity"
+				preference="extensions.make-it-red.intensity"
+			></html:input>
+		</hbox>
+	</groupbox>
+</vbox>