scinote-web/app/javascript/vue/shared/pdf_viewer.vue

79 lines
2.4 KiB
Vue
Raw Normal View History

<template>
<div class="pdf-viewer" :class="{ 'blocked': pdf.blocked }">
<div class="page-container">
<div class="layers-container">
<canvas class="pdf-canvas" :class="{ 'ready': !pdf.blocked }"
:data-pdf-url="pdf.url"
:data-pdf-worker-url="pdf.worker_url"
></canvas>
<div class="textLayer"></div>
</div>
</div>
<div class="pdf-toolbar">
<button class="btn btn-light icon-btn prev-page">
<i class="fas fa-arrow-left"></i>
</button>
<div class="page-counter sci-input-container">
<input type="text" class="sci-input-field current-page" value=1>
{{ i18n.t('pdf_preview.pages.of') }}
<span class="total-page">...</span>
</div>
<button class="btn btn-light icon-btn next-page">
<i class="fas fa-arrow-right"></i>
</button>
<div class="divider"></div>
<div class="zoom-page">
<select class="zoom-page-selector">
<option value="auto">{{ i18n.t('pdf_preview.fit_to_screen') }}</option>
<option v-for="i in Array.from(Array(12).keys())"
:selected="(i + 1) * 25 == 100"
:value="((i + 1) * 0.25).toString().replaceAll(/\.?0+$/g, '')"
:key="i">
{{(i + 1) * 25}}%
</option>
</select>
</div>
<div class="sci-btn-group">
<button class="btn btn-light icon-btn zoom-out">
<i class="fas fa-search-minus"></i>
</button>
<button class="btn btn-light icon-btn zoom-in">
<i class="fas fa-search-plus"></i>
</button>
</div>
</div>
<div class="blocked-screen">
<img :src="blockedIcon">
<p class="title">{{ i18n.t('pdf_previepw.blocked.title') }}</p>
<p class="description">{{ i18n.t('pdf_preview.blocked.description') }}</p>
<button class="btn btn-primary load-blocked-pdf">
<i class="fas fa-cloud-download-alt"></i>
{{ i18n.t('pdf_preview.blocked.submit_button') }}
</button>
</div>
</div>
</template>
<script>
import blockedIcon from 'images/pdf_js/blocked.svg'
export default {
name: 'PdfViewer',
props: {
pdf: { type: Object, required: true }
},
data() {
return {
blockedIcon,
value: ''
}
},
mounted() {
// from legacy code in app/assets/javascripts/sitewide/pdf_preview.js
PdfPreview.initCanvas();
},
methods: {
}
}
</script>