Initial word docx rendering

7 files changed, 78 insertions, 0 deletions

diff --git a/app/assets/javascripts/blob/docx/docx.js b/app/assets/javascripts/blob/docx/docx.js
new file mode 100644
index 00000000000..e69de29bb2d
--- /dev/null
+++ b/app/assets/javascripts/blob/docx/docx.js
diff --git a/app/assets/javascripts/blob/docx/index.js b/app/assets/javascripts/blob/docx/index.js
new file mode 100644
index 00000000000..3d2319160fd
--- /dev/null
+++ b/app/assets/javascripts/blob/docx/index.js
@@ -0,0 +1,59 @@
+import JSZip from 'jszip';
+import JSZipUtils from 'jszip-utils';
+import DocX from './docx';
+
+export default class DocxRenderer {
+  constructor(container) {
+    this.el = container;
+    this.loader = this.el.querySelector('i');
+    this.endpoint = this.el.dataset.endpoint;
+    this.loadFile();
+    this.loader.style = 'display:none;';
+    this
+  }
+
+  loadFile(file) {
+    return this.getZipFile()
+      .then(data => {
+        return JSZip.loadAsync(data)
+      })
+      .then(asyncResult => {
+        return asyncResult.files['word/document.xml'].async('string')
+      })
+      .then((content) => {
+        const $xml = $($.parseXML(content));
+        const $textNodes = $xml.find('t');
+        $textNodes.each((i, el) => {
+          const p = document.createElement('p');
+          p.innerText = $(el).text();
+          this.el.appendChild(p);
+        })
+      })
+      .catch(this.error.bind(this));
+  }
+
+  error(e) {
+    console.log(e)
+    const errorMsg = document.createElement('p');
+
+    errorMsg.className = 'prepend-top-default append-bottom-default text-center';
+    errorMsg.textContent = 'Cannot show preview.';
+    this.el.appendChild(errorMsg);
+  }
+
+  getZipFile() {
+    return new JSZip.external.Promise((resolve, reject) => {
+      JSZipUtils.getBinaryContent(this.el.dataset.endpoint, (err, data) => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve(data);
+        }
+      });
+    });
+  }
+
+  renderFile(e) {
+    console.log('renderFile', e.target.response)
+  }
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/blob/docx_viewer.js b/app/assets/javascripts/blob/docx_viewer.js
new file mode 100644
index 00000000000..c15d1c9bee8
--- /dev/null
+++ b/app/assets/javascripts/blob/docx_viewer.js
@@ -0,0 +1,6 @@
+import DocxRenderer from './docx';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const viewer = new DocxRenderer(document.getElementById('js-docx-viewer'));
+  console.log('viewer',viewer)
+});
\ No newline at end of file
diff --git a/app/assets/stylesheets/framework/docx.scss b/app/assets/stylesheets/framework/docx.scss
new file mode 100644
index 00000000000..e69de29bb2d
--- /dev/null
+++ b/app/assets/stylesheets/framework/docx.scss
diff --git a/app/models/blob.rb b/app/models/blob.rb
index 55872acef51..b7445a76ec1 100644
--- a/app/models/blob.rb
+++ b/app/models/blob.rb
@@ -62,6 +62,10 @@ class Blob < SimpleDelegator
     binary? && extension == 'sketch'
   end
 
+  def docx?
+    binary? && extension == 'docx'
+  end
+
   def stl?
     extension == 'stl'
   end
@@ -95,6 +99,8 @@ class Blob < SimpleDelegator
       'notebook'
     elsif sketch?
       'sketch'
+    elsif docx?
+      'docx'
     elsif stl?
       'stl'
     elsif markup?
diff --git a/app/views/projects/blob/_docx.html.haml b/app/views/projects/blob/_docx.html.haml
new file mode 100644
index 00000000000..632ef5822d3
--- /dev/null
+++ b/app/views/projects/blob/_docx.html.haml
@@ -0,0 +1,6 @@
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('docx_viewer')
+
+.file-content.is-docx-loading
+  .text-center#js-docx-viewer{ data: { endpoint: namespace_project_raw_path(@project.namespace, @project, @id) } }
+    = icon('spinner spin 2x', class: 'prepend-top-default append-bottom-default', 'aria-hidden' => 'true', 'aria-label' => 'Loading')
\ No newline at end of file
diff --git a/config/webpack.config.js b/config/webpack.config.js
index 0fea3f8222b..3b1102f48c2 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -45,6 +45,7 @@ var config = {
     protected_tags:       './protected_tags',
     snippet:              './snippet/snippet_bundle.js',
     stl_viewer:           './blob/stl_viewer.js',
+    docx_viewer:           './blob/docx_viewer.js',
     terminal:             './terminal/terminal_bundle.js',
     u2f:                  ['vendor/u2f'],
     users:                './users/users_bundle.js',