marc-leopold/components/GalleryThumbs.vue

<template>
  <div>
    <div class="gallery-thumbs__spacer"></div>
    <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="galleryThumbsRowContainers"
            class="gallery-thumbs__row"
            :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 mobile-only"
                      direction="right"
                      @navClick="handleNavClick(galleryIndex, 'right')" />
          </li>
          <li v-for="(image, imageIndex) in gallery.images"
              :ref="galleryIndex == 0 && imageIndex == 0 ? 'thumbContainer' : null"
              class="thumb-container"
              :key="galleryIndex + '.' + imageIndex + '.' + image.url">
            <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 mobile-only"
                      direction="right"
                      @navClick="handleNavClick(galleryIndex, 'right')" />
            <span>{{ image.thumbUrl }}</span>
            <span>{{ galleryIndex }}: {{ imageIndex }}</span>
          </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>

<script>
import ThumbNav from '@/components/ThumbNav'

export default {
  components: {
    ThumbNav
  },
  
  props: {
    galleries: {
      type: Array,
      required: true
    },
    featuredHeight: {
      type: String,
      required: true
    },
    activeRow: {
      type: Number,
      required: true
    }
  },

  data () {
    return {
      thumbRowOffsets: new Array(this.galleries.length),
    }
  },

  computed: {
    thumbsVerticalOffset () {
      let rowHeight = this.$refs.thumbContainer ? this.$refs.thumbContainer[0].clientHeight : 0;
      return  rowHeight * this.activeRow
    }
  },

  mounted () {
    this.$nextTick(function () {
      this.resetOffsets()
      window.addEventListener('resize', this.resetOffsets)
    })
  },

  methods: {
    resetOffsets() {
      for (let index = 0; index < this.thumbRowOffsets.length; index++) {
        this.$set(this.thumbRowOffsets, index, 0)
      }
    },
    handleNavClick(source, direction) {
      let offset = this.thumbRowOffsets[source]
      let thumbContainerWidth = this.$refs.thumbContainer[0].clientWidth
      if (direction === 'left') {
        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
      }
      this.$set(this.thumbRowOffsets, source, offset)
    }
  }
}
</script>

<style lang="scss" scoped>
.gallery-thumbs__row {
  display: flex;
  flex-direction: row;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (max-width: $bp__layout) {
  .mobile-hide {
    display: none;
  }
  
  .gallery-thumbs__spacer {
    display:none;
  }

  .gallery-thumbs__row {
    position: relative;
    transition : transform .5s;
  }

  .featured-image-spacer {
    position: relative;
    height: calc(50vh - #{$site-menu__header-height / 2}) !important; // must override inline style set with prop
    width: 100vw;
    flex: 0 0 100vw;
  }

  .thumb-container {
    position: relative;
    height: calc(50vh - #{$site-menu__header-height / 2});
    width: 100vw;
  }

  .thumb-nav {
    position: absolute;
    width: 8rem;
    height: 8rem;
    bottom: 1rem;
    right: 1rem;

    &--left {
      left: 1rem;
      right: auto;
    }

    &--large {
      width: 12rem;
      height: 12rem;
    }
  }
}

@media (min-width: $bp__layout) {
  $thumbs-height: 8rem;

  .mobile-only {
    display: none;
  }

  .mobile-hide {
    display: initial;
  }

  .featured-image-spacer {
    width: 100%;
  }

  .thumb-container {
    height: $thumbs-height;
  }

  .gallery__thumbs {
    width: 100%;
  }

  .gallery-thumbs__list {
    position: relative;
    height: $thumbs-height;
    flex: 0 0 $thumbs-height;

    overflow: hidden;
  }

  .gallery-thumbs__row-container {
    position: absolute;
    width: 100%;
    height: 100%;

    transition: opacity .5s;
    opacity: 0;

    &.is-active {
      transition: opacity .5s .3s;
      opacity: 1;
    }
  }

  .gallery-thumbs__row {
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;

    transition: transform .5s;
  }

  .thumb-nav {
    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);
  }
}

</style>