move image list

This commit is contained in:
nasum 2018-04-27 19:15:14 +09:00
parent 74c8d95541
commit 2e51c1c4ee
3 changed files with 78 additions and 13 deletions

View File

@ -15,8 +15,8 @@
</div>
<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" @click="openImage(media.url)"/>
<div class="media" v-for="media in mediaAttachements(message)">
<img :src="media.preview_url" @click="openImage(media.url, mediaAttachements(message))"/>
</div>
<div class="clearfix"></div>
</div>
@ -181,13 +181,25 @@ export default {
})
}
},
openImage (url) {
this.$store.dispatch('TimelineSpace/Modals/ImageViewer/openModal', url)
openImage (url, rawMediaList) {
const mediaList = rawMediaList.map((media) => {
return media.url
})
const currentIndex = mediaList.indexOf(url)
this.$store.dispatch(
'TimelineSpace/Modals/ImageViewer/openModal',
{
currentIndex: currentIndex,
mediaList: mediaList
})
},
openUser (account) {
this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
},
mediaAttachements (message) {
return this.originalMessage(message).media_attachments
}
}
}

View File

@ -6,7 +6,9 @@
<el-button type="text" icon="el-icon-close" @click="close" class="close-button"></el-button>
</div>
<div class="image-content">
<span class="button-area"><el-button type="text" v-show="!isFirst"><i class="el-icon-arrow-left" @click.stop="decrementIndex"></i></el-button></span>
<img :src="imageURL">
<span class="button-area"><el-button type="text" v-show="!isLast"><i class="el-icon-arrow-right" @click.stop="incrementIndex"></i></el-button></span>
</div>
</div>
</div>
@ -20,9 +22,17 @@ export default {
name: 'image-viewer',
computed: {
...mapState({
modalOpen: state => state.TimelineSpace.Modals.ImageViewer.modalOpen,
imageURL: state => state.TimelineSpace.Modals.ImageViewer.imageURL
})
modalOpen: state => state.TimelineSpace.Modals.ImageViewer.modalOpen
}),
imageURL () {
return this.$store.getters['TimelineSpace/Modals/ImageViewer/imageURL']
},
isFirst () {
return this.$store.getters['TimelineSpace/Modals/ImageViewer/isFirst']
},
isLast () {
return this.$store.getters['TimelineSpace/Modals/ImageViewer/isLast']
}
},
updated () {
if (this.modalOpen) {
@ -32,6 +42,12 @@ export default {
methods: {
close () {
this.$store.dispatch('TimelineSpace/Modals/ImageViewer/closeModal')
},
decrementIndex () {
this.$store.dispatch('TimelineSpace/Modals/ImageViewer/decrementIndex')
},
incrementIndex () {
this.$store.dispatch('TimelineSpace/Modals/ImageViewer/incrementIndex')
}
}
}
@ -80,4 +96,12 @@ export default {
.image-viewer-enter, .image-viewer-leave-to {
opacity: 0;
}
.button-area {
display: inline-block;
width: 52px;
height: 77px;
i {
font-size: 50px;
}
}
</style>

View File

@ -2,24 +2,53 @@ const ImageViewer = {
namespaced: true,
state: {
modalOpen: false,
imageURL: ''
currentIndex: 0,
mediaList: []
},
mutations: {
changeModal (state, value) {
state.modalOpen = value
},
changeImageURL (state, url) {
state.imageURL = url
changeCurrentIndex (state, currentIndex) {
state.currentIndex = currentIndex
},
changeMedliaList (state, mediaList) {
state.mediaList = mediaList
},
incrementIndex (state) {
state.currentIndex++
},
decrementIndex (state) {
state.currentIndex--
}
},
actions: {
openModal ({ commit }, url) {
openModal ({ commit }, { currentIndex, mediaList }) {
commit('changeModal', true)
commit('changeImageURL', url)
commit('changeCurrentIndex', currentIndex)
commit('changeMedliaList', mediaList)
},
closeModal ({ commit }) {
commit('changeModal', false)
commit('changeImageURL', '')
commit('changeCurrentIndex', 0)
commit('changeMedliaList', [])
},
incrementIndex ({ commit }) {
commit('incrementIndex')
},
decrementIndex ({ commit }) {
commit('decrementIndex')
}
},
getters: {
imageURL (state) {
return state.mediaList[state.currentIndex]
},
isFirst (state) {
return state.currentIndex === 0 && state.mediaList.length > 1
},
isLast (state) {
return state.currentIndex === (state.mediaList.length - 1) && state.mediaList.length > 1
}
}
}