contentmatcher/templates/deck/index.html

{% extends 'base.html' %}

{% block header %}
  <h1>{% block title %}DECK{% endblock %}</h1>
{% endblock %}
  
{% block content %}
  <p>BODY</p>

  <article class="post">
    <header>
      <h1>{{ card['title'] }}</h1>
    </header>

    <!--iframe src={{ card['item_location'] }} width="auto" height="auto"> </iframe-->   
    
    <canvas id="pdf-doc"></canvas>

    <form method="post">
      <button input type="submit" name="rate" data-cardtitle=card[title] value="Yes">Yes</button>
      <button input type="submit" name="rate" value="Maybe">Maybe</button>
      <button input type="submit" name="rate" value="No">No</button>
    </form>
  </article>

  <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;

            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;
      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);
      });
  });
  </script>
{% endblock %}