refs #143 Open images in modal window when click the preview

This commit is contained in:
AkiraFukushima 2018-03-28 09:57:21 +09:00
parent ec2afb4c9f
commit d534983ac6
6 changed files with 116 additions and 3 deletions

View File

@ -11,6 +11,7 @@
</div>
<new-toot-modal></new-toot-modal>
<jump-modal></jump-modal>
<image-viewer></image-viewer>
</div>
</template>
@ -19,10 +20,11 @@ import SideMenu from './TimelineSpace/SideMenu'
import HeaderMenu from './TimelineSpace/HeaderMenu'
import NewTootModal from './TimelineSpace/NewTootModal'
import JumpModal from './TimelineSpace/JumpModal'
import ImageViewer from './TimelineSpace/Modals/ImageViewer'
export default {
name: 'timeline-space',
components: { SideMenu, HeaderMenu, NewTootModal, JumpModal },
components: { SideMenu, HeaderMenu, NewTootModal, JumpModal, ImageViewer },
created () {
const loading = this.$loading({
lock: true,

View File

@ -15,7 +15,7 @@
<div class="content" v-html="message.content" @click.capture.prevent="tootClick"></div>
<div class="attachments">
<div class="media" v-for="media in originalMessage(message).media_attachments">
<img :src="media.preview_url" />
<img :src="media.preview_url" @click="openImage(media.url)"/>
</div>
</div>
<div class="reblogger" v-if="message.reblog !== null">
@ -127,6 +127,9 @@ export default {
})
})
}
},
openImage (url) {
this.$store.dispatch('TimelineSpace/Modals/ImageViewer/openModal', url)
}
}
}
@ -195,6 +198,7 @@ function findLink (target) {
.attachments {
.media {
img {
cursor: zoom-in;
width: 200px;
max-width: 100%;
border-radius: 8px;

View File

@ -0,0 +1,68 @@
<template>
<div id="image" v-if="modalOpen">
<div class="image-wrapper">
<div class="image-header">
<i class="el-icon-close" @click="close"></i>
</div>
<div class="image-content">
<img :src="imageURL">
</div>
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'image-viewer',
computed: {
...mapState({
modalOpen: state => state.TimelineSpace.Modals.ImageViewer.modalOpen,
imageURL: state => state.TimelineSpace.Modals.ImageViewer.imageURL
})
},
methods: {
close () {
this.$store.dispatch('TimelineSpace/Modals/ImageViewer/closeModal')
}
}
}
</script>
<style lang="scss" scoped>
.image-wrapper {
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
.image-header {
width: 100%;
text-align: right;
padding: 8px 8px 0 0 ;
color: #409eff;
box-sizing: border-box;
font-size: 18px;
i {
font-weight: 800;
cursor: pointer;
}
}
.image-content {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
img {
max-width: 80%;
}
}
}
</style>

View File

@ -9,6 +9,7 @@ import Public from './TimelineSpace/Public'
import Cards from './TimelineSpace/Cards'
import NewTootModal from './TimelineSpace/NewTootModal'
import JumpModal from './TimelineSpace/JumpModal'
import Modals from './TimelineSpace/Modals'
import router from '../router'
const TimelineSpace = {
@ -22,7 +23,8 @@ const TimelineSpace = {
Public,
Cards,
NewTootModal,
JumpModal
JumpModal,
Modals
},
state: {
account: {

View File

@ -0,0 +1,10 @@
import ImageViewer from './Modals/ImageViewer'
const Modals = {
namespaced: true,
modules: {
ImageViewer
}
}
export default Modals

View File

@ -0,0 +1,27 @@
const ImageViewer = {
namespaced: true,
state: {
modalOpen: false,
imageURL: ''
},
mutations: {
changeModal (state, value) {
state.modalOpen = value
},
changeImageURL (state, url) {
state.imageURL = url
}
},
actions: {
openModal ({ commit }, url) {
commit('changeModal', true)
commit('changeImageURL', url)
},
closeModal ({ commit }) {
commit('changeModal', false)
commit('changeImageURL', '')
}
}
}
export default ImageViewer