add: preview in info tab

fix: #5 do not render if the preview tab is not active
windingwind · Jul 28, 2022 · 5d23b78 · 5d23b78
1 parent cd59826
commit 5d23b78
Show file tree

Hide file tree

Showing 8 changed files with 127 additions and 13 deletions.
diff --git a/addon/chrome/content/overlay.xul b/addon/chrome/content/overlay.xul
@@ -22,6 +22,7 @@
             <tab id="pdf-preview-tab" label="&zotero.__addonRef__.tab.label;"></tab>
         </tabs>
         <tabpanels id="zotero-view-item">
+            <!-- tabpanel > div #pdf-preview-infosplit in events.ts -->
             <tabpanel id="pdf-preview-tabpanel" style="overflow: hidden;"></tabpanel>
         </tabpanels>
     </tabbox>

diff --git a/addon/chrome/content/preferences.xul b/addon/chrome/content/preferences.xul
@@ -7,6 +7,8 @@
     <prefpane id="zotero-prefpane-__addonRef__" insertafter="zotero-prefpane-advanced" label="&zotero.__addonRef__.pref.label;" image="chrome://__addonRef__/skin/favicon.png">
       <preferences id="zotero-preferences-__addonRef__">
         <preference id="pref-__addonRef__-enable" name="extensions.zotero.__addonRef__.enable" type="bool" />
+        <preference id="pref-__addonRef__-enableSplit" name="extensions.zotero.__addonRef__.enableSplit" type="bool" />
+        <preference id="pref-__addonRef__-enableTab" name="extensions.zotero.__addonRef__.enableTab" type="bool" />
         <preference id="pref-__addonRef__-autoPreview" name="extensions.zotero.__addonRef__.autoPreview" type="bool" />
         <preference id="pref-__addonRef__-showAnnotations" name="extensions.zotero.__addonRef__.showAnnotations" type="bool" />
         <preference id="pref-__addonRef__-showHover" name="extensions.zotero.__addonRef__.showHover" type="bool" />
@@ -19,6 +21,12 @@
         <row>
           <checkbox id="zotero-prefpane-__addonRef__-settings-enable" preference="pref-__addonRef__-enable" label="&zotero.__addonRef__.pref.enable.label;" />
         </row>
+        <row>
+          <checkbox id="zotero-prefpane-__addonRef__-settings-enableSplit" preference="pref-__addonRef__-enableSplit" label="&zotero.__addonRef__.pref.enableSplit.label;" />
+        </row>
+        <row>
+          <checkbox id="zotero-prefpane-__addonRef__-settings-enableTab" preference="pref-__addonRef__-enableTab" label="&zotero.__addonRef__.pref.enableTab.label;" />
+        </row>
         <row>
           <checkbox id="zotero-prefpane-__addonRef__-settings-autoPreview" preference="pref-__addonRef__-autoPreview" label="&zotero.__addonRef__.pref.autoPreview.label;" />
         </row>

diff --git a/addon/chrome/locale/en-US/overlay.dtd b/addon/chrome/locale/en-US/overlay.dtd
@@ -1,5 +1,7 @@
 <!ENTITY zotero.__addonRef__.pref.label "Preview">
 <!ENTITY zotero.__addonRef__.pref.enable.label "Enable Preview">
+<!ENTITY zotero.__addonRef__.pref.enableSplit.label "Preview in Info Tab">
+<!ENTITY zotero.__addonRef__.pref.enableTab.label "Preview in 'Preview' Tab">
 <!ENTITY zotero.__addonRef__.pref.autoPreview.label "Auto Focus Preview Tab">
 <!ENTITY zotero.__addonRef__.pref.showAnnotations.label "Show Annotations">
 <!ENTITY zotero.__addonRef__.pref.showHover.label "Show Hovered Page Style">

diff --git a/addon/chrome/locale/zh-CN/overlay.dtd b/addon/chrome/locale/zh-CN/overlay.dtd
@@ -1,13 +1,15 @@
 <!ENTITY zotero.__addonRef__.pref.label "预览">
 <!ENTITY zotero.__addonRef__.pref.enable.label "启用预览">
