Added loading spinner (#16)

- Added loading spinner that displays while the document initially loads
- Added param to hide loader if user doesn't want it
- Fixed bug where the paginator displays for a brief second even when it's set to be hidden

README.md

@@ -67,9 +67,15 @@ To hide pagination
 {{< embed-pdf url="./path/to/pdf/file/example.pdf" hidePaginator="true" >}}
 ```
 
+To hide loading spinner
+```
+{{< embed-pdf url="./path/to/pdf/file/example.pdf" hideLoader="true" >}}
+```
+
 ### Parameters
 - **url (required)** : The relative location of the file.  
 - **hidePaginator (optional)**: Boolean which expects `true` or `false`. Hides the paginator for single page documents. 
+- **hideLoader (optional)**: Boolean which expects `true` or `false`. Hides the loading spinner while your document loads. 
 <br />
 
 **Note:** Currently supports local file embed. If absolute URL from the remote server is provided, configure the CORS header on that server.

layouts/shortcodes/embed-pdf.html

@@ -5,10 +5,39 @@
   direction: ltr;
   width: 100%;
   height: auto;
+  display: none;
 }
-#paginator{
-    text-align: center;
-    margin-bottom: 10px;
+
+#paginator {
+  display: none;
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+#loadingWrapper {
+  display: none;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 350px;
+}
+
+#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;
+}
+
+@keyframes spin {
+  to { -webkit-transform: rotate(360deg); }
+}
+@-webkit-keyframes spin {
+  to { -webkit-transform: rotate(360deg); }
 }
 </style>
 
@@ -19,6 +48,9 @@
     <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
 </div>
 <div id="embed-pdf-container">
+    <div id="loadingWrapper">
+      <div id="loading"></div>
+    </div>
     <canvas id="the-canvas"></canvas>
 </div>
 
@@ -27,7 +59,8 @@
 // If absolute URL from the remote server is provided, configure the CORS
 // header on that server.
 var url = "{{.Site.BaseURL}}" + '{{ .Get "url" }}';
-var hidePaginator = "{{ .Get "hidePaginator" }}";
+var hidePaginator = "{{ .Get "hidePaginator" }}" === "true";
+var hideLoader = "{{ .Get "hideLoader" }}" === "true";
 
 // Loaded via <script> tag, create shortcut to access PDF.js exports.
 var pdfjsLib = window['pdfjs-dist/build/pdf'];
@@ -42,7 +75,14 @@
     pageNumPending = null,
     scale = 3,
     canvas = document.getElementById('the-canvas'),
-    ctx = canvas.getContext('2d');
+    ctx = canvas.getContext('2d'),
+    paginator = document.getElementById("paginator"),
+    loadingWrapper = document.getElementById('loadingWrapper');
+
+
+// Attempt to show paginator and loader if enabled
+showPaginator();
+showLoader();
 
 /**
  * Get page info from document, resize canvas accordingly, and render page.
@@ -66,6 +106,8 @@
     // Wait for rendering to finish
     renderTask.promise.then(function() {
       pageRendering = false;
+      showContent();
+
       if (pageNumPending !== null) {
         // New page rendering is pending
         renderPage(pageNumPending);
@@ -78,9 +120,34 @@
   document.getElementById('page_num').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
- * finised. Otherwise, executes rendering immediately.
+ * finished. Otherwise, executes rendering immediately.
  */
 function queueRenderPage(num) {
   if (pageRendering) {
@@ -90,13 +157,6 @@
   }
 }
 
-/**
- * Optionally hides the paginator
- */
-if (hidePaginator == "true") {
-  document.getElementById("paginator").style.display = 'none';
-}
-
 /**
  * Displays previous page.
  */