wj-horizontal-scroll.vue

<template>
  <div class="m:fix m:fill m:f aic whiskey__wrap">
    <div class="scroll-element m:nowrap wct m:f aic pt130 m:pt0" ref="scrollElement">
      <ul class="whiskey l y m:f aic">
        <li
          v-for="(item, i) in page.whiskey_listing"
          :key="`${item.uid}-${i}`"
          class="rel y mb90 m:mb0"
        >
          <n-link
            v-if="item.data.use_as_divider === 'no' || item.data.use_as_divider === null"
            class="whiskey__link db y"
            :to="`/whiskey/${item.uid}`"
          >
            <div class="ph130 m:ph85 y">
              <img
                class="whiskey__image"
                :src="item.data.bottle_image.url"
                :alt="item.data.document_title"
                @load="resize"
              />
            </div>
            <h3 class="whiskey__title text f30 fw700 i tc wrap mt10" v-html="formatTitle(item)"></h3>
          </n-link>
          <h2 v-else class="whiskey__divider tc f17 ls1 gta ttu">{{item.data.document_title}}</h2>
        </li>
      </ul>
      <div class="pl20 pr20 m:pr100 mb100 m:mb0">
        <n-link
          :to="$prismic.dom.Link.url(page.cta.link, $prismic.linkResolver)"
          class="stanley i f41 m:f120 lh104 text linkText"
        >
          Next—
          <br />
          {{ page.cta.text }}
        </n-link>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getWhiskeyPage } from '~/util/api'
import { map, round, lerp } from '~/util/math'

export default {
  async asyncData({ req }) {
    const page = await getWhiskeyPage(req)
    return {
      scrollDistance: 0,
      target: 0,
      last: 0,
      current: 0,
      ease: 0.1,
      page,
    }
  },
  mounted() {
    window.addEventListener('resize', this.resize)
    this.resize()
    TweenMax.ticker.addEventListener('tick', this.update)
  },
  beforeDestroy() {
    TweenMax.ticker.removeEventListener('tick', this.update)
    window.removeEventListener('resize', this.resize)
    document.body.removeAttribute('style')
  },
  methods: {
    update() {
      if (window.innerWidth < 900) {
        TweenMax.set(this.$refs.scrollElement, {
          x: 0,
        })
        return
      }

      this.target = map(
        window.scrollY,
        0,
        this.scrollDistance - window.innerHeight,
        0,
        this.scrollDistance
      )

      this.current = lerp(this.current, this.target, this.ease)

      let d = this.current - this.target
      if (d < 0) d *= -1
      if (d < 0.1) this.current = this.target

      if (this.last !== this.current) {
        TweenMax.set(this.$refs.scrollElement, {
          x: round(-this.current, 100),
        })
      }

      this.last = this.current
    },
    resize() {
      this.scrollDistance = this.$refs.scrollElement.getBoundingClientRect().width - window.innerWidth
      document.body.style.height = window.innerWidth >= 900 ? this.scrollDistance + 'px' : null
    },
  },
}
</script>

<style lang="scss" scoped>
.scroll-element {
  height: 100%;
}

.whiskey {
  height: 65%;

  &__title {
    transition: opacity 0.5s $ease-out-quad;

    @media ($m) {
      opacity: 0;
    }
  }

  &__image {
    display: block;
    width: 100%;
    max-width: 20rem;
    margin-left: auto;
    margin-right: auto;

    @media ($m) {
      max-width: unset;
      width: unset;
      height: 100%;
    }
  }

  &__link {
    &:hover {
      .whiskey__title {
        opacity: 1;
      }
    }
  }

  &__divider {
    @media ($m) {
      position: absolute;
      transform: translate(-50%, -50%) rotate(-90deg);
      top: 50%;
      left: 50%;
    }
  }
}
</style>