Start porting image viewer to Vue
This commit is contained in:
parent
2d8417cd8b
commit
70a795dced
@ -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,
|
||||
|
60
client/components/ImageViewer.vue
Normal file
60
client/components/ImageViewer.vue
Normal 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>
|
@ -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();
|
||||
|
@ -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";
|
||||
|
@ -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>
|
||||
|
@ -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>
|
Loading…
Reference in New Issue
Block a user