diff options
Diffstat (limited to 'app/assets/javascripts/repository/components/blob_viewers/pdf_viewer.vue')
-rw-r--r-- | app/assets/javascripts/repository/components/blob_viewers/pdf_viewer.vue | 50 |
1 files changed, 50 insertions, 0 deletions
diff --git a/app/assets/javascripts/repository/components/blob_viewers/pdf_viewer.vue b/app/assets/javascripts/repository/components/blob_viewers/pdf_viewer.vue new file mode 100644 index 00000000000..803a357df52 --- /dev/null +++ b/app/assets/javascripts/repository/components/blob_viewers/pdf_viewer.vue @@ -0,0 +1,50 @@ +<script> +import { GlButton } from '@gitlab/ui'; +import PdfViewer from '~/blob/pdf/pdf_viewer.vue'; +import { __ } from '~/locale'; +import { PDF_MAX_FILE_SIZE, PDF_MAX_PAGE_LIMIT } from '../../constants'; + +export default { + components: { GlButton, PdfViewer }, + i18n: { + tooLargeDescription: __('This PDF is too large to display. Please download to view.'), + tooLargeButtonText: __('Download PDF'), + }, + props: { + url: { + type: String, + required: true, + }, + fileSize: { + type: Number, + required: true, + }, + }, + data() { + return { totalPages: 0 }; + }, + computed: { + tooLargeToDisplay() { + return this.fileSize > PDF_MAX_FILE_SIZE || this.totalPages > PDF_MAX_PAGE_LIMIT; + }, + }, + methods: { + handleOnLoad(totalPages) { + this.totalPages = totalPages; + }, + }, +}; +</script> +<template> + <div> + <pdf-viewer v-if="!tooLargeToDisplay" :pdf="url" @pdflabload="handleOnLoad" /> + + <div v-else class="gl-display-flex gl-flex-direction-column gl-align-items-center gl-p-5"> + <p>{{ $options.i18n.tooLargeDescription }}</p> + + <gl-button icon="download" category="secondary" variant="confirm" :href="url" download>{{ + $options.i18n.tooLargeButtonText + }}</gl-button> + </div> + </div> +</template> |