Fix style issues and improve paginator logic in embed-pdf shortcode

README.md

@@ -103,6 +103,20 @@ To hide loading spinner
 {{< embed-pdf url="./path/to/pdf/file/example.pdf" hideLoader="true" >}}
 ```
 
+To hide the download button
+```
+{{< embed-pdf url="./path/to/pdf/file/example.pdf" download="false" >}}
+```
+
+To manually set the width of the preview
+```
+{{< embed-pdf url="./path/to/pdf/file/example.pdf" width="50%" >}}
+```
+or
+```
+{{< embed-pdf url="./path/to/pdf/file/example.pdf" width="200px" >}}
+```
+
 ### Parameters
 - **url (required)** : The relative location of the file.  
 

layouts/shortcodes/embed-pdf.html

@@ -1,9 +1,9 @@
 {{- if not ($.Page.Scratch.Get "embed-pdf-count") -}}
 
-<script type="text/javascript" src= '/js/pdf-js/build/pdf.js'></script>
+<script type="text/javascript" src='/js/pdf-js/build/pdf.js'></script>
 
 <style>
-  #embed-pdf-container {
+  .embed-pdf-container {
     position: relative;
     width: 100%;
     height: auto;
@@ -19,15 +19,6 @@
     display: none;
   }
 
-  #the-canvas {
-    border: 1px solid black;
-    direction: ltr;
-    width: 100%;
-    height: auto;
-    display: none;
-  }
-
-
   .pdf-loadingWrapper {
     display: none;
     justify-content: center;
@@ -40,16 +31,14 @@
     display: inline-block;
     width: 50px;
     height: 50px;
-    border: 3px solid #d2d0d0;;
+    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;
   }
 
-  {{/*  Download link  */}}
-
-
+  {{/* Download link styles */}}
 
   #overlayText {
     word-wrap: break-word;
@@ -73,32 +62,32 @@
 
   #overlayText svg {
     height: clamp(1em, 2vw, 1.4em);
-    width:  clamp(1em, 2vw, 1.4em);
+    width: clamp(1em, 2vw, 1.4em);
   }
 
-
-
   @keyframes spin {
     to { -webkit-transform: rotate(360deg); }
   }
   @-webkit-keyframes spin {
     to { -webkit-transform: rotate(360deg); }
   }
-  </style>
+</style>
 {{- end -}}
 
 {{- $.Page.Scratch.Add "embed-pdf-count" 1 -}}
-<div class="embed-pdf-container" id="embed-pdf-container-{{ substr (.Get "url" | md5) 0 8 }}">
+<div class="embed-pdf-container" id="embed-pdf-container-{{ substr (.Get "url" | md5) 0 8 }}" style="width: {{ .Get "width" | default "100%" }};">
     <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>
+    {{ if not (eq (.Get "download") "false") }}
     <div id="overlayText">
       <a href="{{ .Get "url" }}" aria-label="Download" download>
         <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
             <path d="M9 13c.3 0 .5-.1.7-.3L15.4 7 14 5.6l-4 4V1H8v8.6l-4-4L2.6 7l5.7 5.7c.2.2.4.3.7.3zm-7 2h14v2H2z" />
         </svg>
       </a>
     </div>
+    {{ end }}
     <canvas class="pdf-canvas" id="pdf-canvas-{{ substr (.Get "url" | md5) 0 8 }}"></canvas>
 </div>
 
@@ -141,7 +130,6 @@
         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();
@@ -194,21 +182,24 @@
      * If we haven't disabled the loader, show loader and hide canvas
      */
     function showLoader() {
-      if(hideLoader) return
+      if(hideLoader) return;
       loadingWrapper.style.display = 'flex';
       canvas.style.display = 'none';
     }
 
     /**
-     * If we haven't disabled the paginator, show paginator
+     * Controls paginator display based on hidePaginator value.
      */
     function showPaginator() {
-      if(hidePaginator) return
-      paginator.style.display = 'block';
+      if(hidePaginator) {
+         paginator.style.display = 'none';
+      } else {
+         paginator.style.display = 'block';
+      }
     }
 
     /**
-     * If another page rendering in progress, waits until the rendering is
+     * If another page rendering is in progress, waits until the rendering is
      * finished. Otherwise, executes rendering immediately.
      */
     function queueRenderPage(num) {
@@ -253,7 +244,7 @@
 
       // If the user passed in a number that is out of range, render the last page.
       if(pageNum > numPages) {
-        pageNum = numPages
+        pageNum = numPages;
       }
 
       // Initial/first page rendering