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" />
|
<component :is="$store.state.activeWindow" ref="window" />
|
||||||
</article>
|
</article>
|
||||||
|
<ImageViewer ref="imageViewer" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -19,6 +20,7 @@ const throttle = require("lodash/throttle");
|
|||||||
import Sidebar from "./Sidebar.vue";
|
import Sidebar from "./Sidebar.vue";
|
||||||
import NetworkList from "./NetworkList.vue";
|
import NetworkList from "./NetworkList.vue";
|
||||||
import Chat from "./Chat.vue";
|
import Chat from "./Chat.vue";
|
||||||
|
import ImageViewer from "./ImageViewer.vue";
|
||||||
import SignIn from "./Windows/SignIn.vue";
|
import SignIn from "./Windows/SignIn.vue";
|
||||||
import Settings from "./Windows/Settings.vue";
|
import Settings from "./Windows/Settings.vue";
|
||||||
import NetworkEdit from "./Windows/NetworkEdit.vue";
|
import NetworkEdit from "./Windows/NetworkEdit.vue";
|
||||||
@ -31,6 +33,7 @@ export default {
|
|||||||
components: {
|
components: {
|
||||||
Sidebar,
|
Sidebar,
|
||||||
NetworkList,
|
NetworkList,
|
||||||
|
ImageViewer,
|
||||||
Chat,
|
Chat,
|
||||||
SignIn,
|
SignIn,
|
||||||
Settings,
|
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"
|
class="toggle-thumbnail"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener"
|
rel="noopener"
|
||||||
|
@click="onThumbnailClick"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
:src="link.thumb"
|
:src="link.thumb"
|
||||||
@ -54,7 +55,13 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="link.type === 'image'">
|
<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" />
|
<img :src="link.thumb" decoding="async" alt="" @load="onPreviewReady" />
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
@ -173,6 +180,12 @@ export default {
|
|||||||
this.link.thumb = "";
|
this.link.thumb = "";
|
||||||
this.onPreviewReady();
|
this.onPreviewReady();
|
||||||
},
|
},
|
||||||
|
onThumbnailClick(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const imageViewer = this.$root.$refs.app.$refs.imageViewer;
|
||||||
|
imageViewer.link = this.link;
|
||||||
|
},
|
||||||
onMoreClick() {
|
onMoreClick() {
|
||||||
this.isContentShown = !this.isContentShown;
|
this.isContentShown = !this.isContentShown;
|
||||||
this.keepScrollPosition();
|
this.keepScrollPosition();
|
||||||
|
@ -100,9 +100,6 @@ export default {
|
|||||||
return "message-" + this.message.type;
|
return "message-" + this.message.type;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
|
||||||
require("../js/renderPreview");
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
isAction() {
|
isAction() {
|
||||||
return typeof MessageTypes["message-" + this.message.type] !== "undefined";
|
return typeof MessageTypes["message-" + this.message.type] !== "undefined";
|
||||||
|
@ -65,7 +65,6 @@
|
|||||||
<div id="viewport"></div>
|
<div id="viewport"></div>
|
||||||
|
|
||||||
<div id="context-menu-container"></div>
|
<div id="context-menu-container"></div>
|
||||||
<div id="image-viewer"></div>
|
|
||||||
<div id="upload-overlay"></div>
|
<div id="upload-overlay"></div>
|
||||||
|
|
||||||
<script src="js/bundle.vendor.js?v=<%- cacheBust %>"></script>
|
<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