thumb scrolling on desktop implemented

components/GalleryThumbs.vue

@@ -1,17 +1,18 @@
 <template>
   <div>
     <div class="gallery-thumbs__spacer"></div>
-    <ul class="gallery-thumbs__list">
+    <ul ref="galleryThumbsList"
+        class="gallery-thumbs__list">
       <li v-for="(gallery, galleryIndex) in galleries"
           :key="galleryIndex"
           :class="{ 'is-active': activeRow === galleryIndex }"
           class="gallery-thumbs__row-container">
-        <ul :ref="'thumbs-row-' + galleryIndex"
+        <ul ref="galleryThumbsRowContainers"
             class="gallery-thumbs__row"
-            :style="{ 'transform': 'translate3d(-' + thumbRowOffsets[galleryIndex] + 'px, 0, 0)' }">
+            :style="{ 'transform': 'translate3d(' + thumbRowOffsets[galleryIndex] + 'px, 0, 0)' }">
           <li class="featured-image-spacer mobile-only"
               :style="{ 'height': featuredHeight }">
-            <ThumbNav class="thumb-nav thumb-nav--large"
+            <ThumbNav class="thumb-nav thumb-nav--large mobile-only"
                       direction="right"
                       @navClick="handleNavClick(galleryIndex, 'right')" />
           </li>
@@ -19,11 +20,11 @@
               :ref="galleryIndex == 0 && imageIndex == 0 ? 'thumbContainer' : null"
               class="thumb-container"
               :key="galleryIndex + '.' + imageIndex + '.' + image.url">
-            <ThumbNav class="thumb-nav thumb-nav--left"
+            <ThumbNav class="thumb-nav thumb-nav--left mobile-only"
                       direction="left"
                       @navClick="handleNavClick(galleryIndex, 'left')" />
             <ThumbNav v-if="imageIndex < gallery.images.length - 1"
-                      class="thumb-nav"
+                      class="thumb-nav mobile-only"
                       direction="right"
                       @navClick="handleNavClick(galleryIndex, 'right')" />
             <span>{{ image.thumbUrl }}</span>
@@ -31,6 +32,14 @@
           </li>
         </ul>
       </li>
+      <ThumbNav class="thumb-nav thumb-nav--left mobile-hide"
+                :class="{ 'is-active': thumbRowOffsets[activeRow] >= 0 }"
+                direction="left"
+                @navClick="handleNavClickDesktop(activeRow, 'left')"/>
+      <ThumbNav class="thumb-nav thumb-nav--right mobile-hide"
+                :class="{ 'is-active': thumbRowOffsets[activeRow] > 0 }"
+                direction="right"
+                @navClick="handleNavClickDesktop(activeRow, 'right')"/>
     </ul>
   </div>
 </template>
@@ -88,11 +97,29 @@ export default {
       let offset = this.thumbRowOffsets[source]
       let thumbContainerWidth = this.$refs.thumbContainer[0].clientWidth
       if (direction === 'left') {
-        offset -= thumbContainerWidth
-      } else if (direction === 'right') {
         offset += thumbContainerWidth
+      } else if (direction === 'right') {
+        offset -= thumbContainerWidth
+      }
+      offset = offset > 0 ? 0 : offset
+      this.$set(this.thumbRowOffsets, source, offset)
+    },
+    handleNavClickDesktop(source, direction) {
+      let offset = this.thumbRowOffsets[source]
+      let thumbContainerWidth = this.$refs.thumbContainer[0].clientWidth
+      let visibleRowWidth = this.$refs.galleryThumbsList.clientWidth
+      let totalRowWidth = this.$refs.galleryThumbsRowContainers[source].clientWidth
+      let maxOffset = totalRowWidth - visibleRowWidth
+      if (direction === 'left') {
+        offset += thumbContainerWidth
+      } else if (direction === 'right') {
+        offset -= thumbContainerWidth
+      }
+      if (offset < 0) {
+        offset = 0
+      } else if (offset > maxOffset) {
+        offset = maxOffset
       }
-      offset = offset < 0 ? 0 : offset
       this.$set(this.thumbRowOffsets, source, offset)
     }
   }
@@ -109,6 +136,10 @@ export default {
 }
 
 @media (max-width: $bp__layout) {
+  .mobile-hide {
+    display: none;
+  }
+  
   .gallery-thumbs__spacer {
     display:none;
   }
@@ -157,6 +188,10 @@ export default {
     display: none;
   }
 
+  .mobile-hide {
+    display: initial;
+  }
+
   .featured-image-spacer {
     width: 100%;
   }
@@ -170,6 +205,7 @@ export default {
   }
 
   .gallery-thumbs__list {
+    position: relative;
     height: $thumbs-height;
     flex: 0 0 $thumbs-height;
 
@@ -177,7 +213,9 @@ export default {
   }
 
   .gallery-thumbs__row-container {
-    position: relative;
+    position: absolute;
+    width: 100%;
+    height: 100%;
 
     transition: opacity .5s;
     opacity: 0;
@@ -189,16 +227,38 @@ export default {
   }
 
   .gallery-thumbs__row {
-    /* flex: 0 0 $thumbs-height; */
     position: absolute;
     height: 100%;
-    width: 10rem;
     top: 0;
-    left: 0;
+    right: 0;
+
+    transition: transform .5s;
   }
 
   .thumb-nav {
-    display: none;
+    position: absolute;
+    top: 1rem;
+    width: $thumbs-height - 2rem;
+    height: $thumbs-height - 2rem;
+
+    transition: opacity .5s;
+    opacity: 0;
+    pointer-events: none;
+
+    &.is-active {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    &--left {
+      left: 1rem,;
+    }
+
+    &--right {
+      right: 1rem,;
+    }
+
+    background-color: rgba(red, .3);
   }
 }