summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/pdf
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/javascripts/pdf')
-rw-r--r--app/assets/javascripts/pdf/assets/img/bg.gifbin0 -> 58 bytes
-rw-r--r--app/assets/javascripts/pdf/index.vue73
-rw-r--r--app/assets/javascripts/pdf/page/index.vue68
3 files changed, 141 insertions, 0 deletions
diff --git a/app/assets/javascripts/pdf/assets/img/bg.gif b/app/assets/javascripts/pdf/assets/img/bg.gif
new file mode 100644
index 00000000000..c7e98e044f5
--- /dev/null
+++ b/app/assets/javascripts/pdf/assets/img/bg.gif
Binary files differ
diff --git a/app/assets/javascripts/pdf/index.vue b/app/assets/javascripts/pdf/index.vue
new file mode 100644
index 00000000000..4603859d7b0
--- /dev/null
+++ b/app/assets/javascripts/pdf/index.vue
@@ -0,0 +1,73 @@
+<template>
+ <div class="pdf-viewer" v-if="hasPDF">
+ <page v-for="(page, index) in pages"
+ :key="index"
+ :v-if="!loading"
+ :page="page"
+ :number="index + 1" />
+ </div>
+</template>
+
+<script>
+ import pdfjsLib from 'pdfjs-dist';
+ import workerSrc from 'vendor/pdf.worker';
+
+ import page from './page/index.vue';
+
+ export default {
+ props: {
+ pdf: {
+ type: [String, Uint8Array],
+ required: true,
+ },
+ },
+ data() {
+ return {
+ loading: false,
+ pages: [],
+ };
+ },
+ components: { page },
+ watch: { pdf: 'load' },
+ computed: {
+ document() {
+ return typeof this.pdf === 'string' ? this.pdf : { data: this.pdf };
+ },
+ hasPDF() {
+ return this.pdf && this.pdf.length > 0;
+ },
+ },
+ methods: {
+ load() {
+ this.pages = [];
+ return pdfjsLib.getDocument(this.document)
+ .then(this.renderPages)
+ .then(() => this.$emit('pdflabload'))
+ .catch(error => this.$emit('pdflaberror', error))
+ .then(() => { this.loading = false; });
+ },
+ renderPages(pdf) {
+ const pagePromises = [];
+ this.loading = true;
+ for (let num = 1; num <= pdf.numPages; num += 1) {
+ pagePromises.push(
+ pdf.getPage(num).then(p => this.pages.push(p)),
+ );
+ }
+ return Promise.all(pagePromises);
+ },
+ },
+ mounted() {
+ pdfjsLib.PDFJS.workerSrc = workerSrc;
+ if (this.hasPDF) this.load();
+ },
+ };
+</script>
+
+<style>
+ .pdf-viewer {
+ background: url('./assets/img/bg.gif');
+ display: flex;
+ flex-flow: column nowrap;
+ }
+</style>
diff --git a/app/assets/javascripts/pdf/page/index.vue b/app/assets/javascripts/pdf/page/index.vue
new file mode 100644
index 00000000000..7b74ee4eb2e
--- /dev/null
+++ b/app/assets/javascripts/pdf/page/index.vue
@@ -0,0 +1,68 @@
+<template>
+ <canvas
+ class="pdf-page"
+ ref="canvas"
+ :data-page="number" />
+</template>
+
+<script>
+ export default {
+ props: {
+ page: {
+ type: Object,
+ required: true,
+ },
+ number: {
+ type: Number,
+ required: true,
+ },
+ },
+ data() {
+ return {
+ scale: 4,
+ rendering: false,
+ };
+ },
+ computed: {
+ viewport() {
+ return this.page.getViewport(this.scale);
+ },
+ context() {
+ return this.$refs.canvas.getContext('2d');
+ },
+ renderContext() {
+ return {
+ canvasContext: this.context,
+ viewport: this.viewport,
+ };
+ },
+ },
+ mounted() {
+ this.$refs.canvas.height = this.viewport.height;
+ this.$refs.canvas.width = this.viewport.width;
+ this.rendering = true;
+ this.page.render(this.renderContext)
+ .then(() => { this.rendering = false; })
+ .catch(error => this.$emit('pdflaberror', error));
+ },
+ };
+</script>
+
+<style>
+.pdf-page {
+ margin: 8px auto 0 auto;
+ border-top: 1px #ddd solid;
+ border-bottom: 1px #ddd solid;
+ width: 100%;
+}
+
+.pdf-page:first-child {
+ margin-top: 0px;
+ border-top: 0px;
+}
+
+.pdf-page:last-child {
+ margin-bottom: 0px;
+ border-bottom: 0px;
+}
+</style>