Start porting image viewer to Vue

client/components/App.vue

@@ -10,6 +10,7 @@
 			/>
 			<component :is="$store.state.activeWindow" ref="window" />
 		</article>
+		<ImageViewer ref="imageViewer" />
 	</div>
 </template>
 
@@ -19,6 +20,7 @@ const throttle = require("lodash/throttle");
 import Sidebar from "./Sidebar.vue";
 import NetworkList from "./NetworkList.vue";
 import Chat from "./Chat.vue";
+import ImageViewer from "./ImageViewer.vue";
 import SignIn from "./Windows/SignIn.vue";
 import Settings from "./Windows/Settings.vue";
 import NetworkEdit from "./Windows/NetworkEdit.vue";
@@ -31,6 +33,7 @@ export default {
 	components: {
 		Sidebar,
 		NetworkList,
+		ImageViewer,
 		Chat,
 		SignIn,
 		Settings,

client/components/ImageViewer.vue

@@ -0,0 +1,60 @@
+<template>
+	<div id="image-viewer" ref="viewer" :class="{opened: link !== null}" @click="closeViewer">
+		<template v-if="link !== null">
+			<button class="close-btn" aria-label="Close"></button>
+
+			<!--button
+			v-if="hasPreviousImage"
+			class="previous-image-btn"
+			aria-label="Previous image"
+		></button>
+		<button v-if="hasNextImage" class="next-image-btn" aria-label="Next image"></button-->
+
+			<a class="image-link" :href="link.link" target="_blank">
+				<img :src="link.thumb" decoding="async" alt="" />
+			</a>
+
+			<a class="btn open-btn" :href="link.link" target="_blank">
+				<span v-if="link.type == 'image'">Open image</span>
+				<span v-else>Visit page</span>
+			</a>
+		</template>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "ImageViewer",
+	data() {
+		return {
+			link: null,
+		};
+	},
+	computed: {
+		computeImageStyles() {
+			return {
+				left: `${this.position.x}px`,
+				top: `${this.position.y}px`,
+				transform: `translate3d(${this.transform.x}px, ${this.transform.y}px, 0) scale3d(${this.transform.scale}, ${this.transform.scale}, 1)`,
+			};
+		},
+	},
+	watch: {
+		link() {
+			// TODO: history.pushState
+		},
+	},
+	mounted() {
+		document.addEventListener("keydown", (e) => {
+			if (e.code === "Escape") {
+				this.closeViewer();
+			}
+		});
+	},
+	methods: {
+		closeViewer() {
+			this.link = null;
+		},
+	},
+};
+</script>

client/components/LinkPreview.vue

@@ -11,6 +11,7 @@
 					class="toggle-thumbnail"
 					target="_blank"
 					rel="noopener"
+					@click="onThumbnailClick"
 				>
 					<img
 						:src="link.thumb"
@@ -54,7 +55,13 @@
 				</div>
 			</template>
 			<template v-else-if="link.type === 'image'">
-				<a :href="link.link" class="toggle-thumbnail" target="_blank" rel="noopener">
+				<a
+					:href="link.link"
+					class="toggle-thumbnail"
+					target="_blank"
+					rel="noopener"
+					@click="onThumbnailClick"
+				>
 					<img :src="link.thumb" decoding="async" alt="" @load="onPreviewReady" />
 				</a>
 			</template>
@@ -173,6 +180,12 @@ export default {
 			this.link.thumb = "";
 			this.onPreviewReady();
 		},
+		onThumbnailClick(e) {
+			e.preventDefault();
+
+			const imageViewer = this.$root.$refs.app.$refs.imageViewer;
+			imageViewer.link = this.link;
+		},
 		onMoreClick() {
 			this.isContentShown = !this.isContentShown;
 			this.keepScrollPosition();

client/components/Message.vue

@@ -100,9 +100,6 @@ export default {
 			return "message-" + this.message.type;
 		},
 	},
-	mounted() {
-		require("../js/renderPreview");
-	},
 	methods: {
 		isAction() {
 			return typeof MessageTypes["message-" + this.message.type] !== "undefined";

client/index.html.tpl

@@ -65,7 +65,6 @@
 		<div id="viewport"></div>
 
 		<div id="context-menu-container"></div>
-		<div id="image-viewer"></div>
 		<div id="upload-overlay"></div>
 
 		<script src="js/bundle.vendor.js?v=<%- cacheBust %>"></script>

client/views/image_viewer.tpl

@@ -1,21 +0,0 @@
-<button class="close-btn" aria-label="Close"></button>
-
-{{#if hasPreviousImage}}
-  <button class="previous-image-btn" aria-label="Previous image"></button>
-{{/if}}
-
-{{#if hasNextImage}}
-  <button class="next-image-btn" aria-label="Next image"></button>
-{{/if}}
-
-<a class="image-link" href="{{link}}" target="_blank">
-  <img src="{{image}}" decoding="async" alt="">
-</a>
-
-<a class="btn open-btn" href="{{link}}" target="_blank">
-  {{#equal type "image"}}
-    Open image
-  {{else}}
-    Visit page
-  {{/equal}}
-</a>