scrollToThumb implemented

components/GalleryThumbs.vue

@@ -66,13 +66,22 @@ export default {
       type: Number,
       required: true
     },
+    // index of image to be highlighted
     activeIndex: {
       type: Number,
       required: false,
       default () {
         return 0
       },
-    }
+    },
+    // ensures this image is in viewport
+    initialImageIndex: {
+      type: Number,
+      required: false,
+      default () {
+        return 0
+      },
+    },
   },
 
   data () {
@@ -106,6 +115,7 @@ export default {
   mounted () {
     this.$nextTick(function () {
       this.updateElements()
+      this.scrollToThumb(this.startImage)
     })
     window.addEventListener('resize', this.handleResize)
     this.$refs.galleryThumbsList.addEventListener('touchstart', this.handleTouch)
@@ -116,6 +126,20 @@ export default {
   },
 
   methods: {
+    // TOOD move logic of getting sizes of elements into getter methods
+    scrollToThumb (thumbIndex) {
+      if (thumbIndex >= this.galleries.length || thumbIndex < 0) { return }
+      const containerWidth = this.$refs.galleryThumbsList.clientWidth
+      const thumbWidth = this.$refs.thumbContainer[0].clientWidth
+      const offset = this.thumbRowOffsets[this.activeRow]
+      const thumbPosition = thumbWidth * (this.galleries[this.activeRow].images.length - thumbIndex)
+
+      if (containerWidth < thumbPosition - offset) {
+        this.thumbRowOffsets[this.activeRow] = thumbPosition - containerWidth
+      }
+      
+
+    },
     updateElements (resetOffsets=true) {
       if (resetOffsets) {this.resetOffsets()}
       if (this.$refs.galleryThumbsRows[this.activeRow] && this.$refs.galleryThumbsList) {
@@ -144,7 +168,7 @@ export default {
     },
     handleNavClick(source, direction) {
       let offset = this.thumbRowOffsets[source]
-      let thumbContainerWidth = this.$refs.thumbContainer[0].clientWidth
+      const thumbContainerWidth = this.$refs.thumbContainer[0].clientWidth
       if (direction === 'left') {
         offset += thumbContainerWidth
       } else if (direction === 'right') {