From ef473b0f53c3276fda78b5dd4eff293c69be68ec Mon Sep 17 00:00:00 2001
From: Richard Lewis <richrd.lewis@gmail.com>
Date: Mon, 9 Mar 2020 18:39:05 +0200
Subject: [PATCH 1/2] Implement navigation in image viewer.

---
 client/components/ImageViewer.vue | 54 +++++++++++++++++++++++++++++++
 client/components/LinkPreview.vue |  2 ++
 client/components/Message.vue     |  2 ++
 3 files changed, 58 insertions(+)

diff --git a/client/components/ImageViewer.vue b/client/components/ImageViewer.vue
index 53fc3f13..c52d5211 100644
--- a/client/components/ImageViewer.vue
+++ b/client/components/ImageViewer.vue
@@ -9,6 +9,20 @@
 	>
 		<template v-if="link !== null">
 			<button class="close-btn" aria-label="Close"></button>
+
+			<button
+				v-if="previousImage"
+				class="previous-image-btn"
+				aria-label="Previous image"
+				@click.stop="previous"
+			></button>
+			<button
+				v-if="nextImage"
+				class="next-image-btn"
+				aria-label="Next image"
+				@click.stop="next"
+			></button>
+
 			<a class="open-btn" :href="link.link" target="_blank" rel="noopener"></a>
 
 			<img
@@ -25,11 +39,17 @@
 </template>
 
 <script>
+import Mousetrap from "mousetrap";
+
 export default {
 	name: "ImageViewer",
 	data() {
 		return {
 			link: null,
+			previousImage: null,
+			nextImage: null,
+			channel: null,
+
 			position: {
 				x: 0,
 				y: 0,
@@ -62,14 +82,20 @@ export default {
 				return;
 			}
 
+			this.setPrevNextImages();
+
 			this.$root.$on("resize", this.correctPosition);
 		},
 	},
 	mounted() {
 		this.$root.$on("escapekey", this.closeViewer);
+		Mousetrap.bind("left", this.previous);
+		Mousetrap.bind("right", this.next);
 	},
 	destroyed() {
 		this.$root.$off("escapekey", this.closeViewer);
+		Mousetrap.unbind("left", this.previous);
+		Mousetrap.unbind("right", this.next);
 	},
 	methods: {
 		closeViewer() {
@@ -78,8 +104,36 @@ export default {
 			}
 
 			this.$root.$off("resize", this.correctPosition);
+			this.channel = null;
+			this.previousImage = null;
+			this.nextImage = null;
 			this.link = null;
 		},
+		setPrevNextImages() {
+			if (!this.channel) {
+				return null;
+			}
+
+			const links = this.channel.messages
+				.map((msg) => msg.previews)
+				.flat()
+				.filter((preview) => preview.thumb);
+
+			const currentIndex = links.indexOf(this.link);
+
+			this.previousImage = links[currentIndex - 1] || null;
+			this.nextImage = links[currentIndex + 1] || null;
+		},
+		previous() {
+			if (this.previousImage) {
+				this.link = this.previousImage;
+			}
+		},
+		next() {
+			if (this.nextImage) {
+				this.link = this.nextImage;
+			}
+		},
 		onImageLoad() {
 			this.prepareImage();
 		},
diff --git a/client/components/LinkPreview.vue b/client/components/LinkPreview.vue
index b38f8cbb..9ccce2e3 100644
--- a/client/components/LinkPreview.vue
+++ b/client/components/LinkPreview.vue
@@ -137,6 +137,7 @@ export default {
 	props: {
 		link: Object,
 		keepScrollPosition: Function,
+		channel: Object,
 	},
 	data() {
 		return {
@@ -214,6 +215,7 @@ export default {
 			e.preventDefault();
 
 			const imageViewer = this.$root.$refs.app.$refs.imageViewer;
+			imageViewer.channel = this.channel;
 			imageViewer.link = this.link;
 		},
 		onMoreClick() {
diff --git a/client/components/Message.vue b/client/components/Message.vue
index 20aef6f5..96bdafcf 100644
--- a/client/components/Message.vue
+++ b/client/components/Message.vue
@@ -32,6 +32,7 @@
 					:key="preview.link"
 					:keep-scroll-position="keepScrollPosition"
 					:link="preview"
+					:channel="channel"
 				/>
 			</span>
 		</template>
@@ -70,6 +71,7 @@
 					:key="preview.link"
 					:keep-scroll-position="keepScrollPosition"
 					:link="preview"
+					:channel="channel"
 				/>
 			</span>
 		</template>

From 64aa510abf6d260ce964827249ca6476358f676f Mon Sep 17 00:00:00 2001
From: Pavel Djundik <xPaw@users.noreply.github.com>
Date: Tue, 10 Mar 2020 15:36:58 +0200
Subject: [PATCH 2/2] Bind events in image viewer only once

---
 client/components/ImageViewer.vue | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/client/components/ImageViewer.vue b/client/components/ImageViewer.vue
index c52d5211..4aa1aa84 100644
--- a/client/components/ImageViewer.vue
+++ b/client/components/ImageViewer.vue
@@ -76,34 +76,32 @@ export default {
 		},
 	},
 	watch: {
-		link() {
+		link(newLink, oldLink) {
 			// TODO: history.pushState
-			if (this.link === null) {
+			if (newLink === null) {
+				this.$root.$off("escapekey", this.closeViewer);
+				this.$root.$off("resize", this.correctPosition);
+				Mousetrap.unbind("left", this.previous);
+				Mousetrap.unbind("right", this.next);
 				return;
 			}
 
 			this.setPrevNextImages();
 
-			this.$root.$on("resize", this.correctPosition);
+			if (!oldLink) {
+				this.$root.$on("escapekey", this.closeViewer);
+				this.$root.$on("resize", this.correctPosition);
+				Mousetrap.bind("left", this.previous);
+				Mousetrap.bind("right", this.next);
+			}
 		},
 	},
-	mounted() {
-		this.$root.$on("escapekey", this.closeViewer);
-		Mousetrap.bind("left", this.previous);
-		Mousetrap.bind("right", this.next);
-	},
-	destroyed() {
-		this.$root.$off("escapekey", this.closeViewer);
-		Mousetrap.unbind("left", this.previous);
-		Mousetrap.unbind("right", this.next);
-	},
 	methods: {
 		closeViewer() {
 			if (this.link === null) {
 				return;
 			}
 
-			this.$root.$off("resize", this.correctPosition);
 			this.channel = null;
 			this.previousImage = null;
 			this.nextImage = null;