more consistent fullscreen-preview, fix prop types

Faithful-Resource-Pack · Jul 1, 2024 · a78a0b5 · a78a0b5
1 parent 031e09d
commit a78a0b5
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 33 deletions.
diff --git a/index.html b/index.html
@@ -143,7 +143,7 @@
 					</v-img>
 				</v-card>
 
-				<template v-for="(tab, tabIndex) in availableTabs" :key="tab.label">
+				<div v-for="(tab, tabIndex) in availableTabs" :key="tab.label">
 					<v-list
 						dense
 						nav
@@ -203,7 +203,7 @@
 					>
 						<!-- auto-closing tags break here for some reason -->
 					</v-divider>
-				</template>
+				</div>
 
 				<v-list dense nav>
 					<v-list-item>

diff --git a/pages/addon/addon-form.vue b/pages/addon/addon-form.vue
@@ -1,6 +1,6 @@
 <template>
 	<v-container>
-		<fullscreen-preview ref="headerPreview" :src="header" />
+		<fullscreen-preview v-model="previewOpen" :src="header" />
 
 		<div class="text-center" v-if="loading">
 			<h2 class="mb-3">{{ $root.lang().addons.general.loading_addon }}</h2>
@@ -46,7 +46,7 @@
 						<div class="col">
 							<div style="position: relative" v-if="hasHeader" class="mt-3">
 								<v-img
-									@click.stop="(e) => $refs.headerPreview.open()"
+									@click.stop="() => (previewOpen = true)"
 									style="border-radius: 10px"
 									:aspect-ratio="16 / 9"
 									:src="header"
@@ -56,7 +56,7 @@
 									rounded
 									style="display: inline-block; position: absolute; right: 0; top: 0"
 								>
-									<v-icon small class="ma-1" @click.stop="(e) => $refs.headerPreview.open()">
+									<v-icon small class="ma-1" @click.stop="() => (previewOpen = true)">
 										mdi-fullscreen
 									</v-icon>
 									<v-icon
