:poop: starting to redo galleries based on new endpoints

vue-theme/src/pages/single.vue

@@ -5,10 +5,18 @@
     article.f-grow.shadow
         header
             h1 {{ type }}:{{ $route.params.slug }} single
+            p {{galleries}}
+            p categories: 
+                span(v-for="category in posts[$route.params.slug].categories") {{ category }} 
         section(v-if="posts[$route.params.slug]")
             h4 {{ posts[$route.params.slug].title }}
-            .block-wrapper(v-for="block in posts[$route.params.slug].blocks" v-html="block")
-    
+            .block-wrapper(v-for="block in posts[$route.params.slug].blocks")
+                    .block(v-if="typeof block === 'object'")
+                        p gallery {{ block.gallery + 1 }}: 
+                        ul
+                            li(v-for="imageID in posts[$route.params.slug].galleries[block.gallery].ids") image: {{ imageID }}
+                    .block(v-else v-html="block")
+
     sidebar(v-if="sidebar" :type="`${type}`")
         .shadow
             h1.t-up single slot
@@ -53,6 +61,10 @@ export default {
         type() { // Checks for type and fixes Episodes route edge case 
             return typeFromRoute(this.$route)
         },
+        galleries() {
+            if(!this.posts || !this.$route || !this.posts[this.$route.params.slug]) return
+            return this.posts[this.$route.params.slug].galleries[block.gallery].ids
+        },
         posts() {
             let type = convertTitleCase(this.type)
             
@@ -100,28 +112,12 @@ export default {
             this.checkForImages(newVal)
             
             this.checkAndSetHero(newVal)
-            
-            // Gottas be on the next render tick
-            this.$nextTick(() => {
-                let gallery
-                this.pageBlocks(newVal).forEach(block => {
-                    if(!block) return
-                    gallery = document.querySelectorAll('.blocks-gallery-item figure')
-                })
-                
-                if(!gallery || gallery.length < 1) return
-
-                gallery.forEach((item, i) => {
-                    item.addEventListener('mouseup', event => { 
-                        this.fullscreengallery = i
-                    })
-                })
-            })
-            
+            console.log(this.galleries)
         }
     },
     created() {
         let type = convertTitleCase(this.$route.params.type)
+
         if(!this[`all{type}Loaded`]) {
             // console.log('Retrieving...', type)
             this.$store.dispatch(`getAll${type}`)

vue-theme/src/store/index.js

@@ -9,7 +9,7 @@ import page from './modules/page'
 import post from './modules/post'
 import artist from './modules/artist'
 import episode from './modules/episode'
-
+import media from './modules/media'
 
 const debug = process.env.NODE_ENV !== 'production'
 
@@ -45,7 +45,8 @@ const store = new Vuex.Store({
       post,
       page,
       artist,
-      episode
+      episode,
+      media
   },
   strict: debug,
 })

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

@@ -0,0 +1,32 @@
+import api from '../../utils/api'
+
+const state = {
+    all: {},
+    loaded: false,
+}
+
+const getters = {
+    allArtists: state => state.all,
+    allArtistsLoaded: state => state.loaded,
+}
+
+const actions = {
+    getMediaById({ commit }, ids) {
+        commit('CLEAR_MEDIA')
+        commit('MEDIA_LOADED', false)
+        ids.forEach(id => {
+            api.getSingleMedia(id, media => {
+                commit('STORE_FETCHED_MEDIA', { media })
+            })
+        })
+        commit('MEDIA_LOADED', true) 
+    }
+}
+
+const mutations = {
+    STORE_FETCHED_MEDIA(state, { media }) { state.all = media },
+    CLEAR_MEDIA(state) { state.all = [] },
+    MEDIA_LOADED(state, val) { state.loaded = val },
+}
+
+export default { state, getters, actions, mutations }

vue-theme/src/utils/api.js

@@ -3,6 +3,7 @@ import axios from 'axios'
 const SETTINGS = { 
     LOADING_SEGMENTS: 2,
     API_BASE_PATH: '/wp-json/craft/v2/',
+    API_MEDIA_PATH: '/wp-json/wp/v2/media/',
 }
 
 export default {
@@ -19,6 +20,12 @@ export default {
             }).catch(e => { cb(e) })
         }
     },
+    getSingleMedia(id) {
+        axios.get(SETTINGS.API_MEDIA_PATH + `${id}`).then(response => {
+            cb(response.data)
+        }).catch(e => { cb(e) })
+    },
+
     getPosts(limit = 5, cb) {
         axios
         .get(SETTINGS.API_BASE_PATH + 'posts')