PDF file preview

panel/src/components/Views/Files/DefaultFilePreview.vue

@@ -29,7 +29,7 @@ export default {
 </script>
 
 <style>
-.k-default-file-preview .k-file-preview-frame > .k-icon {
+.k-default-file-preview .k-file-preview-frame .k-item-icon {
 	--icon-size: 3rem;
 }
 

panel/src/components/Views/Files/PdfFilePreview.vue

@@ -0,0 +1,75 @@
+<template>
+	<div
+		class="k-default-file-preview k-pdf-file-preview"
+		:data-supported="supported"
+	>
+		<object
+			:data="url"
+			type="application/pdf"
+			class="k-pdf-file-preview-object"
+		>
+			<k-file-preview-frame>
+				<a :href="url">
+					<k-icon
+						:color="$helper.color(image.color)"
+						:type="image.icon"
+						class="k-item-icon"
+					/>
+				</a>
+			</k-file-preview-frame>
+		</object>
+
+		<k-file-preview-details :details="details" />
+	</div>
+</template>
+
+<script>
+/**
+ * File view preview for PDF documents
+ * @since 5.0.0
+ */
+export default {
+	props: {
+		details: Array,
+		image: {
+			default: () => ({}),
+			type: Object
+		},
+		url: String
+	},
+	computed: {
+		supported() {
+			return window.navigator.pdfViewerEnabled;
+		}
+	}
+};
+</script>
+
+<style>
+.k-pdf-file-preview[data-supported="true"] {
+	grid-template-columns: 1fr;
+}
+
+.k-pdf-file-preview .k-pdf-file-preview-object {
+	width: 100%;
+}
+
+.k-pdf-file-preview[data-supported="true"] .k-pdf-file-preview-object {
+	aspect-ratio: 1/1;
+}
+
+@container (min-width: 36rem) {
+	.k-pdf-file-preview[data-supported="true"] .k-pdf-file-preview-object {
+		aspect-ratio: 3/2;
+	}
+}
+
+@container (min-width: 60rem) {
+	.k-pdf-file-preview[data-supported="true"] {
+		grid-template-columns: 70% auto;
+	}
+	.k-pdf-file-preview[data-supported="true"] .k-pdf-file-preview-object {
+		aspect-ratio: 5/3;
+	}
+}
+</style>

panel/src/components/Views/Files/index.js

@@ -9,6 +9,7 @@ import FilePreviewFrame from "./FilePreviewFrame.vue";
 import DefaultFilePreview from "./DefaultFilePreview.vue";
 import AudioFilePreview from "./AudioFilePreview.vue";
 import ImageFilePreview from "./ImageFilePreview.vue";
+import PdfFilePreview from "./PdfFilePreview.vue";
 import VideoFilePreview from "./VideoFilePreview.vue";
 
 export default {
@@ -22,6 +23,7 @@ export default {
 		app.component("k-default-file-preview", DefaultFilePreview);
 		app.component("k-audio-file-preview", AudioFilePreview);
 		app.component("k-image-file-preview", ImageFilePreview);
+		app.component("k-pdf-file-preview", PdfFilePreview);
 		app.component("k-video-file-preview", VideoFilePreview);
 	}
 };

src/Cms/Core.php

@@ -13,6 +13,7 @@
 use Kirby\Form\Field\LayoutField;
 use Kirby\Panel\Ui\FilePreviews\AudioFilePreview;
 use Kirby\Panel\Ui\FilePreviews\ImageFilePreview;
+use Kirby\Panel\Ui\FilePreviews\PdfFilePreview;
 use Kirby\Panel\Ui\FilePreviews\VideoFilePreview;
 
 /**
@@ -289,7 +290,8 @@ public function filePreviews(): array
 		return [
 			AudioFilePreview::class,
 			ImageFilePreview::class,
-			VideoFilePreview::class
+			PdfFilePreview::class,
+			VideoFilePreview::class,
 		];
 	}
 

src/Panel/Ui/FilePreviews/PdfFilePreview.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace Kirby\Panel\Ui\FilePreviews;
+
+use Kirby\Cms\File;
+use Kirby\Panel\Ui\FilePreview;
+
+/**
+ * @package   Kirby Panel
+ * @author    Nico Hoffmann <[email protected]>
+ * @link      https://getkirby.com
+ * @copyright Bastian Allgeier
+ * @license   https://getkirby.com/license
+ * @since     5.0.0
+ * @internal
+ */
+class PdfFilePreview extends FilePreview
+{
+	public function __construct(
+		public File $file,
+		public string $component = 'k-pdf-file-preview'
+	) {
+	}
+
+	public static function accepts(File $file): bool
+	{
+		return $file->extension() === 'pdf';
+	}
+}