loading images based on index

vue-theme/src/components/gallery.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-.gallery.f-col.center(v-if="fullscreengallery")
+.gallery.f-col.center(v-if="fullscreengallery + 1 > 0")
     button(@click="hideGallery").hide hide
     ul
         li(v-for="(image, i) of images" :class="{ active: i === selected }")
@@ -15,8 +15,7 @@
 export default {
     props: {
         images: { type: Array },
-        fullscreengallery: { type: Boolean },
-        startwith: { type: Number }
+        fullscreengallery: { type: Number },
     },
     data() { 
         return {
@@ -47,8 +46,10 @@ export default {
             }
         }
     },
-    created() {
-        this.selected = this.startwith
+    watch: {
+        fullscreengallery(newVal, oldVal) { 
+            this.selected = newVal
+        }
     },
     mounted() {
         window.addEventListener('keydown', this.interpretKeypress)

vue-theme/src/pages/single.vue

@@ -1,10 +1,9 @@
 <template lang="pug">
 .page--single.f-row.between(v-if="$route.params.slug")
-    gallery(:fullscreengallery="fullscreengallery" v-on:close="fullscreengallery = false" :images="images" :startwith="lastImageClicked")
+    gallery(:fullscreengallery="fullscreengallery" v-on:close="fullscreengallery = -1" :images="images")
     article.f-grow.shadow
         header
             h1 {{ type }}:{{ $route.params.slug }} single
-            button(@click="fullscreengallery = true") fullscreen
         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")
@@ -33,8 +32,7 @@ export default {
     data() {
         return {
             images: [], 
-            fullscreengallery: false,
-            lastImageClicked: 0
+            fullscreengallery: -1
         }
     },
     computed: {
@@ -85,9 +83,7 @@ export default {
             const gallery = document.querySelectorAll('.blocks-gallery-item figure, figure.wp-block-image')
             gallery.forEach((item, i) => {
                 item.addEventListener('click', () => {
-                    this.lastImageClicked = i
-                    console.log('yeah!', this.lastImageClicked)
-                    this.fullscreengallery = true
+                    this.fullscreengallery = i
                 })
             })
         }
@@ -96,7 +92,6 @@ export default {
         posts(newVal, oldVal) { 
             // Loads images from the DOM
             this.checkForImages(newVal)
-            this.wrapImagesWithLink()
         }
     },
     mounted() {
@@ -104,6 +99,8 @@ export default {
         let type = this.$route.params.type
         type = type.charAt(0).toUpperCase() + type.slice(1)
         this.$store.dispatch(`getAll${type}`)
+
+        this.wrapImagesWithLink()
     }
 }
 </script>