vue-wp/vue-theme/src/pages/single.vue

<template lang="pug">
.page--single.f-row.between(v-if="$route.params.slug")
    gallery(:fullscreengallery="fullscreengallery" v-on:close="fullscreengallery = -1" :images="images")
    article.f-grow.shadow
        header
            h1 {{ type }}:{{ $route.params.slug }} single
        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")
    sidebar(v-if="sidebar" :type="`${type}`")
        .shadow
            h1.t-up single slot
            div
                p body whatever
</template>

<script>
import { mapGetters } from 'vuex'
import sidebar from '@/components/sidebars/sidebar'
import gallery from '@/components/gallery/'

export default {
    props: {
        sidebar: {
            type: Boolean
        }
    },
    components: {
        sidebar: sidebar,
        gallery: gallery
    },
    data() {
        return {
            images: [], 
            fullscreengallery: -1
        }
    },
    computed: {
        ...mapGetters({
            allPages: 'allPages',
            allPagesLoaded: 'allPagesLoaded',

            allPosts: 'allPosts',
            allPostsLoaded: 'allPostsLoaded',

            allArtists: 'allArtists',
            allArtistsLoaded: 'allArtistsLoaded',

            allEpisodes: 'allEpisodes',
            allEpisodesLoaded: 'allEpisodesLoaded',
        }),
        type() { // Checks for type and fixes Episodes route edge case 
            return this.$route.params.type ? this.$route.params.type : this.$route.fullPath.slice(1)
        },
        posts() {
            let type = this.type.charAt(0).toUpperCase() + this.type.slice(1)

            // Return list keyed by slug
            return Object.values(this[`all${type}`]).reduce((postsMap, post) => { 
                postsMap[post.slug] = post
                return postsMap
            }, {})
        }
    },
    methods: {
        pageBlocks(posts) {
            return posts[this.$route.params.slug].blocks.map(block => {
                if(block) return block
            })
        },
        checkForImages(posts) {
            this.pageBlocks(posts).forEach(block => {
                if(!block) return
                const doc = new DOMParser().parseFromString(block, 'text/html')
                const gallery = doc.querySelectorAll('.blocks-gallery-item img')
                // add captions
                if(gallery.length) {
                    this.images = [].slice.call(gallery).map(
                        item => { return item.src }
                    )
                }
            })
        }
    },
    watch: {
        posts(newVal, oldVal) { 
            // Loads images from the DOM
            this.checkForImages(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.length < 1) return

                gallery.forEach((item, i) => {
                    item.addEventListener('mouseup', event => { this.fullscreengallery = i })
                })
            })
        }
    },
    created() {
        // TODO: Only makes req if this hasn't been loaded yet
        let type = this.$route.params.type
        type = type.charAt(0).toUpperCase() + type.slice(1)
        this.$store.dispatch(`getAll${type}`)
    }
}
</script>