add embed-pdf shortcode

layouts/partials/vendor.html

@@ -56,4 +56,12 @@
 {{ if or (.Page.HasShortcode "carousel") (.Page.HasShortcode "timeline")}}
 {{ $twelementsLib := resources.Get "lib/tw-elements/index.min.js" }}
 <script defer src="{{ $twelementsLib.RelPermalink }}" integrity="{{ $twelementsLib.Data.Integrity }}"></script>
+{{ end }}
+
+{{/* pdf */}}
+{{ if .Page.HasShortcode "embed-pdf" }}
+{{ $pdfLib := resources.Get "lib/embed-pdf/pdf.min.js" }}
+{{ $pdfWorkerLib := resources.Get "lib/embed-pdf/pdf.worker.min.js" }}
+{{ $pdfJS := slice $pdfLib $pdfWorkerLib | resources.Concat "js/pdf.bundle.js" | resources.Fingerprint "sha512" }}
+<script  type="text/javascript" src="{{ $pdfJS.RelPermalink }}" integrity="{{ $pdfJS.Data.Integrity }}"></script>
 {{ end }}

layouts/shortcodes/embed-pdf.html

@@ -0,0 +1,245 @@
+{{- if not ($.Page.Scratch.Get "embed-pdf-count") -}}
+<style>
+    #embed-pdf-container {
+        position: relative;
+        width: 100%;
+        height: auto;
+        min-height: 20vh;
+        overflow-y:scroll;
+    }
+
+    .pdf-canvas {
+        border: 1px solid black;
+        direction: ltr;
+        width: 100%;
+        height: auto;
+        display: none;
+    }
+
+    #the-canvas {
+        border: 1px solid black;
+        direction: ltr;
+        width: 100%;
+        height: auto;
+        display: none;
+    }
+
+
+    .pdf-loadingWrapper {
+        display: none;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 350px;
+    }
+
+    .pdf-loading {
+        display: inline-block;
+        width: 50px;
+        height: 50px;
+        border: 3px solid #d2d0d0;;
+        border-radius: 50%;
+        border-top-color: #383838;
+        animation: spin 1s ease-in-out infinite;
+        -webkit-animation: spin 1s ease-in-out infinite;
+    }
+
+    .pdf-paginator {
+        display: inline-block;
+        margin: 6px;
+        padding: 0 8px;
+    }
+
+    .pdf-paginator-item {
+        position: relative;
+        height: 50px;
+        display: flex !important;
+        align-items: center;
+        justify-content: center;
+    }
+    .pdf-paginator-wrap {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+    }
+
+    @keyframes spin {
+        to { -webkit-transform: rotate(360deg); }
+    }
+    @-webkit-keyframes spin {
+        to { -webkit-transform: rotate(360deg); }
+    }
+</style>
+{{- end -}}
+
+{{ $icon := resources.Get "icons/download.svg" }}
+{{- $.Page.Scratch.Add "embed-pdf-count" 1 -}}
+<div class="embed-pdf-container" id="embed-pdf-container-{{ substr (.Get "url" | md5) 0 8 }}">
+    <div class="pdf-loadingWrapper" id="pdf-loadingWrapper-{{ substr (.Get "url" | md5) 0 8 }}">
+        <div class="pdf-loading" id="pdf-loading-{{ substr (.Get "url" | md5) 0 8 }}">
+        </div>
+    </div>
+    <canvas class="pdf-canvas" id="pdf-canvas-{{ substr (.Get "url" | md5) 0 8 }}"></canvas>
+</div>
+
+<div class="pdf-paginator-item" id="pdf-paginator-{{ substr (.Get "url" | md5) 0 8 }}" >
+    <div class="pdf-paginator-wrap">
+        <a class="pdf-paginator !rounded-md bg-primary-600 px-4 py-2 !text-neutral !no-underline hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700" role="button" id="pdf-prev-{{ substr (.Get "url" | md5) 0 8 }}">Previous</a>
+        <a class="pdf-paginator !rounded-md bg-primary-600 px-4 py-2 !text-neutral !no-underline hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700" role="button" id="pdf-next-{{ substr (.Get "url" | md5) 0 8 }}">Next</a>
+    </div>
+    <span>
+      <span class="pdf-pagenum" id="pdf-pagenum-{{ substr (.Get "url" | md5) 0 8 }}"></span> / <span class="pdf-pagecount" id="pdf-pagecount-{{ substr (.Get "url" | md5) 0 8 }}"></span>
+    </span>
+    &nbsp; &nbsp;
+    <a class="relative inline-block align-text-bottom icon" role="img" id="pdf-source-{{ substr (.Get "url" | md5) 0 8 }}" href="{{ .Get "url" }}">
+    {{ $icon.Content | safeHTML }}
+    </a>
+</div>
+
+<noscript>
+    View the PDF file <a class="pdf-source" id="pdf-source-noscript-{{ substr (.Get "url" | md5) 0 8 }}" href="{{ .Get "url" }}">here</a>.
+</noscript>
+
+<script type="text/javascript">
+    (function(){
+        var url = '{{ .Get "url" }}';
+
+        var hidePaginator = "{{ .Get "hidePaginator" }}" === "true";
+        var hideLoader = "{{ .Get "hideLoader" }}" === "true";
+        var selectedPageNum = parseInt("{{ .Get "renderPageNum" }}") || 1;
+
+        pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker
+
+        // Change the Scale value for lower or higher resolution.
+        var pdfDoc = null,
+            pageNum = selectedPageNum,
+            pageRendering = false,
+            pageNumPending = null,
+            scale = 3,
+            canvas = document.getElementById('pdf-canvas-{{ substr (.Get "url" | md5) 0 8 }}'),
+            ctx = canvas.getContext('2d'),
+            paginator = document.getElementById("pdf-paginator-{{ substr (.Get "url" | md5) 0 8 }}"),
+        loadingWrapper = document.getElementById('pdf-loadingWrapper-{{ substr (.Get "url" | md5) 0 8 }}');
+
+
+        // Attempt to show paginator and loader if enabled
+        showPaginator();
+        showLoader();
+
+        /**
+         * Get page info from document, resize canvas accordingly, and render page.
+         * @param num Page number.
+         */
+        function renderPage(num) {
+            pageRendering = true;
+            // Using promise to fetch the page
+            pdfDoc.getPage(num).then(function(page) {
+                var viewport = page.getViewport({scale: scale});
+                canvas.height = viewport.height;
+                canvas.width = viewport.width;
+
+                // Render PDF page into canvas content
+                var renderContext = {
+                    canvasContext: ctx,
+                    viewport: viewport
+                };
+                var renderTask = page.render(renderContext);
+
+                // Wait for rendering to finish
+                renderTask.promise.then(function() {
+                    pageRendering = false;
+                    showContent();
+
+                    if (pageNumPending !== null) {
+                        // New page rendering is pending
+                        renderPage(pageNumPending);
+                        pageNumPending = null;
+                    }
+                });
+            });
+
+            // Update page counters
+            document.getElementById('pdf-pagenum-{{ substr (.Get "url" | md5) 0 8 }}').textContent = num;
+        }
+
+        /**
+         * Hides loader and shows canvas
+         */
+        function showContent() {
+            loadingWrapper.style.display = 'none';
+            canvas.style.display = 'block';
+        }
+
+        /**
+         * If we haven't disabled the loader, show loader and hide canvas
+         */
+        function showLoader() {
+            if(hideLoader) return
+            loadingWrapper.style.display = 'flex';
+            canvas.style.display = 'none';
+        }
+
+        /**
+         * If we haven't disabled the paginator, show paginator
+         */
+        function showPaginator() {
+            if(hidePaginator) return
+            paginator.style.display = 'block';
+        }
+
+        /**
+         * If another page rendering in progress, waits until the rendering is
+         * finished. Otherwise, executes rendering immediately.
+         */
+        function queueRenderPage(num) {
+            if (pageRendering) {
+                pageNumPending = num;
+            } else {
+                renderPage(num);
+            }
+        }
+
+        /**
+         * Displays previous page.
+         */
+        function onPrevPage() {
+            if (pageNum <= 1) {
+                return;
+            }
+            pageNum--;
+            queueRenderPage(pageNum);
+        }
+        document.getElementById('pdf-prev-{{ substr (.Get "url" | md5) 0 8 }}').addEventListener('click', onPrevPage);
+
+        /**
+         * Displays next page.
+         */
+        function onNextPage() {
+            if (pageNum >= pdfDoc.numPages) {
+                return;
+            }
+            pageNum++;
+            queueRenderPage(pageNum);
+        }
+        document.getElementById('pdf-next-{{ substr (.Get "url" | md5) 0 8 }}').addEventListener('click', onNextPage);
+
+        /**
+         * Asynchronously downloads PDF.
+         */
+        pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
+            pdfDoc = pdfDoc_;
+            var numPages = pdfDoc.numPages;
+            document.getElementById('pdf-pagecount-{{ substr (.Get "url" | md5) 0 8 }}').textContent = numPages;
+
+            // If the user passed in a number that is out of range, render the last page.
+            if(pageNum > numPages) {
+                pageNum = numPages
+            }
+
+            // Initial/first page rendering
+            renderPage(pageNum);
+        });
+    })();
+</script>

package.json

@@ -47,7 +47,8 @@
     "tailwindcss": "^3.3.1",
     "tw-elements": "1.0.0-beta1",
     "typeit": "^8.7.1",
-    "vendor-copy": "^3.0.1"
+    "vendor-copy": "^3.0.1",
+    "pdfjs-dist": "^3.4.120"
   },
   "vendorCopy": [],
   "devVendorCopy": [
@@ -90,6 +91,14 @@
     {
       "from": "node_modules/tw-elements/dist/js/index.min.js",
       "to": "assets/lib/tw-elements/index.min.js"
+    },
+    {
+      "from": "node_modules/pdfjs-dist/build/pdf.min.js",
+      "to": "assets/lib/embed-pdf/pdf.min.js"
+    },
+    {
+      "from": "node_modules/pdfjs-dist/build/pdf.worker.min.js",
+      "to": "assets/lib/embed-pdf/pdf.worker.min.js"
     }
   ],
   "dependencies": {