Merge branch 'render-pdfs-in-gitlab' into 'master'

Render PDFs in GitLab

See merge request !10419

4 files changed, 76 insertions, 0 deletions

diff --git a/app/assets/javascripts/blob/pdf/index.js b/app/assets/javascripts/blob/pdf/index.js
new file mode 100644
index 00000000000..5b79717d1e1
--- /dev/null
+++ b/app/assets/javascripts/blob/pdf/index.js
@@ -0,0 +1,62 @@
+/* eslint-disable no-new */
+import Vue from 'vue';
+import PDFLab from 'vendor/pdflab';
+import workerSrc from 'vendor/pdf.worker';
+
+Vue.use(PDFLab, {
+  workerSrc,
+});
+
+export default () => {
+  const el = document.getElementById('js-pdf-viewer');
+
+  new Vue({
+    el,
+    data() {
+      return {
+        error: false,
+        loadError: false,
+        loading: true,
+        pdf: el.dataset.endpoint,
+      };
+    },
+    methods: {
+      onLoad() {
+        this.loading = false;
+      },
+      onError(error) {
+        this.loading = false;
+        this.loadError = true;
+        this.error = error;
+      },
+    },
+    template: `
+      <div class="container-fluid md prepend-top-default append-bottom-default">
+        <div
+          class="text-center loading"
+          v-if="loading && !error">
+          <i
+            class="fa fa-spinner fa-spin"
+            aria-hidden="true"
+            aria-label="PDF loading">
+          </i>
+        </div>
+        <pdf-lab
+          v-if="!loadError"
+          :pdf="pdf"
+          @pdflabload="onLoad"
+          @pdflaberror="onError" />
+        <p
+          class="text-center"
+          v-if="error">
+          <span v-if="loadError">
+            An error occured whilst loading the file. Please try again later.
+          </span>
+          <span v-else>
+            An error occured whilst decoding the file.
+          </span>
+        </p>
+      </div>
+    `,
+  });
+};
diff --git a/app/assets/javascripts/blob/pdf_viewer.js b/app/assets/javascripts/blob/pdf_viewer.js
new file mode 100644
index 00000000000..91abe9dd699
--- /dev/null
+++ b/app/assets/javascripts/blob/pdf_viewer.js
@@ -0,0 +1,3 @@
+import renderPDF from './pdf';
+
+document.addEventListener('DOMContentLoaded', renderPDF);
diff --git a/app/models/blob.rb b/app/models/blob.rb
index 1c451a3976f..f82126f8e65 100644
--- a/app/models/blob.rb
+++ b/app/models/blob.rb
@@ -46,6 +46,10 @@ class Blob < SimpleDelegator
     text? && language && language.name == 'SVG'
   end
 
+  def pdf?
+    name && File.extname(name) == '.pdf'
+  end
+
   def ipython_notebook?
     text? && language&.name == 'Jupyter Notebook'
   end
@@ -71,6 +75,8 @@ class Blob < SimpleDelegator
       end
     elsif image? || svg?
       'image'
+    elsif pdf?
+      'pdf'
     elsif ipython_notebook?
       'notebook'
     elsif sketch?
diff --git a/app/views/projects/blob/_pdf.html.haml b/app/views/projects/blob/_pdf.html.haml
new file mode 100644
index 00000000000..58dc88e3bf7
--- /dev/null
+++ b/app/views/projects/blob/_pdf.html.haml
@@ -0,0 +1,5 @@
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('common_vue')
+  = page_specific_javascript_bundle_tag('pdf_viewer')
+
+.file-content#js-pdf-viewer{ data: { endpoint: namespace_project_raw_path(@project.namespace, @project, @id) } }