marc-leopold/components/GalleryImageViewer.vue

<template>
  <div class="image-viewer"
       :class="{ 'is-visible': isVisible }">
    <transition name="trans-bg-image">
      <div v-if="backgroundImageUrl !== null"
           :key="backgroundImageUrl"
           class="viewer-background"
           :style="backgroundStyle"
      ></div>
    </transition>
    <div class="image-container loading-container">
      <transition name="trans-bg-image">
        <span v-if="showLoading"
              class="text-loading animation-pulse"
        >
          Loading
        </span>
      </transition>
    </div>
    <div class="image-container">
      <transition name="trans-image" mode="out-in">
        <img v-if="displayImageUrl !== null"
             :key="displayImageUrl"
             class="image image-shadow"
             :src="displayImageUrl"
        >
      </transition>
    </div>
    <div class="close-viewer mobile-only"
         @click="$emit('close')"
    >
      <SVGIcon />
    </div>
    <ThumbNav v-if="hasPrev"
              class="thumb-nav thumb-nav--left mobile-only"
              direction="left"
              @navClick="$emit('clickPrev')"/>
    <ThumbNav v-if="hasNext"
              class="thumb-nav thumb-nav--right mobile-only"
              direction="right"
              @navClick="$emit('clickNext')"/>
  </div>
</template>

<script>
import ThumbNav from '@/components/ThumbNav'
import imageLoader from '~/mixins/imageLoader.js'
import SVGIcon from '@/assets/svg/close-wide.svg'

export default {
  components: {
    ThumbNav,
    SVGIcon,
  },
  mixins: [ imageLoader ],
  props: {
    isVisible: {
      type: Boolean,
      required: true
    },
    imageUrl: {
      type: String,
      required: false,
      default () {
        return ''
      }
    },
    hasNext: {
      type: Boolean,
      required: true
    },
    hasPrev: {
      type: Boolean,
      required: true
    }
  },

  data () {
    return {
      loadingImageUrl: 'https://via.placeholder.com/120x120',
      backgroundImageUrl: null, // blurred vwersion of image that makes up the background
      displayImageUrl: null, // image being viewed
      showLoading: true,
      loadingTimeout: null
    }
  },

  computed: {
    backgroundStyle () {
      return {
        backgroundImage: 'url(' + this.backgroundImageUrl + ')'
      }
    }
  },

  watch: {
    imageUrl () {
      this.setImages(this.imageUrl)
    }
  },

  mounted () {
    this.setImages(this.imageUrl)
  },

  methods: {
    setImages(url) {
      this.displayImageUrl = null
      this.showLoading = false
      this.loadingTimeout = setTimeout(() => {
        this.showLoading = true
      }, 1000)
      this.loadImage(this.imageUrl)
        .then(img => {
          this.displayImageUrl = img.src
          clearTimeout(this.loadingTimeout)
          this.showLoading = false
          setTimeout(() => {
            this.$nextTick(() => {
              this.backgroundImageUrl = img.src
            })
          }, 200)
        })
        // TODO catch errors
    },
  },
}
</script>

<style lang="scss" scoped>
.image-viewer {
  background-color: #222;
}

.image-container {
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
}

.image {
  position: absolute;
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.image-shadow {
  box-shadow: 2px 4px 12px -2px rgba($color__neutral-200, .4);
}

.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-loading {
  font-size: 2rem;
  color: $color__neutral-900;
}

.animation-pulse {
  animation: pulse 3s infinite;
}

@media (max-width: $bp__layout) {
  .close-viewer {
    z-index: 10;
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: calc(#{$site-menu__header-height} + 2px);
    right: 2px;
    cursor: pointer;

    transition: opacity .3s .2s;
    opacity: .2;

    &:hover {
      opacity: .4;
      animation: rotate .3s ease-in-out 1;
    }
  }

  .image-viewer {
    z-index: 50;

    transition: opacity 1s; //TEMP
    opacity: 0;
    pointer-events: none;

    &.is-visible {
      opacity: 1;
      pointer-events: auto;
    }
  }

  .image-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-position: center center;
  }

  .thumb-nav {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;

    display: flex;
    align-items: flex-end;

    opacity: .2;

    &--left {
      left: 0;
      padding-right: 30%;
      justify-content: center;
    }

    &--right {
      right: 0;
      padding-left: 30%;
      justify-content: center;
    }
  }
}

@media (min-width: $bp__layout) {
  .mobile-only {
    display: none;
  }

  .image-viewer {
    padding: 1rem 1rem 1rem 4rem;
  }

  .image-container {
    position: absolute;
    top: 8px;
    left: calc(3rem + 8px);
    right: $gallery-featured-width--compact;
    bottom: 8px;
    background-position: top center;

    @media (min-width: $bp__gallery-compact) {
      right: $gallery-featured-width;
    }
  }

  .viewer-background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: 100% 100%;
    background-position: center center;
    filter: blur(100px);
    opacity: .3;
  }

  .loading-container {
    padding-bottom: $gallery-thumbs-height;
  }
}

.trans-image {
  &-enter-active {
    transition: opacity 1s .4s;
  }

  &-leave-active {
    transition: opacity .5s;
  }

  &-enter, &-leave-to {
    opacity: 0;
  }
}

.trans-bg-image {
  &-enter-active, &-leave-active {
    transition: opacity .8s;
  }

  &-enter, &-leave-to {
    opacity: 0;
  }
}

@keyframes pulse {
  0%, 50%, 100% {
    opacity: 1;
  }

  80% {
    opacity: 0.1;
  }
}

@keyframes rotate {
  0%, 100% {
    transform: rotate(0deg);
  }

  30% {
    transform: rotate(3deg);
  }

  60% {
    transform: rotate(-1deg);
  }

  80% {
    transform: rotate(1deg);
  }
}
</style>