webpack-bootstrap-ui-kit/src/js_old/_components/_ui.multislider.js

'use strict'

import $ from 'jquery'
import Events from '../_events'
import MainUI from '../_main'

import 'hammerjs/hammer'
import 'jquery-hammerjs/jquery.hammer'

import '../../scss/_components/_ui.multislider.scss'

const W = window

const MultiSlider = (($) => {
  // Constants
  const NAME = 'jsMultiSlider'
  const DATA_KEY = NAME
  const $BODY = $('body')

  class MultiSlider {
    // Constructor
    constructor (el) {
      this.dispose()

      console.log(`${NAME}: init ...`)

      const ui = this
      const $el = $(el)
      ui.$el = $el
      ui.sliding = false

      $el.wrap(`<div class="${NAME}-container"></div>`)
      ui.$elContainer = $el.parent(`.${NAME}-container`)

      $el.wrap(`<div class="${NAME}-slides-container"></div>`)
      ui.$slidesContainer = $el.parent(`.${NAME}-slides-container`)

      ui.addControls()
      ui.calculate()

      $(W).on('resize', () => {
        ui.$elContainer
          .find('.act-slider-prev,.act-slider-next')
          .removeClass('disabled')
        ui.calculate()
      })

      ui.$elContainer.addClass(`${NAME}-active`)
      $el.addClass(`${NAME}-active`)
    }

    calculate () {
      const ui = this

      ui.$slides = ui.$el.find('.slide')
      ui.numberOfSlides = ui.$slides.length

      ui.containerWidth = ui.$el.parent().width()
      ui.maxPos = ui.numberOfSlides - ui.numToDisplay()
      ui.slideWidth = ui.containerWidth / ui.numToDisplay()

      ui.$slides.css('width', `${ui.slideWidth}px`)
      ui.$el.css('width', ui.slideWidth * ui.numberOfSlides)

      ui.currPos = 0
      ui.slide(0)
    }

    numToDisplay () {
      const ui = this

      const size = MainUI.detectBootstrapScreenSize()

      let num = ui.$el.data(`length-${size}`)
      num = num || ui.$el.data('length')

      console.log(`${NAME}: size ${size} | num ${num}`)

      return num || 1
    }

    addControls () {
      const ui = this

      const $e = ui.$el
      // actions
      ui.$elContainer.append(
        '<div class="slider-actions">' +
          '<a href="#" class="act act-slider-prev"><i class="fas fa-chevron-left"></i><b class="sr-only">Prev</b></a>' +
          '<a href="#" class="act act-slider-next"><i class="fas fa-chevron-right"></i><b class="sr-only">Next</b></a>' +
          '</div>'
      )

      ui.$prevBtn = ui.$elContainer.find('.act-slider-prev')
      ui.$nextBtn = ui.$elContainer.find('.act-slider-next')

      ui.$prevBtn.on('click', (e) => {
        e.preventDefault()

        if ($(e.currentTarget).hasClass('disabled')) {
          return false
        }

        ui.prev()
      })

      ui.$nextBtn.on('click', (e) => {
        e.preventDefault()

        if ($(e.currentTarget).hasClass('disabled')) {
          return false
        }

        ui.next()
      })

      // init touch swipes
      $e.hammer().bind('swipeleft panleft', (e) => {
        ui.next()
      })

      $e.hammer().bind('swiperight panright', (e) => {
        ui.prev()
      })
    }

    next () {
      const ui = this
      if (ui.sliding) {
        return
      }

      ui.currPos++
      ui.slide(ui.currPos)
    }

    prev () {
      const ui = this
      if (ui.sliding) {
        return
      }
      ui.currPos--
      ui.slide(ui.currPos)
    }

    slide (pos) {
      const ui = this
      if (ui.sliding) {
        return
      }

      ui.sliding = true
      if (ui.$nextBtn.length) {
        if (pos >= ui.maxPos) {
          ui.$nextBtn.addClass('disabled')
        } else {
          ui.$nextBtn.removeClass('disabled')
        }
      }

      if (ui.$prevBtn.length) {
        if (pos <= 0) {
          ui.$prevBtn.addClass('disabled')
        } else {
          ui.$prevBtn.removeClass('disabled')
        }
      }

      ui.$el.animate(
        {
          left: `${-(pos * ui.slideWidth)}px`,
        },
        'slow',
        'swing',
        () => {
          ui.sliding = false
        }
      )
    }

    dispose () {
      const ui = this

      if (ui.$elContainer) {
        ui.$el.parent().find('.slider-actions').remove()
      }

      if (ui.$el) {
        ui.$el.hammer().unbind('swipeleft panleft swiperight panright')
      }

      console.log(`Disposing: ${NAME}`)

      ui.$el = null
    }

    static _jQueryInterface () {
      return this.each(() => {
        // attach functionality to el
        const $el = $(this)
        let data = $el.data(DATA_KEY)

        if (!data) {
          data = new MultiSlider(this)
          $el.data(DATA_KEY, data)
        }
      })
    }
  }

  // jQuery interface
  $.fn[NAME] = MultiSlider._jQueryInterface
  $.fn[NAME].Constructor = MultiSlider
  $.fn[NAME].noConflict = function () {
    $.fn[NAME] = JQUERY_NO_CONFLICT
    return MultiSlider._jQueryInterface
  }

  // auto-apply
  $(W).on(`MultiSlider.init ${Events.LODEDANDREADY}`, () => {
    $(`.${NAME}`).each((i, el) => {
      $(el).jsMultiSlider()
    })
  })

  return MultiSlider
})($)

export default MultiSlider