From 68e58ebb0682a94d9aa3a8ca1ed824f1e8aa81da Mon Sep 17 00:00:00 2001
From: Kostanjevec <kostanjevecj@fdv.uni-lj.si>
Date: Thu, 23 Jun 2022 21:16:42 +0200
Subject: [PATCH] pdfs fit nicley, display more pages and buttons are fixed to
 bottom and all inlined

---
 templates/deck/index.html | 120 +++++++++++++++++++++++---------------
 1 file changed, 72 insertions(+), 48 deletions(-)

diff --git a/templates/deck/index.html b/templates/deck/index.html
index 543d0e0..e504a7f 100644
--- a/templates/deck/index.html
+++ b/templates/deck/index.html
@@ -3,66 +3,90 @@
 {% block header %}
 {% endblock %} 
 {% block content %}
-  <article class="post">
-    <header>
+<article class="post">
+  <header>
       <p>Download: <a href="{{ card['item_location'] }}">{{ card['title'] }}</a></p>
-    </header>
-    
-    <canvas id="pdf-doc"></canvas>
-
-    <form method="post">
-      <input type="hidden" name="card_id" value="{{ card['id'] }}">
-      <span style="display: inline;">
-        <button style="background-color: #736B1E" rbutton" type="submit" name="rate" value="Yes" accesskey="1">Yes</button> <!--ti keyi so alt+shit+key...-->
-        <button style="background-color: #ED8008;" id="rbutton" type="submit" name="rate" value="Maybe" accesskey="2">Maybe</button>
-        <button style="background-color: #ED3f1C;" id="rbutton" type="submit" name="rate" value="No" accesskey="3">No</button>
-        <button style="background-color: #BF1B1B;" id="rbutton" type="submit" name="rate" value="Delete" accesskey="d">Delete</button>
-      </span>      
-        
-      <button style="margin-top: 1rem; background-color: #D9D2C6;" type="submit" name="share" value="share" accesskey="s">Share</button>
-    </form>
+    </header>    
+    <div style="background-color: blue; height: fit-content;" id="pdf-doc"></div>
   </article>
+  
+    <form method="post" style="position: fixed; bottom:0%; width: fill-available; width: -moz-available; width: -webkit-fill-available;">
+        <input type="hidden" name="card_id" value="{{ card['id'] }}">
+        <span style="display: inline;">
+          <button style="background-color: #736B1E" id="rbutton" type="submit" name="rate" value="Yes" accesskey="1">Yes</button> <!--ti keyi so alt+shit+key...-->
+          <button style="background-color: #ED8008;" id="rbutton" type="submit" name="rate" value="Maybe" accesskey="2">Maybe</button>
+          <button style="background-color: #ED3f1C;" id="rbutton" type="submit" name="rate" value="No" accesskey="3">No</button>
+          <button style="background-color: #BF1B1B;" id="rbutton" type="submit" name="rate" value="Delete" accesskey="d">Delete</button>
+          <button style="background-color: #D9D2C6;" type="submit" name="share" value="share" accesskey="s">Share</button>
+        </span>      
+      </form>
 
   <script type="text/javascript" src="{{ url_for('static', filename='js/pdf.js') }}"></script>
   <script type="text/javascript" src="{{ url_for('static', filename='js/pdf.worker.js') }}"></script>
   <script type="text/javascript">
     document.addEventListener('DOMContentLoaded', function (){
-      var zoomed = false;
-      var canvas = document.getElementById('pdf-doc');
-      var context = canvas.getContext('2d');
 
-      var openPage = function(pdfFile, pageNumber) {
-          pdfFile.getPage(pageNumber).then(function(page) {
-            var scale = 1.5;
-            var viewport = page.getViewport({ scale: scale, });
-            // Support HiDPI-screens.
-            var outputScale = window.devicePixelRatio || 1;
+      var currPage = 1; //Pages are 1-based not 0-based
+      var numPages = 0;
+      var thePDF = null;
 
-            canvas.width = Math.floor(viewport.width * outputScale);
-            canvas.height = Math.floor(viewport.height * outputScale);
-            canvas.style.width = Math.floor(viewport.width) + "px";
-            canvas.style.height =  Math.floor(viewport.height) + "px";
-
-            var transform = outputScale !== 1
-            ? [outputScale, 0, 0, outputScale, 0, 0]
-            : null;
-
-              var renderContext = {
-                  canvasContext: context,
-                  viewport: viewport,
-                  transform: transform
-              };
-
-              page.render(renderContext);
-          });
-      };
-      
-      pdfjsLib.disableStream = true;
+      //This is where you start
       var doc = pdfjsLib.getDocument('{{ card["item_location"] }}');
       doc.promise.then(function(pdf) {
-        // Do something with the PDF file stored in the `pdf` variable
-        openPage(pdf, 1);
+        //Set PDFJS global object (so we can easily access in our page functions
+        thePDF = pdf;
+        
+        //How many pages it has
+        numPages = pdf.numPages;
+
+        //Start with first page
+        pdf.getPage( 1 ).then( handlePages );
       });
+
+      function handlePages(page)
+      {
+          //This gives us the page's dimensions at full scale
+          var scale = 1.5;
+          var viewport = page.getViewport({ scale: scale, });
+
+          //We'll create a canvas for each page to draw it on
+          var canvas = document.createElement( "canvas" );
+          canvas.style.display = "block";
+          var context = canvas.getContext('2d');
+          
+          //Add it to the web page
+          document.getElementById('pdf-doc').appendChild(canvas);
+          
+          // Support HiDPI-screens.
+          var outputScale = window.devicePixelRatio || 1;
+
+          canvas.width = Math.floor(viewport.width * outputScale);
+          canvas.height = Math.floor(viewport.height * outputScale);
+          canvas.style.width = "100%";
+          canvas.style.height =  Math.floor(canvas.style.width * viewport.width / viewport.height);
+
+
+          var transform = outputScale !== 1
+          ? [outputScale, 0, 0, outputScale, 0, 0]
+          : null;
+            var renderContext = {
+              canvasContext: context,
+              viewport: viewport,
+              transform: transform
+              };
+              
+          //Draw it on the canvas
+          page.render(renderContext);
+
+
+          //Move to next page
+          currPage++;
+          if ( thePDF !== null && currPage <= Math.min(numPages, 10) )
+          {
+              thePDF.getPage( currPage ).then( handlePages );
+          }
+      }
   });
   </script>
+
 {% endblock %}
\ No newline at end of file