add: preview position in info pane

windingwind · Aug 2, 2022 · 6caf8e1 · 6caf8e1
1 parent e0412e8
commit 6caf8e1
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -26,6 +26,7 @@ Find settings here: Menubar -> Edit -> Preferences -> Preview
 | ---- | ---- | ---- |
 | Enable Preview | Enable to allow the preview behavior. | `true` |
 | Preview in Info Tab | Enable to show the preview in a split view under 'info' tab. | `true` |
+| Preview Position | Preview position in the Info Tab | `bottom` |
 | Preview in 'Preview' Tab | Enable show the preview in a new tab of right sidebar. | `true` |
 | Auto Focus Preview Tab | Enable to focus the preview tab automatically when you select a valid preview item. | `false` |
 | Show Annotations | Enable to show annotations of the PDF files. May slow down the preview speed. | `false` |

diff --git a/addon/chrome/content/preferences.xul b/addon/chrome/content/preferences.xul
@@ -8,6 +8,7 @@
       <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__-splitType" name="extensions.zotero.__addonRef__.splitType" type="string" />
         <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" />
@@ -23,6 +24,11 @@
         </row>
         <row>
           <checkbox id="zotero-prefpane-__addonRef__-settings-enableSplit" preference="pref-__addonRef__-enableSplit" label="&zotero.__addonRef__.pref.enableSplit.label;" />
+          <label value="&zotero.__addonRef__.pref.splitPosition.label;" />
+          <radiogroup preference="pref-__addonRef__-splitType" orient="horizontal">
+            <radio label="&zotero.__addonRef__.pref.splitBefore.label;" value="before"></radio>
+            <radio label="&zotero.__addonRef__.pref.splitAfter.label;" value="after"></radio>
+          </radiogroup>
         </row>
         <row>
           <checkbox id="zotero-prefpane-__addonRef__-settings-enableTab" preference="pref-__addonRef__-enableTab" label="&zotero.__addonRef__.pref.enableTab.label;" />

diff --git a/addon/chrome/locale/en-US/overlay.dtd b/addon/chrome/locale/en-US/overlay.dtd
@@ -1,6 +1,9 @@
 <!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.splitPosition.label "Preview Position:">
+<!ENTITY zotero.__addonRef__.pref.splitBefore.label "Top">
+<!ENTITY zotero.__addonRef__.pref.splitAfter.label "Bottom">
 <!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">

diff --git a/addon/chrome/locale/zh-CN/overlay.dtd b/addon/chrome/locale/zh-CN/overlay.dtd
@@ -1,6 +1,9 @@
 <!ENTITY zotero.__addonRef__.pref.label "预览">
 <!ENTITY zotero.__addonRef__.pref.enable.label "启用预览">
 <!ENTITY zotero.__addonRef__.pref.enableSplit.label "在信息面板中预览">
+<!ENTITY zotero.__addonRef__.pref.splitPosition.label "预览位置：">
+<!ENTITY zotero.__addonRef__.pref.splitBefore.label "顶部">
+<!ENTITY zotero.__addonRef__.pref.splitAfter.label "底部">
 <!ENTITY zotero.__addonRef__.pref.enableTab.label "在独立预览面板中预览">
 <!ENTITY zotero.__addonRef__.pref.autoPreview.label "自动选中预览">
 <!ENTITY zotero.__addonRef__.pref.showAnnotations.label "显示注释">

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

diff --git a/src/events.ts b/src/events.ts
@@ -100,25 +100,35 @@ class AddonEvents extends AddonBase {
   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 divBefore = document.createElement("div");
+    divBefore.id = "pdf-preview-infosplit-before";
+    const divAfter = document.createElement("div");
+    divAfter.id = "pdf-preview-infosplit-after";
+    zitembox.before(divBefore);
+    zitembox.after(divAfter);
     const splitter = document.createElement("splitter") as XUL.Splitter;
-    splitter.id = "pdf-preview-infosplit-splitter";
+    splitter.id = "pdf-preview-infosplit-splitter-before";
     splitter.collapse = "before";
-    div.after(splitter);
+    divBefore.after(splitter);
+    const splitterAfter = document.createElement("splitter") as XUL.Splitter;
+    splitterAfter.id = "pdf-preview-infosplit-splitter-after";
+    splitterAfter.collapse = "after";
+    divAfter.before(splitterAfter);
     // window.addEventListener("resize", (e) => {
     //   this.resizePreviewSplit(!Zotero.Prefs.get("pdfpreview.enableSplit"));
     // });
   }
 
   private updatePreviewInfoSplit() {
     const hidden = !Zotero.Prefs.get("pdfpreview.enableSplit");
+    const splitType: "before" | "after" = Zotero.Prefs.get(
+      "pdfpreview.splitType"
+    );
     const splitContainer: HTMLDivElement = document.querySelector(
-      "#pdf-preview-infosplit"
+      `#pdf-preview-infosplit-${splitType}`
     );
     const splitSplitter: HTMLDivElement = document.querySelector(
-      "#pdf-preview-infosplit-splitter"
+      `#pdf-preview-infosplit-splitter-${splitType}`
     );
     if (hidden) {
       splitContainer.style.height = "0px";
@@ -129,6 +139,19 @@ class AddonEvents extends AddonBase {
       splitContainer.style.removeProperty("visibility");
       splitSplitter.style.removeProperty("visibility");
     }
+
+    // Hide another preview
+    const hiddenType: "before" | "after" =
+      splitType === "before" ? "after" : "before";
+    const hiddenContainer: HTMLDivElement = document.querySelector(
+      `#pdf-preview-infosplit-${hiddenType}`
+    );
+    const hiddenSplitter: HTMLDivElement = document.querySelector(
+      `#pdf-preview-infosplit-splitter-${hiddenType}`
+    );
+    hiddenContainer.style.height = "0px";
+    hiddenContainer.style.visibility = "hidden";
+    hiddenSplitter.style.visibility = "hidden";
   }
 }
 

diff --git a/src/preview.ts b/src/preview.ts
@@ -66,6 +66,12 @@ class AddonPreview extends AddonBase {
     if (force && !item) {
       item = this.item;
     }
+    const splitType: "before" | "after" = Zotero.Prefs.get(
+      "pdfpreview.splitType"
+    );
+    if (type === "info") {
+      type = `${type}-${splitType}`;
+    }
     const previewId = `pdf-preview-${type}-container`;
     let previewIframe = document.getElementById(previewId) as HTMLIFrameElement;
     if (item) {
@@ -83,7 +89,9 @@ class AddonPreview extends AddonBase {
         );
 
         const container = document.querySelector(
-          type === "preview" ? "#pdf-preview-tabpanel" : "#pdf-preview-infosplit"
+          type === "preview"
+            ? "#pdf-preview-tabpanel"
+            : `#pdf-preview-infosplit-${splitType}`
         );
         if (!container) {
           return;