borbad.s5l.ru/vue/app/shared/ImageSlider/index.coffee

document.head.insertAdjacentHTML('beforeend','<style type="text/tailwindcss" component="ImageSlider">'+stylFns['app/shared/ImageSlider/index.styl']+'</style>')

module.exports =
  name: 'ImageSlider'
  render: (new Function '_ctx', '_cache', renderFns['app/shared/ImageSlider/index.pug'])()
  props:
    slides:
      type: Array
      required: true
      default: -> []
    autoplay:
      type: Boolean
      default: true
    duration:
      type: Number
      default: 5000
    startIndex:
      type: Number
      default: 0

  data: ->
    currentIndex: @startIndex
    progress: 0
    autoplayTimer: null
    touchStartX: 0
    touchEndX: 0

  mounted: ->
    @startAutoplay()
    @setupKeyboardNavigation()
    debug.log "slider ok"

  beforeUnmount: ->
    debug.log "slider start"
    @stopAutoplay()

  watch:
    currentIndex:
      handler: ->
        @progress = 0
      immediate: false

  methods:
    nextSlide: ->
      @currentIndex = if @currentIndex >= @slides.length - 1 then 0 else @currentIndex + 1
      @$emit 'slide-change', @currentIndex

    prevSlide: ->
      @currentIndex = if @currentIndex <= 0 then @slides.length - 1 else @currentIndex - 1
      @$emit 'slide-change', @currentIndex

    goToSlide: (index) ->
      @currentIndex = index
      @$emit 'slide-change', index

    startAutoplay: ->
      return unless @autoplay and @slides.length > 1
      @stopAutoplay()
      @autoplayTimer = setInterval =>
        @progress += 1
        if @progress >= 100
          @nextSlide()
      , @duration / 100

    stopAutoplay: ->
      clearInterval @autoplayTimer if @autoplayTimer

    handleTouchStart: (event) ->
      @touchStartX = event.touches[0].clientX
      @stopAutoplay()

    handleTouchMove: (event) ->
      @touchEndX = event.touches[0].clientX

    handleTouchEnd: ->
      return if @touchEndX == 0
      diff = @touchStartX - @touchEndX
      if Math.abs(diff) > 50
        if diff > 0 then @nextSlide() else @prevSlide()
      @touchStartX = 0
      @touchEndX = 0
      @startAutoplay()

    setupKeyboardNavigation: ->
      document.addEventListener 'keydown', (event) =>
        return unless event.target == document.body
        switch event.key
          when 'ArrowLeft' then @prevSlide()
          when 'ArrowRight' then @nextSlide()

  emits: ['slide-change', 'slide-click']