Implement navigation in image viewer.

This commit is contained in:
Richard Lewis 2020-03-09 18:39:05 +02:00
parent e5596d9d81
commit ef473b0f53
3 changed files with 58 additions and 0 deletions

View File

@ -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();
},

View File

@ -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() {

View File

@ -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>