From 88ec77d6d926e1467b14413630cc4f738127de10 Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Tue, 29 Jan 2019 10:30:05 +0000
Subject: [PATCH] scrollToThumb implemented

---
 components/GalleryThumbs.vue | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/components/GalleryThumbs.vue b/components/GalleryThumbs.vue
index aeaf696..32aabd7 100644
--- a/components/GalleryThumbs.vue
+++ b/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') {