move image list

src/renderer/components/TimelineSpace/Contents/Cards/Toot.vue

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

src/renderer/components/TimelineSpace/Modals/ImageViewer.vue

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

src/renderer/store/TimelineSpace/Modals/ImageViewer.js

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