webpack-bootstrap-ui-kit/src/js/_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 ? num : ui.$el.data('length');

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

      return num ? 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;