From 3f82b71a657d8b8218ed468acf0552f29cfd1dd0 Mon Sep 17 00:00:00 2001 From: nsfisis Date: Sat, 18 Mar 2023 22:23:37 +0900 Subject: feat(nuldoc): first implementation of rendering slide --- public/slide.js | 59 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 public/slide.js (limited to 'public/slide.js') diff --git a/public/slide.js b/public/slide.js new file mode 100644 index 0000000..77e49ac --- /dev/null +++ b/public/slide.js @@ -0,0 +1,59 @@ +document.addEventListener("DOMContentLoaded", async () => { + const pdfjsLib = globalThis.pdfjsLib; + pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.worker.min.js"; + + const canvas = document.getElementById("slide"); + const ctx = canvas.getContext("2d"); + const url = canvas.dataset.slideLink; + + let pageNum = 1; + let pageNumPending = null; + let pageRendering = false; + let doc = null; + + const renderPage = async (num) => { + pageRendering = true; + const page = await doc.getPage(num); + + var viewport = page.getViewport({ scale: 1.0 }); + canvas.height = viewport.height; + canvas.width = viewport.width; + + // TODO: error handling + await page.render({ + canvasContext: ctx, + viewport: viewport, + }); + + pageRendering = false; + if (pageNumPending !== null) { + renderPage(pageNumPending); + pageNumPending = null; + } + }; + + const queueRenderPage = (num) => { + if (pageRendering) { + pageNumPending = num; + } else { + renderPage(num); + } + }; + + const prev = document.getElementById("prev"); + prev.addEventListener("click", () => { + if (pageNum <= 1) return; + pageNum--; + queueRenderPage(pageNum); + }); + const next = document.getElementById("next"); + next.addEventListener("click", () => { + if (pageNum >= doc.numPages) return; + pageNum++; + queueRenderPage(pageNum); + }); + + // TODO: error handling + doc = await pdfjsLib.getDocument(url).promise; + queueRenderPage(pageNum); +}); -- cgit v1.2.3-70-g09d2