Merge pull request #1441 from laws-africa/pdf

When PDF loads, jump to a particular page
laws-africa · Aug 16, 2023 · f783431 · f783431
2 parents a15a48a + 141422a
commit f783431
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 8 deletions.
diff --git a/peachjam/js/components/DocumentContent/index.ts b/peachjam/js/components/DocumentContent/index.ts
@@ -1,5 +1,5 @@
 import DocumentSearch from '../DocumentSearch/index.vue';
-import PdfRenderer from '../pdf-renderer';
+import PdfRenderer from './pdf-renderer';
 import debounce from 'lodash/debounce';
 import { createAndMountApp } from '../../utils/vue-utils';
 import { vueI18n } from '../../i18n';

diff --git a/peachjam/js/components/pdf-renderer.ts → ...omponents/DocumentContent/pdf-renderer.ts b/peachjam/js/components/pdf-renderer.ts → ...omponents/DocumentContent/pdf-renderer.ts
@@ -1,8 +1,8 @@
 import debounce from 'lodash/debounce';
-import peachJam from '../peachjam';
+import peachJam from '../../peachjam';
 // @ts-ignore
-import { markRange, rangeToTarget, targetToRange } from '../dom';
-import { scrollToElement } from '../utils/function';
+import { markRange, rangeToTarget, targetToRange } from '../../dom';
+import { scrollToElement } from '../../utils/function';
 
 type GlobalWorkerOptionsType = {
   [key: string]: any,
@@ -48,8 +48,16 @@ class PdfRenderer {
   }
 
   loadPdf () {
+    // should we jump to a specific page?
+    let initialPage = null;
+    if ((document.location.hash || '').startsWith('#page-')) {
+      try {
+        initialPage = parseInt(document.location.hash.substring(6));
+      } catch {}
+    }
+
     this.root.removeAttribute('data-large-pdf');
-    this.setupPdfAndPreviewPanels().then(() => {
+    this.setupPdfAndPreviewPanels(initialPage).then(() => {
       this.setupPreviewSyncing();
       this.onPdfLoaded();
     }).catch((e:ErrorEvent) => {
@@ -94,6 +102,7 @@ class PdfRenderer {
     if (!e.currentTarget) return;
     this.activatePreviewPanel(e.currentTarget);
     if (!(e.currentTarget instanceof HTMLElement)) return;
+    document.location.hash = `#page-${e.currentTarget.dataset.page}`;
     this.scrollToPage(e.currentTarget.dataset.page);
   }
 
@@ -113,7 +122,7 @@ class PdfRenderer {
     this.scrollToPage(pageNumber);
   }
 
-  async setupPdfAndPreviewPanels () {
+  async setupPdfAndPreviewPanels (initialPage: number | null) {
     const docElement = document.querySelector('.content-and-enrichments .content');
     if (!docElement) return;
     const containerWidth = docElement.clientWidth || 0;
@@ -140,6 +149,9 @@ class PdfRenderer {
       for (let i = 0; i < pdf.numPages; i++) {
         const page = await pdf.getPage(i + 1);
         await this.renderSinglePage(page, i, scale, containerWidth);
+        if (initialPage && initialPage === i + 1) {
+          this.scrollToPage(i + 1);
+        }
       }
     } catch (e) {
       console.log(e);

diff --git a/peachjam/js/components/index.ts b/peachjam/js/components/index.ts
@@ -1,5 +1,4 @@
 import { CopyToClipboard } from './clipboard';
-import PdfRenderer from './pdf-renderer';
 import { RelationshipEnrichments } from './RelationshipEnrichment';
 import DocumentList from './document-list';
 import DocumentContent from './DocumentContent/index';
@@ -17,7 +16,6 @@ const components: Record<string, any> = {
   DocumentContent,
   DocumentList,
   NavigationSelect,
-  PdfRenderer,
   RelationshipEnrichments,
   ToggleTab,
   TaxonomyTree,