Merge branch 'ui-improvements' into dev

src/documents/admin.py

@@ -144,6 +144,15 @@ class DocumentAdmin(CommonAdmin):
         return obj.created.date().strftime("%Y-%m-%d")
     created_.short_description = "Created"
 
+    def change_view(self, request, object_id=None, form_url='', extra_context=None):
+        extra_context = extra_context or {}
+        doc = Document.objects.get(id=object_id)
+        extra_context['download_url'] = doc.download_url
+        extra_context['file_type'] = doc.file_type
+        return super(DocumentAdmin, self).change_view(
+            request, object_id, form_url, extra_context=extra_context,
+        )
+
     @mark_safe
     def thumbnail(self, obj):
         return self._html_tag(

src/documents/templates/admin/documents/document/change_form.html

@@ -1,5 +1,28 @@
 {% extends 'admin/change_form.html' %}
 
+{% block content %}
+
+{{ block.super }}
+
+{% if file_type in "pdf jpg png" %}
+	<div id="twocolumn_parent" style="display: flex;">
+		<div id="form_parent" style="flex:50%; margin-right: 10px;"></div>
+		<div id="viewer_parent" style="flex:50%; margin-left: 10px; text-align: center;">
+			{% if file_type == "pdf" %}
+				{% include "admin/documents/document/viewers/viewer_pdf.html" %}
+			{% endif %}
+			{% if file_type in "jpg png" %}
+				{% include "admin/documents/document/viewers/viewer_image.html" %}
+			{% endif %}
+		</div>
+	</div>
+
+	<script>
+		django.jQuery("#form_parent").append(django.jQuery("#document_form"));
+	</script>
+{% endif %}
+
+{% endblock content %}
 
 {% block footer %}
 

src/documents/templates/admin/documents/document/viewers/viewer_image.html

@@ -0,0 +1,2 @@
+<img src="{{download_url}}" style="max-width: 100%">
+

src/documents/templates/admin/documents/document/viewers/viewer_pdf.html

@@ -0,0 +1,119 @@
+{% load static %}
+
+<div>
+    <input id="prev" value="Previous" class="default" type="button">
+    <input id="next" value="Next" class="default" type="button">
+  &nbsp; &nbsp;
+  <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
+  &nbsp; &nbsp;
+    <input id="zoomin" value="+" class="default" type="button">
+    <input id="zoomout" value="-" class="default" type="button">
+</div>
+
+<div style="width: 100%; overflow: auto;">
+<canvas id="the-canvas"></canvas>
+    </div>
+<script type="text/javascript" src="{% static 'documents/js/pdf.js' %}"></script>
+<script type="text/javascript" src="{% static 'documents/js/pdf.worker.js' %}"></script>
+	{# Load and display PDF document#}
+	<script>
+var pdfjsLib = window['pdfjs-dist/build/pdf'];
+
+var pdfDoc = null,
+      pageNum = 1,
+      pageRendering = false,
+      pageNumPending = null,
+      scale = 1.0,
+      canvas = document.getElementById('the-canvas'),
+      ctx = canvas.getContext('2d');
+
+/**
+   * Get page info from document, resize canvas accordingly, and render page.
+   * @param num Page number.
+   */
+  function renderPage(num) {
+    pageRendering = true;
+    // Using promise to fetch the page
+    pdfDoc.getPage(num).then(function(page) {
+      var viewport = page.getViewport(scale);
+      canvas.height = viewport.height;
+      canvas.width = viewport.width;
+      // Render PDF page into canvas context
+      var renderContext = {
+        canvasContext: ctx,
+        viewport: viewport
+      };
+      var renderTask = page.render(renderContext);
+      // Wait for rendering to finish
+      renderTask.promise.then(function () {
+        pageRendering = false;
+        if (pageNumPending !== null) {
+          // New page rendering is pending
+          renderPage(pageNumPending);
+          pageNumPending = null;
+        }
+      });
+    });
+    // Update page counters
+    document.getElementById('page_num').textContent = num;
+  }
+  /**
+   * If another page rendering in progress, waits until the rendering is
+   * finised. Otherwise, executes rendering immediately.
+   */
+  function queueRenderPage(num) {
+    if (pageRendering) {
+      pageNumPending = num;
+    } else {
+      renderPage(num);
+    }
+  }
+  /**
+   * Displays previous page.
+   */
+  function onPrevPage() {
+    if (pageNum <= 1) {
+      return;
+    }
+    pageNum--;
+    queueRenderPage(pageNum);
+  }
+  document.getElementById('prev').addEventListener('click', onPrevPage);
+  /**
+   * Displays next page.
+   */
+  function onNextPage() {
+    if (pageNum >= pdfDoc.numPages) {
+      return;
+    }
+    pageNum++;
+    queueRenderPage(pageNum);
+  }
+  document.getElementById('next').addEventListener('click', onNextPage);
+  /**
+   * Displays next page.
+   */
+  function onZoomIn() {
+    scale *= 1.2;
+    queueRenderPage(pageNum);
+  }
+  document.getElementById('zoomin').addEventListener('click', onZoomIn);
+  /**
+   * Displays next page.
+   */
+  function onZoomOut() {
+    scale /= 1.2;
+    queueRenderPage(pageNum);
+  }
+  document.getElementById('zoomout').addEventListener('click', onZoomOut);
+  /**
+   * Asynchronously downloads PDF.
+   */
+  pdfjsLib.getDocument("{{download_url}}").then(function (pdfDoc_) {
+    pdfDoc = pdfDoc_;
+    document.getElementById('page_count').textContent = pdfDoc.numPages;
+    // Initial/first page rendering
+    renderPage(pageNum);
+  });
+	</script>
+