Initial commit

folkugat_web/assets/templates/fragments/pdf_viewer.html

@@ -0,0 +1,40 @@
+<!-- PDF Viewer -->
+<script type="module">
+  const pdfViewer = await import("{{ url_for('static', path='js/pdf_viewer.js') }}");
+  const options = {
+      url: '{{ pdf_url }}',
+      // PDF Canvas (where the pdf will be displayed)
+      canvas: document.getElementById('the-canvas'),
+      // Navigation elements
+      prevPage: document.getElementById('prev'),
+      nextPage: document.getElementById('next'),
+      // Page elements
+      pageCount: document.getElementById('page_count'),
+      pageNum: document.getElementById('page_num'),
+  }
+  pdfViewer.displayPdf(options);
+</script>
+
+<div class="flex flex-col items-center justify-center">
+  <!-- <div class="text-beige"> -->
+  <!--   <a href="{{ pdf_url }}" -->
+  <!--      target="_blank"> -->
+  <!--     <i class="fa fa-file-pdf" aria-hidden="true"></i> -->
+  <!--     obrir -->
+  <!--   </a> -->
+  <!-- </div> -->
+  <div class="flex flex-row flex-nowrap items-center justify-center w-full">
+    <button id="prev" class="flex-none text-xl text-beige mx-3">
+      <i class="fa fa-chevron-left" aria-hidden="true"></i>
+    </button>
+    <canvas class="flex-auto m-2 w-1/2 max-w-3xl"
+            id="the-canvas">
+    </canvas>
+    <button id="next" class="flex-none text-xl text-beige mx-3">
+      <i class="fa fa-chevron-right" aria-hidden="true"></i>
+    </button>
+  </div>
+  <div>
+    <span><span id="page_num">?</span> / <span id="page_count">?</span></span>
+  </div>
+</div>