+<!ENTITY zotero.__addonRef__.pref.enableSplit.label "在信息面板中预览">
+<!ENTITY zotero.__addonRef__.pref.enableTab.label "在独立预览面板中预览">
 <!ENTITY zotero.__addonRef__.pref.autoPreview.label "自动选中预览">
 <!ENTITY zotero.__addonRef__.pref.showAnnotations.label "显示注释">
 <!ENTITY zotero.__addonRef__.pref.showHover.label "显示悬停页面样式">
 <!ENTITY zotero.__addonRef__.pref.enableJump.label "双击预览页面以打开/转跳PDF">
 <!ENTITY zotero.__addonRef__.pref.darkMode.label "黑暗模式">
 <!ENTITY zotero.__addonRef__.pref.previewPageNumBefore.label "预览前">
 <!ENTITY zotero.__addonRef__.pref.previewPageNumAfter.label "页">
-<!ENTITY zotero.__addonRef__.pref.previewTabNameBefore.label "预览标签名称">
+<!ENTITY zotero.__addonRef__.pref.previewTabNameBefore.label "预览面板名称">
 <!ENTITY zotero.__addonRef__.pref.previewTabNameAfter.label "(重启Zotero以应用更改)">
 
 <!ENTITY zotero.__addonRef__.tab.label "预览">

diff --git a/addon/defaults/preferences/defaults.js b/addon/defaults/preferences/defaults.js
@@ -1,4 +1,6 @@
 pref("extensions.zotero.pdfpreview.enable", true);
+pref("extensions.zotero.pdfpreview.enableSplit", true);
+pref("extensions.zotero.pdfpreview.enableTab", true);
 pref("extensions.zotero.pdfpreview.autoPreview", false);
 pref("extensions.zotero.pdfpreview.showAnnotations", true);
 pref("extensions.zotero.pdfpreview.showHover", true);

diff --git a/src/events.ts b/src/events.ts
@@ -6,22 +6,67 @@ class AddonEvents extends AddonBase {
     await Zotero.uiReadyPromise;
     this.initItemSelectListener();
     this.initPreviewResizeListener();
+    this.initTabSelectListener();
+    this.initPreviewInfoSplit();
+    this.updatePreviewInfoSplit();
+    this.updatePreviewTab();
     this.updatePreviewTabName();
   }
 
   private initItemSelectListener() {
     ZoteroPane.itemsView.onSelect.addListener(() => {
-      this._Addon.preview.preview();
+      this.updatePreviewTab();
+      if (this.isPreviewTabSelected()) {
+        this._Addon.preview.preview();
+      } else if (this.isInfoTabSelected()) {
+        this.updatePreviewInfoSplit();
+        this._Addon.preview.preview("info");
+      }
     });
   }
 
   private initPreviewResizeListener() {
     const splitter = window.document.getElementById("zotero-items-splitter");
     splitter.addEventListener("mouseup", (e) => {
-      this._Addon.preview.preview(true);
+      if (this.isPreviewTabSelected()) {
+        this._Addon.preview.preview("preview", true);
+      } else if (this.isInfoTabSelected()) {
+        this._Addon.preview.preview("info", true);
+      }
     });
   }
 
