fix: desktop navigation icons correctly showing on page reloads

components/GalleryPage.vue

@@ -19,6 +19,7 @@
                      :galleries="galleries"
                      :active-row="activeRow"
                      :active-index="activeImageIndex"
+                     :show-image="showImage"
                      @thumbClick="handleThumbClick"/>
     </article>
   </div>
@@ -49,7 +50,8 @@ export default {
       imageViewerIsVisible: false,
       activeRow: 0,
       activeGalleryIndex: 0,
-      activeImageIndex: 0
+      activeImageIndex: 0,
+      showImage: 0,
     }
   },
 
@@ -81,6 +83,7 @@ export default {
       }
       if (image !== this.activeImageIndex) {
         this.activeImageIndex = image
+        this.showImage = image
       }
     }
   },

components/GalleryThumbs.vue

@@ -74,8 +74,8 @@ export default {
         return 0
       },
     },
-    // ensures this image is in viewport
-    initialImageIndex: {
+    // scroll this image into view
+    showImage: {
       type: Number,
       required: false,
       default () {
@@ -109,33 +109,45 @@ export default {
       this.$nextTick(() => {
         this.updateElements(false)
       })
+    },
+    showImage () {
+      this.scrollToThumb(this.showImage)
     }
   },
 
   mounted () {
-    this.$nextTick(function () {
-      this.updateElements()
-      this.scrollToThumb(this.startImage)
-    })
     window.addEventListener('resize', this.handleResize)
     this.$refs.galleryThumbsList.addEventListener('touchstart', this.handleTouch)
     this.$refs.galleryThumbsList.addEventListener('touchend', this.handleTouch)
     this.$refs.galleryThumbsList.addEventListener('wheel', this.handleThumbsScroll)
     // firefox
     this.$refs.galleryThumbsList.addEventListener('mousewheel', this.handleThumbsScroll)
+    this.$nextTick(function () {
+      this.updateElements()
+      this.scrollToThumb(this.activeIndex)
+    })
   },
 
   methods: {
     // TOOD move logic of getting sizes of elements into getter methods
     scrollToThumb (thumbIndex) {
-      if (thumbIndex >= this.galleries.length || thumbIndex < 0) { return }
+      console.log('scrollToThumb')
+      if (thumbIndex >= this.galleries[this.activeRow].images.length || thumbIndex < 0) { return }
+      console.log('scrollToThumb: executing')
       const containerWidth = this.$refs.galleryThumbsList.clientWidth
       const thumbWidth = this.$refs.thumbContainer[0].clientWidth
-      const offset = this.thumbRowOffsets[this.activeRow]
+      let offset = this.thumbRowOffsets[this.activeRow]
       const thumbPosition = thumbWidth * (this.galleries[this.activeRow].images.length - thumbIndex)
+      const rowWidth = this.$refs.galleryThumbsRows[this.activeRow].clientWidth
 
       if (containerWidth < thumbPosition - offset) {
-        this.thumbRowOffsets[this.activeRow] = thumbPosition - containerWidth
+        this.$set(this.thumbRowOffsets, this.activeRow, thumbPosition - containerWidth + 1)
+        // console.log(`(${containerWidth + offset}) ${containerWidth} + ${offset} > ${rowWidth}`)
+        this.isLeftDesktopNavActive = containerWidth + offset > rowWidth
+      } else if (thumbPosition <= offset) {
+        this.$set(this.thumbRowOffsets, this.activeRow, thumbPosition - thumbWidth)
+        // console.log(`(${containerWidth + offset}) ${containerWidth} + ${offset} > ${rowWidth}`)
+        this.isLeftDesktopNavActive = containerWidth + offset > rowWidth
       }
       
 
@@ -198,7 +210,6 @@ export default {
         this.isLeftDesktopNavActive = false
       }
       this.$set(this.thumbRowOffsets, source, offset)
-      // this.isLeftDesktopNavActive
     },
     handleResize() {
       if (!this.resizeIsThrottling) {