:recycle: making galleries display images again

vue-theme/src/components/gallery.vue

@@ -3,13 +3,13 @@
     button(@click="hideGallery").hide hide
 
     figure.f-col.center
-        img(v-if="selectedImageUrl" :src="selectedImageUrl")
-        p placeholder caption
+        img(v-if="Object.values(images).length > 0" :src="Object.values(images)[selected]['large']")
+        p active: {{ selected }}
 
     .controls.f-row
-        button(@click="prev") left
+        button(v-if="selected > 0" @click="prev") previous
         .f-grow
-        button(@click="next") right
+        button(v-if="selected < Object.values(images).length - 1" @click="next") next
 </template>
 
 <script>
@@ -17,37 +17,20 @@ import { mapGetters } from 'vuex'
 
 export default {
     props: {
-        imageIds: { type: Array, required: true },
-        activeImageIndex: { type: Number, default: 0 },
-        imageSizes: { required: true }
+        activeImageIndex: { type: Number, required: true, default: 0 },
+        images: { type: Object, required: true }
     },
     data() { 
         return {
             selected: 0
         }
     },
-    computed:{
-        selectedImageId() {
-            return this.imageIds[this.selected]
-        },
-        selectedImageUrl() {
-            const image = this.imageSizes[this.selectedImageId]
-            if(!image) return
-            return image.large
-        }
-    },
-    computed: {
-        ...mapGetters({
-            allMedia: 'allMedia',
-            allMediaLoaded: 'allMediaLoaded',
-        })
-    },
     methods: {
         prev() {
-            this.selected > 0 ? this.selected-- : this.selected = this.imageIds.length - 1
+            this.selected > 0 ? this.selected-- : this.selected = Object.keys(this.images).length - 1
         },
         next() {
-            this.selected < this.imageIds.length - 1 ? this.selected++ : this.selected = 0
+            this.selected < Object.keys(this.images).length - 1 ? this.selected++ : this.selected = 0
         },
         hideGallery() {
             this.$emit('close')
@@ -74,7 +57,6 @@ export default {
     async mounted() {
         // Set the first selection
         this.selected = this.activeImageIndex
-        this.$store.dispatch(`getMediaById`, this.imageIds)
         window.addEventListener('keydown', this.interpretKeypress)
     },
     unmounted() {

vue-theme/src/pages/single.vue

@@ -7,18 +7,18 @@
 
         .post-single.block-wrapper(v-for="(block, i) in post.blocks" :key="`block-${i}`")
             //- ?: are objects are always gallery blocks
-            .gallery.block(v-if="typeof block === 'object'")
+            .gallery.block(v-if="typeof block === 'object'" :class="`gallery-${i}`")
                 p gallery number: {{ i }}
                 ul
-                    li(v-for="(imageID, j) in post.galleries[block.gallery].ids") 
-                        button(@click="openGallery(i - 1, j)") gallery: {{ i }} image: {{ imageID }}
+                    li(v-for="(imageID, j) in post.galleries[block.gallery].ids" :class="`gallery-${i}--image-${j+1}`" :key="`block-${i}-${j}`")
+                        img(@click="openGallery(i - 1, imageID)" :src="post.attached[imageID]['thumbnail']")
+                        button(@click="openGallery(i - 1, imageID)") gallery: {{ i }} image: {{ imageID }}
                 //- Fullscreen gallery
                 gallery(
                     v-if="activeGalleryIndex == (i - 1)"
-                    :image-ids="post.galleries[block.gallery].ids"
                     :activeImageIndex="activeImageIndex"
                     v-on:close="activeGalleryIndex = -1"
-                    :image-sizes="post.attached"
+                    :images="imagesInGallery"
                 )
 
             //- Just a regular block
@@ -49,7 +49,7 @@ export default {
         return {
             images: [], 
             activeGalleryIndex: -1,
-            activeImageIndex: -1
+            activeImageID: -1
         }
     },
     computed: {
@@ -82,13 +82,23 @@ export default {
                 postsMap[post.slug] = post
                 return postsMap
             }, {})
+        },
+        imagesInGallery() {
+            if(!this.activeGalleryIndex < 0) return {}
+            
+            return this.post.galleries[this.activeGalleryIndex].ids.reduce((imageMap, id) => {
+                imageMap[id] = this.post.attached[id]
+                return imageMap
+            }, {})
+        },
+        activeImageIndex() {
+            return Object.keys(this.imagesInGallery).indexOf(this.activeImageID.toString())
         }
     },
     methods: {
         openGallery(galleryIndex, imageID) {
             this.activeGalleryIndex = galleryIndex
-            this.activeImageIndex = imageID ? imageID : 0
-            // console.log(this.post.galleries[galleryIndex])
+            this.activeImageID = imageID ? imageID : 0
         },
         checkAndSetHero(posts) {
             const post = posts[this.$route.params.slug]
@@ -96,14 +106,6 @@ export default {
 
             const json = JSON.parse(post.hero)
             this.$store.commit('SET_HERO', json)
-        },
-        async checkAndSetImages(posts) {
-            const post = posts[this.$route.params.slug]
-            if(!post || ! post.attached) return
-
-            const imagesAttached = post.attached
-            await this.$store.dispatch(`getMediaById`, imagesAttached)
-            console.log(this.$store.media)
         }
     },
     watch: {
@@ -112,7 +114,6 @@ export default {
             // this.checkForImages(newVal)
             
             this.checkAndSetHero(newVal)
-            this.checkAndSetImages(newVal)
         }
     },
     created() {

vue-theme/src/store/modules/media.js

@@ -1,7 +1,7 @@
 import api from '../../utils/api'
 
 const state = {
-    all: {},
+    all: [],
     loaded: false,
 }
 
@@ -27,7 +27,7 @@ const actions = {
 }
 
 const mutations = {
-    STORE_FETCHED_MEDIA(state, { media }) { state.all = media },
+    STORE_FETCHED_MEDIA(state, { media }) { state.all.push() },
     CLEAR_MEDIA(state) { state.all = [] },
     MEDIA_LOADED(state, val) { state.loaded = val },
 }