+  private initTabSelectListener() {
+    const tabbox = window.document.querySelector("#zotero-view-tabbox");
+    tabbox.addEventListener("command", (e) => {
+      if (this.isPreviewTabSelected()) {
+        this._Addon.preview.preview();
+      } else if (this.isInfoTabSelected()) {
+        this._Addon.preview.preview("info");
+      }
+    });
+  }
+
+  public isInfoTabSelected(): boolean {
+    const tabbox = window.document.querySelector("#zotero-view-tabbox");
+    const infoTab = window.document.querySelector("#zotero-editpane-info-tab");
+    const tabIndex = Array.prototype.indexOf.call(
+      infoTab.parentNode.childNodes,
+      infoTab
+    );
+    return (tabbox as any).selectedIndex === tabIndex;
+  }
+
+  public isPreviewTabSelected(): boolean {
+    const tabbox = window.document.querySelector("#zotero-view-tabbox");
+    const previewTab = window.document.querySelector("#pdf-preview-tab");
+    const tabIndex = Array.prototype.indexOf.call(
+      previewTab.parentNode.childNodes,
+      previewTab
+    );
+    return (tabbox as any).selectedIndex === tabIndex;
+  }
+
   public updatePreviewTabSelection() {
     const tabbox = window.document.querySelector("#zotero-view-tabbox");
     const previewTab = window.document.querySelector("#pdf-preview-tab");
@@ -39,6 +84,52 @@ class AddonEvents extends AddonBase {
     const previewTab = window.document.querySelector("#pdf-preview-tab");
     previewTab.setAttribute("label", label);
   }
+
+  private updatePreviewTab() {
+    const hidden = !Zotero.Prefs.get("pdfpreview.enableTab");
+    const previewTab = document.querySelector(
+      "#pdf-preview-tab"
+    ) as HTMLElement;
+    if (hidden) {
+      previewTab.style.visibility = "hidden";
+    } else {
+      previewTab.style.removeProperty("visibility");
+    }
+  }
+
+  private initPreviewInfoSplit() {
+    const zitembox = document.querySelector("#zotero-editpane-item-box");
+    zitembox.parentElement.setAttribute("orient", "vertical");
+    const div = document.createElement("div");
+    div.id = "pdf-preview-infosplit";
+    zitembox.before(div);
+    const splitter = document.createElement("splitter") as XUL.Splitter;
+    splitter.id = "pdf-preview-infosplit-splitter";
+    splitter.collapse = "before";
+    div.after(splitter);
+    // window.addEventListener("resize", (e) => {
+    //   this.resizePreviewSplit(!Zotero.Prefs.get("pdfpreview.enableSplit"));
+    // });
+  }
+
+  private updatePreviewInfoSplit() {
+    const hidden = !Zotero.Prefs.get("pdfpreview.enableSplit");
+    const splitContainer: HTMLDivElement = document.querySelector(
+      "#pdf-preview-infosplit"
+    );
+    const splitSplitter: HTMLDivElement = document.querySelector(
+      "#pdf-preview-infosplit-splitter"
+    );
+    if (hidden) {
+      splitContainer.style.height = "0px";
+      splitContainer.style.visibility = "hidden";
+      splitSplitter.style.visibility = "hidden";
+    } else {
+      splitContainer.style.height = "400px";
+      splitContainer.style.removeProperty("visibility");
+      splitSplitter.style.removeProperty("visibility");
+    }
+  }
 }
 
 export default AddonEvents;
diff --git a/src/preview.ts b/src/preview.ts
@@ -52,33 +52,39 @@ class AddonPreview extends AddonBase {
     return new Uint8Array(buf).buffer;
   }
 
-  public async preview(force: boolean = false) {
-    if (Zotero.Prefs.get("pdfpreview.enable") === false) {
+  public async preview(type: string = "preview", force: boolean = false) {
+    if (
+      Zotero.Prefs.get("pdfpreview.enable") === false ||
+      Zotero.Prefs.get(
+        `pdfpreview.${type === "preview" ? "enableTab" : "enableSplit"}`
+      ) === false
+    ) {
       return;
     }
     let item = this.updatePreviewItem();
     console.log(item);
     if (force && !item) {
       item = this.item;
     }
+    const previewId = `pdf-preview-${type}-container`;
+    let previewIframe = document.getElementById(previewId) as HTMLIFrameElement;
     if (item) {
       if (this._loadingPromise) {
         await this._loadingPromise.promise;
       }
-      let previewIframe: HTMLIFrameElement = document.querySelector(
-        "#pdf-preview-container"
-      );
       if (!previewIframe) {
         console.log("init preview iframe");
         this._initPromise = Zotero.Promise.defer();
         previewIframe = window.document.createElement("iframe");
-        previewIframe.setAttribute("id", "pdf-preview-container");
+        previewIframe.setAttribute("id", previewId);
         previewIframe.setAttribute(
           "src",
           "chrome://PDFPreview/content/previewPDF.html"
         );
 
-        const container = document.querySelector("#pdf-preview-tabpanel");
+        const container = document.querySelector(
+          type === "preview" ? "#pdf-preview-tabpanel" : "#pdf-preview-infosplit"
+        );
         if (!container) {
           return;
         }
@@ -124,9 +130,6 @@ class AddonPreview extends AddonBase {
       previewIframe.hidden = false;
     } else {
       console.log("hide preview");
-      let previewIframe: HTMLIFrameElement = document.querySelector(
-        "#pdf-preview-container"
-      );
       if (previewIframe) {
         previewIframe.hidden = true;
       }

diff --git a/typing/xul.d.ts b/typing/xul.d.ts
@@ -63,6 +63,11 @@ declare namespace XUL {
   class ListItem extends XUL.Element {
     public selectedItem?: XUL.Element;
   }
+
+  class Splitter extends XUL.Element {
+    public collapse?: "none" | "before" | "after";
+    public state?: "open" | "collapsed" | "dragging";
+  }
 }
 
 declare class ClassList {