@@ -328,7 +328,7 @@ export default {
 		},
 		headerSource: {
 			required: false,
-			default: undefined,
+			default: "",
 		},
 		screenSources: {
 			required: false,
@@ -508,6 +508,7 @@ export default {
 			editions: ["Java", "Bedrock"],
 			res: ["32x", "64x"],
 			users: [],
+			previewOpen: false,
 		};
 	},
 	computed: {
@@ -519,9 +520,7 @@ export default {
 				? this.headerValidating == false && this.headerValid && this.submittedForm.headerFile
 					? URL.createObjectURL(this.submittedForm.headerFile)
 					: undefined
-				: this.headerSource
-					? this.headerSource
-					: undefined;
+				: this.headerSource;
 		},
 		carouselSources() {
 			return this.screenSources ? this.screenSources : [];

diff --git a/pages/addon/edit-addon-form.vue b/pages/addon/edit-addon-form.vue
@@ -81,7 +81,7 @@ export default {
 			reason: "",
 			validForm: false,
 			addonData: undefined,
-			headerSource: undefined,
+			headerSource: "",
 			screenSources: [],
 			screenIds: [],
 		};
@@ -182,7 +182,7 @@ export default {
 					this.headerSource = `${res.data}?t=${new Date().getTime()}`;
 				})
 				.catch(() => {
-					this.headerSource = undefined;
+					this.headerSource = "";
 				});
 		},
 		async handleScreenshot(screenshots, index, remove = false, id) {

diff --git a/pages/addon/image-previewer.vue b/pages/addon/image-previewer.vue
@@ -38,7 +38,7 @@
 			</div>
 		</div>
 
-		<fullscreen-preview ref="preview" :src="fullscreenItem" />
+		<fullscreen-preview v-model="previewOpen" :src="fullscreenItem" />
 	</v-container>
 </template>
 
@@ -69,11 +69,12 @@ export default {
 	data() {
 		return {
 			fullscreenIndex: undefined,
+			previewOpen: false,
 		};
 	},
 	computed: {
 		fullscreenItem() {
-			if (this.fullscreenIndex === undefined) return undefined;
+			if (this.fullscreenIndex === undefined) return "";
 			return this.sources[this.fullscreenIndex];
 		},
 		empty() {
@@ -90,7 +91,7 @@ export default {
 		onFullscreen(index, e) {
 			if (e) e.target.blur();
 			this.fullscreenIndex = index;
-			this.$refs.preview.open();
+			this.previewOpen = true;
 		},
 	},
 };

diff --git a/pages/components/fullscreen-preview.vue b/pages/components/fullscreen-preview.vue
@@ -8,7 +8,7 @@
 				alt="fullscreen preview"
 				:aspect-ratio="aspectRatio"
 				contain
-				@click="close"
+				@click="() => (modalOpened = false)"
 			/>
 		</v-card>
 	</v-dialog>
@@ -18,6 +18,10 @@
 export default {
 	name: "fullscreen-preview",
 	props: {
+		value: {
+			type: Boolean,
+			required: true,
+		},
 		aspectRatio: {
 			required: false,
 			type: Number,
@@ -38,14 +42,6 @@ export default {
 			modalOpened: false,
 		};
 	},
-	methods: {
-		close() {
-			this.modalOpened = false;
-		},
-		open() {
-			this.modalOpened = true;
-		},
-	},
 	computed: {
 		styles() {
 			if (!this.texture) return {};
@@ -54,5 +50,13 @@ export default {
 			};
 		},
 	},
+	watch: {
+		value(newValue) {
+			this.modalOpened = newValue;
+		},
+		modalOpened(newValue) {
+			this.$emit("input", newValue);
+		},
+	},
 };
 </script>
diff --git a/pages/gallery/gallery-modal.vue b/pages/gallery/gallery-modal.vue
@@ -7,7 +7,7 @@
 		@click.stop="() => closeModal()"
 	>
 		<v-card>
-			<fullscreen-preview ref="preview" :src="clickedImage" :aspect-ratio="1 / 1" texture />
+			<fullscreen-preview v-model="previewOpen" :src="clickedImage" :aspect-ratio="1 / 1" texture />
 
 			<v-toolbar>
 				<v-btn icon @click.stop="() => closeModal()">
@@ -194,6 +194,7 @@ export default {
 			],
 			opened: false,
 			clickedImage: "",
+			previewOpen: false,
 		};
 	},
 	watch: {
@@ -250,7 +251,7 @@ export default {
 		},
 		openFullscreenPreview(url) {
 			this.clickedImage = url;
-			this.$refs.preview.open();
+			this.previewOpen = true;
 		},
 		getHeaders(item) {
 			if (this.packs.includes(item))

diff --git a/pages/review/expansion-panel.vue b/pages/review/expansion-panel.vue
@@ -1,6 +1,6 @@
 <template>
 	<v-container id="review-expanders">
-		<fullscreen-preview ref="preview" :src="imagePreview" />
+		<fullscreen-preview v-model="previewOpen" :src="imagePreview" />
 
 		<v-expansion-panel
 			v-for="addon in addons"
@@ -35,7 +35,7 @@
 						<v-img
 							@click.stop="
 								(e) => {
-									$refs.preview.open();
+									previewOpen = true;
 									imagePreview = addonInPanelHeaderURL;
 								}
 							"
@@ -70,7 +70,7 @@
 								class="ma-1"
 								@click.stop="
 									(e) => {
-										$refs.preview.open();
+										previewOpen = true;
 										imagePreview = addonInPanelHeaderURL;
 									}
 								"
@@ -249,7 +249,7 @@ export default {
 			imagePreview: "",
 			dialogAddon: {},
 			dialogOpen: false,
-
+			previewOpen: false,
 			addonInPanelLoading: true,
 			addonInPanel: {},
 			addonURL: undefined,

diff --git a/pages/review/review-preview.vue b/pages/review/review-preview.vue
@@ -1,7 +1,7 @@
 <template>
 	<div id="review-preview" class="d-flex flex-column">
 		<v-card flat style="height: 100%" class="rounded-lg pa-2 overflow-x-hidden">
-			<fullscreen-preview ref="preview" :src="imagePreview" />
+			<fullscreen-preview v-model="previewOpen" :src="imagePreview" />
 			<template v-if="addonInPanelLoading === true">
 				<p>{{ $root.lang().global.loading }}</p>
 			</template>
@@ -25,7 +25,7 @@
 						<v-img
 							@click.stop="
 								(e) => {
-									$refs.preview.open();
+									previewOpen = true;
 									imagePreview = addonInPanelHeaderURL;
 								}
 							"
@@ -62,7 +62,7 @@
 								class="ma-1"
 								@click.stop="
 									(e) => {
-										$refs.preview.open();
+										previewOpen = true;
 										imagePreview = addonInPanelHeaderURL;
 									}
 								"
@@ -208,7 +208,7 @@ export default {
 			imagePreview: "",
 			dialogAddon: {},
 			dialogOpen: false,
-
+			previewOpen: false,
 			addonInPanelLoading: true,
 			addonInPanel: {},
 			addonURL: undefined,