From f237889412aafe31d338d832a444f82ef33b81d9 Mon Sep 17 00:00:00 2001
From: Neha Deekonda <85057583+Neha9849@users.noreply.github.com>
Date: Tue, 15 Mar 2022 18:27:42 +0530
Subject: [PATCH] :new: :sparkles: layouts(shortcodes): Add embed-pdf shortcode
 (#56)

I have added a demo of this shortcode on the `installation/elements` page. For using this Shortcode, we have to pass the name of the pdf into the shortcode as shown in the demo. The pdfs should be stored in the `static/pdfs` folder.

Fixes #33.

Co-authored-by: Justin W. Flory <jflory@unicef.org>
---
 .../installation/configuration/_index.en.md   |   2 +-
 .../installation/elements/_index.en.md        |   8 ++
 exampleSite/static/pdfs/sample.pdf            | Bin 0 -> 2830 bytes
 layouts/shortcodes/embed-pdf.html             | 107 ++++++++++++++++++
 4 files changed, 116 insertions(+), 1 deletion(-)
 create mode 100644 exampleSite/static/pdfs/sample.pdf
 create mode 100644 layouts/shortcodes/embed-pdf.html

diff --git a/exampleSite/content/installation/configuration/_index.en.md b/exampleSite/content/installation/configuration/_index.en.md
index 4a5e15c..e3cfa42 100644
--- a/exampleSite/content/installation/configuration/_index.en.md
+++ b/exampleSite/content/installation/configuration/_index.en.md
@@ -24,4 +24,4 @@ Note that some of these parameters are explained in details in other sections of
   # Call to action is default enabled, if you want to disable it. just change the 
   enable = false
   # You can change banner title and other text from the config file.
-```
\ No newline at end of file
+```
diff --git a/exampleSite/content/installation/elements/_index.en.md b/exampleSite/content/installation/elements/_index.en.md
index 58539be..8979f72 100644
--- a/exampleSite/content/installation/elements/_index.en.md
+++ b/exampleSite/content/installation/elements/_index.en.md
@@ -190,3 +190,11 @@ Markdown | Less | Pretty
 ##### Youtube video
 
 {{< youtube C0DPdy98e4c >}}
+
+<hr>
+
+##### Embed PDF
+
+Embedded PDFs must be committed as [static files](https://gohugo.io/content-management/static-files/) in `static/pdfs/`:
+
+{{< embed-pdf pdfName="sample.pdf">}}
diff --git a/exampleSite/static/pdfs/sample.pdf b/exampleSite/static/pdfs/sample.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..c0e31a076aeb1fa7729e82279943b3504f85338d
GIT binary patch
literal 2830
zcmd5;-EP}96u#$EoSOg%kdhLuKNm%TIEk^XOA{o<iXzPgV^KB(nKUFSPWqC&*c)sw
zvO~%8EC;TFttciK26=dR{z!i3JGeR<zwzmS9Q^s$?|%^Dg9qmRfxLT1*yMRBft?B~
zax)|Bva-3-vILGg*Mwb(8BPZE<o$ahb?P<}x7xMPZY1o~RN8_^w$$DJu6k{^)#ZeJ
zP-zLb5I9E=)&F;}ZNja*G~og)B)V%NWY@AZRWZeoU2bE8EA_yKVQte{WLJfm-bf3H
z6V;LnnJO_dPjKs@Eb=+^@Pl~R4DMW@+M=Hl!gf<z3MXg+1NN)bGdl<0ivvJUr7fgb
zV6lE7qX}`QJt(lqV>|$l$1urA7}G%<qASiRPtfNiC5LbVH)^rWCE&rqSmEFZCJ*F%
z;_NireN@dzG^9MlT~U(I$V=ASCv#N-{sfc@k>`-gh0z#{u*ztl%QS<`8GX}hHVSC$
z1#7bpRcRqJ1yrR3rNPc6{H6+9i5xEEbS|`-mS8Ju3MKNA!i6a$Sovfroahu5ZrYbf
z$Y~t%wa1;kubKAQ=Lt=Mwosd>USoNma-T;(qRBA&Rz@Q%n4TTOSNCnzYHw71F1>&b
zgZ9|!vhOwZ>eU{fA-<L2usyhawQ9oXGljR>OMc`Th4>8p!8gxnC!_O6sp|_(!9j!4
zl}rI2*Anp(v6E8TCW$z)#(@?w9K8J>pe)8XYW!;hbAlZxi{j`%A=xgD@m>JvAQ{$i
zx+!l~m_<`ypTcJZ@b7hZF-aPQ?eXuN^uL?7r@s%cJHXn!ip%*i%*_h!Ycv4+yhKny
zkVPObZIxvdMwJC^EQqpI!qH0D>D+1dx$Ge8QYh?=Y4Q9TxY=LlKA(X{v8k=GuYoxV
zbzeBf?vyKQu?=mRpI}SD+lY(UFY12dGL(5vH|f26Pp*%<YkSLFyJQn=ICmSS;`)B~
zu{l;i*iChh6-Mgg2#`<MN3p=k7)K*f%9=T_pJe_ht(pqL&h^x!uFC9_(kHr9tzes@
zU{C(X*(vsZ?1XT5EgmI&Ih<R&e9PEswW3-+7Dfxa+6z|T>X)OVnw6y0RN{t@%`%+H
zQq6RUYqc%x-Dko|I6QmHJumVG9`X#H@aSkehNnViNHu()I11Bz5QX6&1eC8oAFJX%
z&>PVZ8B|x~2Z#q<5$8z!x}w1llkSN8@P(Eiz0l$T-}T6Y5TUVSi-*XhS`k48gS4fn
tdFze(DqWWB+Te?Dj27AI&pI>6zUm3`FC<{1uysXv><8rF;QVq-{svGq0pkDw

literal 0
HcmV?d00001

diff --git a/layouts/shortcodes/embed-pdf.html b/layouts/shortcodes/embed-pdf.html
new file mode 100644
index 0000000..9ce587c
--- /dev/null
+++ b/layouts/shortcodes/embed-pdf.html
@@ -0,0 +1,107 @@
+<style>
+  .pdfContainer {
+    width: 100%;
+    height: auto;
+
+  }
+
+  #the-canvas {
+    border: 1px solid black;
+  }
+
+  .pdfNav {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0 !important;
+    align-items: center;
+  }
+
+  .pdfBtn {
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    border: none;
+    margin: 2px;
+  }
+</style>
+
+<div class="pdfContainer">
+  <hr>
+  <div class="pdfNav">
+    <div class="paginations">
+      <button class="pdfBtn" id="prev">
+        <b>&lt;</b>
+        </button>
+          <b id="currentPageNo"></b>/<b id="totalPages"></b>
+          <button class="pdfBtn" id="next">
+            <b>&gt;</b>
+           </button>
+    </div>
+
+    <a href="{{.Site.BaseURL}}pdfs/{{ .Get "pdfName" }}" target="_blank">View PDF</a>
+  </div>
+  <canvas id="the-canvas"></canvas>
+</div>
+<script>
+  var pdf = "{{.Site.BaseURL}}" + "pdfs/" + "{{ .Get "pdfName" }}";
+  const prevBtn = document.getElementById("prev");
+  const nextBtn = document.getElementById("next");
+  const currentPageNoElement = document.getElementById("currentPageNo");
+  const loadingTask = pdfjsLib.getDocument(pdf);
+
+  loadingTask.promise.then((pdf) => {
+    var currentPage = 1;
+
+    //set toal pages
+    const totalPages = pdf._pdfInfo.numPages;
+    const totalPagesElement = document.getElementById("totalPages");
+    totalPagesElement.innerHTML = totalPages;
+    console.log(totalPages)
+    // function to set current page number
+    setCurrentPageNo();
+    function setCurrentPageNo() {
+      currentPageNoElement.innerHTML = currentPage;
+    }
+    //on clicking prev btn
+    prevBtn.addEventListener("click", () => {
+      if (currentPage > 1) {
+        currentPage--;
+        setCurrentPageNo();
+        renderPage(currentPage);
+
+      }
+    });
+    //on clicking next btn
+    nextBtn.addEventListener("click", () => {
+      if (currentPage < totalPages) {
+        currentPage++;
+        setCurrentPageNo();
+        renderPage(currentPage);
+
+      }
+    });
+    renderPage(currentPage);
+
+    //function to render given page number
+    function renderPage(no) {
+      pdf.getPage(no).then((page) => {
+        console.log(page);
+        var scale = 3;
+        var viewport = page.getViewport({ scale: scale });
+        var canvas = document.getElementById("the-canvas");
+        var context = canvas.getContext("2d");
+        canvas.width = viewport.width;
+        canvas.height = viewport.height;
+        canvas.style.width = "100%";
+        canvas.style.height = "100%";
+        // Render PDF page into canvas context
+        var renderContext = {
+          canvasContext: context,
+          viewport: viewport,
+        };
+        var renderTask = page.render(renderContext);
+      });
+    }
+
+  });
+</script>
\ No newline at end of file