highlight active image in GalleryThumbs

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

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;
+  }
+}
+

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 {

components/GalleryPage.vue

@@ -18,6 +18,7 @@
                      :featured-height="featuredImageHeight"
                      :galleries="galleries"
                      :active-row="activeRow"
+                     :active-index="activeImageIndex"
                      @thumbClick="handleThumbClick"/>
     </article>
   </div>

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
+      },
     }
   },