Merge pull request #534 from eyra/pdfjs

Fixed rendering of pdf on endless scrolling page with sticky navbar

core/assets/js/app.js

@@ -29,6 +29,7 @@ import { Clipboard } from "./clipboard";
 import { FeldsparApp } from "./feldspar_app";
 import { Wysiwyg } from "./wysiwyg";
 import { AutoSubmit } from "./auto_submit";
+import { Sticky } from "./sticky";
 
 window.registerAPNSDeviceToken = registerAPNSDeviceToken;
 
@@ -104,6 +105,7 @@ let Hooks = {
   ViewportResize,
   Wysiwyg,
   AutoSubmit,
+  Sticky,
 };
 
 let liveSocket = new LiveSocket("/live", Socket, {

core/assets/js/pdf_viewer.js

@@ -1,80 +1,89 @@
-// import * as pdfjsLib from 'pdfjs-dist'
+import _ from "lodash";
+
+const pdfjsVersion = "3.11.174";
+const pdfjs = require("../node_modules/pdfjs-dist");
+const worker = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsVersion}/pdf.worker.min.js`;
+
+function renderPages(hook) {
+  hook.renderPagesIfNeed();
+}
 
 export const PDFViewer = {
   mounted() {
-    console.log("Mounted");
+    console.log("[PDFViewer] Mounted: state", this.el.dataset.state);
     this.src = this.el.dataset.src;
-    console.log("src", this.src);
-    // pdfjsLib.getDocument(this.src)
-    // renderPDF(this.el, this.el.dataset.src);
-  },
-};
-
-// function renderPDF(canvas, src) {
-//   pdfjsLib.GlobalWorkerOptions.workerSrc = '../node_modules/pdfjs-dist/build/pdf.worker.js';
-
-//   let currentPageNum = 1;
-
-//   // Handle hidi
-//   const outputScale = window.devicePixelRatio || 1;
-
-//   function adjustCanvasSize(viewport) {
-//     canvas.width = Math.floor(viewport.width * outputScale);
-//     canvas.height = Math.floor(viewport.height * outputScale);
-//     canvas.style.width = Math.floor(viewport.width) + 'px';
-//     canvas.style.height = Math.floor(viewport.height) + 'px';
-//   }
-
-//   const loadingTask = pdfjsLib.getDocument(src);
-//   (async () => {
-//     const pdf = await loadingTask.promise;
-//     let page = await pdf.getPage(1);
-//     const viewport = page.getViewport({ scale: 1.5 });
-
-//     const context = canvas.getContext('2d');
-//     adjustCanvasSize(viewport);
-//     canvas.classList.add('border', 'border-purple-500', 'rounded');
-
-//     const transform = outputScale !== 1
-// 	  ? [outputScale, 0, 0, outputScale, 0, 0]
-// 	  : null;
 
-//     let renderContext = {
-//       canvasContext: context,
-//       transform,
-//       viewport,
-//     };
-
-//     page.render(renderContext);
-
-//     async function onPrevPage() {
-//       if (currentPageNum <= 1) {
-// 	return;
-//       }
-//       currentPageNum -= 1;
-//       page = await pdf.getPage(currentPageNum);
-//       page.render(renderContext);
-//     }
+    this.loadDocument().then((pdf) => {
+      this.pdf = pdf;
+      console.log("[PDFViewer] Document loaded");
+      this.pushEvent("tool_initialized");
+      this.renderPagesIfNeed();
+      var throttledRenderPages = _.throttle(_.partial(renderPages, this), 10, {
+        trailing: true,
+      });
+      window.addEventListener("resize", throttledRenderPages);
+    });
+  },
+  updated() {
+    console.log("[PDFViewer] Updated: state", this.el.dataset.state);
+    this.renderPagesIfNeed();
+  },
+  loadDocument() {
+    pdfjs.GlobalWorkerOptions.workerSrc = worker;
+    const loadingTask = pdfjs.getDocument({ url: this.src });
+    return loadingTask.promise;
+  },
+  renderPagesIfNeed() {
+    if (this.el.dataset.state == "visible") {
+      this.renderPages();
+    }
+  },
+  renderPages() {
+    console.log("[PDFViewer] Render pages");
+    this.createContainer();
+    const width = this.el.getBoundingClientRect().width;
+    this.renderPage(width, 1);
+  },
+  renderPage(width, pageNum) {
+    console.log("[PDFViewer] Render page", pageNum);
+    this.pdf.getPage(pageNum).then(
+      (page) => {
+        var scale = window.devicePixelRatio;
+        var viewport = page.getViewport({ scale: scale });
+        if (width < viewport.width) {
+          scale = (width / viewport.width) * scale;
+        }
 
-//     async function onNextPage() {
-//       if (currentPageNum >= pdf.numPages) {
-// 	return;
-//       }
-//       currentPageNum += 1;
-//       page = await pdf.getPage(currentPageNum);
-//       page.render(renderContext);
-//     }
+        //This gives us the page's dimensions at full scale
+        viewport = page.getViewport({ scale: scale });
 
-//     async function onZoom(e) {
-//       const newViewport = page.getViewport({ scale: parseFloat(e.target.value) });
-//       adjustCanvasSize(newViewport);
-//       renderContext.viewport = newViewport;
-//       page = await pdf.getPage(currentPageNum);
-//       page.render(renderContext);
-//     }
+        //We'll create a canvas for each page to draw it on
+        const canvas = this.createCanvas(viewport);
+        const context = canvas.getContext("2d");
+        page.render({ canvasContext: context, viewport: viewport });
 
-//     document.querySelector('.js-next').addEventListener('click', onNextPage);
-//     document.querySelector('.js-prev').addEventListener('click', onPrevPage)
-//     document.querySelector('.js-zoom').addEventListener('click', onZoom)
-//   })();
-// }
+        this.renderPage(width, pageNum + 1);
+      },
+      () => {
+        console.log("[PDFViewer] end of document");
+      }
+    );
+  },
+  createContainer() {
+    if (this.container != undefined) {
+      this.container.remove();
+      this.container = undefined;
+    }
+    this.container = document.createElement("div");
+    this.container.style.display = "block";
+    this.el.appendChild(this.container);
+  },
+  createCanvas(viewport) {
+    var canvas = document.createElement("canvas");
+    canvas.style.display = "block";
+    canvas.height = viewport.height;
+    canvas.width = viewport.width;
+    this.container.appendChild(canvas);
+    return canvas;
+  },
+};

core/assets/js/sticky.js

@@ -0,0 +1,46 @@
+export const Sticky = {
+  mounted() {
+    this.initializeIfNeeded();
+  },
+  updated() {
+    this.initializeIfNeeded();
+  },
+  initializeIfNeeded() {
+    if (this.el.dataset.state == "visible" && this.originalTop == undefined) {
+      this.initialize();
+    }
+  },
+  initialize() {
+    this.originalTop = this.el.getBoundingClientRect().top;
+    this.originalRight = this.el.getBoundingClientRect().right;
+    this.originalHeight = this.el.getBoundingClientRect().height;
+    window.addEventListener("scroll", (event) => {
+      var scrollY = 0;
+      // Currently support for website and stripped layouts, not for workspace.
+      // The event target in workspace layout is not the document.
+      if (event.target == document) {
+        scrollY = window.scrollY;
+      }
+      this.updateRect(scrollY);
+    });
+  },
+  updateRect(scrollY) {
+    if (scrollY >= this.originalTop) {
+      if (this.el.classList.contains("absolute")) {
+        console.log("fixed");
+        this.el.classList.remove("absolute");
+        this.el.classList.add("fixed");
+        this.el.classList.add("top-0");
+        this.el.classList.add("pr-[129px]");
+      }
+    } else {
+      if (this.el.classList.contains("fixed")) {
+        console.log("absolute");
+        this.el.classList.remove("fixed");
+        this.el.classList.remove("top-0");
+        this.el.classList.remove("pr-[129px]");
+        this.el.classList.add("absolute");
+      }
+    }
+  },
+};