feat: added gallery keyboard event listen

vue-theme/src/components/gallery.vue

@@ -1,9 +1,9 @@
 <template lang="pug">
 .gallery.f-col.center(v-if="fullscreengallery")
-    button(@click="hideGallery") hide
+    button(@click="hideGallery").hide hide
     ul
         li(v-for="(image, i) of images" :class="{ active: i === selected }")
-            .image-wrapper.f-row.center
+            .image-wrapper.f-col.center
                 img(:src="image")
     .controls.f-row
         button(@click="prev") <
@@ -31,7 +31,26 @@ export default {
         },
         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>
@@ -43,13 +62,14 @@ export default {
     left: 0
     width: 100%
     height: 100%
-    background-color: blue
-    opacity: 75%
+    background-color: black
     z-index: 1001
     > *
         opacity: 100%
         position: relative
         z-index: 1011
+    button.hide
+        z-index: 1100
     ul
         list-style: none
         li
@@ -64,5 +84,8 @@ export default {
                 color: green
     .controls
         position: absolute
-        bottom: 5em
+        width: 100vw
+        button
+            height: 100vw
+            padding: 1vw
 </style>

vue-theme/src/pages/single.vue

@@ -64,8 +64,8 @@ export default {
         },
     },
     methods: {
-        checkForImages(post) {
-            const allBlocks = post[this.$route.params.slug].blocks.map(block => {
+        checkForImages(posts) {
+            const allBlocks = posts[this.$route.params.slug].blocks.map(block => {
                 if(block) return block
             })
             allBlocks.forEach(block => {
@@ -87,12 +87,11 @@ export default {
         }
     },
     mounted() {
-        // TODO: this should be conditional after checking vuex state
-        let type = this.$route.params.type
-        type = type.charAt(0).toUpperCase() + type.slice(1)
-        this.$store.dispatch(`getAll${type}`)
-        
-        console.log(this.images)
+        if(!this.posts[this.$route.params.slug]) {
+            let type = this.$route.params.type
+            type = type.charAt(0).toUpperCase() + type.slice(1)
+            this.$store.dispatch(`getAll${type}`)
+        }
     }
 }
 </script>

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 => {