Swapper.vue

swapper.vue

<script type="text/babel">
  import $ from 'jquery'
  const tmpComponent = {
    template: '<div><slot></div>',
  }

  module.exports = {
    name: 'fader-tile',
    props: {
      duration: {
        default: 5000,
      },
      delay: {
        default: 0,
      },
      index: {
        twoWay: true,
        default: 0,
      },
      slots: {
        type: Number,
        default: 2,
      },
      activeSlot: {
        twoWay: true,
      },
      transition: {
        default: 'fade',
      },
      auto: {
        default: true,
      },
      animation: {
        default: true,
      },
      animationOpts: {
        default() {
          return {
            duration: 300,
            easing: 'swing',
          }
        },
      },
    },
    data() {
      return {
        height: 0,
        firstTime: true,
      }
    },
    ready() {
      if (this.auto) {
        setTimeout(() => {
          this._interval = setInterval(() => {
            this.next()
          }, this.duration)
        }, this.delay)
      }
    },
    computed: {
      current() {
        return `part${this.index + 1}`
      },
    },
    destroyed() {
      clearInterval(this._interval)
    },
    methods: {
      isReady() {
        this.activeSlot = this.current
        if (this.animation) {
          this.$nextTick(() => {
            if (this.firstTime) {
              this.height = $(this.$el).find('.slot').height()
              $(this.$el).css('height', this.height)
              this.firstTime = false
            } else this.triggerAnimation()
          })
        }
      },
      triggerAnimation() {
        const newHeight = $(this.$el).find('.slot').height()
        const complete = () => { this.height = newHeight }
        const opts = Object.assign(this.animationOpts, { complete })
        $(this.$el).animate({ height: `${newHeight}px` }, opts)
      },
      next() {
        this.index = ++this.index % this.slots
        this.activeSlot = null
      },
      goTo(index) {
        this.index = index
        this.activeSlot = null
      },
    },
    components: {
      part1: tmpComponent,
      part2: tmpComponent,
      part3: tmpComponent,
      part4: tmpComponent,
      part5: tmpComponent,
      part6: tmpComponent,
      part7: tmpComponent,
      part8: tmpComponent,
      part9: tmpComponent,
      part10: tmpComponent,
    },
  }

</script>

<template lang="jade">

div.swapper-ui
  component.slot(:is="current", :transition="transition", transition-mode="out-in", v-on:hook:ready="isReady")
    slot(:name="'part'+(i+1)", v-for="i in slots", v-if="activeSlot == 'part'+(i+1)")


</template>

<style lang="scss" scoped>


  .swapper-ui {
    .slot {
      width: 100%;
    }
  }

</style>