merge fix gallery changes

plugins/cia-endpoints/includes/class.make-endpoint.php

@@ -61,6 +61,9 @@ class Make_Endpoint_For extends WP_REST_Controller {
         $filtered[content] = $item->post_content;
         $filtered[blocks] = get_rearrange_blocks($item->blocks);
         
+        // Log the request with PHP Console
+        if ( class_exists( 'PC' ) ) PC::debug( $item, 'Blocks' );
+        
         return $filtered;
         // return $item;
     }

plugins/cia-endpoints/includes/reformat-blocks.php

@@ -1,6 +1,7 @@
 <?php
     function get_rearrange_blocks($blocks) {
         $parsed_blocks = array();
+
         foreach( $blocks as $block ) {
             if(sizeof($block[innerBlocks]) < 1 && $block[innerHTML] !== "\n\n") {
                 array_push($parsed_blocks, $block[innerHTML]);

plugins/cia-post-types/cia-post-types.php

@@ -65,4 +65,3 @@ foreach ($custom_types as $type):
     $icon = get_icon($type);
     add_action( 'init', [ new PostType($type, $icon), 'register_post_type' ] );
 endforeach;
-

vue-theme/src/components/gallery.vue

@@ -1,13 +1,14 @@
 <template lang="pug">
 .gallery.f-col.center(v-if="fullscreengallery")
-    button(@click="hideGallery") hide
+    button(@click="hideGallery").hide hide
     ul
-        li(v-for="image of images")
-            div
-                h1 {{ image }}
+        li(v-for="(image, i) of images" :class="{ active: i === selected }")
+            .image-wrapper.f-col.center
+                img(:src="image")
     .controls.f-row
-        button(@click="hideGallery") <<<
-        button(@click="hideGallery") >>>
+        button(@click="prev") <
+        .f-grow
+        button(@click="next") >
 </template>
 
 <script>
@@ -16,10 +17,40 @@ export default {
         images: { type: Array },
         fullscreengallery: { type: Boolean }
     },
+    data() { 
+        return {
+            selected: 0
+        }
+    },
     methods: {
+        prev() {
+            this.selected > 0 ? this.selected-- : this.selected = this.images.length - 1
+        },
+        next() {
+            this.selected < this.images.length - 1 ? this.selected++ : this.selected = 0
+        },
         hideGallery() {
             this.$emit('close')
+        },
+        interpretKeypress(e) {
+            switch (e.key) {
+                case 'ArrowRight':
+                    this.next()
+                    break
+                case 'ArrowLeft':
+                    this.prev()
+                    break
+                case 'Escape':
+                    this.hideGallery()
+                    break
+            }
         }
+    },
+    mounted() {
+        window.addEventListener('keydown', this.interpretKeypress)
+    },
+    destroyed() {
+        window.removeEventListener('keydown', this.interpretKeypress)
     }
 }
 </script>
@@ -30,16 +61,31 @@ export default {
     top: 0
     left: 0
     width: 100%
-    height: 100vw
-    background-color: blue
-    opacity: 75%
+    height: 100%
+    background-color: black
     z-index: 1001
     > *
         opacity: 100%
         position: relative
         z-index: 1011
+    button.hide
+        z-index: 1100
     ul
         list-style: none
-        h1
-            color: green
+        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,11 +1,11 @@
 <template lang="pug">
-.page--single.f-row.between
+.page--single.f-row.between(v-if="$route.params.slug")
     gallery(:fullscreengallery="fullscreengallery" v-on:close="fullscreengallery = false" :images="images")
     article.f-grow.shadow
         header
             h1 {{ type }}:{{ $route.params.slug }} single
             button(@click="fullscreengallery = true") fullscreen
-        section
+        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}`")
@@ -32,6 +32,7 @@ export default {
     },
     data() {
         return {
+            images: [], 
             fullscreengallery: false
         }
     },
@@ -67,8 +68,31 @@ export default {
         },
 
     },
+    methods: {
+        checkForImages(posts) {
+            const allBlocks = posts[this.$route.params.slug].blocks.map(block => {
+                if(block) return block
+            })
+            allBlocks.forEach(block => {
+                if(!block) return
+                const doc = new DOMParser().parseFromString(block, 'text/html')
+                const gallery = doc.querySelectorAll('.blocks-gallery-item img')
+                if(gallery) {
+                    this.images = [].slice.call(gallery).map(item => { 
+                        return item.src }
+                    )
+                }
+            })
+        }
+    },
+    watch: {
+        posts(newVal, oldVal) { 
+            // Loads images from the DOM
+            this.checkForImages(newVal)
+        }
+    },
     mounted() {
-        // TODO: this should be conditional after checking vuex state
+        // 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}`)

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

@@ -17,7 +17,6 @@ const getters = {
     artistContent: state => id => {
         let field = typeof id === 'number' ? 'id' : 'slug'
         let artist = state.all.filter(artist => artist[field] === id)
-
         return (artist[0]) ? artist[0].content.rendered : false
     },
     someArtists: state => limit => {