:sparkles: galleries fixed for new endpoints

vue-theme/src/components/gallery.vue

@@ -1,6 +1,8 @@
 <template lang="pug">
-.gallery.f-col.center(v-if="showGallery")
+.gallery.active.f-col.center
     button(@click="hideGallery").hide hide
+    p {{ imageIds }}
+    p image: {{ imageIds[selected] }}
     ul
         li(v-for="(image, i) of images" :class="{ active: i === selected }")
             .image-wrapper.f-col.center
@@ -14,25 +16,21 @@
 <script>
 export default {
     props: {
-        images: { type: Array },
-        fullscreengallery: { type: Number },
+        imageIds: { type: Array, required: true },
+        activeImageIndex: { type: Number, default: 0 },
+        activeGalleryIndex: { type: Number },
     },
     data() { 
         return {
             selected: -1
         }
     },
-    computed: {
-        showGallery() {
-            return this.fullscreengallery + 1 > 0
-        }
-    },
     methods: {
         prev() {
-            this.selected > 0 ? this.selected-- : this.selected = this.images.length - 1
+            this.selected > 0 ? this.selected-- : this.selected = this.imageIds.length - 1
         },
         next() {
-            this.selected < this.images.length - 1 ? this.selected++ : this.selected = 0
+            this.selected < this.imageIds.length - 1 ? this.selected++ : this.selected = 0
         },
         hideGallery() {
             this.$emit('close')
@@ -52,13 +50,13 @@ export default {
         }
     },
     watch: {
-        fullscreengallery(newVal, oldVal) {
+        activeImageIndex(newVal, oldVal) {
             this.selected = newVal
         }
     },
     mounted() {
         // Set the first selection
-        this.selected = this.fullscreengallery
+        this.selected = this.activeImageIndex
 
         window.addEventListener('keydown', this.interpretKeypress)
     },
@@ -70,35 +68,36 @@ export default {
 
 <style lang="postcss">
 .gallery
-    position: fixed
-    top: 0
-    left: 0
-    width: 100%
-    height: 100%
-    background-color: black
-    z-index: 1001
-    > *
-        opacity: 100%
-        position: relative
-        z-index: 1011
-    button.hide
-        z-index: 1100
-    ul
-        list-style: none
-        li
-            display: none
-            &.active
-                display: block
-            .image-wrapper
-                height: 100%
-                width: 50vw
-                background-color: yellow
-            h1
-                color: green
-    .controls
-        position: absolute
-        width: 100vw
-        button
-            height: 100vw
-            padding: 1vw
+    &.active
+        position: fixed
+        top: 0
+        left: 0
+        width: 100%
+        height: 100%
+        background-color: black
+        z-index: 1001
+        > *
+            opacity: 100%
+            position: relative
+            z-index: 1011
+        button.hide
+            z-index: 1100
+        ul
+            list-style: none
+            li
+                display: none
+                &.active
+                    display: block
+                .image-wrapper
+                    height: 100%
+                    width: 50vw
+                    background-color: yellow
+                h1
+                    color: green
+        .controls
+            position: absolute
+            width: 100vw
+            button
+                height: 100vw
+                padding: 1vw
 </style>

vue-theme/src/pages/single.vue

@@ -1,27 +1,38 @@
 <template lang="pug">
 .page--single.f-row.between
-    gallery(:fullscreengallery="fullscreengallery" v-on:close="fullscreengallery = -1" :images="images")
-    
     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 }}&nbsp;
-        section(v-if="posts[$route.params.slug]")
-            h4 {{ posts[$route.params.slug].title }}
-            .block-wrapper(v-for="block in posts[$route.params.slug].blocks")
-                    .block(v-if="typeof block === 'object'")
-                        p gallery {{ block.gallery + 1 }}: 
+                span(v-for="category in post.categories") {{ category }}&nbsp;
+
+        section(v-if="post")
+            h4 {{ post.title }}
+            p {{ activeGalleryIndex }}
+            .block-wrapper(v-for="(block, i) in post.blocks")
+                    //- ?: are objects are always gallery blocks
+                    .gallery.block(v-if="typeof block === 'object'")
+                        p gallery number: {{ i }}
                         ul
-                            li(v-for="imageID in posts[$route.params.slug].galleries[block.gallery].ids") image: {{ imageID }}
+                            li(v-for="(imageID, j) in post.galleries[block.gallery].ids") 
+                                button(@click="openGallery(i - 1, j)") gallery: {{ i }} image: {{ imageID }}
+                        //- Fullscreen gallery
+                        gallery(
+                            v-if="activeGalleryIndex == (i - 1)"
+                            :activeGalleryIndex="activeGalleryIndex"
+                            :image-ids="post.galleries[block.gallery].ids"
+                            :activeImageIndex="activeImageIndex"
+                            v-on:close="activeGalleryIndex = -1"
+                        )
+
+                    //- Just a regular block
                     .block(v-else v-html="block")
 
-    sidebar(v-if="sidebar" :type="`${type}`")
-        .shadow
-            h1.t-up single slot
-            div
-                p body whatever
+    //- sidebar(v-if="sidebar" :type="`${type}`")
+    //-     .shadow
+    //-         h1.t-up single slot
+    //-         div
+    //-             p body whatever
 </template>
 
 <script>
@@ -41,10 +52,14 @@ export default {
     data() {
         return {
             images: [], 
-            fullscreengallery: -1
+            activeGalleryIndex: -1,
+            activeImageIndex: -1
         }
     },
     computed: {
+        post() {
+            return this.posts[this.$route.params.slug]
+        },
         ...mapGetters({
             allPages: 'allPages',
             allPagesLoaded: 'allPagesLoaded',
@@ -61,10 +76,6 @@ 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)
             
@@ -78,25 +89,10 @@ export default {
         }
     },
     methods: {
-        pageBlocks(posts) {
-            if(!posts || !posts[this.$route.params.slug] || !posts[this.$route.params.slug].blocks ) return []
-            
-            return posts[this.$route.params.slug].blocks.map(block => {
-                if(block) return block
-            })
-        },
-        checkForImages(posts) {
-            if(Object.keys(posts).length == 0) return
-            this.pageBlocks(posts).forEach(block => {
-                const doc = new DOMParser().parseFromString(block, 'text/html')
-                const gallery = doc.querySelectorAll('.blocks-gallery-item img')
-
-                if(!gallery || gallery.length < 1) return
-
-                this.images = [].slice.call(gallery).map(item => { 
-                    return item.src
-                })
-            })
+        openGallery(galleryIndex, imageID) {
+            this.activeGalleryIndex = galleryIndex
+            this.activeImageIndex = imageID ? imageID : 0
+            // console.log(this.post.galleries[galleryIndex])
         },
         checkAndSetHero(posts) {
             const post = posts[this.$route.params.slug]
@@ -109,15 +105,14 @@ export default {
     watch: {
         posts(newVal, oldVal) {
             // Loads images from the DOM
-            this.checkForImages(newVal)
+            // this.checkForImages(newVal)
             
             this.checkAndSetHero(newVal)
-            console.log(this.galleries)
         }
     },
     created() {
         let type = convertTitleCase(this.$route.params.type)
-
+        this.$store.dispatch(`getMediaById`, [7])
         if(!this[`all{type}Loaded`]) {
             // console.log('Retrieving...', type)
             this.$store.dispatch(`getAll${type}`)