From 34028ded09af89c9d1e285375372a50333dae02b Mon Sep 17 00:00:00 2001
From: Clemens Wolff <clewolff@microsoft.com>
Date: Mon, 1 Jul 2019 15:37:00 -0400
Subject: [PATCH] Add viewer pane for source document

---
 app/server/static/components/annotation.pug   |  7 ++-
 .../static/components/annotationMixin.js      |  3 +-
 app/server/static/components/preview.vue      | 51 +++++++++++++++++++
 3 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 app/server/static/components/preview.vue

diff --git a/app/server/static/components/annotation.pug b/app/server/static/components/annotation.pug
index 7c775f45..699bb9b1 100644
--- a/app/server/static/components/annotation.pug
+++ b/app/server/static/components/annotation.pug
@@ -133,7 +133,12 @@ div.columns(v-cloak="")
           span.icon
             i.fas.fa-box
 
-    block annotation-area
+    div.columns
+      div.column
+        block annotation-area
+
+      div.column(v-if="documentMetadata != null && documentMetadata.documentSourceUrl != null")
+        preview(v-bind:url="documentMetadata.documentSourceUrl")
 
     div.level.mt30
       a.button.level-left(
diff --git a/app/server/static/components/annotationMixin.js b/app/server/static/components/annotationMixin.js
index 4160e901..61665f10 100644
--- a/app/server/static/components/annotationMixin.js
+++ b/app/server/static/components/annotationMixin.js
@@ -2,6 +2,7 @@ import * as marked from 'marked';
 import VueJsonPretty from 'vue-json-pretty';
 import isEmpty from 'lodash.isempty';
 import HTTP, { defaultHttpClient } from './http';
+import Preview from './preview.vue';
 
 const getOffsetFromUrl = (url) => {
   const offsetMatch = url.match(/[?#].*offset=(\d+)/);
@@ -36,7 +37,7 @@ const storeOffsetInUrl = (offset) => {
 };
 
 export default {
-  components: { VueJsonPretty },
+  components: { VueJsonPretty, Preview },
 
   data() {
     return {
diff --git a/app/server/static/components/preview.vue b/app/server/static/components/preview.vue
new file mode 100644
index 00000000..b6e2e339
--- /dev/null
+++ b/app/server/static/components/preview.vue
@@ -0,0 +1,51 @@
+<template lang="pug">
+div.preview
+  object(v-if="isPDF", v-bind:data="url", type="application/pdf")
+    embed(v-bind:src="url", type="application/pdf")
+  iframe(v-else-if="isWord", v-bind:src="officeViewer")
+  iframe(v-else, v-bind:src="url")
+</template>
+
+<style scoped>
+.preview, object, iframe {
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+<script>
+export default {
+  props: {
+    url: {
+      type: String,
+      default: '',
+    },
+  },
+
+  computed: {
+    fileExtension() {
+      const filename = this.url.split('/').pop();
+      const extension = filename.match(/[^#?]+/)[0].split('.').pop();
+      return extension.toLowerCase();
+    },
+
+    isPDF() {
+      return this.fileExtension === 'pdf';
+    },
+
+    isWord() {
+      return [
+        'doc',
+        'dot',
+        'docx',
+        'docm',
+        'dotm',
+      ].indexOf(this.fileExtension) !== -1;
+    },
+
+    officeViewer() {
+      return `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(this.url)}`;
+    },
+  },
+};
+</script>