Connect file preview UI classes to frontend

getkirby · Aug 6, 2024 · 0e173c3 · 0e173c3
1 parent 65a9ab4
commit 0e173c3
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 70 deletions.
diff --git a/panel/src/components/Views/Files/FilePreview.vue b/panel/src/components/Views/Files/FilePreview.vue
@@ -79,9 +79,6 @@ export default {
 			default: () => [],
 			type: Array
 		},
-		focus: {
-			type: Object
-		},
 		focusable: Boolean,
 		image: {
 			default: () => ({}),
@@ -91,6 +88,17 @@ export default {
 	},
 	emits: ["focus"],
 	computed: {
+		focus() {
+			const focus = this.$panel.content.values["focus"];
+
+			if (!focus) {
+				return;
+			}
+
+			const [x, y] = focus.replaceAll("%", "").split(" ");
+
+			return { x: parseFloat(x), y: parseFloat(y) };
+		},
 		options() {
 			return [
 				{
@@ -116,14 +124,11 @@ export default {
 	},
 	methods: {
 		setFocus(focus) {
-			if (!focus) {
-				return this.$emit("focus", null);
+			if (this.$helper.object.isObject(focus) === true) {
+				focus = `${focus.x.toFixed(1)}% ${focus.y.toFixed(1)}%`;
 			}
 
-			this.$emit("focus", {
-				x: focus.x.toFixed(1),
-				y: focus.y.toFixed(1)
-			});
+			this.$panel.content.set({ focus });
 		}
 	}
 };

diff --git a/panel/src/components/Views/Files/FileView.vue b/panel/src/components/Views/Files/FileView.vue
@@ -23,7 +23,7 @@
 			</template>
 		</k-header>
 
-		<k-file-preview v-bind="preview" :focus="focus" @focus="setFocus" />
+		<k-file-preview v-bind="preview.props" />
 
 		<k-model-tabs :tab="tab.name" :tabs="tabs" />
 
@@ -45,19 +45,6 @@ export default {
 	props: {
 		preview: Object
 	},
-	computed: {
-		focus() {
-			const focus = this.$panel.content.values["focus"];
-
-			if (!focus) {
-				return;
-			}
-
-			const [x, y] = focus.replaceAll("%", "").split(" ");
-
-			return { x: parseFloat(x), y: parseFloat(y) };
-		}
-	},
 	methods: {
 		onAction(action) {
 			switch (action) {
@@ -67,13 +54,6 @@ export default {
 						...this.model
 					});
 			}
-		},
-		setFocus(focus) {
-			if (this.$helper.object.isObject(focus) === true) {
-				focus = `${focus.x}% ${focus.y}%`;
-			}
-
-			this.$panel.content.set("focus", focus);
 		}
 	}
 };

diff --git a/src/Panel/File.php b/src/Panel/File.php
@@ -6,6 +6,7 @@
 use Kirby\Cms\ModelWithContent;
 use Kirby\Filesystem\Asset;
 use Kirby\Panel\Ui\Buttons\ViewButtons;
+use Kirby\Panel\Ui\FilePreview;
 use Kirby\Toolkit\I18n;
 use Throwable;
 
@@ -417,41 +418,7 @@ public function props(): array
 				'url'        => $file->url(),
 				'uuid'       => fn () => $file->uuid()?->toString(),
 			],
-			'preview' => [
-				'focusable' => $this->isFocusable(),
-				'image'     => $this->image([
-					'back'  => 'transparent',
-					'ratio' => '1/1'
-				], 'cards'),
-				'url'       => $url = $file->previewUrl(),
-				'details'   => [
-					[
-						'title' => I18n::translate('template'),
-						'text'  => $file->template() ?? '—'
-					],
-					[
-						'title' => I18n::translate('mime'),
-						'text'  => $file->mime()
-					],
-					[
-						'title' => I18n::translate('url'),
-						'text'  => $id,
-						'link'  => $url
-					],
-					[
-						'title' => I18n::translate('size'),
-						'text'  => $file->niceSize()
-					],
-					[
-						'title' => I18n::translate('dimensions'),
-						'text'  => $file->type() === 'image' ? $file->dimensions() . ' ' . I18n::translate('pixel') : '—'
-					],
-					[
-						'title' => I18n::translate('orientation'),
-						'text'  => $file->type() === 'image' ? I18n::translate('orientation.' . $dimensions->orientation()) : '—'
-					],
-				]
-			]
+			'preview' => FilePreview::factory($this->model)->render()
 		];
 	}
 

diff --git a/tests/Panel/FileTest.php b/tests/Panel/FileTest.php
@@ -843,12 +843,7 @@ public function testProps()
 		$this->assertArrayHasKey('url', $props['model']);
 		$this->assertArrayHasKey('template', $props['model']);
 		$this->assertArrayHasKey('type', $props['model']);
-
 		$this->assertArrayHasKey('preview', $props);
-		$this->assertArrayHasKey('image', $props['preview']);
-		$this->assertArrayHasKey('url', $props['preview']);
-		$this->assertArrayHasKey('details', $props['preview']);
-		$this->assertCount(6, $props['preview']['details']);
 
 		// inherited props
 		$this->assertArrayHasKey('blueprint', $props);