Preview refactoring

2017-05-09 12:25:22 +02:00
parent 5f751d927b
commit e52047b5cd
3 changed files with 110 additions and 58 deletions
--- a/app/src/Download/PreviewModal.vue
+++ b/app/src/Download/PreviewModal.vue
@@ -0,0 +1,81 @@
+<template lang="pug">
+  modal(v-if="current", @close="current=false", :has-header="true", @next="next", @prev="prev")
+    div(slot="header")
+      p
+        strong {{current.metadata.name}}
+      div
+        small {{currentIndex+1}} / {{files.length}}
+        span.btn-group(style="margin-left: 15px")
+          a.btn.btn-sm.btn-default(title="previous", @click="prev", v-show="currentIndex > 0")
+            i.fa.fa-fw.fa-arrow-left
+          a.btn.btn-sm.btn-default(title="next", @click="next", v-show="currentIndex < files.length-1")
+            i.fa.fa-fw.fa-arrow-right
+          a.btn.btn-sm.btn-default(title="toggle line wrap", @click="lineWrap = !lineWrap", :class="{active:lineWrap}", v-show="current.previewType === 'text'")
+            i.fa.fa-fw.fa-rotate-left.fa-flip-vertical
+    div(slot="body")
+      div(v-if="current.previewType === 'image'", style="text-align:center")
+        img(:src="current.url", style="max-width: 100%; height:auto")
+      div(v-if="current.previewType === 'text'")
+        pre(:style="{'white-space':lineWrap?'pre-wrap':'pre'}") {{ previewText }}
+      p(v-if="current.previewType === false", style="text-align:center")
+        strong.text-danger No preview available
+</template>
+
+
+<script type="text/babel">
+  import Modal from '../common/Modal.vue';
+
+  export default {
+    components: { Modal },
+    props: ['preview', 'files', 'maxSize'],
+    data() {
+      return {
+        previewText: '',
+        lineWrap: false,
+        current: false
+      };
+    },
+
+    computed: {
+      currentIndex: function() {
+        return this.files.indexOf(this.current);
+      }
+    },
+
+    watch: {
+      preview: function(preview) {
+        this.current = preview
+      },
+      current: function(val, old) {
+        if(val === false) this.$emit('close');
+        if(val.previewType === 'text' && val !== old) this.getPreviewText();
+      },
+    },
+
+    methods: {
+      next() {
+        if(this.currentIndex >= this.files.length-1) return;
+        this.current = this.files[this.currentIndex + 1];
+      },
+
+      prev() {
+        if(this.currentIndex <= 0) return;
+        this.current = this.files[this.currentIndex - 1];
+      },
+
+      getPreviewText() {
+        this.previewText = '';
+        const xhr = new XMLHttpRequest();
+        xhr.open('GET', '//' + document.location.host + this.current.url);
+        xhr.onload = () => {
+          if(xhr.status === 200) {
+            this.previewText = xhr.responseText
+          } else {
+            this.previewText = `${xhr.status} ${xhr.statusText}: ${xhr.responseText}`;
+          }
+        };
+        xhr.send();
+      },
+    }
+  };
+</script>