From f0ded60d7dc05278f5d7ea6a24d5976ed6b31503 Mon Sep 17 00:00:00 2001
From: ManjaroOne666 <git@gabbaell.co.uk>
Date: Mon, 28 Jan 2019 09:20:17 +0000
Subject: [PATCH] highlight active image in GalleryThumbs

---
 TODO.md                        |  3 ++-
 assets/scss/style.scss         | 22 ++++++++++++++++++++++
 components/GalleryFeatured.vue | 21 +--------------------
 components/GalleryPage.vue     |  1 +
 components/GalleryThumbs.vue   | 10 +++++++++-
 5 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/TODO.md b/TODO.md
index 44a0b85..7db81c2 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,5 +1,6 @@
 ## Galleries
-* Use query strings to specify index of selected gallery - can update on navigating galleries
+* scroll to correct gallery when query parameter changes on galleries page
+* also do same for thumbnail selected
 
 ## Menu
 * Proper background images for hover effect
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index eff3333..1c6b3b3 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -119,3 +119,25 @@
   background-color: rgba($color__primary-100, .7);
 }
 
+.selected-indicator {
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+
+    transition: opacity 1s;
+    opacity: 0;
+
+    border: 1px solid $color__neutral-700;;
+  }
+
+  &.is-active::before {
+    transition: opacity 2s .2s;
+    opacity: 1;
+  }
+}
+
diff --git a/components/GalleryFeatured.vue b/components/GalleryFeatured.vue
index 187c50e..2b327e6 100644
--- a/components/GalleryFeatured.vue
+++ b/components/GalleryFeatured.vue
@@ -1,7 +1,7 @@
 <template>
   <ul class="gallery-featured">
     <li v-for="(gallery, index) in galleries"
-        class="featured-image thumb-overlay"
+        class="featured-image thumb-overlay selected-indicator"
         :class="{ 'is-active': index === galleryActive }"
         :style="{ 'background-image': 'url(' + gallery.featuredImage + ')' }"
         :key="index"
@@ -97,25 +97,6 @@ export default {
     padding-top: 100%;
     margin-bottom: 4px;
 
-    &::before {
-      content: '';
-      display: block;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-
-      transition: opacity 1s;
-      opacity: 0;
-
-      border: 1px solid $color__neutral-700;;
-    }
-
-    &.is-active::before {
-      transition: opacity 2s .2s;
-      opacity: 1;
-    }
   }
 
   .gallery-title {
diff --git a/components/GalleryPage.vue b/components/GalleryPage.vue
index 847b3e6..377bc2a 100644
--- a/components/GalleryPage.vue
+++ b/components/GalleryPage.vue
@@ -18,6 +18,7 @@
                      :featured-height="featuredImageHeight"
                      :galleries="galleries"
                      :active-row="activeRow"
+                     :active-index="activeImageIndex"
                      @thumbClick="handleThumbClick"/>
     </article>
   </div>
diff --git a/components/GalleryThumbs.vue b/components/GalleryThumbs.vue
index 7ba5f79..aeaf696 100644
--- a/components/GalleryThumbs.vue
+++ b/components/GalleryThumbs.vue
@@ -18,7 +18,8 @@
           </li>
           <li v-for="(image, imageIndex) in gallery.images"
               :ref="galleryIndex == 0 && imageIndex == 0 ? 'thumbContainer' : null"
-              class="thumb-container thumb-overlay"
+              class="thumb-container thumb-overlay selected-indicator"
+              :class="{ 'is-active': imageIndex === activeIndex }"
               :style="{ 'background-image': 'url(' + image.thumbUrl + ')' }"
               :key="galleryIndex + '.' + imageIndex + '.' + image.url"
               @click="$emit('thumbClick', galleryIndex, imageIndex)">
@@ -64,6 +65,13 @@ export default {
     activeRow: {
       type: Number,
       required: true
+    },
+    activeIndex: {
+      type: Number,
+      required: false,
+      default () {
+        return 0
+      },
     }
   },