Start porting image viewer to Vue

This commit is contained in:
Pavel Djundik 2019-09-20 21:10:48 +03:00
parent 2d8417cd8b
commit 70a795dced
6 changed files with 77 additions and 26 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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